十分钟快速上手Next.js
发布网友
发布时间：2024-10-01 22:05
共1个回答
热心网友
时间：2024-10-14 09:28
Next.js已经出来很久了，但是一直没机会看这个框架。
以前一直在用create-react-app来创建React项目，奈何CRA实在太难用了，今天花了点时间扫了一下Next.js的官网，发现用起来还挺简单的。
Next.js虽然Next.js总被人称为SSR框架，其实Next.js还提供了很多功能，比如官网列出来的这些：
所以说，Next.js更像是一个框架，包含了路由、优化、SSR等一系列功能。
起步和create-react-app一样，Next.js一样有个create-next-app的脚手架。
create-next-appdemo使用上面命令后就可以创建一个Next.js框架的React项目。
路由Next.js也提供了路由系统，采用名字约定路由
pages/index.js对应/
pages/xxx/first.js对应/xxx/first
使用Link组件来做路由跳转
functionFirstPost(){return(<><h1>FirstPost</h1><h2><Linkhref="/"><a>Backtohome</a></Link></h2></>)}有的时候需要跳转到外链，可以使用<a>标签就可以。
静态资源静态资源用的最多的就是图片了，Next.js提供了Image组件来替代img。
Image组件的好处就是可以提高网页加载图片的性能，可以自动按需加载，当图片进入视图时再加载图片。
除了相对路径引入，还可以将图片放在public/images/下，然后用“绝对路径”引入。
网页的MetaData主要是指<head>元素里的内容，Next.js直接提供了一个<Head>组件来包裹这些MetaData。
<Head><title>FirstPost</title></Head>好处就是可以在不同的页面组件里写不同的MetaData。
CSS样式这一块和create-react-app差不多，使用CSSmole，命名为xxx.mole.css就可以了，否则别的CSS文件都需要import'xxx.css'来引入CSS样式。
需要注意的是全局样式引入只能在pages/_app.js的根文件里引入。
上述操作Sass同理。
预渲染终于来到Next.js最引以为豪的预渲染了。Next.js提供了三种渲染方式：
Client-sideRendering(CSR)
StaticGeneration(SSG)
Server-sideRendering(SSR)
Client-sideRendering客户端渲染其实就是我们经常看到的前后端分离的场景了：只提供一个html，拿到<script>的JS再去渲染页面。
importuseSWRfrom'swr'functionProfile(){const{data,error}=useSWR('/api/user',fetch)if(error)return<div>failedtoload</div>if(!data)return<div>loading...</div>return<div>hello{data.name}!</div>}由于需要等加载到JS再渲染页面，所以这种渲染方式的有以下缺点：
SEO不友好
白屏时间较长
聪明的前端程序员就想：当访问URL的时候，我直接把数据都放到HTML上，那爬虫就可以直接拿到页面的信息，解决SEO的问题了，同样的不需要等JS加载完再发Ajax获取数据了，基础数据优先展示，也就能解决白屏时间过长的问题了。
所以，预渲染说的就是SSG和SSR。
StaticGenerationStaticGeneration会在buildtime的proction时候直接将数据写在HTML上，所以一般来说这些数据都是以静态、固定为主。
exportasyncfunctiongetStaticProps(){constallPostsData=getSortedPostsData()return{props:{allPostsData}}}将getStaticProps这个函数export出来，里面则为buildtime时获取数据的逻辑。
Server-sideRendering通常情况下，我们很少使用静态的数据，一般以动态数据为主，不可能每次数据更新了又要打包一遍。所以就有了Server-sideRendring。
Server-sideRendering则在每次请求这个URL的时候，都会执行一次数据获取并生成HTML返回给前端。
看到这里你可能会想Next.js和以前的PHP、JSP有什么区别么？都是吐HTML的呀。Next.js这里的SSR其实是同构渲染，即一套代码两端执行，具体区别请看这篇回答
和StaticGeneration类似，Server-sideRendering同样有一个对应的需要export出一个getServerSideProps函数。
exportasyncfunctiongetServerSideProps(context){return{props:{//propsforyourcomponent}}}动态路由所谓动态路由就是可以生成posts/:id这样的路由，:id可以为post的id。文件命名只需要写成[id].js就可以了。
在页面组件文件里，可以通过前面说到的getStaticProps和getServerSideProps获取params：
exportasyncfunctiongetStaticProps({params}){constpostData=getPostData(params.id)return{props:{postData}}}其中，pages/posts/[...id].js会匹配/posts/a/b路由和/posts/a，...为全匹配。
API除了正常写页面外，有时候我们还需要提供API接口，可以在pages/api下添加文件，文件名则为API名。
注意：不能在getStaticProps和getStaticPaths里添加fetch数据，因为他们只在serverside运行，不会在clientside运行，应该使用helperfunction来获取数据。
API代码将不会在clientside的bundle里。
部署部署这一块Next.js推荐使用Vercel来部署。
因为Vercel本身就是为Next.js服务的，所以只需要连上GithubRepo就可以一键部署了。
总结稍微总结一下，Next.js提供的有如下功能：
Link组件，方便路由
Image组件，优化图片加载
文件路径生成路由机制，动态路由使用[id].js这样的命令
SSR、SSG的同构开发模式（其实就是export一个对应名字的函数，在里面提前获取数据就好了）
样式方面和create-react-app差不多
