fix client console error on React 17 / crash on React 18 - Text conte…

…nt does not match server-rendered HTML (#568)

fix client console error - Text content does not match server-rendered HTML

.changeset/dry-windows-play.md

@@ -0,0 +1,5 @@
+---
+'nextra': patch
+---
+
+fix client console error - Text content does not match server-rendered HTML

packages/nextra/scripts/build.js

@@ -17,7 +17,7 @@ const externalDeps = [
 esbuild.buildSync({
   ...BUILD_OPTIONS,
   entryPoints: [
-    'src/index.js',
+    'src/index.ts',
     'src/ssg.ts',
     'src/locales.ts',
     'src/context.ts'

packages/nextra/scripts/dev.js

@@ -28,7 +28,7 @@ const externalDeps = [
 esbuild.build({
   ...BUILD_OPTIONS,
   entryPoints: [
-    'src/index.js',
+    'src/index.ts',
     'src/ssg.ts',
     'src/locales.ts',
     'src/context.ts'

packages/nextra/src/index.ts

@@ -0,0 +1,69 @@
+import { NextraPlugin, pageMapCache } from './plugin'
+import { MARKDOWN_EXTENSION_REGEX } from './constants'
+import { LoaderOptions, Nextra } from './types'
+
+const DEFAULT_EXTENSIONS = ['js', 'jsx', 'ts', 'tsx'] as const
+const MARKDOWN_EXTENSIONS = ['md', 'mdx'] as const
+
+const nextra: Nextra = (...args) =>
+  function withNextra(nextConfig = {}) {
+    const nextraConfig =
+      typeof args[0] === 'string'
+        ? {
+            theme: args[0],
+            themeConfig: args[1] as string
+          }
+        : args[0]
+
+    const nextraPlugin = new NextraPlugin(nextraConfig)
+    const { i18n, pageExtensions = DEFAULT_EXTENSIONS } = nextConfig
+
+    if (i18n?.locales) {
+      console.log(
+        '[nextra] You have Next.js i18n enabled, read here https://nextjs.org/docs/advanced-features/i18n-routing for the docs.'
+      )
+    } else if (!i18n?.defaultLocale) {
+      // If `i18n.locales` and `i18n.defaultLocale` were not specified,
+      // client will receive error - Text content does not match server-rendered HTML.
+      // Due to `const { locales } = useRouter()` where `locales` will be `undefined`
+      // To fix it we need to explicitly specify `i18n.locales` and `i18n.defaultLocale`
+      nextConfig.i18n = {
+        ...i18n,
+        locales: ['en-US'],
+        defaultLocale: 'en-US'
+      }
+    }
+
+    return {
+      ...nextConfig,
+      pageExtensions: [...pageExtensions, ...MARKDOWN_EXTENSIONS],
+      webpack(config, options) {
+        config.plugins ||= []
+        config.plugins.push(nextraPlugin)
+
+        config.module.rules.push({
+          test: MARKDOWN_EXTENSION_REGEX,
+          use: [
+            options.defaultLoaders.babel,
+            {
+              loader: 'nextra/loader',
+              options: <LoaderOptions>{
+                ...nextraConfig,
+                locales: nextConfig.i18n?.locales,
+                defaultLocale: nextConfig.i18n?.defaultLocale,
+                pageMapCache
+              }
+            }
+          ]
+        })
+
+        if (typeof nextConfig.webpack === 'function') {
+          return nextConfig.webpack(config, options)
+        }
+
+        return config
+      }
+    }
+  }
+
+module.exports = nextra

packages/nextra/src/types.ts

@@ -1,3 +1,4 @@
+import { NextConfig } from 'next'
 import { Heading as MDASTHeading } from 'mdast'
 import { ProcessorOptions } from '@mdx-js/mdx'
 import { Options as RehypePrettyCodeOptions } from 'rehype-pretty-code'
@@ -57,8 +58,6 @@ export type NextraConfig = {
   }
 }
 
-export type withNextra = (
+export type Nextra = (
   ...args: [NextraConfig] | [theme: Theme, themeConfig: string]
-) => (nextConfig: Record<string, any>) => {}
-
-export default withNextra
+) => (nextConfig: NextConfig) => NextConfig