安装依赖
$ cd /share-explorer/explorer
$ pnpm i antd @ant-design/cssinjs @ant-design/icons @ant-design/static-style-extract
修改文件目录树
├── explorer
...
│ ├── src
│ │ ├── app
...
│ │ │ ├── layout.tsx 📌
│ │ │ ├── page.tsx 📌
│ │ ├── components
│ │ │ └── loading.tsx 📌
│ │ └── lib
│ │ └── antd-registry.tsx 📌
│ └── tsconfig.json
...
基础组件
Ant Design 注册
文件路径：/explorer/src/lib/antd-registry.tsx
'use client'
import React from 'react'
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs'
import { useServerInsertedHTML } from 'next/navigation'
import { App, ConfigProvider, Layout, theme } from 'antd'
import 'antd/dist/reset.css'
const cache = createCache()
const AntdStyledComponentsRegistry: React.FC<React.PropsWithChildren> = ({ children }) => {
const isServerInserted = React.useRef<boolean>(false)
useServerInsertedHTML(() => {
// 避免 css 重复插入
if (isServerInserted.current) {
return
}
isServerInserted.current = true
return <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />
})
return <StyleProvider cache={cache}>{children}</StyleProvider>
}
const AntdConfigProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
return (
<ConfigProvider
componentSize="small"
theme={{
algorithm: theme.darkAlgorithm,
}}
>
<Layout style={{ minHeight: '100vh' }}>{children}</Layout>
</ConfigProvider>
)
}
const AntdRegistry: React.FC<React.PropsWithChildren> = ({ children }) => {
return (
<AntdStyledComponentsRegistry>
<AntdConfigProvider>
<App>{children}</App>
</AntdConfigProvider>
</AntdStyledComponentsRegistry>
)
}
export default AntdRegistry
- AntdStyledComponentsRegistry：配置 Antd SSR
- AntdConfigProvider：配置“暗黑主题”、默认使用 small 样式
- AntdRegistry：组合 SSR、主题、Antd App Context Provider 组件
基础 loading 组件
文件路径：/explorer/src/components/loading.tsx
'use client'
import React from 'react'
import { Card, Skeleton } from 'antd'
const Loading: React.FC = () => {
return (
<Card>
<Skeleton active />
</Card>
)
}
export default Loading
root layout 组件
path: /explorer/src/app/layout.tsx
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import React from 'react'
import AntdStyledComponentsRegistry from '@/lib/antd-registry'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: '从零开始-文件资源管理器',
description: '从零开始-文件资源管理器',
}
const RootLayout: React.FC<React.PropsWithChildren> = ({ children }) => (
<html lang="en">
<body className={inter.className}>
<AntdStyledComponentsRegistry>{children}</AntdStyledComponentsRegistry>
</body>
</html>
)
export default RootLayout
