资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

【Next.js 入门指南】5分钟创建你的第一个 Next.js 应用

创作时间:

作者:

@小白创作中心

【Next.js 入门指南】5分钟创建你的第一个 Next.js 应用

引用

CSDN

https://blog.csdn.net/u012955829/article/details/141832178

Next.js是React生态中一个非常强大的框架，它提供了服务器端渲染、静态站点生成、API路由等一系列特性，使得开发者能够更高效地构建现代Web应用。本文将手把手教你如何在5分钟内创建并运行第一个Next.js应用，开启你的全栈开发之旅。

1. 引言：为什么选择 Next.js？

在我们动手之前，让我们先了解一下为什么 Next.js 如此受欢迎。Next.js 是一个基于 React 的强大框架，它解决了许多 React 开发中的常见问题：

服务器端渲染 (SSR): 提高首屏加载速度和 SEO 表现
静态站点生成 (SSG): 为静态内容提供超快的加载速度
文件系统路由: 简化路由配置，提高开发效率
API 路由: 轻松创建后端 API 端点
自动代码分割: 优化加载性能
内置 CSS 支持: 简化样式管理

这些特性使 Next.js 成为构建现代 Web 应用的理想选择，无论是小型项目还是大规模企业应用。

2. 准备工作：搭建开发环境

在开始之前，我们需要确保你的电脑已经准备就绪。

2.1 安装 Node.js 和 npm

访问 Node.js 官网
下载并安装适合你操作系统的 LTS 版本
安装完成后，打开终端并运行以下命令验证安装：

node --version
npm --version

如果显示版本号，说明安装成功。

2.2 选择适合的代码编辑器

虽然你可以使用任何文本编辑器，但我推荐使用 Visual Studio Code，它对 Next.js 开发有很好的支持。

访问 Visual Studio Code 官网
下载并安装 VS Code

3. 创建你的第一个 Next.js 项目

现在，让我们开始创建你的第一个 Next.js 项目！

3.1 使用 create-next-app 快速搭建

打开你的终端，运行以下命令：

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

在安装过程中，你会看到一些选项，我们选择默认配置：

✔ Would you like to use TypeScript? … No
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias? … No

3.2 项目结构解析

安装完成后，让我们看看 Next.js 为我们创建的项目结构：

my-first-next-app/
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.js
│   └── page.js
├── public/
│   ├── next.svg
│   └── vercel.svg
├── .eslintrc.json
├── .gitignore
├── next.config.js
├── package.json
└── README.md

这个结构看起来可能有点陌生，但别担心，我们很快就会熟悉它。

4. 运行和调试 Next.js 应用

4.1 启动开发服务器

在项目根目录下运行以下命令：

npm run dev

现在，打开你的浏览器，访问 http://localhost:3000 。恭喜你！你的第一个 Next.js 应用已经运行起来了！

4.2 了解 Next.js 的热重载特性

试着修改 app/page.js 文件中的内容，然后保存。你会发现浏览器中的内容自动更新了，这就是 Next.js 的热重载特性，它能大大提高开发效率。

5. 探索 Next.js 项目

让我们深入了解 Next.js 项目的核心部分：

5.1 app 目录：页面和路由

在 Next.js 13 中，app 目录是新的路由系统的核心。每个文件夹代表一个路由段，每个 page.js 文件定义该路由的内容。

5.2 components 目录：可重用组件

虽然默认项目没有创建这个目录，但你可以自己创建它来存放可重用的 React 组件。

5.3 styles 目录：CSS 和样式设置

Next.js 支持多种样式解决方案。在我们的项目中，主要的全局样式文件是 app/globals.css。

5.4 public 目录：静态资源管理

将图片、字体等静态资源放在这个目录中，Next.js 会自动处理它们。

6. 创建你的第一个页面

让我们修改主页面来展示一些个性化的内容。

编辑 app/page.js：

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-4xl font-bold">Welcome to My First Next.js App!</h1>
      <p className="text-xl">This is just the beginning of something amazing.</p>
    </main>
  )
}

保存文件，你会看到浏览器中的内容立即更新。

7. 使用 Next.js 的内置功能

Next.js 提供了许多内置组件来优化你的应用。让我们看两个最常用的：

7.1 Link 组件实现页面导航

创建一个新文件 app/about/page.js：

export default function About() {
  return <h1>About Us</h1>
}

然后，在 app/page.js 中添加一个链接：

import Link from 'next/link'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-4xl font-bold">Welcome to My First Next.js App!</h1>
      <p className="text-xl">This is just the beginning of something amazing.</p>
      <Link href="/about" className="text-blue-500 hover:underline">
        About Us
      </Link>
    </main>
  )
}

Link 组件实现了客户端导航，使页面跳转更快速、更平滑。

7.2 Image 组件优化图片加载

Next.js 的 Image 组件可以自动优化图片加载。让我们在主页添加一个图片：

首先，将一张图片（假设名为 example.jpg）放到 public 目录下，然后修改 app/page.js：

import Image from 'next/image'
import Link from 'next/link'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-4xl font-bold">Welcome to My First Next.js App!</h1>
      <Image src="/example.jpg" alt="Example Image" width={300} height={200} />
      <p className="text-xl">This is just the beginning of something amazing.</p>
      <Link href="/about" className="text-blue-500 hover:underline">
        About Us
      </Link>
    </main>
  )
}

Image 组件会自动处理图片的懒加载、大小调整和格式优化。