八分钟带你入门 Next.JS

这个 nextjs 就是现代化的 jsp。相当于是使用nodejs写全栈。

原生的 JavaScript 制作那些超级简单的小网站，小项目，简直爽的不行。语法和代码量之简单真的效率很高。交互性代码可以写的非常直接。

但是.... 如果继续做下去，你会发现原生 JavaScript 马上就遇到瓶颈了。

JS 的瓶颈

这个瓶颈主要是在 状态更新 。

你页面上有个字，它需要根据不同的状态去改变值，我的天，你的 DOM 这边改了，那边改，跟蜘蛛网一样，慢慢的就让你痛苦不已。

当然，像 JS 这种宽松的语言，很容易写的一坨。所以需要一些好不容易探索好的代码，作为模板，在模板上写，于是就引入了框架，比如 React 和 Vue。

在 React 里，最主要的就是状态管理，然后是各种组件....

然后，CSS 方面也是，对于前端来讲，调 CSS 真的很揪心。后来有人发明了 TailwindCSS ，基本上，你就不用再碰 CSS 源码了，就在 class 里面写，就能把大部分的样式工作搞定了。只要你的页面没那么复杂就行。

这个 React 和 tailwindCSS 让前端工作史诗级的变得简单了。前端工作流，就这样被砍掉了一大截。

然后你就有时间了。

然后你就开始对后端产生兴趣了。稍微了解一下，你知道了数据库和服务器，还有 nodejs ，以及 node 里的 express.js 。

很好！这基本上就是全栈了。前端 + 后端，全栈。

如何开始 next.js

接下来，你又遇到个问题，就是你的前端代码在 A 文件夹里，然后 服务器 代码在 B 文件夹里。这太难受了，于是有个叫 next.js 的东西，就能让你的前后端，直接放到一起！

今天我让你 8 分钟入门 next.js ！

这个 NextJS 直接把构建一个网络程序的东西全部都配置好了，只要你略懂 React ，就能直接开淦，不用配置什么 压缩代码、审核、TS、express 等等，初始化后 0 秒马上启动一个完整的全栈项目，也就是一个真正的完整的网站项目。

而且还有现成的 服务器渲染（SSR ，直接把 HTML 给你渲染好，利好 SEO）、路由（根据 URL 输出不同的内容）、API 调用等等 ~

是不是很 6 啊。

怎么开始呢？只需要在命令行敲下（你得有 node 环境）：

npx create-next-app@latest

然后回答几个问题（大概中文意思）：

项目名称：
是否使用 TypeScript？...否 / 是
是否使用 ESLint？...否 / 是
是否使用 Tailwind CSS？...否 / 是
是否将代码放置在 src/ 目录中？...否 / 是
是否使用 App Router（推荐）？...否 / 是
是否使用 Turbopack 运行 next dev？...否 / 是
是否自定义导入别名（默认 @/*）？...否 / 是

尤其是【是否使用 App Router】。我们选择 是 YES

然后，你的目录下，就有了一个完整的 next.js 项目了！~

怎么运行呢？

npm run dev

就可以运行了！~

一般是在 Localhost:3000 这个地址。示例首页大概长这个样子：

添加图片注释，不超过 140 字（可选）

之后，我们看根目录，大概长这个样子：

.next/          # 编译构建产物
app/            # 路由页面目录
node_modules/   # 依赖包文件夹
public/         # 静态资源目录
.gitignore      # Git 忽略配置
jsconfig.json   # JS 配置文件
next.config.mjs # Next 配置文件
package-lock.json   # 依赖锁定
package.json        # 项目配置文件
postcss.config.mjs  # 样式配置
tailwind.config.js  # Tailwind 配置
README.md           # 项目说明文档

其中的 app 目录，包含了所有的页面和组件。

在 app 目录，有一个叫 page.js （page.ts）的文件，它就是默认样板的入口。

文件夹定义路由

这个 next.js 是文件夹定义路由的（React router 方式），page.js 是首页。

然后，如果是访问 Localhost:3000/about 呢？简单的一塌糊涂。

就是直接在 app 目录里搞一个 about 的文件夹，里面塞一个 page.js 就 OK了。

需要注意，在 next.js 的游戏规则里，page 是一个路由保留字！保留字！不能乱用，只能这样用。

如果你在 about 目录里搞了一个 about.js ，那 next.js 也只是把它视为组件儿而不是路由。

如果你想搞一个 Localhost:3000/about/proj/ 的路由。那就继续套娃就行了。

动态路由

什么是动态路由。

就好像 Localhost:3000/proj/proj001 或者 Localhost:3000/proj/proj007 一样，你不想每个结尾都搞一个文件夹，那也简单：

只需要创建一个文件夹，里面有英文的方括号就行。比如文件夹是 [projIndex] ，里面依然是 page.js 。

只不过，这个 page.js 里，可以接受一个变量名，叫做 params 。直接用就行，比如 page.js 里面这样写：

const ProjectDetail = ({ params }) => {
  return <div>当前项目标识：{params.projectId}</div>;
};

export default ProjectDetail;

干净卫生！

这个也经常用在 API 上。反正，很直观。

这种方式，常用于 用户个人信息、博客网站 等。

布局

就是，怎么在不同页面之间，共享一致的 UI 。

你总不能，每个页面都重新写 HTML 吧。

这个 next.js 自动生成了一个 app/layout.js ，所有页面，都适用这个里面的布局。

我们的导航栏、页脚、侧边栏等等，一般都写在 layout 里。

现在，我们就入门了 next.js 了。