完整教程：Next.js项目演示（从零创建Next.js项目）Next.js入门实战

文章目录

• 什么是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。

1. 前往Node.js官网下载并安装Node.js（建议安装LTS版本）
2. 安装完成后，打开终端（命令行）并输入以下命令检查是否安装成功：

   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>
                )
                }

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

添加一个新页面

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

1. 在 pages/ 目录下创建一个新的文件 about.js：

   touch pages/about.js

   

2. 编辑 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>
                   )
                   }

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

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

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

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

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>
                )
                }

3. 保存文件，然后在浏览器中点击"前往关于页面"链接，应该会跳转到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的第一步，接下来就是不断实践和探索了！