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を初期化することで適用されるようになったと考えられる。

最後に

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