Next.js 如何制作静态网站-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 开发中，静态网站生成器变得越来越流行。Next.js 是一个基于 React 的 SSR 框架，可以用于构建静态网站。本文将介绍如何使用 Next.js 制作静态网站。

什么是静态网站？

静态网站是指没有动态内容，所有内容都是在构建时生成的 HTML、CSS 和 JavaScript 文件。这些文件可以直接通过 HTTP 服务器提供给用户访问，不需要后端服务器的支持。

相比于动态网站，静态网站具有以下优点：

更快的加载速度，因为不需要数据库查询和动态渲染；
更容易缓存，因为每个页面都是静态的；
更便于托管和部署，因为不需要运行后端服务器。

为什么使用 Next.js？

Next.js 是一个基于 React 的 SSR 框架，可以用于构建静态网站。相比于其他静态网站生成器，Next.js 具有以下优点：

支持 React 组件，可以使用 JSX 编写页面；
支持动态路由和 API 路由，可以更灵活地处理请求；
支持构建时和运行时数据获取，可以在构建时预取数据并生成静态文件，也可以在运行时动态获取数据；
支持自定义服务器和静态导出，可以灵活地部署网站。

如何使用 Next.js 制作静态网站？

使用 Next.js 制作静态网站需要完成以下步骤：

创建一个 Next.js 应用；
编写页面组件和路由；
配置构建设置；
构建和导出静态文件；
部署静态文件。

创建一个 Next.js 应用

首先，需要安装 Node.js 和 npm。在命令行中执行以下命令创建一个新的 Next.js 应用：

npx create-next-app my-static-site

这将创建一个名为 my-static-site 的新目录，并在其中初始化一个新的 Next.js 应用。

编写页面组件和路由

在 pages 目录下创建一个名为 index.js 的文件，编写一个简单的页面组件：

export default function Home() {
  return <h1>Hello, world!</h1>
}

然后在 pages 目录下创建一个名为 about.js 的文件，编写另一个页面组件：

export default function About() {
  return <h1>About us</h1>
}

这样就创建了两个基本页面。现在需要在 Next.js 中配置路由，以便用户可以访问这些页面。

在 pages 目录下创建一个名为 _app.js 的文件，编写以下代码：

// javascriptcn.com 代码示例
import Link from 'next/link'

export default function MyApp({ Component, pageProps }) {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link href="/">
              <a>Home</a>
            </Link>
          </li>
          <li>
            <Link href="/about">
              <a>About</a>
            </Link>
          </li>
        </ul>
      </nav>
      <Component {...pageProps} />
    </div>
  )
}

这将创建一个包含导航栏的页面，用户可以通过导航栏访问主页和关于页面。

配置构建设置

现在需要配置 Next.js 构建设置，以便生成静态文件。

在 next.config.js 文件中添加以下代码：

module.exports = {
  exportPathMap: async function () {
    return {
      '/': { page: '/' },
      '/about': { page: '/about' },
    }
  },
}

这将告诉 Next.js 导出两个页面，并将它们保存在静态文件中。

构建和导出静态文件

现在可以使用以下命令构建和导出静态文件：

npm run build
npm run export

这将生成一个名为 out 的目录，其中包含所有静态文件。

部署静态文件

最后，需要将静态文件部署到 Web 服务器上。可以使用任何 Web 服务器，例如 Apache 或 Nginx。将 out 目录复制到 Web 服务器的根目录下，并启动 Web 服务器即可。

示例代码

完整的示例代码可以在 GitHub 上找到：

https://github.com/nextjs-static-site-example

总结

Next.js 是一个基于 React 的 SSR 框架，可以用于构建静态网站。使用 Next.js 制作静态网站需要创建一个 Next.js 应用，编写页面组件和路由，配置构建设置，构建和导出静态文件，最后部署静态文件。相比于其他静态网站生成器，Next.js 具有更多的灵活性和可扩展性。

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