跳到主要内容

Next.js 项目创建

Next.js 是一个基于 React 的框架，提供了服务器端渲染（SSR）、静态站点生成（SSG）和客户端渲染（CSR）等功能。它简化了 React 应用的开发流程，并提供了开箱即用的优化功能。本文将带你从零开始创建一个 Next.js 项目。

1. 环境准备​

在开始之前，确保你的开发环境中已经安装了 Node.js 和 npm（Node.js 包管理器）。你可以通过以下命令检查是否已安装：

bash
node -v
npm -v

如果未安装，请前往 Node.js 官网 下载并安装最新版本。

2. 创建 Next.js 项目​

Next.js 提供了一个名为 create-next-app 的工具，可以快速初始化一个新的 Next.js 项目。运行以下命令来创建一个新项目：

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

其中，my-next-app 是你的项目名称，你可以根据需要更改它。

备注

如果你使用的是 Yarn，可以使用以下命令：

bash
yarn create next-app my-next-app

3. 项目结构​

创建完成后，进入项目目录并查看生成的文件结构：

bash
cd my-next-app

典型的 Next.js 项目结构如下：

my-next-app/
├── node_modules/
├── public/
├── styles/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── .gitignore
├── package.json
├── README.md
└── next.config.js
  • pages/：这是 Next.js 的核心目录，用于存放页面文件。每个文件都会自动映射为一个路由。
  • public/：存放静态资源，如图片、字体等。
  • styles/：存放样式文件，支持 CSS 模块和全局样式。

4. 运行开发服务器​

Next.js 提供了一个开发服务器，可以实时预览你的应用。运行以下命令启动开发服务器：

bash
npm run dev

默认情况下，开发服务器会运行在 http://localhost:3000。打开浏览器访问该地址，你将看到 Next.js 的默认欢迎页面。

提示

如果你对默认页面进行了修改，Next.js 会自动热重载（Hot Reload），无需手动刷新页面。

5. 创建你的第一个页面​

Next.js 的路由是基于 pages/ 目录的文件结构自动生成的。例如，pages/index.js 对应根路由 /，而 pages/about.js 则对应 /about 路由。

让我们创建一个简单的 "About" 页面。在 pages/ 目录下新建一个文件 about.js，并添加以下内容：

javascript
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page of our Next.js app.</p>
    </div>
  );
}

保存文件后，访问 http://localhost:3000/about，你将看到刚刚创建的 "About" 页面。

6. 使用动态路由​

Next.js 支持动态路由，允许你根据 URL 参数动态生成页面。例如，你可以创建一个动态路由来显示用户信息。

在 pages/ 目录下新建一个文件夹 users，并在其中创建文件 [id].js：

javascript
import { useRouter } from 'next/router';

export default function User() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>User Profile</h1>
      <p>User ID: {id}</p>
    </div>
  );
}

现在，访问 http://localhost:3000/users/123，页面将显示 User ID: 123。

7. 实际应用场景​

Next.js 的强大功能使其适用于多种场景，例如：

  • 博客网站：利用静态站点生成（SSG）功能，快速生成静态页面。
  • 电商平台：结合服务器端渲染（SSR），提供更好的 SEO 和性能。
  • 仪表盘应用：使用客户端渲染（CSR），实现动态数据加载和交互。

8. 总结​

通过本文，你已经学会了如何创建一个基本的 Next.js 项目，并了解了其核心功能和文件结构。Next.js 是一个功能强大且灵活的框架，适合构建各种类型的 Web 应用。

9. 附加资源与练习​

  • 官方文档：深入阅读 Next.js 官方文档 以了解更多高级功能。
  • 练习：尝试创建一个包含多个页面的博客网站，并使用动态路由显示每篇博客的内容。

Happy coding! 🚀