Upgrade to Next.js 13 (#2906)

This gets our site updated to Next.js 13 and Nextra 2. As a bonus, this should help prevent some of the issues we're seeing in Sentry.
vercel · Dec 5, 2022 · 4f247be · 4f247be · vercel · Dec 5, 2022
1 parent 1e81806
commit 4f247be
Show file tree

Hide file tree

Showing 23 changed files with 182 additions and 113 deletions.
diff --git a/docs/components/Avatar.tsx b/docs/components/Avatar.tsx
@@ -1,4 +1,4 @@
-import Image from "next/future/image";
+import Image from "next/image";
 import type { AuthorDetails } from "../content/team";
 
 export const Avatar = ({ name, picture, twitterUsername }: AuthorDetails) => (

diff --git a/docs/components/Navigation.tsx b/docs/components/Navigation.tsx
@@ -25,6 +25,8 @@ function Navigation(props) {
     props.items.push({
       title: "Enterprise",
       newWindow: true,
+      // https://github.com/shuding/nextra/issues/1028
+      route: "enterprise",
       href: `https://vercel.com/${
         site === "repo" ? "solutions" : "contact"
       }/turborepo?utm_source=turbo.build&utm_medium=referral&utm_campaign=header-enterpriseLink`,

diff --git a/docs/components/Tweet.tsx b/docs/components/Tweet.tsx
@@ -1,4 +1,4 @@
-import Image from "next/future/image";
+import Image from "next/image";
 
 function TweetLink({ href, children }) {
   return (

diff --git a/docs/components/clients/Logo.tsx b/docs/components/clients/Logo.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import cn from "classnames";
-import Image from "next/future/image";
+import Image from "next/image";
 import { TurboUser } from "./users";
 
 const DEFAULT_SIZE = {
@@ -21,15 +21,23 @@ export function Logo({
     ...DEFAULT_SIZE,
     ...user.style,
   };
+  let numericWidth: number;
+  let numericHeight: number;
+  if (typeof styles.width === "number") {
+    numericWidth = styles.width;
+  }
+  if (typeof styles.height === "number") {
+    numericHeight = styles.height;
+  }
   const logo = (
     <Image
       src={user.image.replace(
         "/logos",
         theme === "light" ? "/logos/white" : "/logos/color"
       )}
       alt={`${user.caption}'s Logo`}
-      width={styles.width}
-      height={styles.height}
+      width={numericWidth}
+      height={numericHeight}
       priority={true}
       style={styles}
       className={cn("mx-8", {

diff --git a/docs/components/image/ImageFigure.tsx b/docs/components/image/ImageFigure.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Image from "next/future/image";
+import Image from "next/image";
 
 type ImageProps = Parameters<typeof Image>[0];
 

diff --git a/docs/components/image/ThemedImage.tsx b/docs/components/image/ThemedImage.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Image from "next/future/image";
+import Image from "next/image";
 
 export interface Image {
   height: number;

diff --git a/docs/components/pages/home-shared/FeatureBox.tsx b/docs/components/pages/home-shared/FeatureBox.tsx
@@ -1,4 +1,4 @@
-import Image from "next/future/image";
+import Image from "next/image";
 import type { ReactNode } from "react";
 
 export function FeatureBox({

diff --git a/docs/components/pages/pack-home/PackBenchmarksGraph.tsx b/docs/components/pages/pack-home/PackBenchmarksGraph.tsx
@@ -6,7 +6,7 @@ import {
   useAnimation,
   AnimationPlaybackControls,
 } from "framer-motion";
-import Image from "next/future/image";
+import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
 import benchmarkData from "./benchmark-data/data.json";
 import { Gradient } from "../home-shared/Gradient";

diff --git a/docs/components/pages/pack-home/PackHero.tsx b/docs/components/pages/pack-home/PackHero.tsx
@@ -1,5 +1,5 @@
 import cn from "classnames";
-import Image from "next/future/image";
+import Image from "next/image";
 import Link from "next/link";
 // import { Marquee } from "../../clients/Marquee";
 // import { Clients } from "../../clients/Clients";

diff --git a/docs/components/pages/pack-home/PackLetter.tsx b/docs/components/pages/pack-home/PackLetter.tsx
@@ -1,5 +1,5 @@
 import { HeroText } from "../home-shared/Headings";
-import Image from "next/future/image";
+import Image from "next/image";
 import cn from "classnames";
 import gradients from "../home-shared/gradients.module.css";
 import { FadeIn } from "../home-shared/FadeIn";

diff --git a/docs/components/pages/repo-home/RepoHero.tsx b/docs/components/pages/repo-home/RepoHero.tsx
@@ -1,5 +1,5 @@
 import cn from "classnames";
-import Image from "next/future/image";
+import Image from "next/image";
 import Link from "next/link";
 import gradients from "../home-shared/gradients.module.css";
 import { HeroText, SectionSubtext } from "../home-shared/Headings";

diff --git a/docs/components/pages/repo-home/RepoLetter.tsx b/docs/components/pages/repo-home/RepoLetter.tsx
@@ -1,5 +1,5 @@
 import { HeroText } from "../home-shared/Headings";
-import Image from "next/future/image";
+import Image from "next/image";
 import cn from "classnames";
 import gradients from "../home-shared/gradients.module.css";
 import { FadeIn } from "../home-shared/FadeIn";

diff --git a/docs/content/features.ts b/docs/content/features.ts
@@ -1,4 +1,4 @@
-import type Image from "next/future/image";
+import type Image from "next/image";
 import EcosystemIconDark from "../public/images/docs/shared/feature-icons/ecosystem-dark.svg";
 import EcosystemIconLight from "../public/images/docs/shared/feature-icons/ecosystem-light.svg";
 import LightningIconDark from "../public/images/docs/shared/feature-icons/lightning-dark.svg";

diff --git a/docs/next.config.js b/docs/next.config.js
@@ -58,7 +58,6 @@ const nextConfig = withNextra({
   },
   reactStrictMode: true,
   experimental: {
-    newNextLinkBehavior: true,
     legacyBrowsers: false,
   },
   webpack: (config, { webpack }) => {

diff --git a/docs/package.json b/docs/package.json
@@ -27,10 +27,10 @@
     "framer-motion": "^7.3.6",
     "js-cookie": "3.0.1",
     "ms": "^2.1.3",
-    "next": "12.3.1",
+    "next": "^13.0.0",
     "next-themes": "^0.2.0",
-    "nextra": "2.0.0-beta.38",
-    "nextra-theme-docs": "2.0.0-beta.38",
+    "nextra": "^2.0.1",
+    "nextra-theme-docs": "^2.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "2.4.0",

diff --git a/docs/pages/blog/turbo-1-1-0.mdx b/docs/pages/blog/turbo-1-1-0.mdx
@@ -20,7 +20,7 @@ Since releasing Turborepo v1.0 in mid-December, we've seen incredible adoption:
 - In production at [Vercel](https://github.com/vercel/next.js), [AWS](https://github.com/aws-amplify/amplify-ui), [PayPal](https://twitter.com/jaredpalmer/status/1485617973477978121), [Twilio](https://github.com/twilio-labs/function-templates), [Contentful](https://github.com/contentful/forma-36), [Miro](https://github.com/miroapp/app-examples), [Framer](https://github.com/framer/motion), [Discord.js](https://github.com/discordjs/discord.js), [Rocket.chat](https://github.com/RocketChat/fuselage), [Astro.build](https://github.com/withastro/astro)
 - 585+ members of the [Turborepo Community Discord](https://turbo.build/discord)
 
-![Weekly npm downloads of `turbo`](../../public/images/blog/turbo-1-1-0/turborepo-weekly-npm-downloads.png)
+![Weekly npm downloads of `turbo`](/images/blog/turbo-1-1-0/turborepo-weekly-npm-downloads.png)
 
 We're further improving build performance and caching with Turborepo v1.1, featuring:
 

diff --git a/docs/pages/repo/docs/core-concepts/caching.mdx b/docs/pages/repo/docs/core-concepts/caching.mdx
@@ -20,7 +20,7 @@ Each task in your codebase has **inputs** and **outputs**.
 
 Let's say you run a `build` task with Turborepo using `turbo run build`:
 
-![](../../../../public/images/docs/cache-miss.png)
+![](/images/docs/cache-miss.png)
 
 1. Turborepo will **evaluate the inputs to your task** (by default all non-gitignored files in the workspace folder) and **turn them into a hash** (e.g. `78awdk123`).
 
@@ -40,7 +40,7 @@ Let's say you run a `build` task with Turborepo using `turbo run build`:
 
 Let's say that you run the task again without changing any of its inputs:
 
-![](../../../../public/images/docs/cache-hit.png)
+![](/images/docs/cache-hit.png)
 
 1. The **hash will be the same** because **the inputs haven't changed** (e.g. `78awdk123`)
 

diff --git a/docs/pages/repo/docs/core-concepts/monorepos.mdx b/docs/pages/repo/docs/core-concepts/monorepos.mdx
@@ -2,13 +2,13 @@
 
 ## The problem
 
-![](../../../../public/images/docs/why-turborepo-problem.png)
+![](/images/docs/why-turborepo-problem.png)
 
 Monorepos have many advantages - but **they struggle to scale**. Each workspace has its own test suite, its own linting and its own build process. A single monorepo might have **hundreds of tasks to execute**.
 
 ## The solution
 
-![](../../../../public/images/docs/why-turborepo-solution.png)
+![](/images/docs/why-turborepo-solution.png)
 
 **Turborepo solves your monorepo's scaling problem**. Our remote cache stores the result of all your tasks, meaning that **your CI never needs to do the same work twice**.
 

diff --git a/docs/pages/repo/docs/core-concepts/monorepos/filtering.mdx b/docs/pages/repo/docs/core-concepts/monorepos/filtering.mdx
@@ -10,11 +10,11 @@ import HeartIcon from "@heroicons/react/solid/HeartIcon";
 
 A monorepo can contain hundreds, or thousands, of workspaces. By default, running `turbo run test` will execute the `test` task in **all available workspaces**.
 
-![Without using a filter, test will be run across all packages](../../../../../public/images/docs/no-filter.png)
+![Without using a filter, test will be run across all packages](/images/docs/no-filter.png)
 
 Turborepo supports a `--filter` flag that lets you **select the workspaces you'd like to execute your task in**.
 
-![With a filter on shared, only the shared package runs test](../../../../../public/images/docs/with-filter.png)
+![With a filter on shared, only the shared package runs test](/images/docs/with-filter.png)
 
 You can use it to:
 

diff --git a/docs/pages/repo/docs/core-concepts/monorepos/running-tasks.mdx b/docs/pages/repo/docs/core-concepts/monorepos/running-tasks.mdx
@@ -10,7 +10,7 @@ import HeartIcon from "@heroicons/react/solid/HeartIcon";
 
 Every monorepo has two main building blocks: **workspaces** and **tasks**. Let's imagine you have a monorepo containing **three workspaces**, each with **three tasks**:
 
-![](../../../../../public/images/docs/your-monorepo-excalidraw.png)
+![](/images/docs/your-monorepo-excalidraw.png)
 
 Here, both `apps/web` and `apps/doc` use code from `packages/shared`. In fact, when they're built (via `build`) **they need `packages/shared` to be built _first_**.
 
@@ -26,7 +26,7 @@ yarn workspaces run build
 
 This would mean the tasks run like this:
 
-![](../../../../../public/images/docs/yarn-workspaces-excalidraw.png)
+![](/images/docs/yarn-workspaces-excalidraw.png)
 
 As you can see, `lint` gets run in all the workspaces. Then, `build` gets run - with `shared` going first. Finally, `test` gets run.
 
@@ -68,7 +68,7 @@ Next, we can replace our `yarn workspaces` script with this:
 
 When we run it, Turborepo will **multitask as many tasks as possible over all available CPU's**, meaning our tasks run like this:
 
-![](../../../../../public/images/docs/turborepo-excalidraw.png)
+![](/images/docs/turborepo-excalidraw.png)
 
 Both `lint` and `test` run immediately, because they have no `dependsOn` specified in `turbo.json`.
 
@@ -297,7 +297,7 @@ To accomplish this, we can set up a pipeline like so:
  }
 ```
 
-![](../../../../../public/images/docs/task-graph-with-dummy-task.png)
+![](/images/docs/task-graph-with-dummy-task.png)
 
 In this pipeline, we create an intermediary dummy `topo` task. Since we don't have a `topo` command in our workspaces, the pipeline will go straight to running `test` scripts in parallel, meeting our first requirement. The second requirement will also be taken care of, falling back on Turborepo's default behavior of creating hashes for a workspace task and it's dependencies as a tree.
 

diff --git a/docs/pages/repo/docs/core-concepts/remote-caching.mdx b/docs/pages/repo/docs/core-concepts/remote-caching.mdx
@@ -12,15 +12,15 @@ Turborepo's [task cache](/repo/docs/core-concepts/caching) can save a lot of tim
 
 But there's an issue - the **cache is local to your machine**. When you're working with a CI, this can result in a lot of duplicated work:
 
-![](../../../../public/images/docs/local-caching.png)
+![](/images/docs/local-caching.png)
 
 Since Turborepo only caches to the local filesystem by default, the same task (`turbo run build`) must be **re-executed on each machine** (by you, by your teammates, by your CI, by your PaaS, etc.) even when all of the task inputs are identical — which **wastes time and resources**.
 
 ## A single, shared cache
 
 What if you could share a single Turborepo cache across your entire team (and even your CI)?
 
-![](../../../../public/images/docs/remote-caching.png)
+![](/images/docs/remote-caching.png)
 
 By working with providers like [Vercel](#vercel), Turborepo can securely communicate with a remote cache - a cloud server that stores the results of your tasks.
 

diff --git a/docs/theme.config.js b/docs/theme.config.js
@@ -12,14 +12,11 @@ const SITE_ROOT = "https://turbo.build";
  * @type {import('nextra-theme-docs').DocsThemeConfig}
  */
 const theme = {
-  project: {
-    icon: Github,
-  },
-  chat: {
-    icon: Discord,
+  sidebar: {
+    defaultMenuCollapseLevel: Number.POSITIVE_INFINITY,
   },
   docsRepositoryBase: "https://github.com/vercel/turbo/blob/main/docs",
-  getNextSeoProps: function SEO() {
+  useNextSeoProps: function SEO() {
     const router = useRouter();
     const { frontMatter } = useConfig();
 
@@ -151,7 +148,15 @@ const theme = {
   editLink: {
     text: "Edit this page on GitHub",
   },
-  navbar: Navigation,
+  navbar: {
+    component: Navigation,
+    extraContent: (
+      <>
+        <Github />
+        <Discord />
+      </>
+    ),
+  },
   search: {
     placeholder: "Search documentation…",
   },