Next.js 指南

Next.js 是一个流行的 React 框架，用于构建服务器端渲染（SSR）和静态站点生成的应用。以下是一些关于 Next.js 的基础知识和使用技巧。

快速开始

要开始使用 Next.js，首先需要安装 Node.js。然后，你可以使用以下命令创建一个新的 Next.js 项目：

npx create-next-app@latest my-nextjs-app

进入项目目录：

cd my-nextjs-app

启动开发服务器：

npm run dev

现在，你可以访问 http://localhost:3000 来查看你的 Next.js 应用了。

路由和页面

Next.js 使用文件系统来定义路由。每个页面都应该放在 pages 文件夹中，并且以 .js 或 .jsx 结尾。

例如，创建一个名为 about.js 的页面：

// pages/about.js

export default function About() {
  return (
    <div>
      <h1>关于我们</h1>
      <p>这是关于我们的页面。</p>
    </div>
  );
}

现在，访问 http://localhost:3000/about 就可以查看这个页面了。

服务器端渲染（SSR）

Next.js 支持服务器端渲染，这意味着你的页面将在服务器上预先渲染，然后发送到客户端。这对于 SEO 和首屏加载时间非常有帮助。

要在 Next.js 中启用 SSR，只需在页面组件中返回 JSX 即可：

// pages/index.js

export default function Home() {
  return (
    <div>
      <h1>欢迎来到 Next.js</h1>
      <p>这是一个 Next.js 应用。</p>
    </div>
  );
}

静态站点生成（SSG）

Next.js 还支持静态站点生成，这意味着你的页面将在构建时生成静态文件，然后部署到服务器。

要在 Next.js 中启用 SSG，你可以使用 getStaticProps 函数：

// pages/index.js

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      initialData: data,
    },
  };
}

export default function Home({ initialData }) {
  return (
    <div>
      <h1>欢迎来到 Next.js</h1>
      <p>这是从服务器获取的数据：{initialData}</p>
    </div>
  );
}

扩展阅读

想了解更多关于 Next.js 的内容，可以访问我们的Next.js 官方文档。

[center] [center]