走近 Next.js：轻松构建 React 服务端渲染应用

2023-11-02 10:31:52

1. Next.js 概述

Next.js 是一个基于 React 的服务端渲染框架，它可以帮助我们轻松构建快速、可扩展的 Web 应用。Next.js 的主要优势之一是其对 SEO 的友好性。由于 Next.js 在服务器端渲染页面，因此它可以生成静态 HTML 文件，这使得搜索引擎可以轻松抓取和索引我们的应用。

2. 安装和设置 Next.js

首先，我们需要安装 Next.js。我们可以使用以下命令来安装：

npm install create-next-app

安装完成后，我们可以创建一个新的 Next.js 项目：

create-next-app my-next-app

这个命令将在当前目录创建一个名为 my-next-app 的新项目。

3. 了解 Next.js 的目录结构

Next.js 项目的目录结构非常简单，主要包含以下几个目录：

pages：此目录用于存放页面组件。
components：此目录用于存放可重用的组件。
public：此目录用于存放静态文件，如图像、CSS 和 JavaScript 文件。
node_modules：此目录用于存放项目依赖的包。
package.json：此文件包含项目的基本信息和依赖项。

4. 创建一个简单的 Next.js 应用

现在，让我们创建一个简单的 Next.js 应用来演示如何使用 Next.js 构建服务端渲染应用。首先，我们在 pages 目录下创建一个名为 index.js 的文件，这是我们应用的首页。

import React from "react";

const Index = () => {
  return (
    <div>
      <h1>Hello, Next.js!</h1>
    </div>
  );
};

export default Index;

接下来，我们在 pages 目录下创建一个名为 about.js 的文件，这是我们应用的关于页。

import React from "react";

const About = () => {
  return (
    <div>
      <h1>About Page</h1>
    </div>
  );
};

export default About;

现在，我们可以在浏览器中运行我们的应用了。我们可以使用以下命令来启动我们的应用：

npm run dev

然后，我们就可以在浏览器中访问我们的应用了：

http://localhost:3000

5. 集成 Gank api

接下来，我们将集成 Gank api 来获取数据。首先，我们需要安装 gank-api 包：

npm install gank-api

安装完成后，我们可以在我们的 index.js 文件中使用 gank-api 包来获取数据。

import React from "react";
import gankApi from "gank-api";

const Index = () => {
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    gankApi.getArticles().then((res) => {
      setData(res.data.results);
    });
  }, []);

  return (
    <div>
      <h1>Hello, Next.js!</h1>
      <ul>
        {data.map((item) => (
          <li key={item._id}>{item.desc}</li>
        ))}
      </ul>
    </div>
  );
};

export default Index;