编辑“︁Next.js项目创建”︁

= 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`，可快速生成项目模板。运行以下命令：  

<syntaxhighlight lang="bash">  
npx create-next-app@latest my-next-app  
</syntaxhighlight>  

执行后，命令行会提示您选择配置选项，例如：  
* 是否使用 TypeScript  
* 是否启用 ESLint  
* 是否包含 `src/` 目录  
* 是否使用实验性功能（如 `app/` 目录）  

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

<syntaxhighlight lang="bash">  
mkdir my-next-app  
cd my-next-app  
npm init -y  
npm install next react react-dom  
</syntaxhighlight>  

然后在 `package.json` 中添加以下脚本：  
<syntaxhighlight lang="json">  
{  
  "scripts": {  
    "dev": "next dev",  
    "build": "next build",  
    "start": "next start"  
  }  
}  
</syntaxhighlight>  

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

<mermaid>  
graph TD  
    A[my-next-app] --> B[node_modules]  
    A --> C[public]  
    A --> D[pages]  
    D --> E[index.js]  
    A --> F[styles]  
    A --> G[package.json]  
</mermaid>  

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

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

<syntaxhighlight lang="javascript">  
module.exports = {  
  images: {  
    domains: ['example.com'],  
  },  
};  
</syntaxhighlight>  

== 运行项目 ==  
启动开发服务器：  
<syntaxhighlight lang="bash">  
npm run dev  
</syntaxhighlight>  

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

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

<syntaxhighlight lang="javascript">  
import Head from 'next/head';  

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

== 常见问题 ==  
* '''Q: 如何修改默认端口？'''  
  A: 在 `package.json` 中修改脚本：  
  <syntaxhighlight lang="json">  
  "dev": "next dev -p 4000"  
  </syntaxhighlight>  

* '''Q: 如何禁用 SSR？'''  
  A: 使用动态导入或 `next/dynamic`：  
  <syntaxhighlight lang="javascript">  
  import dynamic from 'next/dynamic';  
  const NoSSRComponent = dynamic(() => import('../components/NoSSR'), { ssr: false });  
  </syntaxhighlight>  

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

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js基础]]