前言

nextjs 是一个基于 react 的全栈框架。现在 react 官网推荐的脚手架工具已经不是之前的 cra 了。而是 nextjs 等这种全栈框架。

在 nextjs 工程里，约定大于配置。很多功能已经内置好了，只需要按照约定的目录开发就好了。

创建新项目

  1. npx create-next-app@latest

约定目录结构

  1. - app // App Router
  2.   - layout.jsx // "/" 根路由布局
  3.   - page.jsx // "/" 根路由页面 ui
  4.   - folder
  5.     - layout.jsx // "/folder" 路由页面布局
  6.     - page.jsx // "/folder" 路由页面的 ui
  7.     - folder2
  8.       - page.jsx // "/folder/folder2" 路由页面的 ui，共用 folder 的布局组件
  9. - pages // Pages Router
  10. - next.config.js // next 配置文件

路由

不像普通前端框架那样写一个路由对象映射路由，nextjs 的路由是和文件夹结构关联的约定式路由。
文件夹名字就是路由的路径名。但是只有含有 **page.jsx**或 **route.js**的文件夹才会被渲染成路由页面。

组件

nextjs 开发的组件分成了两大类，一类是 服务端组件(Server Component)和 客户端组件（Client Component）。