前言
新入职的公司有对next的技术栈要求，而我个人来说也仰慕next + prisma一站式开发很久了，那么作为完全没接触过 SSR 框架的小白，来写一篇通俗易懂的入门级教程再合适不过了
初始化项目
初入next，我们需要一个简单的demo作为演示
bash
npx create-next-app@latest
# or
yarn create next-app这里会有大量的选项和提示，其实对于本文来说不重要，哪怕一直回车都可以~ 不过这里我也还是贴了一张初始化选项的图片，可供参考
当我们初始化完毕后，我们就可以在vscode中打开项目并运行了
bash
# 安装依赖
npm i
# 本地运行
# 访问 http://localhost:3000
npm run dev现在浏览器访问 http://localhost:3000 你将看到如下图片
路由方式
pages router
在next中，路由是自动匹配的；会去寻找pages/ 下的tsx文件，自动匹配作为路由。 例如我们创建了 pages/about.tsx，并且在代码中export导出，即可通过/about路由到该页面
注意：当前 Next@14 推荐 App router，因此我们创建好的目录中默认是使用的
App router，我们需要自己创建 pages 文件夹
jsx
// 第一步src/pages/home.tsx
const Home = () => {
return <div>Home Page</div>
}
export default Home
// 第二步 npm run dev打开浏览器访问 http://localhost:3000/home
这样我们就使用 pages router 的方式完成了 新增页面路由，是不是很简单~
app router
自 Next@13 上线以来的 App Router，相比 pages router 新增了一些特性，我还没有总结好，这里仅放上链接作参考
动态路由
刚才我们实现了静态新增页面路由，那么如何动态的生成页面路由呢？
pages/posts/[id].tsx这样写即可进行动态路由链接，效果如posts/1、posts/2这样子
jsx
// 路径：src/pages/posts/[id]/index.tsx
import { useRouter } from "next/router";
import Link from "next/link";
export default function PostPage() {
const router = useRouter();
const id = router.query.id as string;
return (
<>
<h1>Post: {id}</h1>
<ul>
<li>
<Link href={`/post/${id}/cats`}>猫猫专区</Link>
</li>
<li>
<Link href={`/post/${id}/dogs`}>狗狗专区</Link>
</li>
</ul>
</>
);
}
// 路径：src/pages/posts/[id]/[type].tsx
import { useRouter } from "next/router";
export default function TypePage() {
const router = useRouter();
const id = router.query.id as string;
const type = router.query.type as string;
return (
<>
<h1>Post: {id}</h1>
<h1>类型: {type}</h1>
</>
);
}根据上文的代码块来，注意路径；
浏览器访问 http://localhost:3000/posts/1
此时访问的是 /posts/[id]/index.tsx，点击链接，可以跳转到下一级将访问 /posts/[id]/[type].tsx
需要注意的是，此时的页面是动态生成的，也就是当用户访问页面url时，才会生成对应的HTML文件
预渲染
next的预渲染机制：会提前生成所有页面的html文件，这跟页面加载所需的最少js有关系。然后等加载页面时，运行js使页面变得可交互（这个叫 hydration）
这样做的好处是，优化渲染速度和SEO搜索。
静态生成（推荐） 和 服务端渲染
Nest.js 具有两种形式的预渲染：静态生成（Static Generation） 和 服务端渲染（Server-side Rendering）。 两种方式的不同之处在于页面生成 HTML 的时机。上面我们已经在pages router里静态生成了一次，又在动态路由里服务端渲染了一次。
-
静态生成： HTML在 构建时 生成，并且在每次页面请求时重用。
-
服务端渲染： 在 每次页面请求时 重新生成HTML
我们可以为 每个页面 选择预渲染的方式。对应比如可以创建一个"混合渲染"的 Next.js 应用程序------对大多数页面使用静态生成，个别页面使用服务端渲染
静态生成
上面提到，静态生成会在构建时生成HTML文件，也就是说，当我们 next build时，就生成了页面的HTML，并且在页面请求时重用，且可以被CDN缓存
静态生成也有两种方式，比如在动态路由时，我们可以用getStaticPaths，即当前路由/post/xxx是否渲染取决于外部数据的获取，那么我们就要在该函数中请求获取外部数据。在 构建时 自动优先执行该函数。
第二种方式是getStaticProps这个是当组件渲染依赖外部传参的情况下使用，同理，当我们声明这个函数后，框架会自动识别并在 构建时 去执行函数获取数据。
当然，如果不依赖外部数据，那就是最直接普通的方式，直接渲染HTML文件即可。
疑问：如果这两个都在构建时去执行，当组件较多，getStaticProps函数也比较多，那是不是会影响构建时间？优化策略是什么？
什么时候应该使用静态生成？
官方建议尽可能使用静态生成，因为他可以托管到CDN上，这要比每个页面都让服务器处理渲染要快得多。
使用静态页面前问问自己，"我可以在用户请求前预渲染页面吗？"
如果可以，那就使用静态生成。如果不可以，比如页面需要展示频繁更新的数据，或者是页面内容会随着每次请求的变化而变化，这种情况下就推荐是 混合渲染
服务端渲染（SSR）
服务端渲染只有一个getServerSideProps,他的作用和用法跟上面的外部请求是一样的。不同的是，他是在 页面请求时 进行，而不是构建时。
部署
部署有两种方式，第一种是直接将资源SFTP传到服务器，第二种是docker部署。鉴于学习的人群普遍是前端（我自己也是），因此关于服务器部署这块我会讲的更细致些
SFTP
-
使用
Termius连接服务器连接服务器的方式有很多，这里我直接说 在mac与服务器连接部署的最佳实践 ，就是使用
Termius，需要下载链接的可以评论区找我看图我已经连过了我的服务器，你们连接后也是跟我一样的
-
通过SFTP将next应用放到服务器中
跟正常部署网页一样，next也需要将代码和应用放到服务器中，具体要放哪些呢？
-
进入后台配置安全规则
服务器不配置安全规则是无法正常访问端口的，初次接触服务器的很容易卡在这种奇奇怪怪的地方。
我的是
腾讯云，直接去后台配置一下： 注意：要配置安全规则，服务器后台 > 防火墙 > 添加规则 > 全部TCP
-
启动next项目，检查是否能够访问
我们进入
Termius，进入服务器终端，现在准备启动项目了。不过在这之前，我们需要先安装依赖npm i，如果服务器是一台全新的服务器，那么你此时还需要先安装nodeJS这一套流程和规则对于前端来说，应该是好理解的。鉴于我是
Ubuntu可能与大家的操作系统不一样，这套流程大伙儿就自己去搜索完成吧~现在，假设大家已经装好了依赖，我们直接启动项目
bash# 进入对于目录 cd 你的next目录 # 运行项目 npm run start访问一下看看
http://xxx.xx.xx.xxx:3000，如果显示正常，那么这个next应用就在你的服务器正常跑起来啦！如果不正常，请重新看我的部署流程，或检查你的服务器配置 -
pm2进程守护
上面虽然我们在服务器启动项目，并在浏览器正常的展示了出来，但这个服务不太稳定，随时可能被服务器杀掉。为了维持启动状态，我们需要
pm2守护进程。bashsudo npm install -g pm2 # pm2应用程序列表 pm2 list # pm2 node进程 "应用程序的名称"，start是脚本名字 pm2 start npm --name "your-app-name" -- start # 删除应用程序 pm2 delete "名称"做完之后在浏览器访问，成功则万事大吉啦！部署结束
docker
待总结