maj revamp, upgr Next15 to Next16, and associated deps

Author: tkokhing

.github/workflows/nextjs.yml

@@ -1,9 +1,6 @@
 name: Deploy tkokhing main page to GitHub Pages
 
 on:
-  # repository_dispatch:
-  #   types: [auto-trigger-rebuild]
-
   repository_dispatch:
     types: [app-trigger-rebuild]
 
@@ -146,17 +143,13 @@ jobs:
             echo "Unable to determine package manager"
             exit 1
           fi
-
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version: "20"
           cache: ${{ steps.detect-package-manager.outputs.manager }}
-
       - name: Setup Pages
         uses: actions/configure-pages@v5
-
-
       - name: Restore cache
         uses: actions/cache@v4
         with:
@@ -165,13 +158,10 @@ jobs:
           key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
           restore-keys: |
             ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
-
       - name: Install dependencies
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
-
       - name: Build with Next.js
         run: ${{ steps.detect-package-manager.outputs.runner }} next build
-
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

next.config.mjs

@@ -1,8 +1,9 @@
-
-// next.config.mjs
+// next.config.mjs, implemented with @next/mdx, serves for `import` of *.MDX
 import createMDX from "@next/mdx";
-import remarkGfm from "remark-gfm";
-import rehypePrettyCode from "rehype-pretty-code";
+// import rehypePrettyCode from "rehype-pretty-code";
+// import remarkGfm from "remark-gfm"; 
+// import rehypePrettyCode from "rehype-pretty-code";
+// From Next v16+, import packages no longer required hence call as string under [options]
 
 /** @type {import('rehype-pretty-code').Options} */
 const prettyOptions = {
@@ -11,21 +12,21 @@ const prettyOptions = {
 };
 
 const withMDX = createMDX({
-  extension: /\.mdx?$/,
   options: {
-    remarkPlugins: [remarkGfm],
-    rehypePlugins: [[rehypePrettyCode, prettyOptions]],
+    remarkPlugins: ["remark-gfm"],
+    rehypePlugins: [["rehype-pretty-code", prettyOptions], "rehype-slug", "rehype-autolink-headings"],
   },
+  extension: /\.mdx?$/,
 });
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  // turn off mdxRs for plugin support
+  // mdxRs  MUST  be FALSE for remark/rehype plugins to work
   experimental: { mdxRs: false },
   pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
   output: "export",
   distDir: "dist",
   images: { unoptimized: true },
 };
 
-export default withMDX(nextConfig);
+export default withMDX(nextConfig);