fix hydration for default gitTimestamp component (#1119)

.changeset/rare-flies-check.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+fix hydration for default `gitTimestamp` component

examples/blog/theme.config.jsx

@@ -9,7 +9,10 @@ export default {
       >
         CC BY-NC 4.0
       </abbr>{' '}
-      <time>{new Date().getFullYear()}</time> © Shu Ding.
+      <time dateTime={new Date().toISOString()}>
+        {new Date().getFullYear()}
+      </time>{' '}
+      © Shu Ding.
       <a href="/feed.xml">RSS</a>
       <style jsx>{`
         a {
@@ -23,5 +26,5 @@ export default {
         }
       `}</style>
     </small>
-  ),
+  )
 }

examples/swr-site/theme.config.tsx

@@ -121,7 +121,6 @@ const config: DocsThemeConfig = {
       );
     },
   },
-  gitTimestamp: ({ timestamp }) => <>Last updated on {timestamp.toString()}</>,
   head() {
     const config = useConfig();
     const description =

packages/nextra-theme-docs/src/constants.tsx

@@ -55,11 +55,13 @@ export const DEFAULT_THEME: DocsThemeConfig = {
     return (
       <>
         Last updated on{' '}
-        {timestamp.toLocaleDateString(locale, {
-          day: 'numeric',
-          month: 'long',
-          year: 'numeric'
-        })}
+        <time dateTime={timestamp.toISOString()}>
+          {timestamp.toLocaleDateString(locale, {
+            day: 'numeric',
+            month: 'long',
+            year: 'numeric'
+          })}
+        </time>
       </>
     )
   },

packages/nextra-theme-docs/src/index.tsx

@@ -6,9 +6,17 @@ import { useRouter } from 'next/router'
 import 'focus-visible'
 import cn from 'clsx'
 import { MDXProvider } from '@mdx-js/react'
+import { useMounted } from 'nextra/hooks'
 
 import './polyfill'
-import { Head, NavLinks, Sidebar, SkipNavContent, Breadcrumb, Banner } from './components'
+import {
+  Head,
+  NavLinks,
+  Sidebar,
+  SkipNavContent,
+  Breadcrumb,
+  Banner
+} from './components'
 import { getComponents } from './mdx-components'
 import { ActiveAnchorProvider, ConfigProvider, useConfig } from './contexts'
 import { DEFAULT_LOCALE } from './constants'
@@ -46,6 +54,7 @@ const Body = ({
   children
 }: BodyProps): ReactElement => {
   const config = useConfig()
+  const mounted = useMounted()
 
   if (themeContext.layout === 'raw') {
     return <div className="nx-w-full nx-overflow-x-hidden">{children}</div>
@@ -56,13 +65,15 @@ const Body = ({
       ? new Date(timestamp)
       : null
 
-  const gitTimestampEl = date ? (
-    <div className="nx-mt-12 nx-mb-8 nx-block nx-text-xs nx-text-gray-500 ltr:nx-text-right rtl:nx-text-left dark:nx-text-gray-400">
-      {renderComponent(config.gitTimestamp, { timestamp: date })}
-    </div>
-  ) : (
-    <div className="nx-mt-16" />
-  )
+  const gitTimestampEl =
+    // Because a user's time zone may be different from the server page
+    mounted && date ? (
+      <div className="nx-mt-12 nx-mb-8 nx-block nx-text-xs nx-text-gray-500 ltr:nx-text-right rtl:nx-text-left dark:nx-text-gray-400">
+        {renderComponent(config.gitTimestamp, { timestamp: date })}
+      </div>
+    ) : (
+      <div className="nx-mt-16" />
+    )
 
   const content = (
     <>