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)。 + +