🚀 用 Next.js 开启你的全栈旅程：从 0 到飞行员🛠 项目初始化：用一行命令召唤你的宇宙飞船在你撸起袖子准

“一切伟大的前端应用，都始于一次 npx 的召唤。” ——《现代前端诗经·卷一》

🛠 项目初始化：用一行命令召唤你的宇宙飞船

在你撸起袖子准备大干一场之前，我们得先造船（项目初始化）：

npx create-next-app@latest

你会经历几个友好的交互提问，就像航天中心问你：

“船长，请为您的飞船命名？”
“是否使用 TypeScript 驱动引擎？”
“是否启用 Tailwind 增压系统？”
“要不要试试 App Router 实验功能？”

根据你的选择，它会为你生成一艘宇宙飞船（项目结构），长这样：

my-next-app/
├── pages/
│   ├── index.js
│   └── api/
│       └── hello.js
├── public/
├── styles/
├── .gitignore
├── package.json
└── next.config.js

是不是很简洁？就像宇航员的太空服，只有最必要的东西。

📁 文件结构与自动路由：你写页面，它来导航

🛤 `pages/` 文件夹：神奇的魔法入口

在 Next.js 中，pages/ 就是你的航线图。你只要把一个 JS 文件放进去，它就自动变成了一个路由页面。举个例子：

pages/index.js 👉 对应路径 /
pages/about.js 👉 对应路径 /about
pages/blog/post.js 👉 对应路径 /blog/post

没错，不需要配置任何 router，不用敲长长的 react-router-dom 声明，Next.js 自己全包了。

这就是“约定大于配置”的美学：你写页面，它懂路径。

🔗 页面跳转神器：Link

前端跳转不能用 <a> 标签硬跳，那样刷新页面太“老土”，影响性能。我们要用的是：

import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <h1>欢迎登船，舰长！</h1>
      <Link href="/about">
        <button>去关于页面</button>
      </Link>
    </div>
  )
}

这可不是普通的跳转，这是一种“软跳转”，就像你从驾驶舱溜去厨房，页面没刷新，状态不丢失，体验流畅得像宇宙滑板。

🧭 动态导航利器：useRouter

现在，我们来点高级操作。如果你想根据用户点击动态跳转页面，怎么办？你需要导航钩子 useRouter：

import { useRouter } from 'next/router'

export default function Dashboard() {
  const router = useRouter()

  const goToProfile = () => {
    router.push('/profile')
  }

  return (
    <div>
      <h1>欢迎来到驾驶仪表盘</h1>
      <button onClick={goToProfile}>查看飞行员档案</button>
    </div>
  )
}

它还能干什么？

获取当前路径名：router.pathname
获取查询参数：router.query
跳转回上一页：router.back()

就像一个全能的导航AI，总能带你去想去的地方。

🤖 总结一下：Next.js 的飞行哲学

特性	含义	背后哲学
`npx create-next-app@latest`	一键启动项目	快速起飞，拒绝冗余
`pages/` 自动路由	文件即路由	约定优先，告别手动
`<Link>` 跳转	软导航	无刷新、流畅体验
`useRouter`	动态导航 + 状态	可编程控制，掌控飞船

🛰 彩蛋：开发小建议

开发时，开启 dev 模式：
```
npm run dev
```
打开浏览器，访问 http://localhost:3000，你的宇宙飞船已起航。

“下一站，是星辰大海。”
——你，在用 Next.js 的那天

🚀 用 Next.js 开启你的全栈旅程：从 0 到飞行员