文中给出的例子同时也是本站使用的方案（有改动，截至文章发布时间，以后说不定会重构，哈哈）。

另，shiki 版本为 3.x。

阅读更多

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

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

下文以配置.md为例

1. 安装 raw-loader
   SHELL

   npm add raw-loader
   

2. 配置next.config.ts
   TYPESCRIPT

   const nextConfig: NextConfig = {
     webpack: (config) => {
       config.module.rules.push({
         test: /\.md$/i,
         use: "raw-loader",
       });
       return config;
     },
   };
   

3. 找个地方写d.ts
   TYPESCRIPT

   declare module "*.md" {
     const content: string;
     export default content;
   }
   

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

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