Next.js13,shadcn/ui ,tailwindCSS環境でcontentlayerを導入する。またそのときに発生したCSSの適用が消えるバグの対処法

# 発生したバグ
contentlayerをnext13.5.4に導入時になぜがそれまで適用されていたcssが消えるバグ

# 環境
  
    "contentlayer": "^0.3.4",
    "date-fns": "^3.6.0",
    "next": "^13.5.4",
    "next-contentlayer": "^0.3.4",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.4.0",
    "tailwindcss-animate": "^1.0.7"
     "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.5",
    "postcss": "^8",
    "tailwindcss": "^3.4.9",
    "typescript": "^5"


# 現状の状態
それまでのcssが全て適用されていない。
しかし検証してみるとclassNameにtailwindCSSがタグとして記載してはいる。

# バグが発生するまでに実行した経緯

## nextのダウングレード
contentlayerのインストールはNext14だとエラーが出てしまうのでNext13へのダウングレードをする必要がある。
nextのuninstall
```
npm uninstall next
```
next13.5.4のインストール
```
npm install next@13.5.4
```
ちなみにcontentlayerをNext14で使用したい場合、contentlayer2という最新版でNext14の環境で導入することができる。
https://npmjs.com/package/contentlayer2

## contentlayerをインストール
```
npm install contentlayer next-contentlayer date-fns
```
`next.config.mjs`を以下に変更する
これは`dev`,`build`の際に実行できるようにするため
```
import { withContentlayer } from "next-contentlayer";

/** @type {import('next').NextConfig} */
const nextConfig = { reactStrictMode: true, swcMinify: true };

export default withContentlayer(nextConfig);
```

次に`tsconfig.json`に以下を追記する
```
{
  "compilerOptions": {
    "baseUrl": ".",
    ~中略~
    "paths": {
      "contentlayer/generated": ["./.contentlayer/generated"]
      ~中略~
    }
  },
  "include": [
    ".contentlayer/generated"
  ]
}
```
これでプロジェクトのルートディレクトリに`.cotentlayer/generated`が作成される

この際、`.gitignore`に`.contentlayer`が追加されていなかった場合は`.contentlayer`を加える

公式に従ってプロジェクトのルートディレクトリに`contentlayer.config.ts`を作成し、以下を追記

```
import { defineDocumentType, makeSource } from 'contentlayer/source-files'

export const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `**/*.md`,
  fields: {
    title: { type: 'string', required: true },
    date: { type: 'date', required: true },
  },
  computedFields: {
    url: { type: 'string', resolve: (post) => `/posts/${post._raw.flattenedPath}` },
  },
}))

export default makeSource({ contentDirPath: 'posts', documentTypes: [Post] })
```
ここまで段階でCSSの適用がされている場合は特に問題ないです。
読んでいただきありがとうございます。

# ここからはCSSが適用されないときに実行した手順
## tailwindCSSを初期化
```
npx tailwindcss init
```
## 次に.mjsの拡張子担っているファイルを全て.jsに変更
`next.config.mjs`,`postcss.config.mjs`の二つの拡張子を`.js`に変更
その際に`export default`は使えなくなるので中身を変更
`next.config.js`
```
const { withContentlayer } = require("next-contentlayer");

/** @type {import('next').NextConfig} */
const nextConfig = { reactStrictMode: true, swcMinify: true };

module.exports = withContentlayer(nextConfig);

postcss.config.js
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

module.exports = config;
```
に変更
また、`postcss.config.js`の中身を以下に変更
```
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

module.exports = config;
```

→そうするとtailwindCSSが適用されるようになった。
しかしまだshadcn/uiがまだ適用されない

## shadcn/uiの初期化
`globals.css`の
```
@tailwind base;
@tailwind components;
@tailwind utilities;
より下のshadcn/uiが適用されている部分を全て削除
```
そしてshadcn/uiを初期化
```
npx shadcn-ui@latest init
```
これでshadcnも適用されるようになった。

# 考えられうる原因
おそらくcontentlayerが`.mjs`に対応していなかったことが原因だと思われる。
`.mjs`拡張子のファイルはESM（ECMAScript Modules）として扱われるため、Node.jsのデフォルトのCommonJSモジュールシステムと互換性がない。
そのためcontentlayerがCommonJSの依存関係を前提としていてCSSの適用がされなかったのではないかと思われる。
なので、`.mjs`を`.js`に変更し記述を変更してtailwindCSS,shadcn/uiを初期化することで適用されるようになったと考えられる。

# 最後に
ここまで読んでいただきありがとうございます。
みなさんの解決の助けになればと思います。
また、何か違う方法や、間違っている点がありましたら指摘していただきたいです。