一、首先，我们先来认识Nextjs
Nextjs是一个使用react作为前端框架底层的支持SSR(请求时渲染)、SSG(构建时渲染)等技术的全栈框架，在2022年的服务端框架中排名第一。
它的优点非常明显，既支持react的虚拟dom形式快捷完成开发，又支持访问即可看到完整内容，友好的SEO/浏览器直出形式。结合了静态分离和服务器渲染的双重优势。
同时在服务端也非常容易做缓存相关的处理，甚至是做一些中间件的开发，简直是前端开发的神兵利器。
当前缺点也有一些，包括跳转的时候会重复下载内容，开发的时候需要一些服务端开发能力，甚至是部署的时候没点本事都部署不明白。
二、Next.js 的特点
1、构建全栈 Web 应用程序的 React 框架。
2、为 React 提供了开箱即用的服务器端渲染。
3、为 React 提供了开箱即用的静态站点生成。
4、为 React 提供了开箱即用的路由。
三、Next.js如何安装使用
1、自动安装
建议使用create-Next启动一个新的Next.js应用程序项目，它会自动为您设置所有内容。
npx create-next-app@latest
安装时，您将看到以下提示：
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*
提示后，创建下一个项目将使用您的项目名称创建一个文件夹，并安装所需的依赖项。
Next.js现在默认提供TypeScript、ESLint和Tailwind CSS配置。
您可以选择使用项目根目录中的src目录将应用程序的代码与配置文件分离。
四、手动安装
npm install next@latest react@latest react-dom@latest
在package.json文件中添加：
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}
这些脚本指的是开发应用程序的不同阶段：
dev：运行next-dev以在开发模式下启动next.js。
build：运行下一个build来构建应用程序以供生产使用。
start：运行next start来启动next.js生产服务器。
lint：运行next-lint来设置next.js的内置ESLint配置
5、SSR 服务端渲染
next 中服务端渲染需要用到 getServerSideProps 函数，而后端的数据获取都是在该函数内来获取，并通过 prop 传入给前端组件中，来看实际代码
const User = ({ data }: { data: any }) => {
return (
<div>
<p>username:{data.username} </p>
<p>email:{data.email} </p>
</div>
)
}
export default User
export async function getServerSideProps(context: { query: { id: any } }) {
const { id } = context.query // 这里context.param也能获取到id
const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
const data = await res.json()
return {
props: {
data,
},
}
}
如果从页面显示来看，确实没什么区别，但如果打开控制台就能发现诸多不同。
首先就是请求的页面，是直接包含数据，相当于返回你一个页面，而在客户端渲染则是返回一个组件，需要自己去请求数据来展示。
