前端全栈进阶 Nextjs打造跨框架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,

},

}

}

如果从页面显示来看，确实没什么区别，但如果打开控制台就能发现诸多不同。

首先就是请求的页面，是直接包含数据，相当于返回你一个页面，而在客户端渲染则是返回一个组件，需要自己去请求数据来展示。