当前位置：首页 > news >正文

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

news 2025/9/30 9:15:49

文章目录

什么是Next.js？
准备工作
创建Next.js项目
- 步骤1：创建项目目录
- 步骤2：初始化Next.js项目
- 步骤3：安装依赖
- 步骤4：启动开发服务器
- 步骤5：打开浏览器查看
了解项目结构
自定义我们的第一个页面
添加一个新页面
使用链接导航（注意：本演示代码基于next 15.5.4版本）
常见问题
- **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版本）
安装完成后，打开终端（命令行）并输入以下命令检查是否安装成功：
```
node -v
npm -v
```
如果显示版本号，说明安装成功。

创建Next.js项目

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

步骤1：创建项目目录

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

mkdir nextjs-demo
cd nextjs-demo

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

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

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：安装依赖

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

npm install

在这里插入图片描述

步骤4：启动开发服务器

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

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 文件，将内容替换为：

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：
```
touch pages/about.js
```

编辑 about.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 文件
添加以下代码到页面中：

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' }}><Linkhref="/about"style={{backgroundColor: '#0070f3',color: 'white',padding: '0.8rem 1.5rem',borderRadius: '4px',textDecoration: 'none'}}>前往关于页面</Link></div></div>)
}