Move index to app router

src/app/(main)/layout.tsx

@@ -1,29 +1,19 @@
-// @ts-expect-error: we want to import the same version as Nextra for the main page
-import { ThemeProvider } from "next-themes"
+import { ReactElement, ReactNode } from "react"
 
-import { Footer } from "../../components/footer"
-import { NewFontsStyleTag } from "../fonts"
-import { Navbar } from "../../components/navbar/navbar"
-import { topLevelNavbarItems } from "../../components/navbar/top-level-items"
-import { MenuProvider } from "./menu-provider"
+import { Footer } from "@/components/footer"
+import { Navbar } from "@/components/navbar/navbar"
+import { topLevelNavbarItems } from "@/components/navbar/top-level-items"
 
 export default function MainLayout({
   children,
 }: {
-  children: React.ReactNode
-}) {
+  children: ReactNode
+}): ReactElement {
   return (
     <>
-      <NewFontsStyleTag />
-      <ThemeProvider attribute="class">
-        <MenuProvider>
-          <Navbar items={topLevelNavbarItems} />
-          <div className="isolate bg-neu-0 text-neu-900 antialiased">
-            {children}
-          </div>
-          <Footer />
-        </MenuProvider>
-      </ThemeProvider>
+      <Navbar items={topLevelNavbarItems} />
+      {children}
+      <Footer />
     </>
   )
 }

src/app/(main)/page.tsx

@@ -0,0 +1,10 @@
+import type { Metadata } from "next"
+import { IndexPage } from "../../components/index-page"
+
+export const metadata: Metadata = {
+  title: "GraphQL | A query language for your API",
+}
+
+export default function Page() {
+  return <IndexPage />
+}

src/app/conf/2023/layout.tsx

@@ -4,7 +4,7 @@ import { Header } from "../_components/header"
 import { Footer } from "../_components/footer"
 import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
 import NextLink from "next/link"
-import { OldFontsStyleTag } from "../../fonts/old-fonts"
+import { OldFontsStyleTag } from "../../../fonts/old-fonts"
 
 export const metadata = {
   description:

src/app/conf/2024/layout.tsx

@@ -4,7 +4,7 @@ import { Header } from "../_components/header"
 import { Footer } from "../_components/footer"
 import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
 import NextLink from "next/link"
-import { OldFontsStyleTag } from "../../fonts/old-fonts"
+import { OldFontsStyleTag } from "@/app/fonts/old-fonts"
 
 export const metadata = {
   description:

src/app/conf/2025/components/testimonials/index.tsx

@@ -115,8 +115,7 @@ export function TestimonialAuthor({
           width={128}
           height={128}
           className="size-16 saturate-[.1] dark:opacity-90 xl:size-32"
-          // @ts-expect-error React doesn't know it exists yet, but @types/react do
-          fetchpriority="low"
+          fetchPriority="low"
           loading="lazy"
         />
         <div className="absolute inset-0 z-[1] bg-pri-darker opacity-80 mix-blend-plus-lighter dark:mix-blend-color" />

src/app/conf/2025/layout.tsx

@@ -2,13 +2,13 @@ import { ReactElement, ReactNode } from "react"
 import { Metadata } from "next"
 
 import { NewFontsStyleTag } from "../../fonts"
-import "../../colors.css"
+
+import "@/app/colors.css"
+import "./conf.css"
 
 import { Navbar } from "./components/navbar"
 import { Footer } from "./components/footer"
 
-// @ts-expect-error: we want to import the same version as Nextra for the main page
-import { ThemeProvider } from "next-themes"
 import { GraphQLConfLogoLink } from "./components/graphql-conf-logo-link"
 import { GALLERY_LINK } from "./links"
 
@@ -52,9 +52,7 @@ export default function Layout({
           { children: "FAQ", href: "/conf/2025/#faq" },
         ]}
       />
-      <ThemeProvider attribute="class">
-        <div className="bg-neu-0 text-neu-900 antialiased">{children}</div>
-      </ThemeProvider>
+      <div className="bg-neu-0 text-neu-900 antialiased">{children}</div>
       <Footer
         logo={<GraphQLConfLogoLink year={2025} />}
         links={[

src/app/layout.tsx

@@ -1,9 +1,15 @@
 import { ReactElement, ReactNode } from "react"
-import { Metadata } from "next"
+import type { Metadata } from "next"
 import GoogleAnalytics from "@/app/ga"
 
-import "../conf.css"
-import "../globals.css"
+// @ts-expect-error: we want to import the same version as Nextra for the main page
+import { ThemeProvider } from "next-themes"
+
+import { NewFontsStyleTag } from "./fonts"
+import { MenuProvider } from "./(main)/menu-provider"
+
+import "@/globals.css"
+import "@/app/colors.css"
 
 export const metadata: Metadata = {
   twitter: {
@@ -36,7 +42,14 @@ export default function RootLayout({
       </head>
       <body className="bg-neu-0">
         <GoogleAnalytics />
-        {children}
+        <NewFontsStyleTag />
+        <ThemeProvider attribute="class">
+          <MenuProvider>
+            <div className="isolate bg-neu-0 text-neu-900 antialiased">
+              {children}
+            </div>
+          </MenuProvider>
+        </ThemeProvider>
       </body>
     </html>
   )

src/app/not-found.tsx

@@ -3,14 +3,14 @@
 import { usePathname } from "next/navigation"
 import { useMounted } from "nextra/hooks"
 
+import { Footer } from "@/components/footer"
+import { Navbar } from "@/components/navbar/navbar"
+import { topLevelNavbarItems } from "@/components/navbar/top-level-items"
+
 import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 import stripesMask from "@/components/404-page/image.webp"
 
 import { Button } from "./conf/_design-system/button"
-import MainLayout from "./(main)/layout"
-
-import "@/globals.css"
-import "@/app/colors.css"
 
 export default function NotFoundPage() {
   const pathname = usePathname()
@@ -31,7 +31,16 @@ export default function NotFoundPage() {
   }/issues/new?title=${encodeURIComponent(title)}&labels=${labels}`
 
   return (
-    <MainLayout>
+    <>
+      {/*
+        No support for metadata in not-found.tsx yet
+        https://github.com/vercel/next.js/pull/47328#issuecomment-1488891093
+      */}
+      <title>
+        Not Found | Please click the button to file a broken-link issue if this
+        should be a valid route.
+      </title>
+      <Navbar items={topLevelNavbarItems} />
       <style>{".nextra-nav-container.sticky { position: fixed }"}</style>
       <div className="relative">
         <Stripes />
@@ -48,7 +57,8 @@ export default function NotFoundPage() {
           </div>
         </div>
       </div>
-    </MainLayout>
+      <Footer />
+    </>
   )
 }
 

src/components/blog-page/blog-tags.tsx

@@ -25,7 +25,12 @@ export function BlogTags({
         }
 
         const tagElement = (
-          <Tag className={opaque ? "bg-neu-0" : ""} color={color}>
+          // conditionally add a key here to avoid react list key errors
+          <Tag
+            key={!links ? tag : undefined}
+            className={opaque ? "bg-neu-0" : ""}
+            color={color}
+          >
             {tag.replaceAll("-", " ")}
           </Tag>
         )

src/components/events/event-card.tsx

@@ -3,7 +3,7 @@ import { clsx } from "clsx"
 
 import { CalendarIcon } from "@/app/conf/_design-system/pixelarticons/calendar-icon"
 import { PinIcon } from "@/app/conf/_design-system/pixelarticons/pin-icon"
-import { Tag } from "../../app/conf/_design-system/tag"
+import { Tag } from "@/app/conf/_design-system/tag"
 
 const dateFormatter = new Intl.DateTimeFormat("en", {
   day: "numeric",

src/components/index-page/data-colocation/index.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { clsx } from "clsx"
 import { Code } from "nextra/components"

src/components/index-page/graphql-advantages/consistency.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { useEffect, useRef } from "react"
 import { Code } from "nextra/components"
 

src/components/index-page/graphql-advantages/precision.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { ComponentPropsWithoutRef, useEffect, useRef } from "react"
 import { Code } from "nextra/components"
 import { clsx } from "clsx"

src/components/index-page/graphql-advantages/productivity.tsx

@@ -15,7 +15,7 @@ export function ProductivityFigure() {
           // the video is irrelevant to screen readers as its soundless
           aria-hidden
           // @ts-expect-error @types/react doesn't support fetchPriority yet
-          fetchpriority="low"
+          fetchPriority="low"
         >
           <source
             src={`${VIDEOS_DIR}/graphiql-dark.mp4`}

src/components/index-page/graphql-advantages/versionless.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { useEffect, useRef } from "react"
 import { Code } from "nextra/components"
 import { clsx } from "clsx"

src/components/index-page/how-it-works/index.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { useRef, useState } from "react"
 import { useInView } from "motion/react"
 import dynamic from "next/dynamic"

src/components/index-page/how-it-works/interactive-editor.tsx

@@ -1,5 +1,7 @@
+"use client"
+
 import { graphql } from "graphql"
-import React, { useState } from "react"
+import { useRef, useState } from "react"
 
 import { getVariableToType } from "@/components/interactive-code-block/get-variable-to-type"
 import { QueryEditor } from "@/components/interactive-code-block/query-editor"
@@ -20,7 +22,7 @@ export default function InteractiveEditor() {
   const [results, setResults] = useState(INITIAL_RESULTS_TEXT)
   const [variableTypes, setVariableTypes] = useState<Record<string, string>>({})
   const [variables, setVariables] = useState("")
-  const editorQueryId = React.useRef(0)
+  const editorQueryId = useRef(0)
 
   async function runQuery(
     options: { manual: boolean },

src/components/index-page/how-it-works/play-button.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import { Button } from "../../../app/conf/_design-system/button"
+import { Button } from "@/app/conf/_design-system/button"
 
 export function PlayButton({
   className,

src/components/index-page/index.tsx

@@ -1,5 +1,3 @@
-import Head from "next/head"
-
 import { Hero } from "./hero"
 import { TrustedBy } from "./trusted-by"
 import { HowItWorks } from "./how-it-works"
@@ -16,13 +14,6 @@ import { UseCases } from "./use-cases"
 export function IndexPage() {
   return (
     <div className="gql-all-anchors-focusable bg-neu-0">
-      <Head>
-        <meta
-          name="description"
-          content="GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data."
-        />
-      </Head>
-
       <Hero />
       <TrustedBy />
       <WhatIsGraphQL />
@@ -35,7 +26,6 @@ export function IndexPage() {
       <UseCases />
       <QuotesFromTheIndustry />
       <JoinTheCommunity />
-      <style>{".nextra-nav-container.sticky { position: fixed }"}</style>
     </div>
   )
 }

src/components/index-page/what-is-graphql/wires.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import {
   ComponentPropsWithoutRef,

src/components/navbar/nav-link.tsx

@@ -3,7 +3,7 @@
 import clsx from "clsx"
 import type * as normalizePages from "nextra/normalize-pages"
 import React from "react"
-import { Anchor } from "../../app/conf/_design-system/anchor"
+import { Anchor } from "@/app/conf/_design-system/anchor"
 import { usePathname } from "next/navigation"
 
 export const navLinkClasses =

src/components/radio.tsx

@@ -2,7 +2,7 @@ import { Radio as BaseRadio } from "@base-ui-components/react/radio"
 
 import { clsx as cn } from "clsx"
 import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
-import { RadioIcon } from "../app/conf/_design-system/pixelarticons/radio-icon"
+import { RadioIcon } from "@/app/conf/_design-system/pixelarticons/radio-icon"
 
 export { RadioGroup } from "@base-ui-components/react/radio-group"
 

src/components/table-of-contents.tsx

@@ -7,7 +7,7 @@ import { useActiveAnchor, useThemeConfig } from "nextra-theme-docs"
 import { useEffect, useRef, type ReactElement } from "react"
 import scrollIntoView from "scroll-into-view-if-needed"
 
-import { Anchor } from "../app/conf/_design-system/anchor"
+import { Anchor } from "@/app/conf/_design-system/anchor"
 import { renderComponent } from "./utils/render-component"
 import { BackToTop } from "./back-to-top"
 

src/pages/_meta.tsx

@@ -1,11 +1,4 @@
 export default {
-  index: {
-    type: "page",
-    display: "hidden",
-    theme: {
-      layout: "raw",
-    },
-  },
   learn: {
     type: "page",
     title: "Learn",

src/pages/blog/_meta.tsx

@@ -1,8 +1,5 @@
 import { useConfig } from "nextra-theme-docs"
-import NextLink from "next/link"
 
-import { Tag } from "../../app/conf/_design-system/tag"
-import { blogTagColors } from "../../components/blog-page/blog-tag-colors"
 import { BlogCardPicture } from "../../components/blog-page/blog-card-picture"
 import { BlogMdxContent } from "../../components/blog-page/mdx-types"
 import { BlogTags } from "../../components/blog-page/blog-tags"

src/pages/community/ambassadors/apply.mdx

@@ -2,7 +2,7 @@
 description: How to apply to be a GraphQL Ambassador
 ---
 
-import { Button } from "../../../app/conf/_components/button"
+import { Button } from "@/app/conf/_components/button"
 import { Steps } from 'nextra/components'
 
 # Become a GraphQL Ambassador

src/pages/community/ambassadors/index.mdx

@@ -2,7 +2,7 @@
 description: An introduction to the GraphQL Ambassador Program
 ---
 
-import { Button } from "../../../app/conf/_components/button"
+import { Button } from "@/app/conf/_components/button"
 import { AmbassadorGrid } from "../../../components/ambassador-grid"
 import {ambassadors} from "../../../components/info-card/ambassador-data"
 

src/pages/community/events.mdx

@@ -13,7 +13,7 @@ import "leaflet/dist/leaflet.css"
 import { meetups } from "../../components/meetups"
 import { events, EventCard } from "../../components/events"
 import pinkCircle from "./pink-circle.svg"
-import { Button } from '../../app/conf/_design-system/button'
+import { Button } from '@/app/conf/_design-system/button'
 
 
 export const { pastEvents, upcomingEvents } = events.reduce(

src/pages/community/foundation/local-initiative.mdx

@@ -6,7 +6,7 @@ description:
   sustainability of our ecosystem.
 ---
 
-import { Button } from "../../../app/conf/_components/button"
+import { Button } from "@/app/conf/_components/button"
 
 # GraphQL Local Initiative