19、FastAPI与Next.js实现服务器端渲染和图像处理

FastAPI与Next.js实现服务器端渲染和图像处理

1. 创建插入新车页面

为了完成Next.js应用，需要添加与构建汽车销售应用初始目的相关的页面。首先创建添加汽车的页面，该页面已由Next.js中间件“保护”，只有登录用户才能访问，且只有登录用户才能向FastAPI后端发送POST请求。

1.1 安装依赖包

停止Next.js服务器，安装两个新的Node.js包：

npm i axios cookies-next

1.2 创建add.jsx页面

在 /cars 文件夹中创建 add.jsx 页面，代码如下：

import { useState } from "react";
import axios from "axios";
import { useRouter } from "next/router";
import { getCookie } from "cookies-next";

export const getServerSideProps = ({ req, res }) => {
  const jwt = getCookie("jwt", { req, res });
  return { props: { jwt } };
};

const add = ({ jwt }) => {
  const [brand, setBrand] = useState(""