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

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