start migrating to nextjs app router (#1976)

website/src/DocSearch.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 export function DocSearch() {

website/src/Header.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
 

website/src/ImmutableConsole.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect } from 'react';
 
 type InstallSpace = {

website/src/MarkdownContent.tsx

@@ -1,5 +1,7 @@
+'use client';
+
 import { memo, MouseEvent } from 'react';
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 
 type Props = {
   contents: string;

website/src/Sidebar.tsx

@@ -1,16 +1,13 @@
+'use client';
+
 import Link from 'next/link';
 import { Fragment, useEffect, useState } from 'react';
-import type { TypeDefinition, TypeDefs } from './TypeDefs';
+import type { TypeDefinition } from './TypeDefs';
 import { collectMemberGroups } from './collectMemberGroups';
 import { ArrowDown } from './ArrowDown';
 
 export type SidebarLinks = Array<{ label: string; url: string }>;
 
-// Only used statically
-export function getSidebarLinks(defs: TypeDefs): SidebarLinks {
-  return Object.values(defs.types).map(({ label, url }) => ({ label, url }));
-}
-
 function Links({
   links,
   focus,

website/src/TypeDocumentation.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Fragment, useReducer } from 'react';
 
 import { InterfaceDef, CallSigDef } from './Defs';

website/src/app/docs/[version]/[type]/page.tsx

@@ -0,0 +1,72 @@
+import { DocHeader } from '../../../../DocHeader';
+import { ImmutableConsole } from '../../../../ImmutableConsole';
+import { getSidebarLinks } from '../../../../getSidebarLinks';
+import { getTypeDefs } from '../../../../static/getTypeDefs';
+import { getVersions } from '../../../../static/getVersions';
+import { TypeDocumentation } from '../../../../TypeDocumentation';
+import { getVersionFromParams } from '../../../getVersionFromParams';
+
+export async function generateStaticParams() {
+  return getVersions()
+    .map(version =>
+      Object.values(getTypeDefs(version).types).map(def => ({
+        version,
+        type: def.label,
+      }))
+    )
+    .flat();
+}
+
+type Params = {
+  version: string;
+  type: string;
+};
+
+type Props = {
+  params: Params;
+};
+
+export async function generateMetadata({ params }: Props) {
+  const version = getVersionFromParams(params);
+  const defs = getTypeDefs(version);
+  const def = Object.values(defs.types).find(d => d.label === params.type);
+
+  if (!def) {
+    throw new Error('404');
+  }
+
+  return {
+    title: `${def.qualifiedName} — Immutable.js`,
+  };
+}
+
+export default function TypeDocPage({
+  // versions,
+  // version,
+  // def,
+  // sidebarLinks,
+  params,
+}: Props) {
+  const versions = getVersions();
+  const version = getVersionFromParams(params);
+  const defs = getTypeDefs(version);
+
+  const def = Object.values(defs.types).find(d => d.label === params.type);
+
+  if (!def) {
+    throw new Error('404');
+  }
+
+  const sidebarLinks = getSidebarLinks(defs);
+  return (
+    <div>
+      <ImmutableConsole version={version} />
+      <DocHeader versions={versions} currentVersion={version} />
+      <div className="pageBody">
+        <div className="contents">
+          <TypeDocumentation def={def} sidebarLinks={sidebarLinks} />
+        </div>
+      </div>
+    </div>
+  );
+}

website/src/pages/docs/[version]/index.tsx → website/src/app/docs/[version]/page.tsx

@@ -1,67 +1,43 @@
-import Head from 'next/head';
+import { Metadata } from 'next';
 import { getVersions } from '../../../static/getVersions';
 import { getTypeDefs } from '../../../static/getTypeDefs';
 import { DocHeader } from '../../../DocHeader';
-import {
-  DocOverview,
-  getOverviewData,
-  OverviewData,
-} from '../../../DocOverview';
+import { DocOverview, getOverviewData } from '../../../DocOverview';
 import { DocSearch } from '../../../DocSearch';
 import { ImmutableConsole } from '../../../ImmutableConsole';
-import { SideBar, getSidebarLinks, SidebarLinks } from '../../../Sidebar';
+import { SideBar } from '../../../Sidebar';
+import { getSidebarLinks } from '../../../getSidebarLinks';
+import { getVersionFromParams } from '../../getVersionFromParams';
+
+export async function generateStaticParams() {
+  return [...getVersions().map(version => ({ version }))];
+}
 
 type Params = {
   version: string;
 };
 
 type Props = {
-  versions: Array<string>;
-  version: string;
-  overviewData: OverviewData;
-  sidebarLinks: SidebarLinks;
+  params: Params;
 };
 
-export async function getStaticProps(context: {
-  params: Params;
-}): Promise<{ props: Props }> {
-  const versions = getVersions();
-  const { version } = context.params;
-  const defs = getTypeDefs(version);
-  const overviewData = getOverviewData(defs);
-  const sidebarLinks = getSidebarLinks(defs);
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const version = getVersionFromParams(params);
 
   return {
-    props: {
-      versions,
-      version,
-      overviewData,
-      sidebarLinks,
-    },
+    title: `Documentation ${version} — Immutable.js`,
   };
 }
 
-export function getStaticPaths(): {
-  paths: Array<{ params: Params }>;
-  fallback: boolean;
-} {
-  return {
-    paths: [...getVersions().map(version => ({ params: { version } }))],
-    fallback: false,
-  };
-}
+export default function OverviewDocPage({ params }: Props) {
+  const versions = getVersions();
+  const version = getVersionFromParams(params);
+  const defs = getTypeDefs(version);
+  const overviewData = getOverviewData(defs);
+  const sidebarLinks = getSidebarLinks(defs);
 
-export default function OverviewDocPage({
-  versions,
-  version,
-  overviewData,
-  sidebarLinks,
-}: Props) {
   return (
     <div>
-      <Head>
-        <title>{`Documentation ${version} — Immutable.js`}</title>
-      </Head>
       <ImmutableConsole version={version} />
       <DocHeader versions={versions} currentVersion={version} />
       <div className="pageBody">

website/src/app/docs/page.tsx

@@ -0,0 +1,31 @@
+import { Metadata } from 'next';
+import { getVersions } from '../../static/getVersions';
+import RedirectExistingDocs from './redirect-client';
+import { ImmutableConsole } from '../../ImmutableConsole';
+import { DocHeader } from '../../DocHeader';
+
+export const metadata: Metadata = {
+  title: 'Documentation — Immutable.js',
+};
+
+export default function Page() {
+  const versions = getVersions();
+
+  const latestVersion = versions[0];
+
+  if (!latestVersion) {
+    throw new Error('No versions');
+  }
+
+  return (
+    <div>
+      <ImmutableConsole version={latestVersion} />
+      <DocHeader versions={versions} currentVersion={latestVersion} />
+      <div className="pageBody">
+        <div className="contents">
+          <RedirectExistingDocs version={latestVersion} />
+        </div>
+      </div>
+    </div>
+  );
+}

website/src/app/docs/redirect-client.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+type Props = {
+  version: string;
+};
+
+export default function RedirectExistingDocs({ version }: Props) {
+  const router = useRouter();
+
+  useEffect(() => {
+    const [, type, member] = window.location.hash?.split('/') || [];
+    let route = `/docs/${version}`;
+    if (type) {
+      route += `/${type}`;
+    }
+    if (member) {
+      route += `#${member}`;
+    }
+    router.replace(route);
+  }, [version, router]);
+
+  return <div className="contents">Redirecting...</div>;
+}

website/src/app/getVersionFromParams.ts

@@ -0,0 +1,3 @@
+export function getVersionFromParams(params: { version: string }): string {
+  return params.version.replace('%40', '@');
+}

website/src/app/layout.tsx

@@ -0,0 +1,24 @@
+import { Metadata } from 'next';
+import React from 'react';
+import '../../styles/globals.css';
+
+export const metadata: Metadata = {
+  title: 'Immutable.js',
+  icons: {
+    icon: '/favicon.png',
+  },
+};
+
+export default function RootLayout({
+  // Layouts must accept a children prop.
+  // This will be populated with nested layouts or pages
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

website/src/pages/index.tsx → website/src/app/page.tsx

@@ -1,39 +1,27 @@
 import fs from 'fs';
-import Head from 'next/head';
-
 import { Header } from '../Header';
-import { MarkdownContent } from '../MarkdownContent';
 import { ImmutableConsole } from '../ImmutableConsole';
+import { MarkdownContent } from '../MarkdownContent';
 import { genMarkdownDoc } from '../static/genMarkdownDoc';
 import { getVersions } from '../static/getVersions';
 
-type Props = {
-  versions: Array<string>;
-  readme: string;
-};
-
-export async function getStaticProps(): Promise<{ props: Props }> {
-  const versions = getVersions();
+export default async function Page() {
+  const versions = await getVersions();
   const readme = genMarkdownDoc(
     versions[0],
     fs.readFileSync(`../README.md`, 'utf8')
   );
-  return { props: { versions, readme } };
-}
 
-export default function Home({ versions, readme }: Props) {
   return (
-    <div>
-      <Head>
-        <title>Immutable.js</title>
-      </Head>
+    <>
       <ImmutableConsole version={versions[0]} />
       <Header versions={versions} />
+
       <div className="pageBody">
         <div className="contents">
           <MarkdownContent contents={readme} />
         </div>
       </div>
-    </div>
+    </>
   );
 }

website/src/getSidebarLinks.tsx

@@ -0,0 +1,6 @@
+import type { TypeDefs } from './TypeDefs';
+import { SidebarLinks } from './Sidebar';
+
+export function getSidebarLinks(defs: TypeDefs): SidebarLinks {
+  return Object.values(defs.types).map(({ label, url }) => ({ label, url }));
+}