Nextjs体验踩坑记录01Nextjs体验踩坑记录01，antd组件库使用导致页面闪动，middleware中间件创建

一、antd组件库

在nextjs中使用antd组件库时，若使用的组件是带有css动画（包括trans类型和animate类型），在第一次加载页面的时候，由于nextjs是服务端渲染，并且antd组件样式未能预先加载，所以页面会出现跳动的情况，在查询antd官方文档后，antd提供了解决方法。

如果你在 Next.js 当中使用了 App Router, 并使用 antd 作为页面组件库，为了让 antd 组件库在你的 Next.js 应用中能够更好的工作，提供更好的用户体验，你可以尝试使用下面的方式将 antd 首屏样式按需抽离并植入到 HTML 中，以避免页面闪动的情况。

1、安装 @ant-design/nextjs-registry

npm install @ant-design/nextjs-registry --save

2、在 app/layout.tsx 中使用

import React from 'react';
import { AntdRegistry } from '@ant-design/nextjs-registry';

const RootLayout = ({ children }: React.PropsWithChildren) => (
  <html lang="en">
    <body>
      <AntdRegistry>{children}</AntdRegistry>
    </body>
  </html>
);

export default RootLayout;

二、接口中间件

在官方文档中有关于middleware部分的教程，但是在我的实际开发过程中，因为middleware中只能接收到req: NextRequest，无法直接对已判断的情况进行res响应（middleware中可以使用NextResponse进行重定向等操作），反正写起来我感觉非常别扭。所以还是推荐大家使用next-connect这个npm包，这样我们就可以像在express中一样顺畅的使用中间件了。

1、安装 next-connect

npm i next-connect

2、在创建接口处理方法的时候使用

import { NextApiRequest, NextApiResponse } from 'next';
import * as nc from 'next-connect';
import middleware01 from './middleware/01';

const router = nc.createRouter<NextApiRequest, NextApiResponse>();
router.use(middleware).get(
    (req: NextApiRequest, res: NextApiResponse) => {
        // ......
)

export default router.handler();

·我是前端小白，若有上述内容存在问题请评论区指出，感谢！·