前端全栈进阶 Nextjs打造跨框架SaaS应用（11章）

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

资料地址1：https://pan.baidu.com/s/16HeS5Vx2sFCbVWM1T9SUKw 提取码：qd1p
资料地址2：https://pan.baidu.com/s/1dy3rSEPXjq9PA8fRhC6OQw 提取码：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 (
    <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,
    },
  }
}
如果从页面显示来看，确实没什么区别，但如果打开控制台就能发现诸多不同。
首先就是请求的页面，是直接包含数据，相当于返回你一个页面，而在客户端渲染则是返回一个组件，需要自己去请求数据来展示。

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：Next SAAS saa ext recommended