文章目录 什么是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' } } >
< 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，应该怎么做？
结束语 恭喜！你已经成功创建并运行了你的第一个Next.js项目。你已经学会了：
如何创建Next.js项目 如何自定义页面 如何在页面之间导航 Next.js还有很多强大的功能等待你去探索，比如API路由、数据获取、CSS框架集成等。
下一步 现在，你已经掌握了Next.js的基础知识，可以尝试：
添加更多的页面 使用CSS模块或全局CSS 集成一个简单的API 学习Next.js的高级功能，如数据获取和预渲染 希望这篇教程对你有所帮助！如果你有任何问题，欢迎在评论区留言。
动手试试吧！ 你已经迈出了学习Next.js的第一步，接下来就是不断实践和探索了！
發表於 2025-10-3 08:44:00
