refactor: update contentlayer (next 14 supported)

Author: mickasmt

README.md

@@ -64,8 +64,6 @@ pnpm run dev
 >
 > After upgrade Auth.js to v5: `NEXTAUTH_URL` has removed from `.env.example`.
 
-> [!CAUTION]
-> Errors while the build if you update `remark-gfm` package.
 
 ## Roadmap
 

components/content/mdx-components.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import NextImage, { ImageProps } from "next/image";
 import Link from "next/link";
-import { useMDXComponent } from "next-contentlayer/hooks";
+import { useMDXComponent } from "next-contentlayer2/hooks";
 
 import { cn } from "@/lib/utils";
 import { MdxCard } from "@/components/content/mdx-card";

contentlayer.config.js renamed to contentlayer.config.ts

@@ -1,12 +1,15 @@
-import { defineDocumentType, makeSource } from "contentlayer/source-files";
+import {
+  ComputedFields,
+  defineDocumentType,
+  makeSource,
+} from "contentlayer2/source-files";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypePrettyCode from "rehype-pretty-code";
 import rehypeSlug from "rehype-slug";
 import remarkGfm from "remark-gfm";
 import { visit } from "unist-util-visit";
 
-/** @type {import('contentlayer/source-files').ComputedFields} */
-const computedFields = {
+const defaultComputedFields: ComputedFields = {
   slug: {
     type: "string",
     resolve: (doc) => `/${doc._raw.flattenedPath}`,
@@ -34,7 +37,7 @@ export const Doc = defineDocumentType(() => ({
       default: true,
     },
   },
-  computedFields,
+  computedFields: defaultComputedFields,
 }));
 
 export const Guide = defineDocumentType(() => ({
@@ -62,7 +65,7 @@ export const Guide = defineDocumentType(() => ({
       default: false,
     },
   },
-  computedFields,
+  computedFields: defaultComputedFields,
 }));
 
 export const Post = defineDocumentType(() => ({
@@ -99,7 +102,7 @@ export const Post = defineDocumentType(() => ({
       required: true,
     },
   },
-  computedFields,
+  computedFields: defaultComputedFields,
 }));
 
 export const Author = defineDocumentType(() => ({
@@ -123,7 +126,7 @@ export const Author = defineDocumentType(() => ({
       required: true,
     },
   },
-  computedFields,
+  computedFields: defaultComputedFields,
 }));
 
 export const Page = defineDocumentType(() => ({
@@ -139,7 +142,7 @@ export const Page = defineDocumentType(() => ({
       type: "string",
     },
   },
-  computedFields,
+  computedFields: defaultComputedFields,
 }));
 
 export default makeSource({

next.config.js

@@ -1,7 +1,4 @@
-// FIX: I changed .mjs to .js 
-// More info: https://github.com/shadcn-ui/taxonomy/issues/100#issuecomment-1605867844
-
-const { createContentlayerPlugin } = require("next-contentlayer");
+const { withContentlayer } = require("next-contentlayer2");
 
 import("./env.mjs");
 
@@ -12,26 +9,22 @@ const nextConfig = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'avatars.githubusercontent.com',
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com",
       },
       {
-        protocol: 'https',
-        hostname: 'lh3.googleusercontent.com',
+        protocol: "https",
+        hostname: "lh3.googleusercontent.com",
       },
       {
-        protocol: 'https',
-        hostname: 'randomuser.me'
-      }
+        protocol: "https",
+        hostname: "randomuser.me",
+      },
     ],
   },
   experimental: {
     serverComponentsExternalPackages: ["@prisma/client"],
   },
-}
-
-const withContentlayer = createContentlayerPlugin({
-  // Additional Contentlayer config options
-});
+};
 
 module.exports = withContentlayer(nextConfig);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "saas-starter",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "author": {
     "name": "mickasmt",

tsconfig.json

@@ -31,7 +31,8 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    ".contentlayer/generated"
+    ".contentlayer/generated",
+    "contentlayer.config.ts"
   ],
   "exclude": ["node_modules"]
 }