资料地址1：pan.baidu.com/s/16HeS5Vx2… 提取码：qd1p 资料地址2：pan.baidu.com/s/1dy3rSEPX… 提取码：jxjk
快速晋级“高薪”前端工程师，你准备好了吗？本篇文章将引领你使用Nextjs、Tailwind、Trpc、Drizzle ORM、Serverless等前沿技术，亲手打造稳健的云服务图片管理Saas应用。你将亲历从产品构思到实战开发、部署，再到盈利构思、线上优化全周期。多维度掌握全栈架构设计、跨框架组件开发、容器化部署管理、缓存服务、性能优化等高薪技能，助力你实现从开发者到服务提供者的进阶！成为行业急需的高薪人才！
一、首先，我们先来认识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 (
username:{data.username}
email:{data.email}
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, }, } } 如果从页面显示来看，确实没什么区别，但如果打开控制台就能发现诸多不同。 首先就是请求的页面，是直接包含数据，相当于返回你一个页面，而在客户端渲染则是返回一个组件，需要自己去请求数据来展示。
