Next基础-简介

写作原因

2023年初我写下了新年计划，计划搭建一个属于自己的博客。在做技术选型的时候了解了一些博客框架，大多是用spring Boot做的博客系统。对于博客来说看上去功能是应有尽有，也支持高度的定制化，但是最后它还是一个大而全的个人博客，我希望的是能够拥有一个能完全展示自我的个人站，博客也只是它一个基础的属性，就像智能手机不仅仅能够打电话而已。那如果只是拥有一个存放技术文章的站点，就不如考虑博客园和CSDN了，毕竟那样或许有更多人看到。

Next Js是必然的选择

目前工作原因我不得不继续使用react 16.8。这就导致了虽然我花时间学过react 18但长时间的不用已经忘记了大部分hooks，记忆中只有useState与useEffect。当我进入react官方文档的时候，我发现react已经不推崇cra的模式了，取而代之的next js。

在去年的时候，我了解过Next Js，但只是跑起来看一看。说实话当时我低估了它，什么SSR渲染我也用不上，约定式路由跟Umi也差不多。还没有入门就丧失了兴趣。当今年再次看到它的时候，我发现它好像有了一些变化，随着我深入了解，发现Next Js好像要再一次的改变前端世界。

做最好的入门文档

目前，Next Js升级到了13.4版本。更加完善的App路由是Next Js最大的卖点。与之相对应的是更好的官方文档。不得不说，React整个生态系列的文档都不符合国内的阅读环境，这里也包括Next Js。如果对比对象都是清一色的国外文档，那React的中文文档还算是优秀的。可偏偏与它相较的是Vue系列。这也是明明React的逻辑更简单，但上手难度会比Vue高许多的最大原因。

其实Next Js 13.4的官方文档确实有很大进步，但是对于长期用CSR渲染的用户来说，一些概念很难接受。也许你知道SSR可以解决首页启动白屏问题，或许你知道它可以针对SEO有优化让你的网站能在搜索引擎更靠前，但这并不是你选择Next Js的原因。毕竟优化SEO?可能谷歌和Bing是有用的，国内的搜索引擎还是需要花钱才能有个更好的排名。这些问题Next Js的文档不会告诉你。

可以说，在Next Js在官方文档上所宣传的卖点，70%用不上，能用上的地方CRA能帮你解决。这个时候，你去CSDN、掘金、简书去找一个让你心安理得使用它的理由，但是每个评论区下都会有类似不考虑SSR的话不要用Next的评论。

而官方文档或许你得看两遍，第一遍许多概念你不会很清晰，越到后面接触的东西多了才对这些新概念了解，第二遍才能把知识都串联起来。

但当我对他深入的了解，我决定做一个最好的入门文档，把我遇到的问题都用最容易理解的方式告诉大家。让大家更少的踩我遇到的坑。

这本小书将有什么（重点）

1. 针对Next Js 13.4为基础的入门教程，以App路由为主。
2. Next Js与React在核心方面的区别，更好的理解Next Js。
3. Next Js构建项目的逻辑，SSR与CSR同构方式。
4. 如何在项目中写接口进行后端开发，如何引入数据库。
5. 使用AntD等会踩的坑。
6. 如何实现SSG静态渲染。

总结

Next Js 13版本以来，相较之前有很大的变化，这种变化不亚于React的hook。目前网上的文章70%是以12版本或更早以前版本为基础写的，新手可能从安装依赖开始就不会了。这本小书会在（我认为的）重点部分着重讲解，向Next的优势、Next的安装之类的，我会一笔带过。

也就是说，如果你前端基础掌握不扎实，react没怎么了解，不太建议你对Next Js进行学习

你需要掌握的知识

1. ES6
2. react
3. node Js基础

其实next JS对TypeScript非常友好，但是我很懒，工作中用不到，虽然系统的了解学习过，但是没有这个习惯，我也不会去做类型体操。如果你会，那就非常Nice！你的体验将会更好。那你不会也没什么关系，不耽误你对Next Js有个良好的认识，我的文章也会以JS为主，让更多人更好的入门。

那么现在开始吧！