Next.js 框架中生成静态站点的方法与技巧-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，构建静态站点的需求也越来越多。Next.js 框架提供了一种简单而强大的方法来生成静态网站，本文将介绍 Next.js 框架中生成静态站点的方法与技巧，并提供示例代码。

什么是 Next.js

Next.js 是一个基于 React 的服务端渲染框架。它使得开发人员可以使用 React 编写服务器端应用程序，并通过构建静态站点来实现更快的加载速度和更好的 SEO 效果。

Next.js 具有以下特点：

多种渲染形式：支持服务器端渲染、客户端渲染、以及静态生成。
自动优化：自动优化 Web 应用程序的性能和体验。
快速开发：快速开发生产就绪的 Web 应用程序，不需要配置复杂的工具链。
强大的插件系统：通过插件系统可实现自定义的功能扩展和行为调整。

Next.js 中静态生成的基本使用方法

什么是静态生成

静态生成是一种构建服务器端渲染应用程序的方式，它允许在构建过程中生成静态 HTML 文件。这些静态文件可以直接托管在 CDN 并由浏览器快速加载。通过这种方式，Web 应用程序的加载速度将得到显着提高，从而带来更好的用户体验。

如何在 Next.js 中生成静态站点

首先，需要在 Next.js 应用程序中配置静态生成模式。在 next.config.js 文件中，需要将下面的内容添加到 module.exports 中：

module.exports = {
  target: "serverless",
  exportTrailingSlash: true,
  webpack: (config, options) => {
    // 省略部分代码
    return config;
  },
};

target: "serverless" 表示启用静态生成模式。
exportTrailingSlash: true 表示导出 URL 以 / 结尾。
webpack: (config, options) => { ... } 表示自定义 Next.js 应用程序的 Webpack 配置。

接下来，需要在页面组件中使用 getStaticProps 函数来获取数据并渲染静态 HTML。例如，我们可以创建一个 pages/index.js 页面，并添加以下代码：

// javascriptcn.com 代码示例
import React from "react";
import axios from "axios";

const Home = ({ data }) => {
  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
};

export async function getStaticProps() {
  const res = await axios.get("https://jsonplaceholder.typicode.com/posts");
  const data = res.data;
  return {
    props: {
      data,
    },
  };
}

export default Home;

在这个例子中，我们通过调用 getStaticProps 函数来获取数据并将其传递给 Home 组件。getStaticProps 函数返回一个对象，在这个对象中，我们将返回的数据通过 props 传递给组件。

最后，我们需要运行命令来生成静态 HTML 文件：

npm run build
npm run export

这将在项目根目录的 out 目录中生成静态 HTML 文件。同时，您可以在 package.json 文件中添加一个脚本来简化这个过程：

"scripts": {
  "build": "next build",
  "export": "next export"
}

Next.js 中静态生成的进阶使用方法

动态路由

有时，我们需要生成具有动态路径的页面。例如，我们要为每个数据项生成一个页面，那么页面的 URL 将具有如下形式：http://example.com/post/123。

为了实现这个目标，我们可以在 pages 目录下添加一个名为 [id].js 的页面。然后，我们应该在页面组件中使用 getStaticPaths 函数来为每个数据项生成静态 HTML 文件。例如，我们可以添加以下代码：

// javascriptcn.com 代码示例
import React from "react";
import axios from "axios";

const Post = ({ data }) => {
  return <div>{data.title}</div>;
};

export async function getStaticProps({ params }) {
  const res = await axios.get(
    `https://jsonplaceholder.typicode.com/posts/${params.id}`
  );
  const data = res.data;
  return {
    props: {
      data,
    },
  };
}

export async function getStaticPaths() {
  const res = await axios.get("https://jsonplaceholder.typicode.com/posts");
  const data = res.data;
  const paths = data.map((post) => ({
    params: { id: post.id.toString() },
  }));
  return {
    paths,
    fallback: false,
  };
}

export default Post;

在这个例子中，我们定义了一个动态路由，使用了 [id] 文件名。同时，我们通过调用 getStaticPaths 函数来动态生成每个数据项的 HTML 文件。getStaticPaths 函数返回一个对象，其中包含我们要生成的路径和状态（fallback）。

分页

在有些情况下，我们可能需要对数据进行分页处理。为了实现这个目标，我们可以使用 getStaticProps 函数来获取数据并将其分组，这样就可以在分页中使用这些数据了。例如，以下代码展示了如何在 Next.js 中分页：

// javascriptcn.com 代码示例
import React from "react";
import axios from "axios";

const LIMIT = 10;

const Pagination = ({ data, page }) => {
  const startIndex = (page - 1) * LIMIT;

  const dataForCurrentPage = data.slice(startIndex, startIndex + LIMIT);

  return (
    <div>
      <ul>
        {dataForCurrentPage.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export async function getStaticProps() {
  const res = await axios.get("https://jsonplaceholder.typicode.com/posts");
  const data = res.data;
  return {
    props: {
      data,
    },
  };
}

export async function getStaticPaths() {
  const res = await axios.get("https://jsonplaceholder.typicode.com/posts");
  const data = res.data;
  const paths = Array.from(
    { length: Math.ceil(data.length / LIMIT) },
    (_, i) => `/page/${i + 1}`
  );
  return {
    paths,
    fallback: false,
  };
}

export default Pagination;

在这个例子中，我们通过计算 startIndex 和 dataForCurrentPage 来选择当前页要呈现的数据。在 getStaticPaths 函数中，我们生成了所有页面的路径（例如：/page/1，/page/2 等）。

总结

在本文中，我们介绍了 Next.js 框架中生成静态站点的方法与技巧。通过使用静态生成模式、动态路由以及分页，我们能够在 Next.js 中构建生产就绪的 Web 应用程序并实现更快的加载速度和更好的 SEO 效果。希望这篇文章能够帮助你构建出更好的 Web 应用程序！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6533d2b37d4982a6eb772a5e