NextJS学习笔记 01- 初识NextJS
从去年离职之后, 就一直在探索一些新的方向和技术.
而NextJS作为国外非常流行的网站构建框架, 自然是需要了解一下的.
在此之前, 我使用过的建站途径有 Wordpress(基于Wordpress定制主题和功能), ThinkPHP加Html模板渲染, Vue/React前端 + Express后端.
很长一段时间里, 前后端一起协同开发的体验都不是很好, 到了Vue/React + NodeJS 这一套时, 开发的体验虽然还行, 但是部署以及运维又不是很舒服.
所以在最近的1-2年内, 基本没有做过什么个人的网站类项目.
而在去年深度体验了NextJS 及其搭配的各种框架 和服务之后, 让我愈发的喜欢上用它来开发网站或者saas服务.
优点
1. 复用React的生态
对于react生态的开发者, 上手NextJS是非常简单的, 除了基础的React语法, React生态里面的各种轮子也是取之即用.
我们都知道, React最难替代的是其庞大的生态社区, 在这里几乎能找到你需要的一切内容, 而使用了NextJS, 也意味着你可以用非常低的成本整合社区的开放资源, 来增补你的网站功能.
比如时下非常流行的 Shadcn-UI 和 tailwindcss, 都可以非常快速的集成到NextJS中, 大幅提升开发效率.
2. 更简单的SSR方案
默认NextJS 就直接在服务器端渲染JSX为html, 这在我们做一些内容网站的时候尤为重要, 因为内容站更希望被搜索引擎收录, 而搜索引擎收录的一个前置条件就是搜索引擎的爬虫能够抓取到你的网页内容, 从而提炼你的网页关键内容.
而React/Vue框架等, 默认是在JS运行时才动态生成页面的内容, 这就意味着搜索引擎爬虫在后端请求到是一个空的html模板, 那么对于搜索引擎来说, 就不知道这个页面到底是做什么的了, 进而也不会收录, 那么我们做的网站内容再好, 别人也很难通过搜索引擎来主动找到我们的网站.
当然, 最新的Google搜索引擎爬虫, 已经具备了动态解析JS的能力, 理论上说也可以解析网站的React/Vue代码, 然后得到渲染后的内容, 但是这毕竟需要额外的算力资源, Google这种量级的搜索引擎, 每天要处理上百亿的网页, 能投入的算力有限, 所以为了更好的收录, 需要在服务器端输出包含最终内容的HTML.
所以使用NextJS开发的网站, 天然就是对SEO(搜索引擎优化)友好的, 除了上面所说的直接输出编译好的html之外, NextJS还提供了一些修改Meta元素的快捷接口, 比如keywords, description等, 这些在SEO过程中也是非常有帮助的.
初次之外, NextJS还提供了 静态页面生成(SSG)的能力, 我们可以直接把JSX代码编译成html文件发布, 这样只需要一个静态的服务器就可以构建自己的网站了.
3. 更简单的后端开发能力
作为一款全栈解决方案, NextJS除了集成React的 SSR渲染能力, 还提供了基于文件系统的路由设计, 支持自定义API接口以及更简单的数据库ORM(Prisma)集成能力.
相较于用Express等NodeJS后端框架, 整个前后端开发体验是非常顺畅的, 像写前端一样写后端, 不需要在两个不同的目录里切来切去.
除此之外, 天然支持Typescript, 有热更新提升开发体验等基础能力也都具备
更好的部署体验
NextJS是Vercel旗下的开源产品, 在吸引了更多的开发者的同时, 也推广了自己的开发部署平台Vercel. 毕竟我们使用NextJS开发的网站应用, 最终还是要部署到云上的.
而Vercel作为NextJS官方平台, 对于NextJS的支持也是最好的, 我们用NextJS开发完之后, 只需要把代码提交到Github或者Gitlab, 然后在Vercel上新建项目绑定远程仓库, Vercel平台会自动帮我们拉取代码构建发布.
在以前使用PHP 或者 NodeJS的时候, 需要我们自己去运维服务器, 对于前端同学来说, 要学习的内容就很多了.
而现在, 我们只需要关注与开发应用本身, 构建部署和数据库各种服务, 云平台会帮我们整理好后端需求的功能, 然后提供简单的配置界面和一些Serverles的函数给我们使用, 这样即使只会写React或者Vue的纯前端同学,也可以构建出非常棒的网站应用.
除了Vercel之外, 还有其他的一些云平台也支持集成NextJS部署的能力, 比如Cloudflare, Netlify等等, 这里就不过多深入了.
缺点
当然, NextJS也不是完美的, 上手简单也意味着灵活性比传统的后端框架要差一些, 当我们需要构建复杂的应用时, 简单的路由设计反而会变成一种约束.
总结
NextJS 一款全栈Web应用开发框架, 对React技术栈的前端同学非常友好, 使用NextJS可以帮助我们快速的构建轻量的网站或者web应用.
对于有想法做独立开发者, 构建属于自己产品的前端同学, NextJS是非常好的选择, 更低的学习成本, React生态的资源, 以及限量免费的云服务, 让我们可以把注意力都集中在开发上.
后面的章节, 我会结合自己使用NextJS开发的经验, 由浅入深的带大家学习掌握NextJS