编辑“︁Next.js第一个应用”︁（章节）

= Next.js第一个应用 =

== 介绍 ==  
Next.js 是一个基于 React 的框架，用于构建现代 Web 应用程序。它提供了服务器端渲染（SSR）、静态站点生成（SSG）、路由系统等开箱即用的功能，使开发者能够快速构建高性能的应用程序。本节将指导你创建第一个 Next.js 应用，并介绍其核心概念和开发流程。

== 前提条件 ==  
在开始之前，请确保你的系统已安装以下工具：  
* Node.js（版本 12 或更高）  
* npm 或 yarn（推荐使用 yarn）  
* 一个代码编辑器（如 VS Code）

== 创建第一个 Next.js 应用 ==  

=== 1. 初始化项目 ===  
使用以下命令创建一个新的 Next.js 应用：  

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

运行后，系统会提示你选择项目的配置选项（如 TypeScript、ESLint 等）。对于初学者，可以默认选择 JavaScript 和基本配置。

=== 2. 项目结构 ===  
创建完成后，项目的目录结构如下：  

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

* '''pages/'''：存放应用程序的页面，每个文件对应一个路由。  
* '''public/'''：存放静态资源（如图片、字体等）。  
* '''styles/'''：存放全局或组件级 CSS 文件。  
* '''package.json'''：包含项目依赖和脚本。

=== 3. 运行开发服务器 ===  
进入项目目录并启动开发服务器：  

<syntaxhighlight lang="bash">
cd my-first-next-app
npm run dev
</syntaxhighlight>

访问 [http://localhost:3000](http://localhost:3000) 即可看到默认的欢迎页面。

== 编写你的第一个页面 ==  

=== 修改首页 ===  
打开 '''pages/index.js'''，修改其内容如下：  

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

export default function Home() {
  return (
    <div>
      <Head>
        <title>我的第一个 Next.js 应用</title>
      </Head>
      <main>
        <h1>欢迎来到 Next.js！</h1>
        <p>这是一个简单的 Next.js 应用示例。</p>
      </main>
    </div>
  )
}
</syntaxhighlight>

保存后，浏览器会自动刷新，显示更新后的页面。

=== 添加动态内容 ===  
Next.js 支持在页面中动态加载数据。例如，使用 '''getStaticProps''' 预渲染页面：  

<syntaxhighlight lang="javascript">
export async function getStaticProps() {
  return {
    props: {
      message: "Hello, Next.js!"
    }
  }
}

export default function Home({ message }) {
  return (
    <div>
      <h1>{message}</h1>
    </div>
  )
}
</syntaxhighlight>

=== 输出 ===  
页面将显示：  
<pre>
Hello, Next.js!
</pre>

== 实际应用场景 ==  
Next.js 适用于以下场景：  
1. '''静态博客'''：使用 SSG 预生成页面，提高加载速度。  
2. '''电子商务网站'''：结合 SSR 动态加载产品数据。  
3. '''仪表盘应用'''：利用 API 路由和后端集成。

== 总结 ==  
本节介绍了如何创建和运行第一个 Next.js 应用，并演示了基本的页面开发和数据预加载功能。Next.js 的强大功能使其成为现代 Web 开发的理想选择。接下来，你可以深入学习路由、API 路由和状态管理等高级主题。

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