手把手教你使用 Next.js 构建电商网站-JavaScript中文网-JavaScript教程资源分享门户

前言

电商网站已经成为现代商业领域不可缺少的一部分，而Next.js则是现代前端领域中备受瞩目的一种技术框架。本文将手把手教你如何使用Next.js构建电商网站，包括详细的指导和示例代码，帮助读者了解Next.js，以及在实际开发中如何使用它。

基础知识

在外部数据取得之前进行页面渲染而不是在浏览器中进行，这就是Next.js的核心思想。Next.js包含了React.js的基础功能以及构建完整web应用所需的其他功能。因此，我们需要熟悉React.js的基本知识，如组件、状态等，并已经掌握了基本的HTML5和CSS3。

步骤

1.安装 Next.js

npm install next react react-dom

或者使用create-next-app命令

npx create-next-app my-app
cd my-app
npm run dev

2.编写页面

/pages/index.js文件中编写我们的起始页代码。示例代码如下：

// www.javascriptcn.com code example
import Link from 'next/link';

const Index = () => (
  <>
    <Link href="/about">
      <a>About Page</a>
    </Link>
    <div>Welcome Home !</div>
  </>
);

export default Index;

在这个例子中，我们使用Link组件创建了一个导航，该导航链接到我们的About页面。然后，我们创建了一个简单的欢迎页面。

3.创建 About 页面

接下来，我们来编写我们的about页面代码。创建/pages/about.js文件，然后编写以下代码：

// www.javascriptcn.com code example
import Link from 'next/link';

const About = () => (
  <>
    <Link href="/">
      <a>Home Page</a>
    </Link>
    <div>About Page</div>
  </>
);

export default About;

这里，我们又一次使用了Link组件，创建一个导航链接回我们的Home页面。然后，我们再一次创建了一个简单的页面。

现在，我们已经完成了两个页面，并且可以在这两个页面之间进行导航。接下来，我们将通过组件的方式来呈现我们的电商网站。

4.组件布局

考虑到我们的电商网站可能包含许多页面，我们需要一个可以在所有页面中重复使用的布局。我们可以使用_next.js中的Layout组件实现这一点。

首先，创建一个/components/Layout.js文件，编写以下代码：

// www.javascriptcn.com code example
import Link from 'next/link';

const Layout = ({ children }) => (
  <>
    <nav>
      <Link href="/">
        <a>Home Page</a>
      </Link>
      {' '}
      <Link href="/about">
        <a>About Page</a>
      </Link>
    </nav>
    <main>
      {children}
    </main>
  </>
);

export default Layout;

这个布局组件包含了一个顶部的导航菜单和我们将呈现页面内容的主区域。

5.使用组件

现在我们已经设置了Layout组件，可以在我们的页面中使用它了。我们可以使用props将我们的页面传递到Layout组件中去。

// www.javascriptcn.com code example
import Layout from '../components/Layout'

const Post = props => (
  <Layout>
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  </Layout>
);

export default Post;

然后，我们可以在页面中传递一些内容，如页面标题和内容。

const postProps = {
  title: 'Test Post',
  content: 'This is some test content.'
};

<Post {...postProps} />;

我们现在就能在我们的电商网站所有页面中调用这个Post组件了。

6.获取数据

现在，在我们的页面中，我们已经配置了布局和导航，我们可以通过一个网络请求来获取一些数据。我们需要了解Next.js中的getInitialProps函数。

首先，我们需要在页面的根目录中添加一个server文件（以server.js为例）。然后，我们将使用Express和Axios架起一个http服务，来取得所需数据。

// www.javascriptcn.com code example
const express = require('express');
const next = require('next');
const axios = require('axios');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare()
.then(() => {
  const server = express();

  server.get('/post/:id', async (req, res) => {
    const postId = req.params.id;
    const { data } = await axios.get(
      `https://jsonplaceholder.typicode.com/posts/${postId}`
    );
    app.render(req, res, '/post', { post: data });
  });

  server.get('*', (req, res) => handle(req, res));

  server.listen(port, err => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
})
.catch(ex => {
  console.error(ex.stack);
  process.exit(1);
});

这个服务器文件做的事情比较简单 - 它在浏览器访问/post/[文章编号]时，发送了一个请求来获取我们所需的文章数据。从server.js中返回的数据包含在我们获取文章的页面中，可以像下面这样的方式来访问它：

// www.javascriptcn.com code example
import Layout from '../components/Layout';

const Post = ({ post }) => (
  <Layout>
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  </Layout>
);

Post.getInitialProps = async ({ query }) => {
  const { id } = query;
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const post = await res.json();

  return { post };
};

export default Post;

在这段代码中，我们使用了getInitialProps函数从服务器请求数据。在这个例子中，我们使用fetch函数从一个JSON文件中获取数据，但是在实际应用中，我们会调用服务器端API，获取我们的数据。

结语

现在，我们已经学习了如何使用Next.js来构建一个简单的电商网站。通过getInitialProps和Layout组件，我们可以在我们的电商网站中使用重复的布局并获取数据。希望这篇文章可以帮助大家理解Next.js的使用方法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cff720e46428fe9ec56ea9

手把手教你使用 Next.js 构建电商网站

前言