我们知道，nextjs是基于react的做事端渲染的框架。以是必须要会 react
当然基于vue 的做事端渲染框架，也有，叫 nuxt，现在已经出了nuxt3了。
这个我们往后会讲，由于 www.helloworld.net 便是基于nuxt框架开拓的。
只不过 nuxt2 升级到nuxt3, 韶光并不算太长
更新还是很频繁的，以是打算晚点写nuxt3的文章。
什么是做事端渲染？做事端渲染，也叫 SSR ，不是啥新技能，可以说最开始都是SSR。
10年前的PHP，JSP, ASP 的套模板技能，便是做事端渲染。
为什么以前没有听过做事端渲染 这个词呢？那是由于以前只有 做事端渲染 ，每天在用，就没有这个观点。
现在什么强调这个词了呢？还起了个缩写叫 SSR那是由于自从 vue, react 等这类框架出来往后，写网页的办法发生了变革
再详细点便是中央发生了变革。
以前怎么写？以前写网页，因此 html, css 标签为中央，在一个html文件中，写一堆的 html标签, css样式
浏览器要求的时候，把这个html文件发送给浏览器 ，浏览器渲染出来。
现在怎么写？现在写网页，因此 JS 为中央，以vue, react 这两个框架为代表，紧张是写一堆的 JS ，
用vue, react写的项目，编译打包成了一堆的 js
浏览器要求的时候，实际上是要求了一个空的html文件 ，但是这个空的html文件，
会要求js 文件并实行 js 文件 ， js文件实行完往后，就会天生一个完全的网页了，也便是一堆的html,css
是 浏览器实行JS 文件，动态天生的dom树，说白了便是动态天生了一堆的html标签 和css样式。
这便是客户端渲染 ，也起一个洋气的名字叫：CSR
现在的SSR和以前的有啥不一样？10年前SSR怎么写？
实在就一句话：套模板 。
我们知道，10年前，套模板的技能，各家都有，JSP, PHP等，那时候，只是在PHP文件中，JSP文件中
写html标签，引入css文件等，里面再掺杂一些PHP代码，JAVA代码。紧张便是为了一些动态数据须要，
由于要显示的数据，在数据库嘛，这些PHP代码，JAVA代码，便是干这事的，获取数据并把数据塞到模板里面来。
现在的SSR怎么写呢？
现在都是用vue, react这样的JS框架写，编译出来是 JS 文件，浏览器***并实行JS文件，从成天生html文件 。这叫客户端渲染。
那么对应的做事端渲染便是在做事端这块，直接实行JS，天生html文件，然后再把html文件发送到做事端
总结：
和以前比还是有一些差别的。
现在的SSR，是在做事端实行JS文件天生html文件，获取数据就要求接口。
以前是套模板 ，实行的是PHP代码或者JAVA代码。
一句话总结， 做事端渲染和客户端渲染的差异 ？html文件，是在做事端天生还是在客户端天生
阐明：
做事端渲染：html文件是在做事端天生，并且html文件中有已经写好的html标签和css样式客户端渲染：html文件是在客户端（浏览器 ）天生，详细便是浏览器实行JS，天生一堆的html标签和css样式。做事端渲染有什么好处？SEO 须要， 这是最大的好处加载速率快实在我最关注的便是 SEO ，由于紧张办理的便是SEO问题。
而且 www.helloworld.net 也是要办理SEO问题，当时用了nuxt框架
这个框架我们往后再写相应的文章，这个大家可以关注一下。
谁来充当这个天生html文件的做事器呢？这是一个很多人随意马虎忽略的问题，之前我们公司也有碰着过。
之前我们公司有一个规定，线上做事器，不能跑node 。
可能是以为 node 写做事，内部用用还行，真到线上，觉得还是不放心。
于是当时前端，后真个同学都在找相应的办理方案， Java , go 干系的方案都找过了。
便是在Java或者go 写的做事里面，内置一个 js 解析器。
搞了半天，这不还是须要JS引擎嘛，不管是v8也好还是其它的也好。
掩耳盗铃，还是离不开JS，想实行JS，除了浏览器 ，便是node了，还是离不开node啊。
末了又老诚笃实的换成了node，也便是nextjs 来做。至于规定嘛，还给领导了。
以是，在做事端充当天生html文件的做事，是用node写的，是node 做事
以是你的网站往后很可能是这样：
浏览器发起要求 --> 要求打到 nginx 做事器 --> 转到到 node 做事器 --> 要求接口做事器 --> 天生html --> 返回给浏览器
如下图：
回到正题 ，nextjs 环境搭建
首先是官网：一定要看官方文档
https://nextjs.org/
对环境的哀求：node 18.17 以上macOS, windows, linux都可以。安装完node，可以直接在命令行中实行以下命令：
第一步：实行以下命令
npx create-next-app@latest
1
输出以下，第一次可以全部选择默认选项
What is your project named? my-appWould you like to use TypeScript? No / YesWould you like to use ESLint? No / YesWould you like to use Tailwind CSS? No / YesWould you like to use `src/` directory? No / YesWould you like to use App Router? (recommended) No / YesWould you like to customize the default import alias (@/)? No / YesWhat import alias would you like configured? @/
第二步：yarn install
切换到项目目录下，实行
yarn 或者 yarn install
1
第三步：yarn dev
yarn dev
1
过几秒，你就会看到如下输出了。
浏览器中访问 : http://localhost:3000
就可以访问你的项目了。你的项目就成功的跑起来了。
总结：本次只是照着官网把项目跑起来即可，nextjs 给我们供应了非常多的好用的功能 。
下一篇我们讲讲 nextjs 的路由功能，比较于react的，nextjs的路由非常好用和灵巧。
如果你喜好，持续关注，后续的文章。
