Next.js 索引页面 - Javascript

Next.js 是一个 React 应用程序框架，用于构建服务器渲染的 Web 应用程序，它的最大特点是支持服务端渲染和静态页面生成。

本文将介绍如何在 Next.js 中创建索引页面。

环境搭建

在开始前，我们需要先安装 Node.js 并创建一个新的 Next.js 应用程序。

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

该应用程序将运行在 http://localhost:3000 上。

创建索引页面

在 Next.js 中，索引页面是 pages 目录下名为 index.js 的文件。

首先，我们需要在命令行中使用以下命令创建 index.js 文件。

touch pages/index.js

通过以下代码创建一个新的 Next.js 索引页面：

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
    </div>
  )
}

这样我们就成功创建了一个简单的 Next.js 索引页面。

启用静态页面生成

Next.js 提供了静态页面生成的功能，可以在应用程序构建时预渲染页面并保存为 HTML 文件。我们可以通过在页面组件上导出 getStaticProps 方法来启用静态页面生成。

export default function Home({ posts }) {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  )
}

export async function getStaticProps() {
  // Fetch data from external API
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()

  // Pass data to the page via props
  return { props: { posts } }
}

以上代码会从 https://jsonplaceholder.typicode.com/posts 获取数据并在页面组件上将其渲染出来。

要构建并预渲染静态页面，我们可以在命令行中运行以下命令：

npm run build
npm run export

该命令将生成预渲染的 HTML 文件，并将它们保存在 out 目录中。我们可以通过运行以下命令在本地服务器上预览生成的静态页面：

npx http-server out/

结论

通过本文，我们了解了如何在 Next.js 中创建索引页面并启用静态页面生成。这种组合可以提高应用程序的性能和可维护性，同时也方便搜索引擎优化和社交媒体分享。