feat: support Next 13 (#1714)

* chore(deps): update demos and deps to Next 13

* chore: add swc

* chore: switch old node tests to use node 14

* fix: correct requestdata type

* chore: update next/link syntax

* chore: use legacy image component for now

Author: ascorbic

.github/workflows/test.yml

@@ -15,12 +15,12 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, macOS-latest, windows-latest]
-        node-version: [12, '*']
+        node-version: [14, '*']
         exclude:
           - os: macOS-latest
-            node-version: 12
+            node-version: 14
           - os: windows-latest
-            node-version: 12
+            node-version: 14
       fail-fast: false
 
     steps:
@@ -50,12 +50,12 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, macOS-latest, windows-latest]
-        node-version: [12, '*']
+        node-version: [14, '*']
         exclude:
           - os: macOS-latest
-            node-version: 12
+            node-version: 14
           - os: windows-latest
-            node-version: 12
+            node-version: 14
       fail-fast: false
 
     if: github.ref_name == 'main'

.vscode/feat-test.code-snippets

@@ -16,7 +16,7 @@
 			"\treturn (",
 			"\t\t<div>",
 			"\t\t<h1>$1</h1>",
-			"\t\t<Link href=\"\"><a>Read Docs</a></Link>",
+			"\t\t<Link href=\"\">Read Docs</Link>",
 			"\t\t<p>Description of feature</p>",
 			"\t\t<p>Example/test of feature</p>",
 			"\t\t</div>",

demos/base-path/package.json

@@ -13,7 +13,7 @@
     "typescript": "^4.6.3"
   },
   "dependencies": {
-    "next": "^12.3.0"
+    "next": "^12.3.2-canary.43"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

demos/custom-routes/package.json

@@ -14,7 +14,7 @@
     "typescript": "^4.7.4"
   },
   "dependencies": {
-    "next": "^12.3.0"
+    "next": "^12.3.2-canary.43"
   },
   "scripts": {
     "build": "next build",

demos/default/package.json

@@ -21,7 +21,7 @@
     "@reach/dialog": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
     "@vercel/og": "^0.0.15",
-    "next": "^12.3.0",
+    "next": "^12.3.2-canary.43",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

demos/default/pages/broken-image.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from 'next/legacy/image'
 
 // This should cause an error, because broken-domain is not part of the configured next.config.js image domains
 const Images = () => (

demos/default/pages/css/index.tsx

@@ -12,23 +12,27 @@ function BuiltInCSSSupport() {
   return (
     <div>
       <h1>Built In CSS Support</h1>
-      <Link href="https://nextjs.org/docs/basic-features/built-in-css-support"><a>Read Docs</a></Link>
+      <Link href="https://nextjs.org/docs/basic-features/built-in-css-support">Read Docs</Link>
 
-      
       <h2>CSS Modules</h2>
       <p>CSS Modules are an optional feature and are only enabled for files with the .module.css extension. </p>
       <p className={styles.error}>This is made with an imported css module</p>
 
-      <h2>Import styles from <code>node_modules</code></h2>
+      <h2>
+        Import styles from <code>node_modules</code>
+      </h2>
       <p>This page imports a node module&apos;s css file for the dialog below:</p>
-      <ExampleDialog/>
+      <ExampleDialog />
 
       <h2>Sass Support</h2>
       <p>✅ Sass variable imported, color: {variables.primaryColor || <code>Error. Something went wrong</code>}</p>
 
       <div data-testid="css-in-js">
         <h2>CSS-in-JS</h2>
-        <p>NextJS bundles styled-jsx to provide support for isolated scoped CSS. The aim is to support &quot;shadow CSS&quot; similar to Web Components, which unfortunately do not support server-rendering and are JS-only.</p>
+        <p>
+          NextJS bundles styled-jsx to provide support for isolated scoped CSS. The aim is to support &quot;shadow
+          CSS&quot; similar to Web Components, which unfortunately do not support server-rendering and are JS-only.
+        </p>
         <style jsx>{`
           p {
             color: white;
@@ -46,7 +50,6 @@ function BuiltInCSSSupport() {
           }
         `}</style>
       </div>
-
     </div>
   )
 }
@@ -70,4 +73,4 @@ function ExampleDialog() {
       </Dialog>
     </div>
   )
-}
+}

demos/default/pages/deep/import.js

@@ -20,9 +20,7 @@ const Show = ({ show }) => (
 
     <hr />
 
-    <Link href="/">
-      <a>Go back home</a>
-    </Link>
+    <Link href="/">Go back home</Link>
   </div>
 )
 

demos/default/pages/font.tsx

@@ -5,19 +5,20 @@ function Font() {
   return (
     <div>
       {/* <Head> */}
-        <link
-          href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
-          rel="stylesheet"
-        />
+      <link href="https://fonts.googleapis.com/css2?family=Inter&display=optional" rel="stylesheet" />
       {/* </Head> */}
       <h1>Font Optimization</h1>
-      <Link href="https://nextjs.org/docs/basic-features/font-optimization"><a>Read Docs</a></Link>
+      <Link href="https://nextjs.org/docs/basic-features/font-optimization">Read Docs</Link>
       <p>
-        By default, Next.js will automatically inline font CSS at build time, eliminating an extra round trip to fetch font declarations.
+        By default, Next.js will automatically inline font CSS at build time, eliminating an extra round trip to fetch
+        font declarations.
+      </p>
+      <p>
+        If optimized font is enabled (default), it should show <code>style</code>, otherwise it should show{' '}
+        <code>link</code> in the head
       </p>
-      <p>If optimized font is enabled (default), it should show <code>style</code>, otherwise it should show <code>link</code> in the head</p>
     </div>
   )
 }
 
-export default Font
+export default Font

demos/default/pages/getServerSideProps/[id].js

@@ -25,9 +25,7 @@ const Show = ({ errorCode, show, env }) => {
 
       <hr />
 
-      <Link href="/">
-        <a>Go back home</a>
-      </Link>
+      <Link href="/">Go back home</Link>
     </div>
   )
 }