[Next] 文本资源与组件代码分离的方式

可以使用raw-loader将文本（比如.md, .wgsl）单独放在文件内

配置完成后，开发环境下修改文本，引用了文本的组件也会对应更新

下文以配置.md为例

1. 安装raw-loader

   1npm add raw-loader

   shell
2. 配置next.config.ts

   1const nextConfig: NextConfig = {
   2  webpack: (config) => {
   3    config.module.rules.push({
   4      test: /\.md$/i,
   5      use: "raw-loader",
   6    });
   7    return config;
   8  },
   9};

   typescript
3. 找个地方写d.ts

   1declare module "*.md" {
   2  const content: string;
   3  export default content;
   4}

   typescript
4. 使用文件时正常引用即可

   1import foo from "./foo.md"
   2console.log(typeof foo)// string

   typescript