From aa7fea6cca860a038665f4492a2da6fab3339898 Mon Sep 17 00:00:00 2001 From: dengfuping Date: Wed, 9 Oct 2024 10:50:55 +0800 Subject: [PATCH] feat(docs): Add @oceanbase/design and nextjs docs --- docs/design/design-use-with-nextjs.md | 37 +++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 docs/design/design-use-with-nextjs.md diff --git a/docs/design/design-use-with-nextjs.md b/docs/design/design-use-with-nextjs.md new file mode 100644 index 000000000..d3c4c36b2 --- /dev/null +++ b/docs/design/design-use-with-nextjs.md @@ -0,0 +1,37 @@ +--- +title: 在 Next.js 中使用 +order: 3 +group: 基础组件 +--- + +- 为了和 `@oceanbase/design` 搭配使用，需要安装 `file-loader` 依赖，并修改 Next.js 配置： + +```bash +npm install file-loader --save-dev +``` + +```ts +const nextConfig = { + // to transpile some special packages to es5 + transpilePackages: ['@oceanbase', 'query-string', '@ant-design', '@ant-design/cssinjs'], + webpack: config => { + // to handle @oceanbase/design built-in font files + config.module.rules.push({ + test: /\.(woff|woff2|ttf?g)$/i, + use: ['file-loader'], + }); + return config; + }, +}; + +export default nextConfig; +``` + +- 完整配置和可运行的示例，可以参考我们提供的 [Next.js + @oceanbase/design 项目模板](https://stackblitz.com/edit/nextjs-oceanbase-design)。 + +