Attempt: Upgrade to NextJS version 13

CONTRIBUTING.md

@@ -30,17 +30,17 @@ If you need inspiration on what to work on, you can check out issues tagged with
 
 We really appreciate all input from users, community members and potential contributors. Please make sure to consider the other person's opinion and don't assume any common knowledge.
 
-**Most importantly: Keep it professional and be nice to each other**
+**Most importantly: Keep it professional and be nice to eachother**
 
-There might be situations where others don't understand a proposed feature or have different opinions on certain writing styles. That's fine, discussions are always welcome! Communicate in clear actionables, make your plans clear and always stick to the original topic.
+There might be situations where others don't understand a proposed feature or have different opinions on certain writing styles. That's fine, discussions are always welcome! Communicate in clear actionables, make your plans clear and always to stick to the original topic.
 
 If other contributors disagree with certain proposals and don't change their mind after longer discussions, please don't get discouraged when an issue gets closed / postponed. Everyone tries their best to make the platform better, and to look at it in another perspective: Closed issues are also a highly valuable resource for others to understand technical decisions later on.
 
 ### Communicate your Time Commitment
 
 Open Source development can be a challenge to coordinate, so please make sure to block enough time to work on your tasks and show commitment when taking on some work. Let other contributors know if your time schedule changes significantly, and also let others know if you can't finish a task.
 
-We value your voluntary work, and of course it's fine to step back from a ticket for any reason (we can also help you if you are getting stuck). Please talk to us in any case, otherwise we might re-assign the ticket to other contributors.
+We value your voluntary work, and of course it's fine to step back from a ticket for any reasons (we can also help you if you are getting stuck). Please talk to us in any case, otherwise we might re-assign the ticket to other contributors.
 
 ### Communication Channels
 
@@ -66,7 +66,7 @@ Always check if there are any designs for certain UI components and think about
 ### Technical Writing (Documentation)
 
 - Think and write in a JS friendly mindset when explaining concepts / showing examples.
-- No `foo` examples if somewhat possible. Try to establish practical context in your showcase examples.
+- No `foo` examples if somewhat possible. Try to establish practical context in your show case examples.
 - No references to `OCaml`. ReScript is its own language, and we don't rely on external resources of our host language.
 - If possible, no references to `Reason` examples / external resources. Our goal is to migrate everything to ReScript syntax.
 

data/sidebar_react_latest.json

@@ -2,7 +2,7 @@
   "Overview": [
     "introduction",
     "installation",
-    "migrate-react"
+    "migrate-from-v3"
   ],
   "Main Concepts": [
     "elements-and-jsx",

data/sidebar_react_v0100.json

@@ -2,7 +2,7 @@
   "Overview": [
     "introduction",
     "installation",
-    "migrate-react"
+    "migrate-from-reason-react"
   ],
   "Main Concepts": [
     "elements-and-jsx",

next.config.js

@@ -1,69 +1,48 @@
-const { ProvidePlugin } = require('webpack');
-const { ESBuildMinifyPlugin } = require('esbuild-loader');
+const { ProvidePlugin } = require("webpack");
 
 const bsconfig = require("./bsconfig.json");
-const path = require("path");
 const remarkSlug = require("remark-slug");
-const fs = require("fs");
 
 const transpileModules = ["rescript"].concat(bsconfig["bs-dependencies"]);
 const withTM = require("next-transpile-modules")(transpileModules);
 
-const withMdx = require("./plugins/next-mdx")({
+const withMdx = require("@next/mdx")({
   extension: /\.mdx?$/,
   options: {
     remarkPlugins: [remarkSlug],
   },
 });
 
-
-// esbuild-loader specific features
-// See: https://github.com/privatenumber/esbuild-loader-examples/blob/master/examples/next/next.config.js
-function useEsbuildMinify(config, options) {
-  const terserIndex = config.optimization.minimizer.findIndex(minimizer => (minimizer.constructor.name === 'TerserPlugin'));
-  if (terserIndex > -1) {
-    config.optimization.minimizer.splice(
-      terserIndex,
-      1,
-      new ESBuildMinifyPlugin(options),
-    );
-  }
-}
-
-const isWebpack5 = true;
 const config = {
-  target: "serverless",
   pageExtensions: ["jsx", "js", "bs.js", "mdx", "mjs"],
   env: {
     ENV: process.env.NODE_ENV,
   },
+  swcMinify: true,
   webpack: (config, options) => {
     const { isServer } = options;
-    if (isWebpack5) {
-      if (!isServer) {
-        // We shim fs for things like the blog slugs component
-        // where we need fs access in the server-side part
-        config.resolve.fallback = {
-          fs: false,
-          path: false,
-        };
-      }
-      useEsbuildMinify(config);
-      // We need this additional rule to make sure that mjs files are
-      // correctly detected within our src/ folder
-      config.module.rules.push({
-        test: /\.m?js$/,
-        // v-- currently using an experimental setting with esbuild-loader
-        //use: options.defaultLoaders.babel,
-        use: [{loader: 'esbuild-loader', options: { loader: 'jsx'}}],
-        exclude: /node_modules/,
-        type: "javascript/auto",
-        resolve: {
-          fullySpecified: false,
-        }
-      });
-      config.plugins.push(new ProvidePlugin({ React: "react" }));
+    if (!isServer) {
+      // We shim fs for things like the blog slugs component
+      // where we need fs access in the server-side part
+      config.resolve.fallback = {
+        fs: false,
+        path: false,
+      };
     }
+    // We need this additional rule to make sure that mjs files are
+    // correctly detected within our src/ folder
+    config.module.rules.push({
+      test: /\.m?js$/,
+      // v-- currently using an experimental setting with esbuild-loader
+      //use: options.defaultLoaders.babel,
+      use: [{ loader: "esbuild-loader", options: { loader: "jsx" } }],
+      exclude: /node_modules/,
+      type: "javascript/auto",
+      resolve: {
+        fullySpecified: false,
+      },
+    });
+    config.plugins.push(new ProvidePlugin({ React: "react" }));
     return config;
   },
   async redirects() {
@@ -80,9 +59,9 @@ const config = {
       },
     ];
   },
-  future: {
-    webpack5: isWebpack5,
-  },
 };
 
-module.exports = withMdx(withTM(config));
+module.exports = withMdx({
+  transpilePackages: transpileModules,
+  ...config,
+});