使用 Next.js 构建服务端渲染的 React 应用

Next.js 是一个基于 React 的轻量级框架，可以帮助开发者构建服务端渲染的 React 应用。它提供了简单的路由、代码分割、静态导出等特性，使得开发 React 应用更加便捷和高效。

1. 安装和设置

首先，我们需要在项目目录下安装 Next.js。可以使用 npm 或者 yarn 安装：

npm install next react react-dom

或者

yarn add next react react-dom

安装完成后，我们需要设置一些基本配置。在根目录下创建一个 next.config.js 文件，并添加以下内容：

module.exports = {
  reactStrictMode: true
};

以上配置将设置 React 模式为严格模式，可以帮助开发者发现潜在的问题。

2. 创建页面

在 Next.js 中，每个页面其实就是一个 React 组件。在 pages 目录下创建一个新的文件，例如 index.js，并添加以下代码：

import React from 'react';

const HomePage = () => {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <p>This is a sample Next.js application.</p>
    </div>
  );
};

export default HomePage;

以上代码定义了一个简单的首页组件，包含一个标题和一段文字。

3. 运行应用

在项目根目录下打开终端，执行以下命令启动 Next.js 应用：

npm run dev

或者

yarn dev

应用启动后，可以在浏览器中访问 http://localhost:3000，看到我们刚刚创建的首页内容。

4. 创建更多页面

除了首页以外，我们可以在 pages 目录下创建更多页面。例如，在 pages 目录下创建一个名为 about.js 的文件，并添加以下代码：

import React from 'react';

const AboutPage = () => {
  return (
    <div>
      <h1>About Next.js</h1>
      <p>Next.js is a framework for server-side rendered React applications.</p>
    </div>
  );
};

export default AboutPage;

在浏览器中访问 http://localhost:3000/about，即可看到关于页面的内容。

5. 链接页面和路由

在 Next.js 中，可以使用内置的 Link 组件来链接不同的页面。例如，在首页中添加一个链接到关于页面的按钮：

import Link from 'next/link';

const HomePage = () => {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <p>This is a sample Next.js application.</p>
      <Link href="/about">
        <a>Go to About page</a>
      </Link>
    </div>
  );
};

这样点击按钮后就可以跳转到关于页面。

6. 静态导出

Next.js 提供了静态导出的功能，可以将页面导出为静态 HTML 文件。在根目录下创建一个名为 export.js 的文件，并添加以下代码：

const fs = require('fs');
const { renderToHTML } = require('next/dist/next-server/server/render');

async function exportPages() {
  const { html } = await renderToHTML('/', {});
  fs.writeFileSync('./out/index.html', html);

  const { html: aboutHtml } = await renderToHTML('/about', {});
  fs.writeFileSync('./out/about.html', aboutHtml);
}

exportPages();

以上代码使用 Next.js 的 renderToHTML 方法将首页和关于页面导出为静态 HTML 文件，保存到 ./out 目录下。

在终端中运行 node export.js 命令，即可完成静态导出，可以通过访问导出的静态 HTML 文件来查看页面内容。

总结

使用 Next.js 可以轻松构建服务端渲染的 React 应用。它提供了丰富的功能，包括简单的路由、代码分割和静态导出等。通过阅读官方文档和尝试实际项目，可以更好地理解和使用 Next.js。

本文来自极简博客，作者：风吹麦浪，转载请注明原文链接：使用 Next.js 构建服务端渲染的 React 应用