Fix next export (shuding#655)

* fix `next export` command * replace `classnames` package with `clsx` as he's faster (shuding#656) * remove `locale` prop from theme config, forbid passing `locale` prop in `renderComponent()` (shuding#658) * remove `locale` prop from theme config, forbid passing in `renderComponent` * fix ci * fix `Warning: Prop `href` did not match. Server: "#" Client: ...` (shuding#659) * update snapshots * update tests * fix `Hydration failed because the initial UI...` while adding custom `404.mdx`/`500.mdx` custom error pages (shuding#607) * fix * even yet better! * remove unused things * fix hasTitle * move notFoundLink and serverSideErrorLink directly to components * rebase fixes * fix type check
tatukoivisto · Aug 9, 2022 · a917a91 · a917a91
1 parent 8f2a2d1
commit a917a91
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 40 deletions.
diff --git a/__test__/__snapshots__/compile.test.ts.snap b/__test__/__snapshots__/compile.test.ts.snap
@@ -41,7 +41,7 @@ exports[`process heading > code-h1 1`] = `
   ],
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"@mdx-js/react\\";
-const titleText = \\"codegen.yml\\";
+const __nextra_title__ = \\"codegen.yml\\";
 function _createMdxContent(props) {
   const _components = Object.assign({
     h1: \\"h1\\",
@@ -116,7 +116,7 @@ exports[`process heading > code-with-text-h1 1`] = `
   ],
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"@mdx-js/react\\";
-const titleText = \\"codegen.yml file\\";
+const __nextra_title__ = \\"codegen.yml file\\";
 function _createMdxContent(props) {
   const _components = Object.assign({
     h1: \\"h1\\",
@@ -213,7 +213,7 @@ exports[`process heading > dynamic-h1 1`] = `
   ],
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"@mdx-js/react\\";
-const titleText = \\"Posts Tagged with “”\\";
+const __nextra_title__ = \\"Posts Tagged with “”\\";
 import {useRouter} from 'next/router';
 export const TagName = () => {
   const {tag} = useRouter().query;
@@ -333,7 +333,7 @@ exports[`process heading > static-h1 1`] = `
   ],
   "result": "/*@jsxRuntime automatic @jsxImportSource react*/
 import {useMDXComponents as _provideComponents} from \\"@mdx-js/react\\";
-const titleText = \\"Hello World\\";
+const __nextra_title__ = \\"Hello World\\";
 function _createMdxContent(props) {
   const _components = Object.assign({
     h1: \\"h1\\"

diff --git a/__test__/__snapshots__/page-map.test.ts.snap b/__test__/__snapshots__/page-map.test.ts.snap
@@ -3,6 +3,16 @@
 exports[`Page Process > pageMap en-US 1`] = `
 [
   [
+    {
+      "locale": "",
+      "name": "404",
+      "route": "/404",
+    },
+    {
+      "locale": "",
+      "name": "500",
+      "route": "/500",
+    },
     {
       "children": [
         {
@@ -77,6 +87,11 @@ exports[`Page Process > pageMap en-US 1`] = `
     },
     {
       "children": [
+        {
+          "locale": "en-US",
+          "name": "404-500",
+          "route": "/docs/404-500",
+        },
         {
           "children": [
             {
@@ -197,6 +212,7 @@ exports[`Page Process > pageMap en-US 1`] = `
               "title": "Advanced",
               "type": "separator",
             },
+            "404-500": "404/500 Custom Error Pages",
             "advanced": {
               "title": "Advanced",
             },
@@ -373,6 +389,15 @@ exports[`Page Process > pageMap en-US 1`] = `
     {
       "locale": "en-US",
       "meta": {
+        "404": {
+          "type": "page",
+        },
+        "500": {
+          "theme": {
+            "layout": "full",
+          },
+          "type": "page",
+        },
         "about": {
           "items": {
             "a-page": {
@@ -663,6 +688,11 @@ exports[`Page Process > pageMap zh-CN 1`] = `
           "name": "with-nextjs",
           "route": "/docs/with-nextjs",
         },
+        {
+          "locale": "en-US",
+          "name": "404-500",
+          "route": "/docs/404-500",
+        },
         {
           "locale": "en-US",
           "name": "advanced",
@@ -775,6 +805,16 @@ exports[`Page Process > pageMap zh-CN 1`] = `
       },
       "name": "meta.json",
     },
+    {
+      "locale": "",
+      "name": "404",
+      "route": "/404",
+    },
+    {
+      "locale": "",
+      "name": "500",
+      "route": "/500",
+    },
     {
       "frontMatter": {
         "searchable": false,

diff --git a/src/compile.ts b/src/compile.ts
@@ -67,13 +67,13 @@ export async function compileMdx(
         rehypePrettyCode,
         { ...rehypePrettyCodeOptions, ...mdxOptions.rehypePrettyCodeOptions }
       ],
-      [rehypeMdxTitle, { name: 'titleText' }],
+      [rehypeMdxTitle, { name: '__nextra_title__' }],
       attachMeta
     ].filter(Boolean)
   })
   try {
     const result = String(await compiler.process(source))
-      .replace('export const titleText =', 'const titleText =')
+      .replace('export const __nextra_title__', 'const __nextra_title__')
       .replace('export default MDXContent;', '')
 
     return {

diff --git a/src/index.js b/src/index.js
@@ -15,35 +15,27 @@ const nextra = (...config) =>
         : config[0]
 
     const nextraPlugin = new NextraPlugin(nextraConfig)
-    const { pageExtensions = DEFAULT_EXTENSIONS } = nextConfig
 
     if (nextConfig.i18n?.locales) {
       console.log(
         '[nextra] You have Next.js i18n enabled, read here https://nextjs.org/docs/advanced-features/i18n-routing for the docs.'
       )
     }
 
-    // If `i18n.locales` and `i18n.defaultLocale` were not specified,
-    // client will receive error - Text content does not match server-rendered HTML.
-    // Due to `const { locale } = useRouter()` where `locale` will be `undefined`
-    // To fix it we need to explicitly specify `i18n.locales` and `i18n.defaultLocale`
-    const i18n = {
-      locales: nextConfig.i18n?.locales || [DEFAULT_LOCALE],
-      defaultLocale: nextConfig.i18n?.defaultLocale || DEFAULT_LOCALE
-    }
-
     return {
       ...nextConfig,
-      i18n,
-      pageExtensions: [...pageExtensions, ...MARKDOWN_EXTENSIONS],
+      pageExtensions: [
+        ...(nextConfig.pageExtensions || DEFAULT_EXTENSIONS),
+        ...MARKDOWN_EXTENSIONS
+      ],
       webpack(config, options) {
         config.plugins ||= []
         config.plugins.push(nextraPlugin)
 
         const nextraLoaderOptions = {
           ...nextraConfig,
-          locales: i18n.locales,
-          defaultLocale: i18n.defaultLocale,
+          locales: nextConfig.i18n?.locales || [DEFAULT_LOCALE],
+          defaultLocale: nextConfig.i18n?.defaultLocale || DEFAULT_LOCALE,
           pageMapCache,
           newNextLinkBehavior: nextConfig.experimental?.newNextLinkBehavior
         }

diff --git a/src/loader.ts b/src/loader.ts
@@ -56,7 +56,7 @@ async function loader(
   source: string
 ): Promise<string> {
   const { resourcePath } = context
-  let {
+  const {
     pageImport,
     theme,
     themeConfig,
@@ -74,7 +74,6 @@ async function loader(
   if (!theme) {
     throw new Error('No Nextra theme found!')
   }
-  const themeIncludeStyles = OFFICIAL_THEMES.includes(theme)
 
   if (resourcePath.includes('/pages/api/')) {
     console.warn(
@@ -117,11 +116,14 @@ async function loader(
     },
     resourcePath
   )
+  const cssImport = OFFICIAL_THEMES.includes(theme)
+    ? `import '${theme}/style.css'`
+    : ''
 
   // Imported as a normal component, no need to add the layout.
   if (!pageImport) {
     return `
-${themeIncludeStyles ? `import '${theme}/style.css'` : ''}
+${cssImport}
 ${result}
 export default MDXContent`.trimStart()
   }
@@ -163,8 +165,10 @@ export default MDXContent`.trimStart()
   const layout =
     theme.startsWith('.') || theme.startsWith('/') ? path.resolve(theme) : theme
 
-  const layoutConfig = themeConfig ? slash(path.resolve(themeConfig)) : ''
-  const pageOpts: Omit<PageOpts, 'titleText'> = {
+  const themeConfigImport = themeConfig
+    ? `import __nextra_themeConfig__ from '${slash(path.resolve(themeConfig))}'`
+    : ''
+  const pageOpts: Omit<PageOpts, 'title'> = {
     filename: slash(filename),
     route: slash(route),
     meta,
@@ -189,36 +193,35 @@ export default MDXContent`.trimStart()
 
   return `
 import { SSGContext as __nextra_SSGContext__ } from 'nextra/ssg'
-
 import __nextra_withLayout__ from '${layout}'
-${themeIncludeStyles ? `import '${layout}/style.css'` : ''}
-${layoutConfig ? `import __nextra_layoutConfig__ from '${layoutConfig}'` : ''}
+${themeConfigImport}
+${cssImport}
 
 ${result}
 
 const __nextra_pageOpts__ = ${JSON.stringify(pageOpts)}
 
 globalThis.__nextra_internal__ = {
   pageMap: __nextra_pageOpts__.pageMap,
-  route: __nextra_pageOpts__.route,
+  route: __nextra_pageOpts__.route
 }
 
-function Content(props) {
-  return (
-    <__nextra_SSGContext__.Provider value={props}>
-      <MDXContent />
-    </__nextra_SSGContext__.Provider>
-  )
-}
+const Content = props => (
+  <__nextra_SSGContext__.Provider value={props}>
+    <MDXContent />
+  </__nextra_SSGContext__.Provider>
+)
 
 export default __nextra_withLayout__(
   ${JSON.stringify(pageNextRoute)},
   Content,
   {
-    titleText: typeof titleText === 'string' ? titleText : undefined,
+    title: __nextra_pageOpts__.meta.title
+      || (typeof __nextra_title__ === 'string' && __nextra_title__)
+      || 'Untitled',
     ...__nextra_pageOpts__
   },
-  ${layoutConfig ? '__nextra_layoutConfig__' : 'null'},
+  ${themeConfigImport ? '__nextra_themeConfig__' : 'null'},
 )`.trimStart()
 }
 

diff --git a/src/locales.ts b/src/locales.ts
@@ -20,7 +20,9 @@ export function locales(request: NextRequest) {
   const shouldHandleLocale =
     !/^\/(api|_next)\//.test(nextUrl.pathname) &&
     !/\.(jpe?g|svg|png|webmanifest)$/.test(nextUrl.pathname) &&
-    nextUrl.locale !== ''
+    nextUrl.locale !== '' &&
+    // not Server-Side Error page
+    nextUrl.pathname !== '/500'
 
   if (!shouldHandleLocale) return
 

diff --git a/src/types.ts b/src/types.ts
@@ -52,7 +52,7 @@ export type PageOpts = {
   route: string
   meta: GrayMatterFile<string>['data']
   pageMap: PageMapItem[]
-  titleText?: string
+  title: string
   headings: Heading[]
   hasJsxInH1?: boolean
   timestamp?: number