Next.js项目演示（从零创建Next.js项目）Next.js入门实战

文章目录

什么是Next.js？
准备工作
创建Next.js项目
了解项目结构
自定义我们的第一个页面
添加一个新页面
[使用链接导航（注意：本演示代码基于next 15.5.4版本）](#使用链接导航（注意：本演示代码基于next 15.5.4版本）)
常见问题
- [**Q: 我在创建项目时遇到了错误怎么办？**](#Q: 我在创建项目时遇到了错误怎么办？)
- [**Q: 为什么我的页面没有更新？**](#Q: 为什么我的页面没有更新？)
结束语
下一步

如果你是前端开发新手，或者想学习React的服务器端渲染框架，那么Next.js绝对是一个很好的起点。今天，我将带你一步步创建一个简单的Next.js项目，即使你是完全的初学者，也能轻松上手。

什么是Next.js？

Next.js是一个基于React的框架，它提供了很多开箱即用的功能，比如：

服务端渲染(SSR)
静态站点生成(SSG)
路由系统
API路由
优化的开发体验

准备工作

在开始之前，你需要确保已经安装了Node.js。Next.js是基于Node.js的，所以需要先安装Node.js。

前往Node.js官网下载并安装Node.js（建议安装LTS版本）
安装完成后，打开终端（命令行）并输入以下命令检查是否安装成功：
bash 复制代码
```
node -v
npm -v
```
如果显示版本号，说明安装成功。

创建Next.js项目

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

步骤1：创建项目目录

首先，创建一个新文件夹来存放我们的项目：

bash 复制代码

mkdir nextjs-demo
cd nextjs-demo

步骤2：初始化Next.js项目

在项目目录中，使用npx命令创建Next.js项目：

bash 复制代码

npx create-next-app@latest

这会启动一个交互式设置向导，会问你几个问题：

复制代码

What is your project named? (nextjs-demo) 
Would you like to use TypeScript? (No / Yes) → 选择 No
Would you like to use ESLint? (No / Yes) → 选择 No
Would you like to use Tailwind CSS? (No / Yes) → 选择 No
Would you like to use `src/` directory with the App Router? (No / Yes) → 选择 No
Would you like to use a custom `app/` directory? (No / Yes) → 选择 No
What import alias would you like to use? (Leave empty to use the default) → 直接回车

等待项目创建完成（大约需要1-2分钟）。

步骤3：安装依赖

项目创建完成后，会自动安装依赖。如果没有自动安装，可以手动运行：

bash 复制代码

npm install

步骤4：启动开发服务器

现在，我们可以启动开发服务器了：

bash 复制代码

npm run dev

这会启动开发服务器，并在终端显示类似以下信息：

复制代码

Ready on http://localhost:3000

步骤5：打开浏览器查看

在浏览器中打开 http://localhost:3000，你应该能看到Next.js的欢迎页面。

了解项目结构

Next.js项目的结构相对简单：

复制代码

nextjs-demo/
├── node_modules/
├── pages/
│   ├── index.js       # 默认首页
│   └── ...
├── public/
├── styles/
├── package.json
└── ...

pages/ 目录：这是Next.js的路由系统，每个JS文件对应一个路由
index.js：默认页面，对应根路由 /
public/：存放静态资源，如图片、favicon等

自定义我们的第一个页面

让我们来修改默认的首页，让它显示我们自己的内容。

打开 pages/index.js 文件，将内容替换为：

js 复制代码

export default function Home() {
  return (
    <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '800px', margin: '0 auto', padding: '2rem' }}>
      <h1 style={{ color: '#0070f3' }}>欢迎来到我的Next.js应用</h1>
      <p style={{ fontSize: '1.2rem', lineHeight: '1.6' }}>
        这是我第一个Next.js页面！Next.js让React应用的开发变得简单而高效。
      </p>
      <p style={{ marginTop: '1.5rem' }}>
        <strong>提示：</strong>你可以随时修改这个页面内容，保存后浏览器会自动更新。
      </p>
    </div>
  )
}

保存文件，然后刷新浏览器，你应该能看到新的内容。

添加一个新页面

让我们再添加一个新页面，比如"关于"页面。

在 pages/ 目录下创建一个新的文件 about.js：
bash 复制代码
```
touch pages/about.js
```

编辑 about.js 文件，内容如下：

js 复制代码

export default function About() {
  return (
    <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '800px', margin: '0 auto', padding: '2rem' }}>
      <h1 style={{ color: '#0070f3' }}>关于页面</h1>
      <p style={{ fontSize: '1.2rem', lineHeight: '1.6' }}>
        这是我的关于页面。Next.js的路由系统让创建新页面变得非常简单。
      </p>
      <p style={{ marginTop: '1.5rem' }}>
        你可以在 <code>pages/about.js</code> 文件中修改这个页面。
      </p>
    </div>
  )
}

然后，打开浏览器访问 http://localhost:3000/about，你应该能看到新的页面。

使用链接导航（注意：本演示代码基于next 15.5.4版本）

Next.js提供了Link组件，用于在页面之间导航，避免页面刷新。

打开 pages/index.js 文件
添加以下代码到页面中：

js 复制代码

import Link from 'next/link'

export default function Home() {
  return (
    <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '800px', margin: '0 auto', padding: '2rem' }}>
      <h1 style={{ color: '#0070f3' }}>欢迎来到我的Next.js应用</h1>
      <p style={{ fontSize: '1.2rem', lineHeight: '1.6' }}>
        这是我第一个Next.js页面！Next.js让React应用的开发变得简单而高效。
      </p>

      <div style={{ marginTop: '2rem' }}>
        <Link
          href="/about"
          style={{
            backgroundColor: '#0070f3',
            color: 'white',
            padding: '0.8rem 1.5rem',
            borderRadius: '4px',
            textDecoration: 'none'
          }}
        >
          前往关于页面
        </Link>
      </div>
    </div>
  )
}

保存文件，然后在浏览器中点击"前往关于页面"链接，应该会跳转到About页面，但不会刷新整个页面。

（实际运行时，你会看到一个简单的页面，包含"欢迎来到我的Next.js应用"和一个"前往关于页面"的链接）

常见问题

Q: 我在创建项目时遇到了错误怎么办？

A: 确保你已经安装了最新版本的Node.js。如果问题持续，可以尝试运行npm install手动安装依赖。

Q: 为什么我的页面没有更新？

A: Next.js开发服务器通常会自动检测文件变化并重新加载。如果问题仍然存在，尝试重启开发服务器（Ctrl+C停止，然后重新运行npm run dev）。

Q: 我想使用TypeScript，应该怎么做？

A: 在创建项目时，选择"yes"即可。Next.js会为你设置好TypeScript配置。

结束语

恭喜！你已经成功创建并运行了你的第一个Next.js项目。你已经学会了：

如何创建Next.js项目
如何自定义页面
如何在页面之间导航

Next.js还有很多强大的功能等待你去探索，比如API路由、数据获取、CSS框架集成等。

下一步

现在，你已经掌握了Next.js的基础知识，可以尝试：

添加更多的页面
使用CSS模块或全局CSS
集成一个简单的API
学习Next.js的高级功能，如数据获取和预渲染

希望这篇教程对你有所帮助！如果你有任何问题，欢迎在评论区留言。

动手试试吧！ 你已经迈出了学习Next.js的第一步，接下来就是不断实践和探索了！