Next.js 13 with Ant 設計5：組件和頁面在Styles加載前渲染，導致跳轉

Question

我按照 antd 和 nextjs 文檔來配置項目。

將此代碼添加到./scripts/genAntdCss.tsx文件中：

import { extractStyle } from '@ant-design/static-style-extract';
import fs from 'fs';
const outputPath = './public/antd.min.css';
const css = extractStyle();
fs.writeFileSync(outputPath, css);

這是 App.tsx 文件：

import { StyleProvider } from '@ant-design/cssinjs';
import type { AppProps } from 'next/app';
import '../public/antd.min.css';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <StyleProvider hashPriority='high'>
      <Component {...pageProps} />
    </StyleProvider>
  );
}

這些命令添加到package.json文件中：

"predev": "ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx",
"prebuild": "ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx"

你有什么辦法解決這個問題嗎？

Answer 1

我找到了解決它的方法，但我不得不使用 NextJS 13 的新“應用程序”、“布局”和“使用客戶端”功能。我希望它能幫助別人：

我在這里回答但我會再次復制並粘貼在這里以避免您打開它： https://github.com/ant-design/ant-design/issues/38555#issuecomment-1535788843

好吧，我找到了下面的鏈接，@chunsch 在 NextJS 存儲庫中添加了一個示例https://github.com/vercel/next.js/pull/44015/files

另外，@kiner-tang 幫助我們解決了加載時布局偏移問題https://github.com/ant-design/ant-design/issues/42275#issuecomment-1555805914

這是可能的，但我們需要使用新的cssinjs AntD 5 功能以及 NextJS 13 應用程序和布局功能做一些奇怪的事情。 我想避免使用它，但這是我發現的方式。 對不起。

我基本上必須使用新的“app”目錄（尚處於試驗階段），創建一個根布局（布局也是新功能之一），並創建一個 RootStyleRegistry 組件，指定它應該是一個帶有“使用客戶端”的客戶端組件'指令。 此外，如果您使用Layout組件，則應指定hasSider={true}屬性以避免在第一次渲染時出現偏移效果。

如果沒有安裝@ant-design/cssinjs，請安裝

創建RootStyleRegistry組件

// located at src/modules/shared/components/root-style-registry/index.tsx in my case

'use client'
import { useState, type PropsWithChildren } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs'

export const RootStyleRegistry = ({ children }: PropsWithChildren) => {
  const [cache] = useState(() => createCache())

  useServerInsertedHTML(() => {
    return (
      <script
        dangerouslySetInnerHTML={{
          __html: `</script>${extractStyle(cache)}<script>`,
        }}
      />
    )
  })

  return <StyleProvider cache={cache}>{children}</StyleProvider>
}

為根頁面創建布局

// src/app/layout.tsx
import type { PropsWithChildren } from 'react'
import { RootStyleRegistry } from '../modules/shared/components/root-style-registry'

export default function RootLayout({ children }: PropsWithChildren) {
  return (
    <html lang="es">
      <head />
      <body>
        <RootStyleRegistry>{children}</RootStyleRegistry>
      </body>
    </html>
  )
};

使用“使用客戶端”指令創建您的頁面組件。 請記住，您現在必須將其命名為“頁面”（就像文件夾中的索引文件一樣）

// src/app/page.tsx

'use client'
import React, { Button, Card, Space, Typography } from 'antd'

export default function Home() {
  return  <Button type="primary">Ant Design Button</Button>
}

如果您使用Layout組件並且在加載時嘗試導航欄移動，則應明確指定 'hasSider' 道具

// src/app/components/layout.tsx

export function MyLayout({ children }) {
  return (
    <Layout hasSider>
      <Sider>
        {children}
      </Sider>
    </Layout>
  )
}

Answer 2

它按照 AntD 文檔中的說明對我有用，看起來您正在這樣做。

https://ant.design/docs/react/customize-theme#server-side-render-ssr

確保您正在安裝必要的依賴項

npm install ts-node tslib --save-dev

並添加tsconfig.node.json ，您沒有指定您執行了這兩個步驟。

Answer 3

https://mobile.ant.design/guide/ssr

// next.config.js
const nextConfig = {
  transpilePackages: ['antd-mobile'], // or ['antd']
};

module.exports = nextConfig;

Next.js 13 with Ant 設計5：組件和頁面在Styles加載前渲染，導致跳轉

問題描述

3 個解決方案

解決方案1
4 2023-05-05 06:50:31

解決方案2
0 2023-03-29 16:16:32

解決方案3
0 2023-05-17 04:58:48

Next.js 13 with Ant 設計5：組件和頁面在Styles加載前渲染，導致跳轉

問題描述

3 個解決方案

解決方案1 4 2023-05-05 06:50:31

解決方案2 0 2023-03-29 16:16:32

解決方案3 0 2023-05-17 04:58:48

解決方案1
4 2023-05-05 06:50:31

解決方案2
0 2023-03-29 16:16:32

解決方案3
0 2023-05-17 04:58:48