Next.js项目创建[编辑 | 编辑源代码]

介绍[编辑 | 编辑源代码]

Next.js 是一个基于 React 的框架，用于构建服务端渲染（SSR）、静态生成（SSG）和混合型 Web 应用程序。创建 Next.js 项目是学习该框架的第一步，本节将详细介绍如何初始化一个 Next.js 项目，并解释其目录结构和核心配置文件。

前置条件[编辑 | 编辑源代码]

在开始之前，请确保您的系统已安装以下工具：

Node.js（建议版本 ≥ 16.8）
npm 或 yarn（包管理器）
代码编辑器（如 VS Code）

创建项目[编辑 | 编辑源代码]

使用 `create-next-app`[编辑 | 编辑源代码]

Next.js 官方提供了脚手架工具 `create-next-app`，可快速生成项目模板。运行以下命令：

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

执行后，命令行会提示您选择配置选项，例如：

是否使用 TypeScript
是否启用 ESLint
是否包含 `src/` 目录
是否使用实验性功能（如 `app/` 目录）

手动初始化[编辑 | 编辑源代码]

如果您希望更灵活地配置项目，可以手动初始化：

  
mkdir my-next-app  
cd my-next-app  
npm init -y  
npm install next react react-dom

然后在 `package.json` 中添加以下脚本：

  
{  
  "scripts": {  
    "dev": "next dev",  
    "build": "next build",  
    "start": "next start"  
  }  
}

项目结构[编辑 | 编辑源代码]

初始化完成后，典型的 Next.js 项目目录如下：

`pages/`：存放页面文件，每个文件对应一个路由（如 `pages/about.js` 映射到 `/about`）。
`public/`：存放静态资源（如图片、字体）。
`styles/`：存放全局或模块化 CSS 文件。

配置文件[编辑 | 编辑源代码]

Next.js 的核心配置文件是 `next.config.js`，用于自定义构建行为。例如，以下配置启用图像优化：

  
module.exports = {  
  images: {  
    domains: ['example.com'],  
  },  
};

运行项目[编辑 | 编辑源代码]

启动开发服务器：

  
npm run dev

访问 `http://localhost:3000`，您将看到默认的欢迎页面。

实际案例[编辑 | 编辑源代码]

假设您需要创建一个博客网站，以下是 `pages/index.js` 的简单示例：

  
import Head from 'next/head';  

export default function Home() {  
  return (  
    <div>  
      <Head>  
        <title>我的博客</title>  
      </Head>  
      <h1>欢迎来到我的博客</h1>  
      <p>这是一个使用 Next.js 构建的静态博客。</p>  
    </div>  
  );  
}

常见问题[编辑 | 编辑源代码]

Q: 如何修改默认端口？

 A: 在 `package.json` 中修改脚本：

  
  "dev": "next dev -p 4000"

Q: 如何禁用 SSR？

 A: 使用动态导入或 `next/dynamic`：

  
  import dynamic from 'next/dynamic';  
  const NoSSRComponent = dynamic(() => import('../components/NoSSR'), { ssr: false });

总结[编辑 | 编辑源代码]

本节介绍了如何创建 Next.js 项目，包括自动化和手动方法，并解释了目录结构和核心配置。通过实际案例和常见问题解答，您已具备进一步学习 Next.js 的基础。