从零开始-文件资源管理器-02-初始化Next.js + Ant Design

安装依赖

$ 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 组件

参考链接 - 使用 App Router

基础 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

git-repo

yangWs29/share-explorer

从零开始-文件资源管理器-02-初始化Next.js + Ant Design

安装依赖

修改文件目录树

基础组件

Ant Design 注册

基础 loading 组件

root layout 组件

git-repo

寒露

引用和评论

从零开始-文件资源管理器-26-Next.js 对接 QBittorrent web api

Vue.js-Vue实例

Flex 布局学习总结（对齐方式）

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

巧用 CSS 实现高频出现的复杂怪状按钮 - 镂空的内凹圆角边框

JavaScript&ES6----数组去重的多种方法

Base64编码的“暗坑”：解密失败？可能是这些原因！