@primer/doctocat-nextjs 0.8.1-rc.bc6f4fb → 0.9.0-rc.f3a7116

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @primer/doctocat-nextjs
 
+## 0.9.0
+
+### Minor Changes
+
+- [#87](https://github.com/primer/doctocat-nextjs/pull/87) [`7a28f1d`](https://github.com/primer/doctocat-nextjs/commit/7a28f1d707bcfd54b95d16d74e3bdea96eae252c) Thanks [@rezrah](https://github.com/rezrah)! - Upgrades Next.js and Nextra.
+  - **Next.js version >= v16.x is now required**. v15.x is no longer supported.
+  - `nextra` version is now `4.6.x`
+
 ## 0.8.1
 
 ### Patch Changes

package/components/layout/code-block/CodeBlock.tsx

@@ -1,7 +1,6 @@
 'use client'
 import React, {PropsWithChildren} from 'react'
 import dynamic from 'next/dynamic'
-import {renderToStaticMarkup} from 'react-dom/server'
 
 import {Pre} from 'nextra/components'
 import {Box, Stack, Text} from '@primer/react-brand'
@@ -34,42 +33,6 @@ type CodeBlockProps = {
 
 export function CodeBlock(props: CodeBlockProps) {
   if (['tsx', 'jsx'].includes(props['data-language'])) {
-    // Next.js v15.4+ will lazy render components on the server, which prevents us from
-    // sending usable React nodes to the ReactCodeBlock component.
-    // Workaround is to convert the code snippets to string on the client and pass to react-live.
-
-    // suppresses compilation warnings
-    if (typeof window !== 'undefined') {
-      try {
-        const childrenAsString = renderToStaticMarkup(<>{props.children}</>)
-
-        // Extract text content using browser's HTML parser (immune to regex bypass attacks)
-        const cleanHtmlTag = (str: string): string => {
-          const parser = new DOMParser()
-          const doc = parser.parseFromString(str, 'text/html')
-          return doc.body.textContent || doc.body.innerText || ''
-        }
-
-        const textContent = cleanHtmlTag(childrenAsString)
-
-        // Restore escaped chars
-        const decodedText = textContent
-          .replace(/&lt;/g, '<')
-          .replace(/&gt;/g, '>')
-          .replace(/&quot;/g, '"')
-          .replace(/&#x27;/g, "'")
-          .replace(/&amp;/g, '&')
-
-        return <ReactCodeBlock {...props} code={decodedText} />
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.log('Error extracting code snippet. Forwarding children directly:', error)
-        // Fallback to original children-based approach
-        return <ReactCodeBlock {...props} />
-      }
-    }
-
-    // During SSR/build, use children-based approach
     return <ReactCodeBlock {...props} />
   }
 

package/components/layout/code-block/ReactCodeBlock.tsx

@@ -18,7 +18,6 @@ const COLLAPSE_HEIGHT = 400 // TODO: Hoist this to config to make user customiza
 type ReactCodeBlockProps = {
   'data-language': string
   'data-filename'?: string
-  code?: string
   jsxScope: Record<string, unknown>
 } & PropsWithChildren<HTMLElement>
 
@@ -35,8 +34,9 @@ export function ReactCodeBlock(props: ReactCodeBlockProps) {
   const uniqueId = useId()
   const {colorMode, setColorMode} = useColorMode()
   const {basePath} = useConfig()
-  const initialCode = props.code || getCodeFromChildren(props.children)
-  const [code, setCode] = useState(initialCode)
+  const codeSourceRef = useRef<HTMLDivElement>(null)
+  const [code, setCode] = useState<string>('')
+  const [isReady, setIsReady] = useState(false)
   const rootRef = useRef<HTMLDivElement>(null)
   const [isCodePaneCollapsed, setIsCodePaneCollapsed] = useState<boolean | null>(null)
   const [initialPosition, setInitialPosition] = useState<number | null>(null)
@@ -44,6 +44,16 @@ export function ReactCodeBlock(props: ReactCodeBlockProps) {
   const resetButtonRef = useRef<HTMLButtonElement>(null)
   const shouldShowPreview = ['tsx', 'jsx'].includes(props['data-language'])
 
+  useEffect(() => {
+    if (codeSourceRef.current && !isReady) {
+      const textContent = codeSourceRef.current.textContent || ''
+      if (textContent) {
+        setCode(textContent)
+        setIsReady(true)
+      }
+    }
+  }, [isReady, props.children])
+
   // scroll back to the initial y pos on collapse state change
   useEffect(() => {
     if (rootRef.current && initialPosition === null) {
@@ -71,8 +81,10 @@ export function ReactCodeBlock(props: ReactCodeBlockProps) {
   )
 
   const handleReset = useCallback(() => {
-    setCode(initialCode)
-  }, [initialCode, setCode])
+    if (codeSourceRef.current) {
+      setCode(codeSourceRef.current.textContent || '')
+    }
+  }, [])
 
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(code)
@@ -132,88 +144,77 @@ export function ReactCodeBlock(props: ReactCodeBlockProps) {
 
   return (
     <>
-      <LiveProvider transformCode={transformCodeWithBasePath} code={code} scope={props.jsxScope} noInline={noInline}>
-        <div ref={rootRef} className={clsx(styles.CodeBlock, 'custom-component')}>
-          {shouldShowPreview && (
-            <div>
-              <div className={styles.colorModeMenu}>
-                <ActionBar aria-label="Toolbar">
-                  {colorModes.map((mode, index) => {
-                    const Icon = mode === 'light' ? SunIcon : MoonIcon
-                    return (
-                      <ActionBar.IconButton
-                        className={clsx(styles.colorModeButton, colorMode === mode && styles.colorModeButtonActive)}
-                        key={`color-mode-${mode}-${index}`}
-                        icon={Icon}
-                        aria-label={mode}
-                        onClick={() => setColorMode(mode)}
-                      />
-                    )
-                  })}
-                </ActionBar>
-              </div>
-              <ThemeProvider colorMode={colorMode}>
-                <div className="custom-component">
-                  <LivePreview className={styles.Preview} />
+      {/* Hidden el to render children and extract text content */}
+      <div ref={codeSourceRef} style={{display: 'none'}} aria-hidden="true">
+        {props.children}
+      </div>
+      {isReady && (
+        <LiveProvider transformCode={transformCodeWithBasePath} code={code} scope={props.jsxScope} noInline={noInline}>
+          <div ref={rootRef} className={clsx(styles.CodeBlock, 'custom-component')}>
+            {shouldShowPreview && (
+              <div>
+                <div className={styles.colorModeMenu}>
+                  <ActionBar aria-label="Toolbar">
+                    {colorModes.map((mode, index) => {
+                      const Icon = mode === 'light' ? SunIcon : MoonIcon
+                      return (
+                        <ActionBar.IconButton
+                          className={clsx(styles.colorModeButton, colorMode === mode && styles.colorModeButtonActive)}
+                          key={`color-mode-${mode}-${index}`}
+                          icon={Icon}
+                          aria-label={mode}
+                          onClick={() => setColorMode(mode)}
+                        />
+                      )
+                    })}
+                  </ActionBar>
                 </div>
-              </ThemeProvider>
-            </div>
-          )}
-          <div className={styles.Toolbar}>
-            <Button size="small" leadingVisual={CopyIcon} onClick={handleCopy}>
-              Copy
-            </Button>
-            <Button size="small" leadingVisual={UndoIcon} onClick={handleReset} ref={resetButtonRef}>
-              Reset
-            </Button>
-          </div>
-          <div className={styles.EditorWrapper}>
-            <div
-              className={clsx(styles.Editor, isCodePaneCollapsed && styles['Editor--is-collapsed'])}
-              ref={editorRef}
-              id={`${uniqueId}-code-editor-content`}
-            >
-              <LiveEditor theme={colorMode === 'light' ? lightTheme : darkTheme} onChange={setCode} />
+                <ThemeProvider colorMode={colorMode}>
+                  <div className="custom-component">
+                    <LivePreview className={styles.Preview} />
+                  </div>
+                </ThemeProvider>
+              </div>
+            )}
+            <div className={styles.Toolbar}>
+              <Button size="small" leadingVisual={CopyIcon} onClick={handleCopy}>
+                Copy
+              </Button>
+              <Button size="small" leadingVisual={UndoIcon} onClick={handleReset} ref={resetButtonRef}>
+                Reset
+              </Button>
             </div>
-            {shouldShowCollapse && (
-              <button
-                className={clsx(styles.collapseButton, isCodePaneCollapsed && styles['collapseButton--collapsed'])}
-                onClick={handleCollapsibleCodePane}
-                aria-expanded={!isCodePaneCollapsed}
-                aria-controls={`${uniqueId}-code-editor-content`}
-                aria-label={isCodePaneCollapsed ? 'Show full code block' : 'Collapse code block'}
+            <div className={styles.EditorWrapper}>
+              <div
+                className={clsx(styles.Editor, isCodePaneCollapsed && styles['Editor--is-collapsed'])}
+                ref={editorRef}
+                id={`${uniqueId}-code-editor-content`}
               >
-                <Text size="100" className={styles.collapseLabel}>
-                  {isCodePaneCollapsed ? 'Show full code' : 'Collapse code'}
-                </Text>
-                <Text variant="muted">{isCodePaneCollapsed ? <UnfoldIcon /> : <FoldIcon />}</Text>
-              </button>
+                <LiveEditor theme={colorMode === 'light' ? lightTheme : darkTheme} onChange={setCode} />
+              </div>
+              {shouldShowCollapse && (
+                <button
+                  className={clsx(styles.collapseButton, isCodePaneCollapsed && styles['collapseButton--collapsed'])}
+                  onClick={handleCollapsibleCodePane}
+                  aria-expanded={!isCodePaneCollapsed}
+                  aria-controls={`${uniqueId}-code-editor-content`}
+                  aria-label={isCodePaneCollapsed ? 'Show full code block' : 'Collapse code block'}
+                >
+                  <Text size="100" className={styles.collapseLabel}>
+                    {isCodePaneCollapsed ? 'Show full code' : 'Collapse code'}
+                  </Text>
+                  <Text variant="muted">{isCodePaneCollapsed ? <UnfoldIcon /> : <FoldIcon />}</Text>
+                </button>
+              )}
+            </div>
+            {shouldShowPreview && (
+              <div className={styles.Error}>
+                <LiveError />
+              </div>
             )}
           </div>
-          {shouldShowPreview && (
-            <div className={styles.Error}>
-              <LiveError />
-            </div>
-          )}
-        </div>
-      </LiveProvider>
+        </LiveProvider>
+      )}
     </>
   )
 }
-
-/**
- * Helper function to turn Nextra <code> children into plain text
- */
-function getCodeFromChildren(children: React.ReactNode) {
-  const extractText = (node: React.ReactNode): string => {
-    if (typeof node === 'string') return node
-    if (Array.isArray(node)) return node.map(extractText).join('')
-    if (React.isValidElement(node)) {
-      const element = node as React.ReactElement<{children?: React.ReactNode}>
-      return extractText(element.props.children)
-    }
-    return ''
-  }
-
-  return extractText(children)
-}

package/components/layout/nav-drawer/useNavDrawerState.ts

@@ -24,7 +24,6 @@ export function useNavDrawerState(breakpoint: string | number): [boolean, (value
 
   useEffect(() => {
     if (isOpen) {
-      // eslint-disable-next-line github/prefer-observers
       window.addEventListener('resize', debouncedOnResize)
       return () => {
         // cancel any debounced invocation of the resize handler

package/components/layout/root-layout/Theme.module.css

@@ -12,6 +12,7 @@
 
 .BreadcrumbRoot,
 .BreadcrumbItem {
+  --fgColor-link: var(--brand-InlineLink-color-rest);
   color: var(--brand-InlineLink-color-rest);
 }
 
@@ -24,12 +25,10 @@
   width: 100%;
 }
 
-
 .ActionsWrapper {
   padding-block-start: var(--base-size-16);
 }
 
-
 .RelatedLinks {
   padding-top: var(--base-size-20);
 }

package/components/layout/root-layout/Theme.tsx

@@ -43,7 +43,6 @@ const repoSrcPath = process.env.NEXT_PUBLIC_REPO_SRC_PATH || ''
 const repoURL = process.env.NEXT_PUBLIC_REPO || ''
 
 if (!repoURL) {
-  // eslint-disable-next-line no-console
   console.warn(
     'NEXT_PUBLIC_REPO is not set. Edit the .env.local file to set the NEXT_PUBLIC_REPO environment variable.',
   )
@@ -75,7 +74,6 @@ export function Theme({pageMap, children}: ThemeProps) {
     [pageMap, fsPath],
   )
 
-  // eslint-disable-next-line i18n-text/no-en
   const siteTitle = process.env.NEXT_PUBLIC_SITE_TITLE || 'Example Site'
   const {headerLinks} = useConfig()
   const activeHeaderLink = headerLinks.find(link => link.isActive)

package/components/layout/sidebar/Sidebar.tsx

@@ -56,8 +56,7 @@ export function Sidebar({pageMap}: SidebarProps) {
       )}
       <NavList className={styles.NavList} aria-labelledby="nav-list-heading">
         {reorderedPageMap.map(item => {
-          if (item.hasOwnProperty('data')) return null
-
+          if (Object.hasOwn(item, 'data')) return null
           if (!hasChildren(item)) return null
 
           const indexPage = (item as Folder).children.find(child => (child as MdxFile).name === 'index') as MdxFile

package/css/prose.module.css

@@ -172,35 +172,11 @@
 
 .Prose a:not(:global(.custom-component) a),
 .Prose a:-webkit-any-link:not(:global(.custom-component) a:-webkit-any-link) {
+  --fgColor-accent: var(--brand-InlineLink-color-rest);
   color: var(--brand-InlineLink-color-rest);
-  position: relative;
-}
-
-.Prose a:hover:not(:global(.custom-component) a:hover) {
   text-decoration: underline;
 }
 
-.Prose a::after:not(:global(.custom-component) a::after) {
-  content: '';
-  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-InlineLink-color-rest);
-  height: 0;
-  transition: var(--brand-InlineLink-transition-timing) transform;
-  transform: scaleY(var(--brand-InlineLink-transition-scale-start));
-  transform-origin: 50% 100%;
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
-.Prose a:hover::after:not(:global(.custom-component) a:hover::after) {
-  transform: scaleY(var(--brand-InlineLink-transition-scale-end));
-}
-
-.Prose a:active::after:not(:global(.custom-component) a:active::after) {
-  border-color: var(--brand-InlineLink-color-pressed);
-}
-
 .Prose code:not(:global(.custom-component) code) {
   font-family: var(--brand-fontStack-monospace);
   font-size: var(--brand-text-size-100);

package/eslint.config.js

@@ -0,0 +1,18 @@
+import baseConfig from '../../eslint.config.js'
+import reactHooksPlugin from 'eslint-plugin-react-hooks'
+
+export default [
+  ...baseConfig,
+
+  // React Hooks rules
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    plugins: {
+      'react-hooks': reactHooksPlugin,
+    },
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+    },
+  },
+]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.8.1-rc.bc6f4fb",
+  "version": "0.9.0-rc.f3a7116",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "type": "module",
@@ -10,7 +10,7 @@
   },
   "scripts": {
     "check": "tsc --noEmit",
-    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0 --config ./.eslintrc.cjs",
+    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:no-watch": "vitest run",
@@ -20,19 +20,20 @@
   "license": "MIT",
   "peerDependencies": {
     "@primer/react-brand": ">=0.54.0",
-    "next": "^15.0.0",
+    "next": "^16.0.0",
     "react": ">=18.0.0 <20.0.0",
     "react-dom": ">=18.0.0 <20.0.0"
   },
   "dependencies": {
-    "@next/mdx": "15.5.7",
+    "@next/mdx": "16.1.6",
     "@primer/octicons-react": "19.15.1",
     "@primer/react": "^38.3.0",
     "@types/lodash.debounce": "^4.0.9",
     "framer-motion": "12.23.24",
     "lodash.debounce": "^4.0.8",
-    "nextra": "4.4.0",
+    "nextra": "4.6.1",
     "react-focus-on": "^3.10.0",
+    "react-is": "^19.2.0",
     "react-live": "^4.1.8"
   },
   "devDependencies": {
@@ -49,7 +50,7 @@
     "@vitest/ui": "^3.2.4",
     "clsx": "2.1.1",
     "jsdom": "^26.0.1",
-    "next": "15.5.7",
+    "next": "16.1.6",
     "styled-components": "5.3.11",
     "vitest": "^3.2.4"
   }