diff --git a/.prettierrc.json b/.prettierrc.json
index fd496a820e..eaaa46cd3d 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,4 +1,5 @@
 {
+  "trailingComma": "es5",
   "singleQuote": true,
   "semi": false
 }
diff --git a/examples/.prettierrc.json b/examples/.prettierrc.json
new file mode 100644
index 0000000000..a7d8824a65
--- /dev/null
+++ b/examples/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+  "trailingComma": "all",
+  "singleQuote": false,
+  "semi": true
+}
diff --git a/examples/active-class-name/components/ActiveLink.tsx b/examples/active-class-name/components/ActiveLink.tsx
index 5745eff025..6bae8c9639 100644
--- a/examples/active-class-name/components/ActiveLink.tsx
+++ b/examples/active-class-name/components/ActiveLink.tsx
@@ -1,11 +1,11 @@
-import { useRouter } from 'next/router'
-import Link, { LinkProps } from 'next/link'
-import React, { PropsWithChildren, useState, useEffect } from 'react'
+import { useRouter } from "next/router";
+import Link, { LinkProps } from "next/link";
+import React, { PropsWithChildren, useState, useEffect } from "react";
 
 type ActiveLinkProps = LinkProps & {
-  className?: string
-  activeClassName: string
-}
+  className?: string;
+  activeClassName: string;
+};
 
 const ActiveLink = ({
   children,
@@ -13,8 +13,8 @@ const ActiveLink = ({
   className,
   ...props
 }: PropsWithChildren<ActiveLinkProps>) => {
-  const { asPath, isReady } = useRouter()
-  const [computedClassName, setComputedClassName] = useState(className)
+  const { asPath, isReady } = useRouter();
+  const [computedClassName, setComputedClassName] = useState(className);
 
   useEffect(() => {
     // Check if the router fields are updated client-side
@@ -23,19 +23,19 @@ const ActiveLink = ({
       // Static route will be matched via props.href
       const linkPathname = new URL(
         (props.as || props.href) as string,
-        location.href
-      ).pathname
+        location.href,
+      ).pathname;
 
       // Using URL().pathname to get rid of query and hash
-      const activePathname = new URL(asPath, location.href).pathname
+      const activePathname = new URL(asPath, location.href).pathname;
 
       const newClassName =
         linkPathname === activePathname
           ? `${className} ${activeClassName}`.trim()
-          : className
+          : className;
 
       if (newClassName !== computedClassName) {
-        setComputedClassName(newClassName)
+        setComputedClassName(newClassName);
       }
     }
   }, [
@@ -46,13 +46,13 @@ const ActiveLink = ({
     activeClassName,
     className,
     computedClassName,
-  ])
+  ]);
 
   return (
     <Link className={computedClassName} {...props}>
       {children}
     </Link>
-  )
-}
+  );
+};
 
-export default ActiveLink
+export default ActiveLink;
diff --git a/examples/active-class-name/components/Nav.tsx b/examples/active-class-name/components/Nav.tsx
index b2f02bf985..f7b0bdaaf2 100644
--- a/examples/active-class-name/components/Nav.tsx
+++ b/examples/active-class-name/components/Nav.tsx
@@ -1,4 +1,4 @@
-import ActiveLink from './ActiveLink'
+import ActiveLink from "./ActiveLink";
 
 const Nav = () => (
   <nav>
@@ -8,7 +8,7 @@ const Nav = () => (
       }
 
       .active:after {
-        content: ' (current page)';
+        content: " (current page)";
       }
     `}</style>
     <ul className="nav">
@@ -39,6 +39,6 @@ const Nav = () => (
       </li>
     </ul>
   </nav>
-)
+);
 
-export default Nav
+export default Nav;
diff --git a/examples/active-class-name/next.config.js b/examples/active-class-name/next.config.js
index 3116440794..2adf0e71e4 100644
--- a/examples/active-class-name/next.config.js
+++ b/examples/active-class-name/next.config.js
@@ -3,9 +3,9 @@ module.exports = {
   async rewrites() {
     return [
       {
-        source: '/blog',
-        destination: '/news',
+        source: "/blog",
+        destination: "/news",
       },
-    ]
+    ];
   },
-}
+};
diff --git a/examples/active-class-name/pages/[slug].tsx b/examples/active-class-name/pages/[slug].tsx
index 0f8f73e588..7f19ea2f42 100644
--- a/examples/active-class-name/pages/[slug].tsx
+++ b/examples/active-class-name/pages/[slug].tsx
@@ -1,14 +1,14 @@
-import { useRouter } from 'next/router'
-import Nav from '../components/Nav'
+import { useRouter } from "next/router";
+import Nav from "../components/Nav";
 
 const SlugPage = () => {
-  const { asPath } = useRouter()
+  const { asPath } = useRouter();
   return (
     <>
       <Nav />
       <p>Hello, I'm the {asPath} page</p>
     </>
-  )
-}
+  );
+};
 
-export default SlugPage
+export default SlugPage;
diff --git a/examples/active-class-name/pages/about.tsx b/examples/active-class-name/pages/about.tsx
index df5d05e085..f61dd42fde 100644
--- a/examples/active-class-name/pages/about.tsx
+++ b/examples/active-class-name/pages/about.tsx
@@ -1,10 +1,10 @@
-import Nav from '../components/Nav'
+import Nav from "../components/Nav";
 
 const AboutPage = () => (
   <>
     <Nav />
     <p>Hello, I'm the about page</p>
   </>
-)
+);
 
-export default AboutPage
+export default AboutPage;
diff --git a/examples/active-class-name/pages/index.tsx b/examples/active-class-name/pages/index.tsx
index c233c6c0b9..e2b0316b61 100644
--- a/examples/active-class-name/pages/index.tsx
+++ b/examples/active-class-name/pages/index.tsx
@@ -1,10 +1,10 @@
-import Nav from '../components/Nav'
+import Nav from "../components/Nav";
 
 const IndexPage = () => (
   <>
     <Nav />
     <p>Hello, I'm the index page</p>
   </>
-)
+);
 
-export default IndexPage
+export default IndexPage;
diff --git a/examples/active-class-name/pages/news.tsx b/examples/active-class-name/pages/news.tsx
index 74a8005a4c..1bd42f02e0 100644
--- a/examples/active-class-name/pages/news.tsx
+++ b/examples/active-class-name/pages/news.tsx
@@ -1,10 +1,10 @@
-import Nav from '../components/Nav'
+import Nav from "../components/Nav";
 
 const News = () => (
   <>
     <Nav />
     <p>Hello, I'm the news page</p>
   </>
-)
+);
 
-export default News
+export default News;
diff --git a/examples/amp/additional.d.ts b/examples/amp/additional.d.ts
index 8cb81833b6..7ece0c934d 100644
--- a/examples/amp/additional.d.ts
+++ b/examples/amp/additional.d.ts
@@ -3,16 +3,16 @@
 // Only the intrinsic elements defined here will be accepted, and only with the attributes defined here
 declare namespace JSX {
   interface AmpImg {
-    alt?: string
-    src?: string
-    width?: string | number
-    height?: string | number
-    layout?: string
-    fallback?: string
-    children?: React.ReactNode
+    alt?: string;
+    src?: string;
+    width?: string | number;
+    height?: string | number;
+    layout?: string;
+    fallback?: string;
+    children?: React.ReactNode;
   }
   interface IntrinsicElements {
-    'amp-img': AmpImg
+    "amp-img": AmpImg;
   }
 }
 
diff --git a/examples/amp/components/Byline.tsx b/examples/amp/components/Byline.tsx
index 2cdc8c28e0..8145ecc8d0 100644
--- a/examples/amp/components/Byline.tsx
+++ b/examples/amp/components/Byline.tsx
@@ -1,6 +1,6 @@
 type BylineProps = {
-  author: string
-}
+  author: string;
+};
 
 export default function Byline({ author }: BylineProps) {
   return (
@@ -13,5 +13,5 @@ export default function Byline({ author }: BylineProps) {
         }
       `}</style>
     </>
-  )
+  );
 }
diff --git a/examples/amp/components/Layout.tsx b/examples/amp/components/Layout.tsx
index c7b6a84866..624b259ec0 100644
--- a/examples/amp/components/Layout.tsx
+++ b/examples/amp/components/Layout.tsx
@@ -1,6 +1,6 @@
 type LayoutProps = {
-  children?: React.ReactNode
-}
+  children?: React.ReactNode;
+};
 
 export default function Layout({ children }: LayoutProps) {
   return (
@@ -14,5 +14,5 @@ export default function Layout({ children }: LayoutProps) {
         }
       `}</style>
     </>
-  )
+  );
 }
diff --git a/examples/amp/pages/dog.tsx b/examples/amp/pages/dog.tsx
index 168d2681a5..ea899a8a3d 100644
--- a/examples/amp/pages/dog.tsx
+++ b/examples/amp/pages/dog.tsx
@@ -1,13 +1,13 @@
-import Head from 'next/head'
-import { useAmp } from 'next/amp'
-import Byline from '../components/Byline'
+import Head from "next/head";
+import { useAmp } from "next/amp";
+import Byline from "../components/Byline";
 
 export const config = {
-  amp: 'hybrid',
-}
+  amp: "hybrid",
+};
 
 export default function DogPage() {
-  const isAmp = useAmp()
+  const isAmp = useAmp();
 
   return (
     <div>
@@ -17,14 +17,14 @@ export default function DogPage() {
       <h1>The Dog (Hybrid AMP Page)</h1>
       <Byline author="Meow Meow Fuzzyface" />
       <p>
-        <a href={isAmp ? '/dog' : '/dog?amp=1'}>
-          {isAmp ? 'View Non-AMP' : 'View AMP'} Version
+        <a href={isAmp ? "/dog" : "/dog?amp=1"}>
+          {isAmp ? "View Non-AMP" : "View AMP"} Version
         </a>
       </p>
       <p className="caption">Woooooooooooof</p>
       <p>
-        Wafer donut candy soufflé{' '}
-        <a href={isAmp ? '/?amp=1' : '/'}>lemon drops</a> icing. Marzipan gummi
+        Wafer donut candy soufflé{" "}
+        <a href={isAmp ? "/?amp=1" : "/"}>lemon drops</a> icing. Marzipan gummi
         bears pie danish lollipop pudding powder gummi bears sweet. Pie sweet
         roll sweet roll topping chocolate bar dragée pudding chocolate cake.
         Croissant sweet chocolate bar cheesecake candy canes. Tootsie roll icing
@@ -90,5 +90,5 @@ export default function DogPage() {
         tiramisu.
       </p>
     </div>
-  )
+  );
 }
diff --git a/examples/amp/pages/index.tsx b/examples/amp/pages/index.tsx
index 5395cb8f9e..c6d494822f 100644
--- a/examples/amp/pages/index.tsx
+++ b/examples/amp/pages/index.tsx
@@ -1,14 +1,14 @@
-import Head from 'next/head'
-import { useAmp } from 'next/amp'
-import Layout from '../components/Layout'
-import Byline from '../components/Byline'
+import Head from "next/head";
+import { useAmp } from "next/amp";
+import Layout from "../components/Layout";
+import Byline from "../components/Byline";
 
 export const config = {
   amp: true,
-}
+};
 
 export default function IndexPage() {
-  const isAmp = useAmp()
+  const isAmp = useAmp();
 
   return (
     <Layout>
@@ -35,7 +35,7 @@ export default function IndexPage() {
         ></amp-img>
       </amp-img>
       <p>
-        Cat ipsum dolor <a href={isAmp ? '/dog?amp=1' : '/dog'}>sit amet</a>,
+        Cat ipsum dolor <a href={isAmp ? "/dog?amp=1" : "/dog"}>sit amet</a>,
         eat grass, throw it back up but refuse to leave cardboard box or groom
         yourself 4 hours - checked, have your beauty sleep 18 hours - checked,
         be fabulous for the rest of the day - checked!. Hide from vacuum
@@ -233,5 +233,5 @@ export default function IndexPage() {
         }
       `}</style>
     </Layout>
-  )
+  );
 }
diff --git a/examples/amp/pages/normal.tsx b/examples/amp/pages/normal.tsx
index a2868d2da0..e68778583b 100644
--- a/examples/amp/pages/normal.tsx
+++ b/examples/amp/pages/normal.tsx
@@ -1,3 +1,3 @@
 export default function NormalPage() {
-  return <p>I'm just a normal old page, no AMP for me</p>
+  return <p>I'm just a normal old page, no AMP for me</p>;
 }
diff --git a/examples/analyze-bundles/next.config.js b/examples/analyze-bundles/next.config.js
index 2538b04e1b..017842c82e 100644
--- a/examples/analyze-bundles/next.config.js
+++ b/examples/analyze-bundles/next.config.js
@@ -1,10 +1,10 @@
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
-  enabled: process.env.ANALYZE === 'true',
-})
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   // any configs you need
-}
+};
 
-module.exports = withBundleAnalyzer(nextConfig)
+module.exports = withBundleAnalyzer(nextConfig);
diff --git a/examples/analyze-bundles/pages/about.tsx b/examples/analyze-bundles/pages/about.tsx
index 9901700a8f..ecca67a085 100644
--- a/examples/analyze-bundles/pages/about.tsx
+++ b/examples/analyze-bundles/pages/about.tsx
@@ -1,5 +1,5 @@
 const About = () => {
-  return <div>About us</div>
-}
+  return <div>About us</div>;
+};
 
-export default About
+export default About;
diff --git a/examples/analyze-bundles/pages/contact.tsx b/examples/analyze-bundles/pages/contact.tsx
index 7003aa222e..db2f34c8f7 100644
--- a/examples/analyze-bundles/pages/contact.tsx
+++ b/examples/analyze-bundles/pages/contact.tsx
@@ -1,5 +1,5 @@
 const Contact = () => {
-  return <div>This is the contact page.</div>
-}
+  return <div>This is the contact page.</div>;
+};
 
-export default Contact
+export default Contact;
diff --git a/examples/analyze-bundles/pages/index.tsx b/examples/analyze-bundles/pages/index.tsx
index 19e5cf0462..544a13c81a 100644
--- a/examples/analyze-bundles/pages/index.tsx
+++ b/examples/analyze-bundles/pages/index.tsx
@@ -1,10 +1,10 @@
-import { NextPage, GetStaticProps } from 'next'
-import Link from 'next/link'
-import { faker } from '@faker-js/faker'
+import { NextPage, GetStaticProps } from "next";
+import Link from "next/link";
+import { faker } from "@faker-js/faker";
 
 type IndexProps = {
-  name: string
-}
+  name: string;
+};
 
 const Index: NextPage<IndexProps> = ({ name }) => {
   return (
@@ -15,16 +15,16 @@ const Index: NextPage<IndexProps> = ({ name }) => {
         <Link href="/about">About Page</Link>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Index
+export default Index;
 
 export const getStaticProps: GetStaticProps = async () => {
   // The name will be generated at build time only
-  const name = faker.name.findName()
+  const name = faker.name.findName();
 
   return {
     props: { name },
-  }
-}
+  };
+};
diff --git a/examples/api-routes-apollo-server-and-client-auth/apollo/client.tsx b/examples/api-routes-apollo-server-and-client-auth/apollo/client.tsx
index 7c11f3e9b7..64c3438a17 100644
--- a/examples/api-routes-apollo-server-and-client-auth/apollo/client.tsx
+++ b/examples/api-routes-apollo-server-and-client-auth/apollo/client.tsx
@@ -1,54 +1,54 @@
-import { useMemo } from 'react'
-import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client'
-import { SchemaLink } from '@apollo/client/link/schema'
-import { schema } from '../apollo/schema'
-import merge from 'deepmerge'
+import { useMemo } from "react";
+import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
+import { SchemaLink } from "@apollo/client/link/schema";
+import { schema } from "../apollo/schema";
+import merge from "deepmerge";
 
-let apolloClient
+let apolloClient;
 
 function createIsomorphLink() {
-  if (typeof window === 'undefined') {
-    return new SchemaLink({ schema })
+  if (typeof window === "undefined") {
+    return new SchemaLink({ schema });
   } else {
     return new HttpLink({
-      uri: '/api/graphql',
-      credentials: 'same-origin',
-    })
+      uri: "/api/graphql",
+      credentials: "same-origin",
+    });
   }
 }
 
 function createApolloClient() {
   return new ApolloClient({
-    ssrMode: typeof window === 'undefined',
+    ssrMode: typeof window === "undefined",
     link: createIsomorphLink(),
     cache: new InMemoryCache(),
-  })
+  });
 }
 
 export function initializeApollo(initialState = null) {
-  const _apolloClient = apolloClient ?? createApolloClient()
+  const _apolloClient = apolloClient ?? createApolloClient();
 
   // If your page has Next.js data fetching methods that use Apollo Client, the initial state
   // get hydrated here
   if (initialState) {
     // Get existing cache, loaded during client side data fetching
-    const existingCache = _apolloClient.extract()
+    const existingCache = _apolloClient.extract();
 
     // Merge the existing cache into data passed from getStaticProps/getServerSideProps
-    const data = merge(initialState, existingCache)
+    const data = merge(initialState, existingCache);
 
     // Restore the cache with the merged data
-    _apolloClient.cache.restore(data)
+    _apolloClient.cache.restore(data);
   }
   // For SSG and SSR always create a new Apollo Client
-  if (typeof window === 'undefined') return _apolloClient
+  if (typeof window === "undefined") return _apolloClient;
   // Create the Apollo Client once in the client
-  if (!apolloClient) apolloClient = _apolloClient
+  if (!apolloClient) apolloClient = _apolloClient;
 
-  return _apolloClient
+  return _apolloClient;
 }
 
 export function useApollo(initialState) {
-  const store = useMemo(() => initializeApollo(initialState), [initialState])
-  return store
+  const store = useMemo(() => initializeApollo(initialState), [initialState]);
+  return store;
 }
diff --git a/examples/api-routes-apollo-server-and-client-auth/apollo/resolvers.ts b/examples/api-routes-apollo-server-and-client-auth/apollo/resolvers.ts
index d05e8788d7..17ad9b63f3 100644
--- a/examples/api-routes-apollo-server-and-client-auth/apollo/resolvers.ts
+++ b/examples/api-routes-apollo-server-and-client-auth/apollo/resolvers.ts
@@ -1,53 +1,53 @@
-import { createUser, findUser, validatePassword } from '../lib/user'
-import { setLoginSession, getLoginSession } from '../lib/auth'
-import { removeTokenCookie } from '../lib/auth-cookies'
-import { GraphQLError } from 'graphql'
+import { createUser, findUser, validatePassword } from "../lib/user";
+import { setLoginSession, getLoginSession } from "../lib/auth";
+import { removeTokenCookie } from "../lib/auth-cookies";
+import { GraphQLError } from "graphql";
 
 export const resolvers = {
   Query: {
     async viewer(_root, _args, context, _info) {
       try {
-        const session = await getLoginSession(context.req)
+        const session = await getLoginSession(context.req);
 
         if (session) {
-          return findUser({ email: session.email })
+          return findUser({ email: session.email });
         }
       } catch (error) {
         throw new GraphQLError(
-          'Authentication token is invalid, please log in',
+          "Authentication token is invalid, please log in",
           {
             extensions: {
-              code: 'UNAUTHENTICATED',
+              code: "UNAUTHENTICATED",
             },
-          }
-        )
+          },
+        );
       }
     },
   },
   Mutation: {
     async signUp(_parent, args, _context, _info) {
-      const user = await createUser(args.input)
-      return { user }
+      const user = await createUser(args.input);
+      return { user };
     },
     async signIn(_parent, args, context, _info) {
-      const user = await findUser({ email: args.input.email })
+      const user = await findUser({ email: args.input.email });
 
       if (user && (await validatePassword(user, args.input.password))) {
         const session = {
           id: user.id,
           email: user.email,
-        }
+        };
 
-        await setLoginSession(context.res, session)
+        await setLoginSession(context.res, session);
 
-        return { user }
+        return { user };
       }
 
-      throw new GraphQLError('Invalid email and password combination')
+      throw new GraphQLError("Invalid email and password combination");
     },
     async signOut(_parent, _args, context, _info) {
-      removeTokenCookie(context.res)
-      return true
+      removeTokenCookie(context.res);
+      return true;
     },
   },
-}
+};
diff --git a/examples/api-routes-apollo-server-and-client-auth/apollo/schema.ts b/examples/api-routes-apollo-server-and-client-auth/apollo/schema.ts
index 0f14aa64f6..0aef15f2c3 100644
--- a/examples/api-routes-apollo-server-and-client-auth/apollo/schema.ts
+++ b/examples/api-routes-apollo-server-and-client-auth/apollo/schema.ts
@@ -1,8 +1,8 @@
-import { makeExecutableSchema } from '@graphql-tools/schema'
-import { typeDefs } from './type-defs'
-import { resolvers } from './resolvers'
+import { makeExecutableSchema } from "@graphql-tools/schema";
+import { typeDefs } from "./type-defs";
+import { resolvers } from "./resolvers";
 
 export const schema = makeExecutableSchema({
   typeDefs,
   resolvers,
-})
+});
diff --git a/examples/api-routes-apollo-server-and-client-auth/apollo/type-defs.ts b/examples/api-routes-apollo-server-and-client-auth/apollo/type-defs.ts
index e9ae131763..66261d9eb3 100644
--- a/examples/api-routes-apollo-server-and-client-auth/apollo/type-defs.ts
+++ b/examples/api-routes-apollo-server-and-client-auth/apollo/type-defs.ts
@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client'
+import { gql } from "@apollo/client";
 
 export const typeDefs = gql`
   type User {
@@ -36,4 +36,4 @@ export const typeDefs = gql`
     signIn(input: SignInInput!): SignInPayload!
     signOut: Boolean!
   }
-`
+`;
diff --git a/examples/api-routes-apollo-server-and-client-auth/components/field.tsx b/examples/api-routes-apollo-server-and-client-auth/components/field.tsx
index c33baa1e17..9e5503cb56 100644
--- a/examples/api-routes-apollo-server-and-client-auth/components/field.tsx
+++ b/examples/api-routes-apollo-server-and-client-auth/components/field.tsx
@@ -1,17 +1,17 @@
 export default function Field({ name, label, type, autoComplete, required }) {
   return (
     <div>
-      <label id={[name, 'label'].join('-')} htmlFor={[name, 'input'].join('-')}>
+      <label id={[name, "label"].join("-")} htmlFor={[name, "input"].join("-")}>
         {label} {required ? <span title="Required">*</span> : undefined}
       </label>
       <br />
       <input
         autoComplete={autoComplete}
-        id={[name, 'input'].join('-')}
+        id={[name, "input"].join("-")}
         name={name}
         required={required}
         type={type}
       />
     </div>
-  )
+  );
 }
diff --git a/examples/api-routes-apollo-server-and-client-auth/lib/auth-cookies.ts b/examples/api-routes-apollo-server-and-client-auth/lib/auth-cookies.ts
index b0fbf5030b..6e829c760c 100644
--- a/examples/api-routes-apollo-server-and-client-auth/lib/auth-cookies.ts
+++ b/examples/api-routes-apollo-server-and-client-auth/lib/auth-cookies.ts
@@ -1,41 +1,41 @@
-import { serialize, parse } from 'cookie'
+import { serialize, parse } from "cookie";
 
-const TOKEN_NAME = 'token'
+const TOKEN_NAME = "token";
 
-export const MAX_AGE = 60 * 60 * 8 // 8 hours
+export const MAX_AGE = 60 * 60 * 8; // 8 hours
 
 export function setTokenCookie(res, token) {
   const cookie = serialize(TOKEN_NAME, token, {
     maxAge: MAX_AGE,
     expires: new Date(Date.now() + MAX_AGE * 1000),
     httpOnly: true,
-    secure: process.env.NODE_ENV === 'production',
-    path: '/',
-    sameSite: 'lax',
-  })
+    secure: process.env.NODE_ENV === "production",
+    path: "/",
+    sameSite: "lax",
+  });
 
-  res.setHeader('Set-Cookie', cookie)
+  res.setHeader("Set-Cookie", cookie);
 }
 
 export function removeTokenCookie(res) {
-  const cookie = serialize(TOKEN_NAME, '', {
+  const cookie = serialize(TOKEN_NAME, "", {
     maxAge: -1,
-    path: '/',
-  })
+    path: "/",
+  });
 
-  res.setHeader('Set-Cookie', cookie)
+  res.setHeader("Set-Cookie", cookie);
 }
 
 export function parseCookies(req) {
   // For API Routes we don't need to parse the cookies.
-  if (req.cookies) return req.cookies
+  if (req.cookies) return req.cookies;
 
   // For pages we do need to parse the cookies.
-  const cookie = req.headers?.cookie
-  return parse(cookie || '')
+  const cookie = req.headers?.cookie;
+  return parse(cookie || "");
 }
 
 export function getTokenCookie(req) {
-  const cookies = parseCookies(req)
-  return cookies[TOKEN_NAME]
+  const cookies = parseCookies(req);
+  return cookies[TOKEN_NAME];
 }
diff --git a/examples/api-routes-apollo-server-and-client-auth/lib/auth.ts b/examples/api-routes-apollo-server-and-client-auth/lib/auth.ts
index fe830e95d5..15bcaec77a 100644
--- a/examples/api-routes-apollo-server-and-client-auth/lib/auth.ts
+++ b/examples/api-routes-apollo-server-and-client-auth/lib/auth.ts
@@ -1,29 +1,29 @@
-import Iron from '@hapi/iron'
-import { MAX_AGE, setTokenCookie, getTokenCookie } from './auth-cookies'
+import Iron from "@hapi/iron";
+import { MAX_AGE, setTokenCookie, getTokenCookie } from "./auth-cookies";
 
-const TOKEN_SECRET = process.env.TOKEN_SECRET
+const TOKEN_SECRET = process.env.TOKEN_SECRET;
 
 export async function setLoginSession(res, session) {
-  const createdAt = Date.now()
+  const createdAt = Date.now();
   // Create a session object with a max age that we can validate later
-  const obj = { ...session, createdAt, maxAge: MAX_AGE }
-  const token = await Iron.seal(obj, TOKEN_SECRET, Iron.defaults)
+  const obj = { ...session, createdAt, maxAge: MAX_AGE };
+  const token = await Iron.seal(obj, TOKEN_SECRET, Iron.defaults);
 
-  setTokenCookie(res, token)
+  setTokenCookie(res, token);
 }
 
 export async function getLoginSession(req) {
-  const token = getTokenCookie(req)
+  const token = getTokenCookie(req);
 
-  if (!token) return
+  if (!token) return;
 
-  const session = await Iron.unseal(token, TOKEN_SECRET, Iron.defaults)
-  const expiresAt = session.createdAt + session.maxAge * 1000
+  const session = await Iron.unseal(token, TOKEN_SECRET, Iron.defaults);
+  const expiresAt = session.createdAt + session.maxAge * 1000;
 
   // Validate the expiration date of the session
   if (Date.now() > expiresAt) {
-    throw new Error('Session expired')
+    throw new Error("Session expired");
   }
 
-  return session
+  return session;
 }
diff --git a/examples/api-routes-apollo-server-and-client-auth/lib/form.ts b/examples/api-routes-apollo-server-and-client-auth/lib/form.ts
index 7fef9d257d..78426be423 100644
--- a/examples/api-routes-apollo-server-and-client-auth/lib/form.ts
+++ b/examples/api-routes-apollo-server-and-client-auth/lib/form.ts
@@ -3,11 +3,11 @@ export function getErrorMessage(error) {
     for (const graphQLError of error.graphQLErrors) {
       if (
         graphQLError.extensions &&
-        graphQLError.extensions.code === 'BAD_USER_INPUT'
+        graphQLError.extensions.code === "BAD_USER_INPUT"
       ) {
-        return graphQLError.message
+        return graphQLError.message;
       }
     }
   }
-  return error.message
+  return error.message;
 }
diff --git a/examples/api-routes-apollo-server-and-client-auth/lib/user.ts b/examples/api-routes-apollo-server-and-client-auth/lib/user.ts
index df9b1fca53..da0284f491 100644
--- a/examples/api-routes-apollo-server-and-client-auth/lib/user.ts
+++ b/examples/api-routes-apollo-server-and-client-auth/lib/user.ts
@@ -1,46 +1,46 @@
-import crypto from 'crypto'
-import { v4 as uuidv4 } from 'uuid'
+import crypto from "crypto";
+import { v4 as uuidv4 } from "uuid";
 
 /**
  * User methods. The example doesn't contain a DB, but for real applications you must use a
  * db here, such as MongoDB, Fauna, SQL, etc.
  */
 
-const users = []
+const users = [];
 
 export async function createUser({ email, password }) {
   // Here you should create the user and save the salt and hashed password (some dbs may have
   // authentication methods that will do it for you so you don't have to worry about it):
-  const salt = crypto.randomBytes(16).toString('hex')
+  const salt = crypto.randomBytes(16).toString("hex");
   const hash = crypto
-    .pbkdf2Sync(password, salt, 1000, 64, 'sha512')
-    .toString('hex')
+    .pbkdf2Sync(password, salt, 1000, 64, "sha512")
+    .toString("hex");
   const user = {
     id: uuidv4(),
     createdAt: Date.now(),
     email,
     hash,
     salt,
-  }
+  };
 
   // This is an in memory store for users, there is no data persistence without a proper DB
-  users.push(user)
+  users.push(user);
 
-  return user
+  return user;
 }
 
 // Here you should lookup for the user in your DB
 export async function findUser({ email }) {
   // This is an in memory store for users, there is no data persistence without a proper DB
-  return users.find((user) => user.email === email)
+  return users.find((user) => user.email === email);
 }
 
 // Compare the password of an already fetched user (using `findUser`) and compare the
 // password for a potential match
 export async function validatePassword(user, inputPassword) {
   const inputHash = crypto
-    .pbkdf2Sync(inputPassword, user.salt, 1000, 64, 'sha512')
-    .toString('hex')
-  const passwordsMatch = user.hash === inputHash
-  return passwordsMatch
+    .pbkdf2Sync(inputPassword, user.salt, 1000, 64, "sha512")
+    .toString("hex");
+  const passwordsMatch = user.hash === inputHash;
+  return passwordsMatch;
 }
diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/_app.tsx b/examples/api-routes-apollo-server-and-client-auth/pages/_app.tsx
index 482728ae76..5d5e890078 100644
--- a/examples/api-routes-apollo-server-and-client-auth/pages/_app.tsx
+++ b/examples/api-routes-apollo-server-and-client-auth/pages/_app.tsx
@@ -1,12 +1,12 @@
-import { ApolloProvider } from '@apollo/client'
-import { useApollo } from '../apollo/client'
+import { ApolloProvider } from "@apollo/client";
+import { useApollo } from "../apollo/client";
 
 export default function App({ Component, pageProps }) {
-  const apolloClient = useApollo(pageProps.initialApolloState)
+  const apolloClient = useApollo(pageProps.initialApolloState);
 
   return (
     <ApolloProvider client={apolloClient}>
       <Component {...pageProps} />
     </ApolloProvider>
-  )
+  );
 }
diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/about.tsx b/examples/api-routes-apollo-server-and-client-auth/pages/about.tsx
index cd008b885a..f2486bf89a 100644
--- a/examples/api-routes-apollo-server-and-client-auth/pages/about.tsx
+++ b/examples/api-routes-apollo-server-and-client-auth/pages/about.tsx
@@ -1,9 +1,9 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function About() {
   return (
     <div>
       Welcome to the about page. Go to the <Link href="/">Home</Link> page.
     </div>
-  )
+  );
 }
diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/api/graphql.ts b/examples/api-routes-apollo-server-and-client-auth/pages/api/graphql.ts
index 6f8a37a9f1..62c2357e2b 100644
--- a/examples/api-routes-apollo-server-and-client-auth/pages/api/graphql.ts
+++ b/examples/api-routes-apollo-server-and-client-auth/pages/api/graphql.ts
@@ -1,15 +1,15 @@
-import { ApolloServer } from '@apollo/server'
-import { startServerAndCreateNextHandler } from '@as-integrations/next'
-import { NextApiRequest, NextApiResponse } from 'next'
-import { schema } from '../../apollo/schema'
+import { ApolloServer } from "@apollo/server";
+import { startServerAndCreateNextHandler } from "@as-integrations/next";
+import { NextApiRequest, NextApiResponse } from "next";
+import { schema } from "../../apollo/schema";
 
 type ExampleContext = {
-  req: NextApiRequest
-  res: NextApiResponse
-}
+  req: NextApiRequest;
+  res: NextApiResponse;
+};
 
-const apolloServer = new ApolloServer<ExampleContext>({ schema })
+const apolloServer = new ApolloServer<ExampleContext>({ schema });
 
 export default startServerAndCreateNextHandler(apolloServer, {
   context: async (req, res) => ({ req, res }),
-})
+});
diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/index.tsx b/examples/api-routes-apollo-server-and-client-auth/pages/index.tsx
index a700aae4d7..c1dfa6ca10 100644
--- a/examples/api-routes-apollo-server-and-client-auth/pages/index.tsx
+++ b/examples/api-routes-apollo-server-and-client-auth/pages/index.tsx
@@ -1,7 +1,7 @@
-import { useEffect } from 'react'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import { gql, useQuery } from '@apollo/client'
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { gql, useQuery } from "@apollo/client";
 
 const ViewerQuery = gql`
   query ViewerQuery {
@@ -10,36 +10,36 @@ const ViewerQuery = gql`
       email
     }
   }
-`
+`;
 
 const Index = () => {
-  const router = useRouter()
-  const { data, loading, error } = useQuery(ViewerQuery)
-  const viewer = data?.viewer
-  const shouldRedirect = !(loading || error || viewer)
+  const router = useRouter();
+  const { data, loading, error } = useQuery(ViewerQuery);
+  const viewer = data?.viewer;
+  const shouldRedirect = !(loading || error || viewer);
 
   useEffect(() => {
     if (shouldRedirect) {
-      router.push('/signin')
+      router.push("/signin");
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [shouldRedirect])
+  }, [shouldRedirect]);
 
   if (error) {
-    return <p>{error.message}</p>
+    return <p>{error.message}</p>;
   }
 
   if (viewer) {
     return (
       <div>
-        You're signed in as {viewer.email}. Go to{' '}
-        <Link href="/about">about</Link> page or{' '}
+        You're signed in as {viewer.email}. Go to{" "}
+        <Link href="/about">about</Link> page or{" "}
         <Link href="/signout">signout</Link>.
       </div>
-    )
+    );
   }
 
-  return <p>Loading...</p>
-}
+  return <p>Loading...</p>;
+};
 
-export default Index
+export default Index;
diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/signin.tsx b/examples/api-routes-apollo-server-and-client-auth/pages/signin.tsx
index a52618d680..91638502d6 100644
--- a/examples/api-routes-apollo-server-and-client-auth/pages/signin.tsx
+++ b/examples/api-routes-apollo-server-and-client-auth/pages/signin.tsx
@@ -1,10 +1,10 @@
-import { useState } from 'react'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import { gql } from '@apollo/client'
-import { useMutation, useApolloClient } from '@apollo/client'
-import { getErrorMessage } from '../lib/form'
-import Field from '../components/field'
+import { useState } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { gql } from "@apollo/client";
+import { useMutation, useApolloClient } from "@apollo/client";
+import { getErrorMessage } from "../lib/form";
+import Field from "../components/field";
 
 const SignInMutation = gql`
   mutation SignInMutation($email: String!, $password: String!) {
@@ -15,33 +15,33 @@ const SignInMutation = gql`
       }
     }
   }
-`
+`;
 
 function SignIn() {
-  const client = useApolloClient()
-  const [signIn] = useMutation(SignInMutation)
-  const [errorMsg, setErrorMsg] = useState()
-  const router = useRouter()
+  const client = useApolloClient();
+  const [signIn] = useMutation(SignInMutation);
+  const [errorMsg, setErrorMsg] = useState();
+  const router = useRouter();
 
   async function handleSubmit(event) {
-    event.preventDefault()
+    event.preventDefault();
 
-    const emailElement = event.currentTarget.elements.email
-    const passwordElement = event.currentTarget.elements.password
+    const emailElement = event.currentTarget.elements.email;
+    const passwordElement = event.currentTarget.elements.password;
 
     try {
-      await client.resetStore()
+      await client.resetStore();
       const { data } = await signIn({
         variables: {
           email: emailElement.value,
           password: passwordElement.value,
         },
-      })
+      });
       if (data.signIn.user) {
-        await router.push('/')
+        await router.push("/");
       }
     } catch (error) {
-      setErrorMsg(getErrorMessage(error))
+      setErrorMsg(getErrorMessage(error));
     }
   }
 
@@ -64,11 +64,11 @@ function SignIn() {
           required
           label="Password"
         />
-        <button type="submit">Sign in</button> or{' '}
+        <button type="submit">Sign in</button> or{" "}
         <Link href="/signup">Sign up</Link>
       </form>
     </>
-  )
+  );
 }
 
-export default SignIn
+export default SignIn;
diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/signout.tsx b/examples/api-routes-apollo-server-and-client-auth/pages/signout.tsx
index 046310db75..fb37dbe976 100644
--- a/examples/api-routes-apollo-server-and-client-auth/pages/signout.tsx
+++ b/examples/api-routes-apollo-server-and-client-auth/pages/signout.tsx
@@ -1,27 +1,27 @@
-import { useEffect } from 'react'
-import { useRouter } from 'next/router'
-import { gql, useMutation, useApolloClient } from '@apollo/client'
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { gql, useMutation, useApolloClient } from "@apollo/client";
 
 const SignOutMutation = gql`
   mutation SignOutMutation {
     signOut
   }
-`
+`;
 
 function SignOut() {
-  const client = useApolloClient()
-  const router = useRouter()
-  const [signOut] = useMutation(SignOutMutation)
+  const client = useApolloClient();
+  const router = useRouter();
+  const [signOut] = useMutation(SignOutMutation);
 
   useEffect(() => {
     signOut().then(() => {
       client.resetStore().then(() => {
-        router.push('/signin')
-      })
-    })
-  }, [signOut, router, client])
+        router.push("/signin");
+      });
+    });
+  }, [signOut, router, client]);
 
-  return <p>Signing out...</p>
+  return <p>Signing out...</p>;
 }
 
-export default SignOut
+export default SignOut;
diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/signup.tsx b/examples/api-routes-apollo-server-and-client-auth/pages/signup.tsx
index 2a6d4fb8bc..c781c12c6b 100644
--- a/examples/api-routes-apollo-server-and-client-auth/pages/signup.tsx
+++ b/examples/api-routes-apollo-server-and-client-auth/pages/signup.tsx
@@ -1,9 +1,9 @@
-import { useState } from 'react'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import { gql, useMutation } from '@apollo/client'
-import { getErrorMessage } from '../lib/form'
-import Field from '../components/field'
+import { useState } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { gql, useMutation } from "@apollo/client";
+import { getErrorMessage } from "../lib/form";
+import Field from "../components/field";
 
 const SignUpMutation = gql`
   mutation SignUpMutation($email: String!, $password: String!) {
@@ -14,17 +14,17 @@ const SignUpMutation = gql`
       }
     }
   }
-`
+`;
 
 function SignUp() {
-  const [signUp] = useMutation(SignUpMutation)
-  const [errorMsg, setErrorMsg] = useState()
-  const router = useRouter()
+  const [signUp] = useMutation(SignUpMutation);
+  const [errorMsg, setErrorMsg] = useState();
+  const router = useRouter();
 
   async function handleSubmit(event) {
-    event.preventDefault()
-    const emailElement = event.currentTarget.elements.email
-    const passwordElement = event.currentTarget.elements.password
+    event.preventDefault();
+    const emailElement = event.currentTarget.elements.email;
+    const passwordElement = event.currentTarget.elements.password;
 
     try {
       await signUp({
@@ -32,11 +32,11 @@ function SignUp() {
           email: emailElement.value,
           password: passwordElement.value,
         },
-      })
+      });
 
-      router.push('/signin')
+      router.push("/signin");
     } catch (error) {
-      setErrorMsg(getErrorMessage(error))
+      setErrorMsg(getErrorMessage(error));
     }
   }
 
@@ -59,11 +59,11 @@ function SignUp() {
           required
           label="Password"
         />
-        <button type="submit">Sign up</button> or{' '}
+        <button type="submit">Sign up</button> or{" "}
         <Link href="/signin">Sign in</Link>
       </form>
     </>
-  )
+  );
 }
 
-export default SignUp
+export default SignUp;
diff --git a/examples/api-routes-apollo-server-and-client/apollo/client.tsx b/examples/api-routes-apollo-server-and-client/apollo/client.tsx
index a6d28253a2..d5d95d81d5 100644
--- a/examples/api-routes-apollo-server-and-client/apollo/client.tsx
+++ b/examples/api-routes-apollo-server-and-client/apollo/client.tsx
@@ -1,54 +1,54 @@
-import { useMemo } from 'react'
-import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client'
-import { SchemaLink } from '@apollo/client/link/schema'
-import { schema } from '../apollo/schema'
-import merge from 'deepmerge'
+import { useMemo } from "react";
+import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
+import { SchemaLink } from "@apollo/client/link/schema";
+import { schema } from "../apollo/schema";
+import merge from "deepmerge";
 
-let apolloClient
+let apolloClient;
 
 function createIsomorphLink() {
-  if (typeof window === 'undefined') {
-    return new SchemaLink({ schema })
+  if (typeof window === "undefined") {
+    return new SchemaLink({ schema });
   } else {
     return new HttpLink({
-      uri: '/api/graphql',
-      credentials: 'same-origin',
-    })
+      uri: "/api/graphql",
+      credentials: "same-origin",
+    });
   }
 }
 
 function createApolloClient() {
   return new ApolloClient({
-    ssrMode: typeof window === 'undefined',
+    ssrMode: typeof window === "undefined",
     link: createIsomorphLink(),
     cache: new InMemoryCache(),
-  })
+  });
 }
 
 export function initializeApollo(initialState = null) {
-  const _apolloClient = apolloClient ?? createApolloClient()
+  const _apolloClient = apolloClient ?? createApolloClient();
 
   // If your page has Next.js data fetching methods that use Apollo Client, the initial state
   // gets hydrated here
   if (initialState) {
     // Get existing cache, loaded during client side data fetching
-    const existingCache = _apolloClient.extract()
+    const existingCache = _apolloClient.extract();
 
     // Merge the existing cache into data passed from getStaticProps/getServerSideProps
-    const data = merge(initialState, existingCache)
+    const data = merge(initialState, existingCache);
 
     // Restore the cache with the merged data
-    _apolloClient.cache.restore(data)
+    _apolloClient.cache.restore(data);
   }
   // For SSG and SSR always create a new Apollo Client
-  if (typeof window === 'undefined') return _apolloClient
+  if (typeof window === "undefined") return _apolloClient;
   // Create the Apollo Client once in the client
-  if (!apolloClient) apolloClient = _apolloClient
+  if (!apolloClient) apolloClient = _apolloClient;
 
-  return _apolloClient
+  return _apolloClient;
 }
 
 export function useApollo(initialState) {
-  const store = useMemo(() => initializeApollo(initialState), [initialState])
-  return store
+  const store = useMemo(() => initializeApollo(initialState), [initialState]);
+  return store;
 }
diff --git a/examples/api-routes-apollo-server-and-client/apollo/resolvers.ts b/examples/api-routes-apollo-server-and-client/apollo/resolvers.ts
index f85c477223..577abb43ad 100644
--- a/examples/api-routes-apollo-server-and-client/apollo/resolvers.ts
+++ b/examples/api-routes-apollo-server-and-client/apollo/resolvers.ts
@@ -1,7 +1,7 @@
 export const resolvers = {
   Query: {
     viewer() {
-      return { id: 1, name: 'John Smith', status: 'cached' }
+      return { id: 1, name: "John Smith", status: "cached" };
     },
   },
-}
+};
diff --git a/examples/api-routes-apollo-server-and-client/apollo/schema.ts b/examples/api-routes-apollo-server-and-client/apollo/schema.ts
index 0f14aa64f6..0aef15f2c3 100644
--- a/examples/api-routes-apollo-server-and-client/apollo/schema.ts
+++ b/examples/api-routes-apollo-server-and-client/apollo/schema.ts
@@ -1,8 +1,8 @@
-import { makeExecutableSchema } from '@graphql-tools/schema'
-import { typeDefs } from './type-defs'
-import { resolvers } from './resolvers'
+import { makeExecutableSchema } from "@graphql-tools/schema";
+import { typeDefs } from "./type-defs";
+import { resolvers } from "./resolvers";
 
 export const schema = makeExecutableSchema({
   typeDefs,
   resolvers,
-})
+});
diff --git a/examples/api-routes-apollo-server-and-client/apollo/type-defs.ts b/examples/api-routes-apollo-server-and-client/apollo/type-defs.ts
index 53c485d64e..c213ed0199 100644
--- a/examples/api-routes-apollo-server-and-client/apollo/type-defs.ts
+++ b/examples/api-routes-apollo-server-and-client/apollo/type-defs.ts
@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client'
+import { gql } from "@apollo/client";
 
 export const typeDefs = gql`
   type User {
@@ -10,4 +10,4 @@ export const typeDefs = gql`
   type Query {
     viewer: User
   }
-`
+`;
diff --git a/examples/api-routes-apollo-server-and-client/pages/_app.tsx b/examples/api-routes-apollo-server-and-client/pages/_app.tsx
index 482728ae76..5d5e890078 100644
--- a/examples/api-routes-apollo-server-and-client/pages/_app.tsx
+++ b/examples/api-routes-apollo-server-and-client/pages/_app.tsx
@@ -1,12 +1,12 @@
-import { ApolloProvider } from '@apollo/client'
-import { useApollo } from '../apollo/client'
+import { ApolloProvider } from "@apollo/client";
+import { useApollo } from "../apollo/client";
 
 export default function App({ Component, pageProps }) {
-  const apolloClient = useApollo(pageProps.initialApolloState)
+  const apolloClient = useApollo(pageProps.initialApolloState);
 
   return (
     <ApolloProvider client={apolloClient}>
       <Component {...pageProps} />
     </ApolloProvider>
-  )
+  );
 }
diff --git a/examples/api-routes-apollo-server-and-client/pages/about.tsx b/examples/api-routes-apollo-server-and-client/pages/about.tsx
index 1a13743a81..81e2c82dcc 100644
--- a/examples/api-routes-apollo-server-and-client/pages/about.tsx
+++ b/examples/api-routes-apollo-server-and-client/pages/about.tsx
@@ -1,9 +1,9 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function About() {
   return (
     <div>
       This is a static page goto <Link href="/">dynamic</Link> page.
     </div>
-  )
+  );
 }
diff --git a/examples/api-routes-apollo-server-and-client/pages/api/graphql.ts b/examples/api-routes-apollo-server-and-client/pages/api/graphql.ts
index 046f133748..3d8280dfe9 100644
--- a/examples/api-routes-apollo-server-and-client/pages/api/graphql.ts
+++ b/examples/api-routes-apollo-server-and-client/pages/api/graphql.ts
@@ -1,7 +1,7 @@
-import { ApolloServer } from '@apollo/server'
-import { startServerAndCreateNextHandler } from '@as-integrations/next'
-import { schema } from '../../apollo/schema'
+import { ApolloServer } from "@apollo/server";
+import { startServerAndCreateNextHandler } from "@as-integrations/next";
+import { schema } from "../../apollo/schema";
 
-const apolloServer = new ApolloServer({ schema })
+const apolloServer = new ApolloServer({ schema });
 
-export default startServerAndCreateNextHandler(apolloServer)
+export default startServerAndCreateNextHandler(apolloServer);
diff --git a/examples/api-routes-apollo-server-and-client/pages/index.tsx b/examples/api-routes-apollo-server-and-client/pages/index.tsx
index 42b09c1c93..7db4542db2 100644
--- a/examples/api-routes-apollo-server-and-client/pages/index.tsx
+++ b/examples/api-routes-apollo-server-and-client/pages/index.tsx
@@ -1,7 +1,7 @@
-import gql from 'graphql-tag'
-import Link from 'next/link'
-import { useQuery } from '@apollo/client'
-import { initializeApollo } from '../apollo/client'
+import gql from "graphql-tag";
+import Link from "next/link";
+import { useQuery } from "@apollo/client";
+import { initializeApollo } from "../apollo/client";
 
 const ViewerQuery = gql`
   query ViewerQuery {
@@ -11,33 +11,33 @@ const ViewerQuery = gql`
       status
     }
   }
-`
+`;
 
 const Index = () => {
   const {
     data: { viewer },
-  } = useQuery(ViewerQuery)
+  } = useQuery(ViewerQuery);
 
   return (
     <div>
-      You're signed in as {viewer.name} and you're {viewer.status} goto{' '}
+      You're signed in as {viewer.name} and you're {viewer.status} goto{" "}
       <Link href="/about">static</Link> page.
     </div>
-  )
-}
+  );
+};
 
 export async function getStaticProps() {
-  const apolloClient = initializeApollo()
+  const apolloClient = initializeApollo();
 
   await apolloClient.query({
     query: ViewerQuery,
-  })
+  });
 
   return {
     props: {
       initialApolloState: apolloClient.cache.extract(),
     },
-  }
+  };
 }
 
-export default Index
+export default Index;
diff --git a/examples/api-routes-apollo-server/pages/[username].tsx b/examples/api-routes-apollo-server/pages/[username].tsx
index c9e3dc7bae..a59791cd5a 100644
--- a/examples/api-routes-apollo-server/pages/[username].tsx
+++ b/examples/api-routes-apollo-server/pages/[username].tsx
@@ -1,19 +1,19 @@
-import queryGraphql from '../shared/query-graphql'
+import queryGraphql from "../shared/query-graphql";
 
 export default function UserProfile({ user }) {
   if (!user) {
-    return <h1>User Not Found</h1>
+    return <h1>User Not Found</h1>;
   }
   return (
     <h1>
       {user.username} is {user.name}
     </h1>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const { params } = context
-  const { username } = params
+  const { params } = context;
+  const { username } = params;
   const { user = null } = await queryGraphql(
     `
     query($username: String) {
@@ -23,9 +23,9 @@ export async function getStaticProps(context) {
       }
     }
   `,
-    { username }
-  )
-  return { props: { user } }
+    { username },
+  );
+  return { props: { user } };
 }
 
 export async function getStaticPaths() {
@@ -35,12 +35,12 @@ export async function getStaticPaths() {
         username
       }
     }
-  `)) as { users: { username: string }[] }
+  `)) as { users: { username: string }[] };
 
   return {
     paths: users.map(({ username }) => ({
       params: { username },
     })),
     fallback: true,
-  }
+  };
 }
diff --git a/examples/api-routes-apollo-server/pages/api/graphql.ts b/examples/api-routes-apollo-server/pages/api/graphql.ts
index cc9ef44795..89a5feef3f 100644
--- a/examples/api-routes-apollo-server/pages/api/graphql.ts
+++ b/examples/api-routes-apollo-server/pages/api/graphql.ts
@@ -1,7 +1,7 @@
-import { ApolloServer } from '@apollo/server'
-import { startServerAndCreateNextHandler } from '@as-integrations/next'
-import { makeExecutableSchema } from '@graphql-tools/schema'
-import { gql } from 'graphql-tag'
+import { ApolloServer } from "@apollo/server";
+import { startServerAndCreateNextHandler } from "@as-integrations/next";
+import { makeExecutableSchema } from "@graphql-tools/schema";
+import { gql } from "graphql-tag";
 
 const typeDefs = gql`
   type Query {
@@ -12,28 +12,28 @@ const typeDefs = gql`
     name: String
     username: String
   }
-`
+`;
 
 const users = [
-  { name: 'Leeroy Jenkins', username: 'leeroy' },
-  { name: 'Foo Bar', username: 'foobar' },
-]
+  { name: "Leeroy Jenkins", username: "leeroy" },
+  { name: "Foo Bar", username: "foobar" },
+];
 
 const resolvers = {
   Query: {
     users() {
-      return users
+      return users;
     },
     user(parent, { username }) {
-      return users.find((user) => user.username === username)
+      return users.find((user) => user.username === username);
     },
   },
-}
+};
 
-export const schema = makeExecutableSchema({ typeDefs, resolvers })
+export const schema = makeExecutableSchema({ typeDefs, resolvers });
 
 const server = new ApolloServer({
   schema,
-})
+});
 
-export default startServerAndCreateNextHandler(server)
+export default startServerAndCreateNextHandler(server);
diff --git a/examples/api-routes-apollo-server/pages/index.tsx b/examples/api-routes-apollo-server/pages/index.tsx
index 9c101413b2..fdd5df29ab 100644
--- a/examples/api-routes-apollo-server/pages/index.tsx
+++ b/examples/api-routes-apollo-server/pages/index.tsx
@@ -1,6 +1,6 @@
-import Link from 'next/link'
+import Link from "next/link";
 
-import queryGraphql from '../shared/query-graphql'
+import queryGraphql from "../shared/query-graphql";
 
 export default function UserListing({ users }) {
   return (
@@ -16,7 +16,7 @@ export default function UserListing({ users }) {
         ))}
       </ul>
     </div>
-  )
+  );
 }
 
 export async function getStaticProps() {
@@ -27,6 +27,6 @@ export async function getStaticProps() {
         username
       }
     }
-  `)
-  return { props: { users } }
+  `);
+  return { props: { users } };
 }
diff --git a/examples/api-routes-apollo-server/shared/query-graphql/index.ts b/examples/api-routes-apollo-server/shared/query-graphql/index.ts
index 9393dbf8f2..5fb5700873 100644
--- a/examples/api-routes-apollo-server/shared/query-graphql/index.ts
+++ b/examples/api-routes-apollo-server/shared/query-graphql/index.ts
@@ -1,8 +1,8 @@
-import { graphql } from 'graphql'
+import { graphql } from "graphql";
 
-import { schema } from '../../pages/api/graphql'
+import { schema } from "../../pages/api/graphql";
 
 export default async function queryGraphql(query, variableValues = {}) {
-  const { data } = await graphql({ schema, source: query, variableValues })
-  return data || {}
+  const { data } = await graphql({ schema, source: query, variableValues });
+  return data || {};
 }
diff --git a/examples/api-routes-cors/pages/api/cors.ts b/examples/api-routes-cors/pages/api/cors.ts
index 8266295ff9..aa982c845c 100644
--- a/examples/api-routes-cors/pages/api/cors.ts
+++ b/examples/api-routes-cors/pages/api/cors.ts
@@ -1,37 +1,37 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import Cors from 'cors'
+import type { NextApiRequest, NextApiResponse } from "next";
+import Cors from "cors";
 
 // Initializing the cors middleware
 // You can read more about the available options here: https://github.com/expressjs/cors#configuration-options
 const cors = Cors({
-  methods: ['POST', 'GET', 'HEAD'],
-})
+  methods: ["POST", "GET", "HEAD"],
+});
 
 // Helper method to wait for a middleware to execute before continuing
 // And to throw an error when an error happens in a middleware
 function runMiddleware(
   req: NextApiRequest,
   res: NextApiResponse,
-  fn: Function
+  fn: Function,
 ) {
   return new Promise((resolve, reject) => {
     fn(req, res, (result: any) => {
       if (result instanceof Error) {
-        return reject(result)
+        return reject(result);
       }
 
-      return resolve(result)
-    })
-  })
+      return resolve(result);
+    });
+  });
 }
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
   // Run the middleware
-  await runMiddleware(req, res, cors)
+  await runMiddleware(req, res, cors);
 
   // Rest of the API logic
-  res.json({ message: 'Hello Everyone!' })
+  res.json({ message: "Hello Everyone!" });
 }
diff --git a/examples/api-routes-cors/pages/index.tsx b/examples/api-routes-cors/pages/index.tsx
index 9506fde9d8..9b1f22df7e 100644
--- a/examples/api-routes-cors/pages/index.tsx
+++ b/examples/api-routes-cors/pages/index.tsx
@@ -5,5 +5,5 @@ export default function Index() {
       domain and make a POST / GET / OPTIONS request to <b>/api/cors</b>. Using
       a different method from those mentioned will be blocked by CORS
     </p>
-  )
+  );
 }
diff --git a/examples/api-routes-graphql/pages/api/graphql.ts b/examples/api-routes-graphql/pages/api/graphql.ts
index aaa4305b5a..6d90136b7b 100644
--- a/examples/api-routes-graphql/pages/api/graphql.ts
+++ b/examples/api-routes-graphql/pages/api/graphql.ts
@@ -1,4 +1,4 @@
-import { createYoga, createSchema } from 'graphql-yoga'
+import { createYoga, createSchema } from "graphql-yoga";
 
 const typeDefs = /* GraphQL */ `
   type Query {
@@ -7,30 +7,30 @@ const typeDefs = /* GraphQL */ `
   type User {
     name: String
   }
-`
+`;
 
 const resolvers = {
   Query: {
     users() {
-      return [{ name: 'Nextjs' }]
+      return [{ name: "Nextjs" }];
     },
   },
-}
+};
 
 const schema = createSchema({
   typeDefs,
   resolvers,
-})
+});
 
 export const config = {
   api: {
     // Disable body parsing (required for file uploads)
     bodyParser: false,
   },
-}
+};
 
 export default createYoga({
   schema,
   // Needed to be defined explicitly because our endpoint lives at a different path other than `/graphql`
-  graphqlEndpoint: '/api/graphql',
-})
+  graphqlEndpoint: "/api/graphql",
+});
diff --git a/examples/api-routes-graphql/pages/index.tsx b/examples/api-routes-graphql/pages/index.tsx
index 03e13596ab..39c9b93c3e 100644
--- a/examples/api-routes-graphql/pages/index.tsx
+++ b/examples/api-routes-graphql/pages/index.tsx
@@ -1,30 +1,33 @@
-import useSWR from 'swr'
+import useSWR from "swr";
 
 const fetcher = (query: string) =>
-  fetch('/api/graphql', {
-    method: 'POST',
+  fetch("/api/graphql", {
+    method: "POST",
     headers: {
-      'Content-type': 'application/json',
+      "Content-type": "application/json",
     },
     body: JSON.stringify({ query }),
   })
     .then((res) => res.json())
-    .then((json) => json.data)
+    .then((json) => json.data);
 
 type Data = {
   users: {
-    name: string
-  }[]
-}
+    name: string;
+  }[];
+};
 
 export default function Index() {
-  const { data, error, isLoading } = useSWR<Data>('{ users { name } }', fetcher)
+  const { data, error, isLoading } = useSWR<Data>(
+    "{ users { name } }",
+    fetcher,
+  );
 
-  if (error) return <div>Failed to load</div>
-  if (isLoading) return <div>Loading...</div>
-  if (!data) return null
+  if (error) return <div>Failed to load</div>;
+  if (isLoading) return <div>Loading...</div>;
+  if (!data) return null;
 
-  const { users } = data
+  const { users } = data;
 
   return (
     <div>
@@ -32,5 +35,5 @@ export default function Index() {
         <div key={index}>{user.name}</div>
       ))}
     </div>
-  )
+  );
 }
diff --git a/examples/api-routes-middleware/pages/api/cookies.ts b/examples/api-routes-middleware/pages/api/cookies.ts
index 2b43c28047..8de356368b 100644
--- a/examples/api-routes-middleware/pages/api/cookies.ts
+++ b/examples/api-routes-middleware/pages/api/cookies.ts
@@ -1,9 +1,9 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { setCookie } from '../../utils/cookies'
+import type { NextApiRequest, NextApiResponse } from "next";
+import { setCookie } from "../../utils/cookies";
 
 export default function handler(_req: NextApiRequest, res: NextApiResponse) {
   // Calling our pure function using the `res` object, it will add the `set-cookie` header
-  setCookie(res, 'Next.js', 'api-middleware!')
+  setCookie(res, "Next.js", "api-middleware!");
   // Return the `set-cookie` header so we can display it in the browser and show that it works!
-  res.end(res.getHeader('Set-Cookie'))
+  res.end(res.getHeader("Set-Cookie"));
 }
diff --git a/examples/api-routes-middleware/pages/index.tsx b/examples/api-routes-middleware/pages/index.tsx
index 566a92ff73..373602c82e 100644
--- a/examples/api-routes-middleware/pages/index.tsx
+++ b/examples/api-routes-middleware/pages/index.tsx
@@ -1,13 +1,13 @@
-import useSWR from 'swr'
+import useSWR from "swr";
 
-const fetcher = (url: string) => fetch(url).then((res) => res.text())
+const fetcher = (url: string) => fetch(url).then((res) => res.text());
 
 export default function Index() {
-  const { data, error, isLoading } = useSWR<string>('/api/cookies', fetcher)
+  const { data, error, isLoading } = useSWR<string>("/api/cookies", fetcher);
 
-  if (error) return <div>Failed to load</div>
-  if (isLoading) return <div>Loading...</div>
-  if (!data) return null
+  if (error) return <div>Failed to load</div>;
+  if (isLoading) return <div>Loading...</div>;
+  if (!data) return null;
 
-  return <div>{`Cookie from response: "${data}"`}</div>
+  return <div>{`Cookie from response: "${data}"`}</div>;
 }
diff --git a/examples/api-routes-middleware/utils/cookies.ts b/examples/api-routes-middleware/utils/cookies.ts
index fffe89978f..975df362cd 100644
--- a/examples/api-routes-middleware/utils/cookies.ts
+++ b/examples/api-routes-middleware/utils/cookies.ts
@@ -1,5 +1,5 @@
-import type { NextApiResponse } from 'next'
-import { serialize, CookieSerializeOptions } from 'cookie'
+import type { NextApiResponse } from "next";
+import { serialize, CookieSerializeOptions } from "cookie";
 
 /**
  * This sets `cookie` using the `res` object
@@ -9,14 +9,14 @@ export const setCookie = (
   res: NextApiResponse,
   name: string,
   value: unknown,
-  options: CookieSerializeOptions = {}
+  options: CookieSerializeOptions = {},
 ) => {
   const stringValue =
-    typeof value === 'object' ? 'j:' + JSON.stringify(value) : String(value)
+    typeof value === "object" ? "j:" + JSON.stringify(value) : String(value);
 
-  if (typeof options.maxAge === 'number') {
-    options.expires = new Date(Date.now() + options.maxAge * 1000)
+  if (typeof options.maxAge === "number") {
+    options.expires = new Date(Date.now() + options.maxAge * 1000);
   }
 
-  res.setHeader('Set-Cookie', serialize(name, stringValue, options))
-}
+  res.setHeader("Set-Cookie", serialize(name, stringValue, options));
+};
diff --git a/examples/api-routes-rate-limit/pages/api/user.ts b/examples/api-routes-rate-limit/pages/api/user.ts
index ff3f446476..eddd2334c9 100644
--- a/examples/api-routes-rate-limit/pages/api/user.ts
+++ b/examples/api-routes-rate-limit/pages/api/user.ts
@@ -1,20 +1,20 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { v4 as uuidv4 } from 'uuid'
-import rateLimit from '../../utils/rate-limit'
+import type { NextApiRequest, NextApiResponse } from "next";
+import { v4 as uuidv4 } from "uuid";
+import rateLimit from "../../utils/rate-limit";
 
 const limiter = rateLimit({
   interval: 60 * 1000, // 60 seconds
   uniqueTokenPerInterval: 500, // Max 500 users per second
-})
+});
 
 export default async function handler(
   _req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
   try {
-    await limiter.check(res, 10, 'CACHE_TOKEN') // 10 requests per minute
-    res.status(200).json({ id: uuidv4() })
+    await limiter.check(res, 10, "CACHE_TOKEN"); // 10 requests per minute
+    res.status(200).json({ id: uuidv4() });
   } catch {
-    res.status(429).json({ error: 'Rate limit exceeded' })
+    res.status(429).json({ error: "Rate limit exceeded" });
   }
 }
diff --git a/examples/api-routes-rate-limit/pages/index.tsx b/examples/api-routes-rate-limit/pages/index.tsx
index 5de685d4c7..df910094e3 100644
--- a/examples/api-routes-rate-limit/pages/index.tsx
+++ b/examples/api-routes-rate-limit/pages/index.tsx
@@ -1,25 +1,27 @@
-import { useState } from 'react'
-import styles from '../styles.module.css'
+import { useState } from "react";
+import styles from "../styles.module.css";
 
 export default function Index() {
-  const [response, setResponse] = useState<Record<string, unknown> | null>(null)
+  const [response, setResponse] = useState<Record<string, unknown> | null>(
+    null,
+  );
 
   const makeRequest = async () => {
-    const res = await fetch('/api/user')
+    const res = await fetch("/api/user");
 
     setResponse({
       status: res.status,
       body: await res.json(),
-      limit: res.headers.get('X-RateLimit-Limit'),
-      remaining: res.headers.get('X-RateLimit-Remaining'),
-    })
-  }
+      limit: res.headers.get("X-RateLimit-Limit"),
+      remaining: res.headers.get("X-RateLimit-Remaining"),
+    });
+  };
 
   return (
     <main className={styles.container}>
       <h1>Next.js API Routes Rate Limiting</h1>
       <p>
-        This example uses <code className={styles.inlineCode}>lru-cache</code>{' '}
+        This example uses <code className={styles.inlineCode}>lru-cache</code>{" "}
         to implement a simple rate limiter for API routes (Serverless
         Functions).
       </p>
@@ -30,5 +32,5 @@ export default function Index() {
         </code>
       )}
     </main>
-  )
+  );
 }
diff --git a/examples/api-routes-rate-limit/styles.module.css b/examples/api-routes-rate-limit/styles.module.css
index f2cd0c79e7..855d9c01c9 100644
--- a/examples/api-routes-rate-limit/styles.module.css
+++ b/examples/api-routes-rate-limit/styles.module.css
@@ -47,7 +47,7 @@
 
 .inlineCode::before,
 .inlineCode::after {
-  content: '`';
+  content: "`";
 }
 
 .code {
diff --git a/examples/api-routes-rate-limit/utils/rate-limit.ts b/examples/api-routes-rate-limit/utils/rate-limit.ts
index 2c6c57ec6f..ab1aac4b1e 100644
--- a/examples/api-routes-rate-limit/utils/rate-limit.ts
+++ b/examples/api-routes-rate-limit/utils/rate-limit.ts
@@ -1,35 +1,35 @@
-import type { NextApiResponse } from 'next'
-import { LRUCache } from 'lru-cache'
+import type { NextApiResponse } from "next";
+import { LRUCache } from "lru-cache";
 
 type Options = {
-  uniqueTokenPerInterval?: number
-  interval?: number
-}
+  uniqueTokenPerInterval?: number;
+  interval?: number;
+};
 
 export default function rateLimit(options?: Options) {
   const tokenCache = new LRUCache({
     max: options?.uniqueTokenPerInterval || 500,
     ttl: options?.interval || 60000,
-  })
+  });
 
   return {
     check: (res: NextApiResponse, limit: number, token: string) =>
       new Promise<void>((resolve, reject) => {
-        const tokenCount = (tokenCache.get(token) as number[]) || [0]
+        const tokenCount = (tokenCache.get(token) as number[]) || [0];
         if (tokenCount[0] === 0) {
-          tokenCache.set(token, tokenCount)
+          tokenCache.set(token, tokenCount);
         }
-        tokenCount[0] += 1
+        tokenCount[0] += 1;
 
-        const currentUsage = tokenCount[0]
-        const isRateLimited = currentUsage >= limit
-        res.setHeader('X-RateLimit-Limit', limit)
+        const currentUsage = tokenCount[0];
+        const isRateLimited = currentUsage >= limit;
+        res.setHeader("X-RateLimit-Limit", limit);
         res.setHeader(
-          'X-RateLimit-Remaining',
-          isRateLimited ? 0 : limit - currentUsage
-        )
+          "X-RateLimit-Remaining",
+          isRateLimited ? 0 : limit - currentUsage,
+        );
 
-        return isRateLimited ? reject() : resolve()
+        return isRateLimited ? reject() : resolve();
       }),
-  }
+  };
 }
diff --git a/examples/api-routes-rest/interfaces/index.ts b/examples/api-routes-rest/interfaces/index.ts
index 6ea90ddd53..584eb6908f 100644
--- a/examples/api-routes-rest/interfaces/index.ts
+++ b/examples/api-routes-rest/interfaces/index.ts
@@ -1,4 +1,4 @@
 export type User = {
-  id: number
-  name?: string
-}
+  id: number;
+  name?: string;
+};
diff --git a/examples/api-routes-rest/pages/api/user/[id].ts b/examples/api-routes-rest/pages/api/user/[id].ts
index 3d48e81e07..3813227685 100644
--- a/examples/api-routes-rest/pages/api/user/[id].ts
+++ b/examples/api-routes-rest/pages/api/user/[id].ts
@@ -1,25 +1,25 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import type { User } from '../../../interfaces'
+import type { NextApiRequest, NextApiResponse } from "next";
+import type { User } from "../../../interfaces";
 
 export default function userHandler(
   req: NextApiRequest,
-  res: NextApiResponse<User>
+  res: NextApiResponse<User>,
 ) {
-  const { query, method } = req
-  const id = parseInt(query.id as string, 10)
-  const name = query.name as string
+  const { query, method } = req;
+  const id = parseInt(query.id as string, 10);
+  const name = query.name as string;
 
   switch (method) {
-    case 'GET':
+    case "GET":
       // Get data from your database
-      res.status(200).json({ id, name: `User ${id}` })
-      break
-    case 'PUT':
+      res.status(200).json({ id, name: `User ${id}` });
+      break;
+    case "PUT":
       // Update or create data in your database
-      res.status(200).json({ id, name: name || `User ${id}` })
-      break
+      res.status(200).json({ id, name: name || `User ${id}` });
+      break;
     default:
-      res.setHeader('Allow', ['GET', 'PUT'])
-      res.status(405).end(`Method ${method} Not Allowed`)
+      res.setHeader("Allow", ["GET", "PUT"]);
+      res.status(405).end(`Method ${method} Not Allowed`);
   }
 }
diff --git a/examples/api-routes-rest/pages/api/users.ts b/examples/api-routes-rest/pages/api/users.ts
index afb48839ec..478fe62cda 100644
--- a/examples/api-routes-rest/pages/api/users.ts
+++ b/examples/api-routes-rest/pages/api/users.ts
@@ -1,13 +1,13 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import type { User } from '../../interfaces'
+import type { NextApiRequest, NextApiResponse } from "next";
+import type { User } from "../../interfaces";
 
 // Fake users data
-const users: User[] = [{ id: 1 }, { id: 2 }, { id: 3 }]
+const users: User[] = [{ id: 1 }, { id: 2 }, { id: 3 }];
 
 export default function handler(
   _req: NextApiRequest,
-  res: NextApiResponse<User[]>
+  res: NextApiResponse<User[]>,
 ) {
   // Get data from your database
-  res.status(200).json(users)
+  res.status(200).json(users);
 }
diff --git a/examples/api-routes-rest/pages/index.tsx b/examples/api-routes-rest/pages/index.tsx
index 6ab5eb5816..785909acdf 100644
--- a/examples/api-routes-rest/pages/index.tsx
+++ b/examples/api-routes-rest/pages/index.tsx
@@ -1,15 +1,15 @@
-import type { User } from '../interfaces'
-import useSwr from 'swr'
-import Link from 'next/link'
+import type { User } from "../interfaces";
+import useSwr from "swr";
+import Link from "next/link";
 
-const fetcher = (url: string) => fetch(url).then((res) => res.json())
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
 export default function Index() {
-  const { data, error, isLoading } = useSwr<User[]>('/api/users', fetcher)
+  const { data, error, isLoading } = useSwr<User[]>("/api/users", fetcher);
 
-  if (error) return <div>Failed to load users</div>
-  if (isLoading) return <div>Loading...</div>
-  if (!data) return null
+  if (error) return <div>Failed to load users</div>;
+  if (isLoading) return <div>Loading...</div>;
+  if (!data) return null;
 
   return (
     <ul>
@@ -21,5 +21,5 @@ export default function Index() {
         </li>
       ))}
     </ul>
-  )
+  );
 }
diff --git a/examples/api-routes-rest/pages/user/[id].tsx b/examples/api-routes-rest/pages/user/[id].tsx
index e2f52257b1..daef61cdb1 100644
--- a/examples/api-routes-rest/pages/user/[id].tsx
+++ b/examples/api-routes-rest/pages/user/[id].tsx
@@ -1,19 +1,19 @@
-import type { User } from '../../interfaces'
-import { useRouter } from 'next/router'
-import useSwr from 'swr'
+import type { User } from "../../interfaces";
+import { useRouter } from "next/router";
+import useSwr from "swr";
 
-const fetcher = (url: string) => fetch(url).then((res) => res.json())
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
 export default function UserPage() {
-  const { query } = useRouter()
+  const { query } = useRouter();
   const { data, error, isLoading } = useSwr<User>(
     query.id ? `/api/user/${query.id}` : null,
-    fetcher
-  )
+    fetcher,
+  );
 
-  if (error) return <div>Failed to load user</div>
-  if (isLoading) return <div>Loading...</div>
-  if (!data) return null
+  if (error) return <div>Failed to load user</div>;
+  if (isLoading) return <div>Loading...</div>;
+  if (!data) return null;
 
-  return <div>{data.name}</div>
+  return <div>{data.name}</div>;
 }
diff --git a/examples/api-routes/components/Person.tsx b/examples/api-routes/components/Person.tsx
index 1925bb0bfc..e6092839c0 100644
--- a/examples/api-routes/components/Person.tsx
+++ b/examples/api-routes/components/Person.tsx
@@ -1,9 +1,9 @@
-import Link from 'next/link'
-import { Person } from '../interfaces'
+import Link from "next/link";
+import { Person } from "../interfaces";
 
 type PersonProps = {
-  person: Person
-}
+  person: Person;
+};
 
 export default function PersonComponent({ person }: PersonProps) {
   return (
@@ -12,5 +12,5 @@ export default function PersonComponent({ person }: PersonProps) {
         {person.name}
       </Link>
     </li>
-  )
+  );
 }
diff --git a/examples/api-routes/data.ts b/examples/api-routes/data.ts
index f57a9d0786..86eca18115 100644
--- a/examples/api-routes/data.ts
+++ b/examples/api-routes/data.ts
@@ -1,102 +1,102 @@
 export const people = [
   {
-    id: '1',
-    name: 'Luke Skywalker',
-    height: '172',
-    mass: '77',
-    hair_color: 'blond',
-    skin_color: 'fair',
-    eye_color: 'blue',
-    gender: 'male',
+    id: "1",
+    name: "Luke Skywalker",
+    height: "172",
+    mass: "77",
+    hair_color: "blond",
+    skin_color: "fair",
+    eye_color: "blue",
+    gender: "male",
   },
   {
-    id: '2',
-    name: 'C-3PO',
-    height: '167',
-    mass: '75',
-    hair_color: 'n/a',
-    skin_color: 'gold',
-    eye_color: 'yellow',
-    gender: 'n/a',
+    id: "2",
+    name: "C-3PO",
+    height: "167",
+    mass: "75",
+    hair_color: "n/a",
+    skin_color: "gold",
+    eye_color: "yellow",
+    gender: "n/a",
   },
   {
-    id: '3',
-    name: 'R2-D2',
-    height: '96',
-    mass: '32',
-    hair_color: 'n/a',
-    skin_color: 'white, blue',
-    eye_color: 'red',
-    gender: 'n/a',
+    id: "3",
+    name: "R2-D2",
+    height: "96",
+    mass: "32",
+    hair_color: "n/a",
+    skin_color: "white, blue",
+    eye_color: "red",
+    gender: "n/a",
   },
   {
-    id: '4',
-    name: 'Darth Vader',
-    height: '202',
-    mass: '136',
-    hair_color: 'none',
-    skin_color: 'white',
-    eye_color: 'yellow',
-    gender: 'male',
+    id: "4",
+    name: "Darth Vader",
+    height: "202",
+    mass: "136",
+    hair_color: "none",
+    skin_color: "white",
+    eye_color: "yellow",
+    gender: "male",
   },
   {
-    id: '5',
-    name: 'Leia Organa',
-    height: '150',
-    mass: '49',
-    hair_color: 'brown',
-    skin_color: 'light',
-    eye_color: 'brown',
-    gender: 'female',
+    id: "5",
+    name: "Leia Organa",
+    height: "150",
+    mass: "49",
+    hair_color: "brown",
+    skin_color: "light",
+    eye_color: "brown",
+    gender: "female",
   },
   {
-    id: '6',
-    name: 'Owen Lars',
-    height: '178',
-    mass: '120',
-    hair_color: 'brown, grey',
-    skin_color: 'light',
-    eye_color: 'blue',
-    gender: 'male',
+    id: "6",
+    name: "Owen Lars",
+    height: "178",
+    mass: "120",
+    hair_color: "brown, grey",
+    skin_color: "light",
+    eye_color: "blue",
+    gender: "male",
   },
   {
-    id: '7',
-    name: 'Beru Whitesun Lars',
-    height: '165',
-    mass: '75',
-    hair_color: 'brown',
-    skin_color: 'light',
-    eye_color: 'blue',
-    gender: 'female',
+    id: "7",
+    name: "Beru Whitesun Lars",
+    height: "165",
+    mass: "75",
+    hair_color: "brown",
+    skin_color: "light",
+    eye_color: "blue",
+    gender: "female",
   },
   {
-    id: '8',
-    name: 'R5-D4',
-    height: '97',
-    mass: '32',
-    hair_color: 'n/a',
-    skin_color: 'white, red',
-    eye_color: 'red',
-    gender: 'n/a',
+    id: "8",
+    name: "R5-D4",
+    height: "97",
+    mass: "32",
+    hair_color: "n/a",
+    skin_color: "white, red",
+    eye_color: "red",
+    gender: "n/a",
   },
   {
-    id: '9',
-    name: 'Biggs Darklighter',
-    height: '183',
-    mass: '84',
-    hair_color: 'black',
-    skin_color: 'light',
-    eye_color: 'brown',
-    gender: 'male',
+    id: "9",
+    name: "Biggs Darklighter",
+    height: "183",
+    mass: "84",
+    hair_color: "black",
+    skin_color: "light",
+    eye_color: "brown",
+    gender: "male",
   },
   {
-    id: '10',
-    name: 'Obi-Wan Kenobi',
-    height: '182',
-    mass: '77',
-    hair_color: 'auburn, white',
-    skin_color: 'fair',
-    eye_color: 'blue-gray',
-    gender: 'male',
+    id: "10",
+    name: "Obi-Wan Kenobi",
+    height: "182",
+    mass: "77",
+    hair_color: "auburn, white",
+    skin_color: "fair",
+    eye_color: "blue-gray",
+    gender: "male",
   },
-]
+];
diff --git a/examples/api-routes/interfaces/index.ts b/examples/api-routes/interfaces/index.ts
index 72fee97a5f..3c30cbbefe 100644
--- a/examples/api-routes/interfaces/index.ts
+++ b/examples/api-routes/interfaces/index.ts
@@ -1,14 +1,14 @@
 export type Person = {
-  id: string
-  name: string
-  height: string
-  mass: string
-  hair_color: string
-  skin_color: string
-  eye_color: string
-  gender: string
-}
+  id: string;
+  name: string;
+  height: string;
+  mass: string;
+  hair_color: string;
+  skin_color: string;
+  eye_color: string;
+  gender: string;
+};
 
 export type ResponseError = {
-  message: string
-}
+  message: string;
+};
diff --git a/examples/api-routes/pages/api/people/[id].ts b/examples/api-routes/pages/api/people/[id].ts
index 64ece80304..84588b2dd6 100644
--- a/examples/api-routes/pages/api/people/[id].ts
+++ b/examples/api-routes/pages/api/people/[id].ts
@@ -1,17 +1,17 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import { people } from '../../../data'
-import type { Person, ResponseError } from '../../../interfaces'
+import { NextApiRequest, NextApiResponse } from "next";
+import { people } from "../../../data";
+import type { Person, ResponseError } from "../../../interfaces";
 
 export default function personHandler(
   req: NextApiRequest,
-  res: NextApiResponse<Person | ResponseError>
+  res: NextApiResponse<Person | ResponseError>,
 ) {
-  const { query } = req
-  const { id } = query
-  const person = people.find((p) => p.id === id)
+  const { query } = req;
+  const { id } = query;
+  const person = people.find((p) => p.id === id);
 
   // User with id exists
   return person
     ? res.status(200).json(person)
-    : res.status(404).json({ message: `User with id: ${id} not found.` })
+    : res.status(404).json({ message: `User with id: ${id} not found.` });
 }
diff --git a/examples/api-routes/pages/api/people/index.ts b/examples/api-routes/pages/api/people/index.ts
index 661139b92e..90bbcfcd84 100644
--- a/examples/api-routes/pages/api/people/index.ts
+++ b/examples/api-routes/pages/api/people/index.ts
@@ -1,10 +1,10 @@
-import { NextApiResponse, NextApiRequest } from 'next'
-import { people } from '../../../data'
-import { Person } from '../../../interfaces'
+import { NextApiResponse, NextApiRequest } from "next";
+import { people } from "../../../data";
+import { Person } from "../../../interfaces";
 
 export default function handler(
   _req: NextApiRequest,
-  res: NextApiResponse<Person[]>
+  res: NextApiResponse<Person[]>,
 ) {
-  return res.status(200).json(people)
+  return res.status(200).json(people);
 }
diff --git a/examples/api-routes/pages/index.tsx b/examples/api-routes/pages/index.tsx
index 5d6c334fd6..f4a3b0bea9 100644
--- a/examples/api-routes/pages/index.tsx
+++ b/examples/api-routes/pages/index.tsx
@@ -1,15 +1,15 @@
-import useSWR from 'swr'
-import PersonComponent from '../components/Person'
-import type { Person } from '../interfaces'
+import useSWR from "swr";
+import PersonComponent from "../components/Person";
+import type { Person } from "../interfaces";
 
-const fetcher = (url: string) => fetch(url).then((res) => res.json())
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
 export default function Index() {
-  const { data, error, isLoading } = useSWR<Person[]>('/api/people', fetcher)
+  const { data, error, isLoading } = useSWR<Person[]>("/api/people", fetcher);
 
-  if (error) return <div>Failed to load</div>
-  if (isLoading) return <div>Loading...</div>
-  if (!data) return null
+  if (error) return <div>Failed to load</div>;
+  if (isLoading) return <div>Loading...</div>;
+  if (!data) return null;
 
   return (
     <ul>
@@ -17,5 +17,5 @@ export default function Index() {
         <PersonComponent key={p.id} person={p} />
       ))}
     </ul>
-  )
+  );
 }
diff --git a/examples/api-routes/pages/person/[id].tsx b/examples/api-routes/pages/person/[id].tsx
index 116e914a99..229a4ce6a6 100644
--- a/examples/api-routes/pages/person/[id].tsx
+++ b/examples/api-routes/pages/person/[id].tsx
@@ -1,27 +1,27 @@
-import { useRouter } from 'next/router'
-import useSWR from 'swr'
-import type { Person, ResponseError } from '../../interfaces'
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import type { Person, ResponseError } from "../../interfaces";
 
 const fetcher = async (url: string) => {
-  const res = await fetch(url)
-  const data = await res.json()
+  const res = await fetch(url);
+  const data = await res.json();
 
   if (res.status !== 200) {
-    throw new Error(data.message)
+    throw new Error(data.message);
   }
-  return data
-}
+  return data;
+};
 
 export default function PersonPage() {
-  const { query } = useRouter()
+  const { query } = useRouter();
   const { data, error, isLoading, isValidating } = useSWR<
     Person,
     ResponseError
-  >(() => (query.id ? `/api/people/${query.id}` : null), fetcher)
+  >(() => (query.id ? `/api/people/${query.id}` : null), fetcher);
 
-  if (error) return <div>{error.message}</div>
-  if (isLoading) return <div>Loading...</div>
-  if (!data) return null
+  if (error) return <div>{error.message}</div>;
+  if (isLoading) return <div>Loading...</div>;
+  if (!data) return null;
 
   return (
     <table>
@@ -56,5 +56,5 @@ export default function PersonPage() {
         </tr>
       </tbody>
     </table>
-  )
+  );
 }
diff --git a/examples/app-dir-i18n-routing/app/[lang]/components/counter.tsx b/examples/app-dir-i18n-routing/app/[lang]/components/counter.tsx
index b65b161488..0b59c94e27 100644
--- a/examples/app-dir-i18n-routing/app/[lang]/components/counter.tsx
+++ b/examples/app-dir-i18n-routing/app/[lang]/components/counter.tsx
@@ -1,14 +1,14 @@
-'use client'
+"use client";
 
-import { useState } from 'react'
-import { type getDictionary } from '../../../get-dictionary'
+import { useState } from "react";
+import { type getDictionary } from "../../../get-dictionary";
 
 export default function Counter({
   dictionary,
 }: {
-  dictionary: Awaited<ReturnType<typeof getDictionary>>['counter']
+  dictionary: Awaited<ReturnType<typeof getDictionary>>["counter"];
 }) {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
   return (
     <p>
       This component is rendered on client:
@@ -20,5 +20,5 @@ export default function Counter({
         {dictionary.increment}
       </button>
     </p>
-  )
+  );
 }
diff --git a/examples/app-dir-i18n-routing/app/[lang]/components/locale-switcher.tsx b/examples/app-dir-i18n-routing/app/[lang]/components/locale-switcher.tsx
index 1d34e7c248..8fd654e844 100644
--- a/examples/app-dir-i18n-routing/app/[lang]/components/locale-switcher.tsx
+++ b/examples/app-dir-i18n-routing/app/[lang]/components/locale-switcher.tsx
@@ -1,17 +1,17 @@
-'use client'
+"use client";
 
-import { usePathname } from 'next/navigation'
-import Link from 'next/link'
-import { i18n, type Locale } from '../../../i18n-config'
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { i18n, type Locale } from "../../../i18n-config";
 
 export default function LocaleSwitcher() {
-  const pathName = usePathname()
+  const pathName = usePathname();
   const redirectedPathName = (locale: Locale) => {
-    if (!pathName) return '/'
-    const segments = pathName.split('/')
-    segments[1] = locale
-    return segments.join('/')
-  }
+    if (!pathName) return "/";
+    const segments = pathName.split("/");
+    segments[1] = locale;
+    return segments.join("/");
+  };
 
   return (
     <div>
@@ -22,9 +22,9 @@ export default function LocaleSwitcher() {
             <li key={locale}>
               <Link href={redirectedPathName(locale)}>{locale}</Link>
             </li>
-          )
+          );
         })}
       </ul>
     </div>
-  )
+  );
 }
diff --git a/examples/app-dir-i18n-routing/app/[lang]/layout.tsx b/examples/app-dir-i18n-routing/app/[lang]/layout.tsx
index fd422b4786..0ed9c37a43 100644
--- a/examples/app-dir-i18n-routing/app/[lang]/layout.tsx
+++ b/examples/app-dir-i18n-routing/app/[lang]/layout.tsx
@@ -1,24 +1,24 @@
-import { i18n, type Locale } from '../../i18n-config'
+import { i18n, type Locale } from "../../i18n-config";
 
 export async function generateStaticParams() {
-  return i18n.locales.map((locale) => ({ lang: locale }))
+  return i18n.locales.map((locale) => ({ lang: locale }));
 }
 
 export default function Root({
   children,
   params,
 }: {
-  children: React.ReactNode
-  params: { lang: Locale }
+  children: React.ReactNode;
+  params: { lang: Locale };
 }) {
   return (
     <html lang={params.lang}>
       <body>{children}</body>
     </html>
-  )
+  );
 }
 
 export const metadata = {
-  title: 'i18n within app directory - Vercel Examples',
-  description: 'How to do i18n in Next.js 13 within app directory',
-}
+  title: "i18n within app directory - Vercel Examples",
+  description: "How to do i18n in Next.js 13 within app directory",
+};
diff --git a/examples/app-dir-i18n-routing/app/[lang]/page.tsx b/examples/app-dir-i18n-routing/app/[lang]/page.tsx
index fbad660311..d9654b9a7a 100644
--- a/examples/app-dir-i18n-routing/app/[lang]/page.tsx
+++ b/examples/app-dir-i18n-routing/app/[lang]/page.tsx
@@ -1,24 +1,24 @@
-import { getDictionary } from '../../get-dictionary'
-import { Locale } from '../../i18n-config'
-import Counter from './components/counter'
-import LocaleSwitcher from './components/locale-switcher'
+import { getDictionary } from "../../get-dictionary";
+import { Locale } from "../../i18n-config";
+import Counter from "./components/counter";
+import LocaleSwitcher from "./components/locale-switcher";
 
 export default async function IndexPage({
   params: { lang },
 }: {
-  params: { lang: Locale }
+  params: { lang: Locale };
 }) {
-  const dictionary = await getDictionary(lang)
+  const dictionary = await getDictionary(lang);
 
   return (
     <div>
       <LocaleSwitcher />
       <p>Current locale: {lang}</p>
       <p>
-        This text is rendered on the server:{' '}
-        {dictionary['server-component'].welcome}
+        This text is rendered on the server:{" "}
+        {dictionary["server-component"].welcome}
       </p>
       <Counter dictionary={dictionary.counter} />
     </div>
-  )
+  );
 }
diff --git a/examples/app-dir-i18n-routing/get-dictionary.ts b/examples/app-dir-i18n-routing/get-dictionary.ts
index ee3e7fb016..455c405b49 100644
--- a/examples/app-dir-i18n-routing/get-dictionary.ts
+++ b/examples/app-dir-i18n-routing/get-dictionary.ts
@@ -1,13 +1,13 @@
-import 'server-only'
-import type { Locale } from './i18n-config'
+import "server-only";
+import type { Locale } from "./i18n-config";
 
 // We enumerate all dictionaries here for better linting and typescript support
 // We also get the default import for cleaner types
 const dictionaries = {
-  en: () => import('./dictionaries/en.json').then((module) => module.default),
-  de: () => import('./dictionaries/de.json').then((module) => module.default),
-  cs: () => import('./dictionaries/cs.json').then((module) => module.default),
-}
+  en: () => import("./dictionaries/en.json").then((module) => module.default),
+  de: () => import("./dictionaries/de.json").then((module) => module.default),
+  cs: () => import("./dictionaries/cs.json").then((module) => module.default),
+};
 
 export const getDictionary = async (locale: Locale) =>
-  dictionaries[locale]?.() ?? dictionaries.en()
+  dictionaries[locale]?.() ?? dictionaries.en();
diff --git a/examples/app-dir-i18n-routing/i18n-config.ts b/examples/app-dir-i18n-routing/i18n-config.ts
index 712c8e6347..09b0a373db 100644
--- a/examples/app-dir-i18n-routing/i18n-config.ts
+++ b/examples/app-dir-i18n-routing/i18n-config.ts
@@ -1,6 +1,6 @@
 export const i18n = {
-  defaultLocale: 'en',
-  locales: ['en', 'de', 'cs'],
-} as const
+  defaultLocale: "en",
+  locales: ["en", "de", "cs"],
+} as const;
 
-export type Locale = (typeof i18n)['locales'][number]
+export type Locale = (typeof i18n)["locales"][number];
diff --git a/examples/app-dir-i18n-routing/middleware.ts b/examples/app-dir-i18n-routing/middleware.ts
index c0287edb51..253df78fb5 100644
--- a/examples/app-dir-i18n-routing/middleware.ts
+++ b/examples/app-dir-i18n-routing/middleware.ts
@@ -1,31 +1,31 @@
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
 
-import { i18n } from './i18n-config'
+import { i18n } from "./i18n-config";
 
-import { match as matchLocale } from '@formatjs/intl-localematcher'
-import Negotiator from 'negotiator'
+import { match as matchLocale } from "@formatjs/intl-localematcher";
+import Negotiator from "negotiator";
 
 function getLocale(request: NextRequest): string | undefined {
   // Negotiator expects plain object so we need to transform headers
-  const negotiatorHeaders: Record<string, string> = {}
-  request.headers.forEach((value, key) => (negotiatorHeaders[key] = value))
+  const negotiatorHeaders: Record<string, string> = {};
+  request.headers.forEach((value, key) => (negotiatorHeaders[key] = value));
 
   // @ts-ignore locales are readonly
-  const locales: string[] = i18n.locales
+  const locales: string[] = i18n.locales;
 
   // Use negotiator and intl-localematcher to get best locale
   let languages = new Negotiator({ headers: negotiatorHeaders }).languages(
-    locales
-  )
+    locales,
+  );
 
-  const locale = matchLocale(languages, locales, i18n.defaultLocale)
+  const locale = matchLocale(languages, locales, i18n.defaultLocale);
 
-  return locale
+  return locale;
 }
 
 export function middleware(request: NextRequest) {
-  const pathname = request.nextUrl.pathname
+  const pathname = request.nextUrl.pathname;
 
   // // `/_next/` and `/api/` are ignored by the watcher, but we need to ignore files in `public` manually.
   // // If you have one
@@ -40,25 +40,26 @@ export function middleware(request: NextRequest) {
 
   // Check if there is any supported locale in the pathname
   const pathnameIsMissingLocale = i18n.locales.every(
-    (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
-  )
+    (locale) =>
+      !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`,
+  );
 
   // Redirect if there is no locale
   if (pathnameIsMissingLocale) {
-    const locale = getLocale(request)
+    const locale = getLocale(request);
 
     // e.g. incoming request is /products
     // The new URL is now /en-US/products
     return NextResponse.redirect(
       new URL(
-        `/${locale}${pathname.startsWith('/') ? '' : '/'}${pathname}`,
-        request.url
-      )
-    )
+        `/${locale}${pathname.startsWith("/") ? "" : "/"}${pathname}`,
+        request.url,
+      ),
+    );
   }
 }
 
 export const config = {
   // Matcher ignoring `/_next/` and `/api/`
-  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
-}
+  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
+};
diff --git a/examples/app-dir-mdx/app/globals.css b/examples/app-dir-mdx/app/globals.css
index 2527aea354..ee04ea4622 100644
--- a/examples/app-dir-mdx/app/globals.css
+++ b/examples/app-dir-mdx/app/globals.css
@@ -1,9 +1,9 @@
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
+    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
diff --git a/examples/app-dir-mdx/app/layout.tsx b/examples/app-dir-mdx/app/layout.tsx
index a962055f9a..9e93601451 100644
--- a/examples/app-dir-mdx/app/layout.tsx
+++ b/examples/app-dir-mdx/app/layout.tsx
@@ -1,18 +1,18 @@
-import './globals.css'
+import "./globals.css";
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
diff --git a/examples/app-dir-mdx/app/page.module.css b/examples/app-dir-mdx/app/page.module.css
index 11c54801bd..87f36d6d85 100644
--- a/examples/app-dir-mdx/app/page.module.css
+++ b/examples/app-dir-mdx/app/page.module.css
@@ -102,7 +102,7 @@
 
 .center::before,
 .center::after {
-  content: '';
+  content: "";
   left: 50%;
   position: absolute;
   filter: blur(45px);
@@ -130,7 +130,7 @@
 
 .thirteen::before,
 .thirteen::after {
-  content: '';
+  content: "";
   position: absolute;
   z-index: -1;
 }
diff --git a/examples/app-dir-mdx/app/page.tsx b/examples/app-dir-mdx/app/page.tsx
index ac6a2f73f8..72d710fba3 100644
--- a/examples/app-dir-mdx/app/page.tsx
+++ b/examples/app-dir-mdx/app/page.tsx
@@ -1,9 +1,9 @@
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
-import styles from './page.module.css'
-import Content from './message.mdx'
+import Image from "next/image";
+import { Inter } from "next/font/google";
+import styles from "./page.module.css";
+import Content from "./message.mdx";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
   return (
@@ -19,7 +19,7 @@ export default function Home() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            By{' '}
+            By{" "}
             <Image
               src="/vercel.svg"
               alt="Vercel Logo"
@@ -78,5 +78,5 @@ export default function Home() {
         </a>
       </div>
     </main>
-  )
+  );
 }
diff --git a/examples/app-dir-mdx/mdx-components.tsx b/examples/app-dir-mdx/mdx-components.tsx
index 5e157b1df7..9851ff60b2 100644
--- a/examples/app-dir-mdx/mdx-components.tsx
+++ b/examples/app-dir-mdx/mdx-components.tsx
@@ -1,4 +1,4 @@
-import type { MDXComponents } from 'mdx/types'
+import type { MDXComponents } from "mdx/types";
 
 // This file is required to use MDX in `app` directory.
 export function useMDXComponents(components: MDXComponents): MDXComponents {
@@ -6,5 +6,5 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     // Allows customizing built-in components, e.g. to add styling.
     // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
     ...components,
-  }
+  };
 }
diff --git a/examples/app-dir-mdx/next.config.js b/examples/app-dir-mdx/next.config.js
index b24b0b216a..7787c36fc2 100644
--- a/examples/app-dir-mdx/next.config.js
+++ b/examples/app-dir-mdx/next.config.js
@@ -1,10 +1,10 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
+  pageExtensions: ["js", "jsx", "ts", "tsx", "mdx"],
   experimental: {
     mdxRs: true,
   },
-}
+};
 
-const withMDX = require('@next/mdx')()
-module.exports = withMDX(nextConfig)
+const withMDX = require("@next/mdx")();
+module.exports = withMDX(nextConfig);
diff --git a/examples/app-dir-mdx/types/mdx.d.ts b/examples/app-dir-mdx/types/mdx.d.ts
index a9831edba2..8ca9cdfcb9 100644
--- a/examples/app-dir-mdx/types/mdx.d.ts
+++ b/examples/app-dir-mdx/types/mdx.d.ts
@@ -1,5 +1,5 @@
 // types/mdx.d.ts
-declare module '*.mdx' {
-  let MDXComponent: (props) => JSX.Element
-  export default MDXComponent
+declare module "*.mdx" {
+  let MDXComponent: (props) => JSX.Element;
+  export default MDXComponent;
 }
diff --git a/examples/auth-with-stytch/components/LoginEntryPoint.tsx b/examples/auth-with-stytch/components/LoginEntryPoint.tsx
index a8bf3562dc..d2ad45bc9f 100644
--- a/examples/auth-with-stytch/components/LoginEntryPoint.tsx
+++ b/examples/auth-with-stytch/components/LoginEntryPoint.tsx
@@ -1,14 +1,14 @@
-import React from 'react'
-import styles from '../styles/Home.module.css'
-import { LoginMethod } from '../lib/types'
-import StytchContainer from './StytchContainer'
+import React from "react";
+import styles from "../styles/Home.module.css";
+import { LoginMethod } from "../lib/types";
+import StytchContainer from "./StytchContainer";
 
 type Props = {
-  setLoginMethod: (loginMethod: LoginMethod) => void
-}
+  setLoginMethod: (loginMethod: LoginMethod) => void;
+};
 
 const LoginEntryPoint = (props: Props) => {
-  const { setLoginMethod } = props
+  const { setLoginMethod } = props;
   return (
     <StytchContainer>
       <h2>Hello Vercel!</h2>
@@ -29,7 +29,7 @@ const LoginEntryPoint = (props: Props) => {
         API Integration (SMS Passcodes)
       </button>
     </StytchContainer>
-  )
-}
+  );
+};
 
-export default LoginEntryPoint
+export default LoginEntryPoint;
diff --git a/examples/auth-with-stytch/components/LoginWithSMS.tsx b/examples/auth-with-stytch/components/LoginWithSMS.tsx
index 1c5e2fe229..b8eb855f7a 100644
--- a/examples/auth-with-stytch/components/LoginWithSMS.tsx
+++ b/examples/auth-with-stytch/components/LoginWithSMS.tsx
@@ -1,12 +1,12 @@
-import React, { useState } from 'react'
-import SendOTPForm from './SendOTPForm'
-import VerifyOTPForm from './VerifyOTPForm'
-import StytchContainer from './StytchContainer'
+import React, { useState } from "react";
+import SendOTPForm from "./SendOTPForm";
+import VerifyOTPForm from "./VerifyOTPForm";
+import StytchContainer from "./StytchContainer";
 
 const LoginWithSMS = () => {
-  const [otpSent, setOTPSent] = useState(false)
-  const [phoneNumber, setPhoneNumber] = useState('')
-  const [methodId, setMethodId] = useState('')
+  const [otpSent, setOTPSent] = useState(false);
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [methodId, setMethodId] = useState("");
 
   return (
     <StytchContainer>
@@ -21,7 +21,7 @@ const LoginWithSMS = () => {
         <VerifyOTPForm methodId={methodId} phoneNumber={phoneNumber} />
       )}
     </StytchContainer>
-  )
-}
+  );
+};
 
-export default LoginWithSMS
+export default LoginWithSMS;
diff --git a/examples/auth-with-stytch/components/SendOTPForm.tsx b/examples/auth-with-stytch/components/SendOTPForm.tsx
index b2276b0760..0d34230965 100644
--- a/examples/auth-with-stytch/components/SendOTPForm.tsx
+++ b/examples/auth-with-stytch/components/SendOTPForm.tsx
@@ -1,44 +1,44 @@
-import React from 'react'
-import { sendOTP } from '../lib/otpUtils'
-import styles from '../styles/Home.module.css'
+import React from "react";
+import { sendOTP } from "../lib/otpUtils";
+import styles from "../styles/Home.module.css";
 
 type Props = {
-  phoneNumber: string
-  setMethodId: (methodId: string) => void
-  setOTPSent: (submitted: boolean) => void
-  setPhoneNumber: (phoneNumber: string) => void
-}
+  phoneNumber: string;
+  setMethodId: (methodId: string) => void;
+  setOTPSent: (submitted: boolean) => void;
+  setPhoneNumber: (phoneNumber: string) => void;
+};
 
 const SendOTPForm = (props: Props): JSX.Element => {
-  const { phoneNumber, setMethodId, setOTPSent, setPhoneNumber } = props
-  const [isDisabled, setIsDisabled] = React.useState(true)
+  const { phoneNumber, setMethodId, setOTPSent, setPhoneNumber } = props;
+  const [isDisabled, setIsDisabled] = React.useState(true);
 
   const isValidNumber = (phoneNumberValue: string) => {
     // Regex validates phone numbers in (xxx)xxx-xxxx, xxx-xxx-xxxx, xxxxxxxxxx, and xxx.xxx.xxxx format
-    const regex = /^[(]?[0-9]{3}[)]?[-s.]?[0-9]{3}[-s.]?[0-9]{4}$/g
+    const regex = /^[(]?[0-9]{3}[)]?[-s.]?[0-9]{3}[-s.]?[0-9]{4}$/g;
     if (phoneNumberValue.match(regex)) {
-      return true
+      return true;
     }
-    return false
-  }
+    return false;
+  };
 
   const onPhoneNumberChange = (e: React.ChangeEvent<{ value: string }>) => {
-    setPhoneNumber(e.target.value)
+    setPhoneNumber(e.target.value);
     if (isValidNumber(e.target.value)) {
-      setIsDisabled(false)
+      setIsDisabled(false);
     } else {
-      setIsDisabled(true)
+      setIsDisabled(true);
     }
-  }
+  };
 
   const onSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
+    e.preventDefault();
     if (isValidNumber(phoneNumber)) {
-      const methodId = await sendOTP(phoneNumber)
-      setMethodId(methodId)
-      setOTPSent(true)
+      const methodId = await sendOTP(phoneNumber);
+      setMethodId(methodId);
+      setOTPSent(true);
     }
-  }
+  };
 
   return (
     <div>
@@ -77,7 +77,7 @@ const SendOTPForm = (props: Props): JSX.Element => {
         />
       </form>
     </div>
-  )
-}
+  );
+};
 
-export default SendOTPForm
+export default SendOTPForm;
diff --git a/examples/auth-with-stytch/components/StytchContainer.tsx b/examples/auth-with-stytch/components/StytchContainer.tsx
index e0972d98f9..0222ff20d2 100644
--- a/examples/auth-with-stytch/components/StytchContainer.tsx
+++ b/examples/auth-with-stytch/components/StytchContainer.tsx
@@ -1,20 +1,20 @@
-import React from 'react'
-import styles from '../styles/Home.module.css'
-import Image from 'next/image'
-import lockup from '/public/powered-by-stytch.svg'
+import React from "react";
+import styles from "../styles/Home.module.css";
+import Image from "next/image";
+import lockup from "/public/powered-by-stytch.svg";
 
 type Props = {
-  children: React.ReactElement | React.ReactElement[]
-}
+  children: React.ReactElement | React.ReactElement[];
+};
 
 const StytchContainer = (props: Props) => {
-  const { children } = props
+  const { children } = props;
   return (
     <div className={styles.container}>
       <div>{children}</div>
       <Image alt="Powered by Stytch" height={15} src={lockup} width={150} />
     </div>
-  )
-}
+  );
+};
 
-export default StytchContainer
+export default StytchContainer;
diff --git a/examples/auth-with-stytch/components/VerifyOTPForm.tsx b/examples/auth-with-stytch/components/VerifyOTPForm.tsx
index cf62eb5e73..b4f2da0980 100644
--- a/examples/auth-with-stytch/components/VerifyOTPForm.tsx
+++ b/examples/auth-with-stytch/components/VerifyOTPForm.tsx
@@ -1,113 +1,113 @@
-import React from 'react'
-import styles from '../styles/Home.module.css'
-import { sendOTP } from '../lib/otpUtils'
-import { useRouter } from 'next/router'
+import React from "react";
+import styles from "../styles/Home.module.css";
+import { sendOTP } from "../lib/otpUtils";
+import { useRouter } from "next/router";
 
 // Handles auto-tabbing to next passcode digit input.
 // Logic inspired from https://stackoverflow.com/questions/15595652/focus-next-input-once-reaching-maxlength-value.
 const autoTab = (target: HTMLInputElement, key?: string) => {
   if (target.value.length >= target.maxLength) {
-    let next = target
+    let next = target;
     while ((next = next.nextElementSibling as HTMLInputElement)) {
-      if (next == null) break
-      if (next.tagName.toLowerCase() === 'input') {
-        next?.focus()
-        break
+      if (next == null) break;
+      if (next.tagName.toLowerCase() === "input") {
+        next?.focus();
+        break;
       }
     }
   }
   // Move to previous field if empty (user pressed backspace)
   else if (target.value.length === 0) {
-    let previous = target
+    let previous = target;
     while ((previous = previous.previousElementSibling as HTMLInputElement)) {
-      if (previous == null) break
-      if (previous.tagName.toLowerCase() === 'input') {
-        previous.focus()
-        break
+      if (previous == null) break;
+      if (previous.tagName.toLowerCase() === "input") {
+        previous.focus();
+        break;
       }
     }
   }
-}
+};
 
 type Props = {
-  methodId: string
-  phoneNumber: string
-}
+  methodId: string;
+  phoneNumber: string;
+};
 
 const VerifyOTPForm = (props: Props) => {
-  const { methodId, phoneNumber } = props
-  const [isDisabled, setIsDisabled] = React.useState(true)
-  const [currentMethodId, setCurrentMethodId] = React.useState(methodId)
-  const [isError, setIsError] = React.useState(false)
-  const router = useRouter()
+  const { methodId, phoneNumber } = props;
+  const [isDisabled, setIsDisabled] = React.useState(true);
+  const [currentMethodId, setCurrentMethodId] = React.useState(methodId);
+  const [isError, setIsError] = React.useState(false);
+  const router = useRouter();
 
-  const strippedNumber = phoneNumber.replace(/\D/g, '')
+  const strippedNumber = phoneNumber.replace(/\D/g, "");
   const parsedPhoneNumber = `(${strippedNumber.slice(
     0,
-    3
-  )}) ${strippedNumber.slice(3, 6)}-${strippedNumber.slice(6, 10)}`
+    3,
+  )}) ${strippedNumber.slice(3, 6)}-${strippedNumber.slice(6, 10)}`;
 
   const isValidPasscode = () => {
-    const regex = /^[0-9]$/g
-    const inputs = document.getElementsByClassName(styles.passcodeInput)
+    const regex = /^[0-9]$/g;
+    const inputs = document.getElementsByClassName(styles.passcodeInput);
     for (let i = 0; i < inputs.length; i++) {
       if (!(inputs[i] as HTMLInputElement).value.match(regex)) {
-        return false
+        return false;
       }
     }
-    return true
-  }
+    return true;
+  };
 
   const onPasscodeDigitChange = () => {
     if (isValidPasscode()) {
-      setIsDisabled(false)
-      setIsError(false)
+      setIsDisabled(false);
+      setIsError(false);
     } else {
-      setIsDisabled(true)
+      setIsDisabled(true);
     }
-  }
+  };
 
   const resetPasscode = () => {
-    const inputs = document.getElementsByClassName(styles.passcodeInput)
+    const inputs = document.getElementsByClassName(styles.passcodeInput);
     for (let i = 0; i < inputs.length; i++) {
-      ;(inputs[i] as HTMLInputElement).value = ''
+      (inputs[i] as HTMLInputElement).value = "";
     }
-    document.getElementById('digit-0')?.focus()
-    setIsDisabled(true)
-  }
+    document.getElementById("digit-0")?.focus();
+    setIsDisabled(true);
+  };
 
   const resendCode = async () => {
-    const methodId = await sendOTP(phoneNumber)
-    setCurrentMethodId(methodId)
-    resetPasscode()
-    setIsError(false)
-  }
+    const methodId = await sendOTP(phoneNumber);
+    setCurrentMethodId(methodId);
+    resetPasscode();
+    setIsError(false);
+  };
 
   const onSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
+    e.preventDefault();
     if (isValidPasscode()) {
-      let otpInput = ''
-      const inputs = document.getElementsByClassName(styles.passcodeInput)
+      let otpInput = "";
+      const inputs = document.getElementsByClassName(styles.passcodeInput);
       for (let i = 0; i < inputs.length; i++) {
-        otpInput += (inputs[i] as HTMLInputElement).value
+        otpInput += (inputs[i] as HTMLInputElement).value;
       }
 
-      const resp = await fetch('/api/authenticate_otp', {
-        method: 'POST',
+      const resp = await fetch("/api/authenticate_otp", {
+        method: "POST",
         body: JSON.stringify({ otpInput, methodId: currentMethodId }),
-      })
+      });
 
       if (resp.status === 200) {
-        router.push('/profile')
+        router.push("/profile");
       } else {
-        setIsError(true)
-        resetPasscode()
+        setIsError(true);
+        resetPasscode();
       }
     }
-  }
+  };
 
   const renderPasscodeInputs = () => {
-    const inputs = []
+    const inputs = [];
     for (let i = 0; i < 6; i += 1) {
       inputs.push(
         <input
@@ -121,23 +121,23 @@ const VerifyOTPForm = (props: Props) => {
           placeholder="0"
           size={1}
           type="text"
-        />
-      )
+        />,
+      );
     }
-    return inputs
-  }
+    return inputs;
+  };
 
   return (
     <div>
       <h2>Enter passcode</h2>
       <p className={styles.smsInstructions}>
-        A 6-digit passcode was sent to you at{' '}
+        A 6-digit passcode was sent to you at{" "}
         <strong>{parsedPhoneNumber}</strong>.
       </p>
       <form onSubmit={onSubmit}>
         <div className={styles.passcodeContainer}>
           <p className={styles.errorText}>
-            {isError ? 'Invalid code. Please try again.' : ''}
+            {isError ? "Invalid code. Please try again." : ""}
           </p>
           <div className={styles.passcodeInputContainer}>
             {renderPasscodeInputs()}
@@ -162,7 +162,7 @@ const VerifyOTPForm = (props: Props) => {
         />
       </form>
     </div>
-  )
-}
+  );
+};
 
-export default VerifyOTPForm
+export default VerifyOTPForm;
diff --git a/examples/auth-with-stytch/lib/loadStytch.ts b/examples/auth-with-stytch/lib/loadStytch.ts
index 2b33305275..f08afef8ab 100644
--- a/examples/auth-with-stytch/lib/loadStytch.ts
+++ b/examples/auth-with-stytch/lib/loadStytch.ts
@@ -1,19 +1,19 @@
-import * as stytch from 'stytch'
+import * as stytch from "stytch";
 
-let client: stytch.Client
+let client: stytch.Client;
 const loadStytch = () => {
   if (!client) {
     client = new stytch.Client({
-      project_id: process.env.STYTCH_PROJECT_ID || '',
-      secret: process.env.STYTCH_SECRET || '',
+      project_id: process.env.STYTCH_PROJECT_ID || "",
+      secret: process.env.STYTCH_SECRET || "",
       env:
-        process.env.STYTCH_PROJECT_ENV === 'live'
+        process.env.STYTCH_PROJECT_ENV === "live"
           ? stytch.envs.live
           : stytch.envs.test,
-    })
+    });
   }
 
-  return client
-}
+  return client;
+};
 
-export default loadStytch
+export default loadStytch;
diff --git a/examples/auth-with-stytch/lib/otpUtils.ts b/examples/auth-with-stytch/lib/otpUtils.ts
index 69a2bd10b9..b30c5c6bb6 100644
--- a/examples/auth-with-stytch/lib/otpUtils.ts
+++ b/examples/auth-with-stytch/lib/otpUtils.ts
@@ -1,11 +1,11 @@
 export async function sendOTP(phoneNumber: string) {
-  const resp = await fetch('/api/send_otp', {
-    method: 'POST',
+  const resp = await fetch("/api/send_otp", {
+    method: "POST",
     body: JSON.stringify({
-      intlCode: '+1',
+      intlCode: "+1",
       phoneNumber,
     }),
-  })
-  const data = await resp.json()
-  return data.methodId
+  });
+  const data = await resp.json();
+  return data.methodId;
 }
diff --git a/examples/auth-with-stytch/lib/withSession.tsx b/examples/auth-with-stytch/lib/withSession.tsx
index e00dba1ec3..f5ebaa448b 100644
--- a/examples/auth-with-stytch/lib/withSession.tsx
+++ b/examples/auth-with-stytch/lib/withSession.tsx
@@ -1,28 +1,28 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import { Session, withIronSession } from 'next-iron-session'
+import { NextApiRequest, NextApiResponse } from "next";
+import { Session, withIronSession } from "next-iron-session";
 
-type NextIronRequest = NextApiRequest & { session: Session }
+type NextIronRequest = NextApiRequest & { session: Session };
 
 type APIHandler = (
   req: NextIronRequest,
-  res: NextApiResponse<any>
-) => Promise<any>
+  res: NextApiResponse<any>,
+) => Promise<any>;
 
 export type ServerSideProps = ({
   req,
 }: {
-  req: NextIronRequest
-}) => Promise<any>
+  req: NextIronRequest;
+}) => Promise<any>;
 
 const withSession = (handler: APIHandler | ServerSideProps) =>
   withIronSession(handler, {
-    password: process.env.IRON_SESSION_PASSWORD || '',
-    cookieName: process.env.IRON_SESSION_COOKIE_NAME || '',
+    password: process.env.IRON_SESSION_PASSWORD || "",
+    cookieName: process.env.IRON_SESSION_COOKIE_NAME || "",
     // if your localhost is served on http:// then disable the secure flag
     cookieOptions: {
       httpOnly: true,
-      secure: process.env.NODE_ENV === 'production',
+      secure: process.env.NODE_ENV === "production",
     },
-  })
+  });
 
-export default withSession
+export default withSession;
diff --git a/examples/auth-with-stytch/pages/_app.tsx b/examples/auth-with-stytch/pages/_app.tsx
index a8a5e0556e..7f0eff4839 100644
--- a/examples/auth-with-stytch/pages/_app.tsx
+++ b/examples/auth-with-stytch/pages/_app.tsx
@@ -1,11 +1,11 @@
-import '../styles/globals.css'
-import styles from '../styles/Home.module.css'
-import type { AppProps } from 'next/app'
-import React from 'react'
-import Head from 'next/head'
-import Image from 'next/image'
-import stytchLogo from '/public/stytch-logo.svg'
-import vercelLogo from '/public/vercel-logotype-dark.svg'
+import "../styles/globals.css";
+import styles from "../styles/Home.module.css";
+import type { AppProps } from "next/app";
+import React from "react";
+import Head from "next/head";
+import Image from "next/image";
+import stytchLogo from "/public/stytch-logo.svg";
+import vercelLogo from "/public/vercel-logotype-dark.svg";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -50,6 +50,6 @@ function MyApp({ Component, pageProps }: AppProps) {
         <Component {...pageProps} />
       </div>
     </React.Fragment>
-  )
+  );
 }
-export default MyApp
+export default MyApp;
diff --git a/examples/auth-with-stytch/pages/_document.tsx b/examples/auth-with-stytch/pages/_document.tsx
index 496f4c465e..0e2ebf9e2d 100644
--- a/examples/auth-with-stytch/pages/_document.tsx
+++ b/examples/auth-with-stytch/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -14,5 +14,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/auth-with-stytch/pages/api/authenticate_magic_link.ts b/examples/auth-with-stytch/pages/api/authenticate_magic_link.ts
index d0edf7fc56..0d0de31187 100644
--- a/examples/auth-with-stytch/pages/api/authenticate_magic_link.ts
+++ b/examples/auth-with-stytch/pages/api/authenticate_magic_link.ts
@@ -1,39 +1,39 @@
 // This API route authenticates a Stytch magic link.
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { Session } from 'next-iron-session'
-import withSession from '../../lib/withSession'
-import loadStytch from '../../lib/loadStytch'
-type NextIronRequest = NextApiRequest & { session: Session }
+import type { NextApiRequest, NextApiResponse } from "next";
+import { Session } from "next-iron-session";
+import withSession from "../../lib/withSession";
+import loadStytch from "../../lib/loadStytch";
+type NextIronRequest = NextApiRequest & { session: Session };
 
 type Data = {
-  errorString: string
-}
+  errorString: string;
+};
 
 export async function handler(
   req: NextIronRequest,
-  res: NextApiResponse<Data>
+  res: NextApiResponse<Data>,
 ) {
-  if (req.method === 'GET') {
-    const client = loadStytch()
-    const { token } = req.query
+  if (req.method === "GET") {
+    const client = loadStytch();
+    const { token } = req.query;
     try {
-      const resp = await client.magicLinks.authenticate(token as string)
+      const resp = await client.magicLinks.authenticate(token as string);
       // Set session
-      req.session.destroy()
-      req.session.set('user', {
+      req.session.destroy();
+      req.session.set("user", {
         id: resp.user_id,
-      })
+      });
       // Save additional user data here
-      await req.session.save()
-      res.redirect('/profile')
+      await req.session.save();
+      res.redirect("/profile");
     } catch (error) {
-      const errorString = JSON.stringify(error)
-      console.log(error)
-      res.status(400).json({ errorString })
+      const errorString = JSON.stringify(error);
+      console.log(error);
+      res.status(400).json({ errorString });
     }
   } else {
     // Handle any other HTTP method
   }
 }
 
-export default withSession(handler)
+export default withSession(handler);
diff --git a/examples/auth-with-stytch/pages/api/authenticate_otp.ts b/examples/auth-with-stytch/pages/api/authenticate_otp.ts
index 71fe036223..847094e865 100644
--- a/examples/auth-with-stytch/pages/api/authenticate_otp.ts
+++ b/examples/auth-with-stytch/pages/api/authenticate_otp.ts
@@ -1,51 +1,51 @@
 // This API route authenticates Stytch OTP codes.
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { Session } from 'next-iron-session'
-import withSession from '../../lib/withSession'
-import loadStytch from '../../lib/loadStytch'
-type NextIronRequest = NextApiRequest & { session: Session }
+import type { NextApiRequest, NextApiResponse } from "next";
+import { Session } from "next-iron-session";
+import withSession from "../../lib/withSession";
+import loadStytch from "../../lib/loadStytch";
+type NextIronRequest = NextApiRequest & { session: Session };
 
 type Data = {
-  msg: string
-}
+  msg: string;
+};
 
 export async function handler(
   req: NextIronRequest,
-  res: NextApiResponse<Data>
+  res: NextApiResponse<Data>,
 ) {
-  if (req.method === 'POST') {
-    const client = loadStytch()
-    const data = JSON.parse(req.body)
+  if (req.method === "POST") {
+    const client = loadStytch();
+    const data = JSON.parse(req.body);
     try {
       // params are of type stytch.LoginOrCreateUserBySMSRequest
       const params = {
         code: data.otpInput,
         method_id: data.methodId,
-      }
+      };
 
-      const resp = await client.otps.authenticate(params)
-      if (resp.status_code.toString() === '200') {
+      const resp = await client.otps.authenticate(params);
+      if (resp.status_code.toString() === "200") {
         // Set session
-        req.session.destroy()
+        req.session.destroy();
         // Save additional user data here
-        req.session.set('user', {
+        req.session.set("user", {
           id: resp.user_id,
-        })
-        await req.session.save()
+        });
+        await req.session.save();
         res
           .status(200)
-          .send({ msg: `successfully authenticated ${resp.user_id}` })
+          .send({ msg: `successfully authenticated ${resp.user_id}` });
       } else {
-        throw Error('Error authenticating your code')
+        throw Error("Error authenticating your code");
       }
     } catch (error) {
-      const errorString = JSON.stringify(error)
-      console.log(error)
-      res.status(400).json({ msg: errorString })
+      const errorString = JSON.stringify(error);
+      console.log(error);
+      res.status(400).json({ msg: errorString });
     }
   } else {
     // Handle any other HTTP method
   }
 }
 
-export default withSession(handler)
+export default withSession(handler);
diff --git a/examples/auth-with-stytch/pages/api/logout.ts b/examples/auth-with-stytch/pages/api/logout.ts
index c0579d9bf0..4245e5aaf9 100644
--- a/examples/auth-with-stytch/pages/api/logout.ts
+++ b/examples/auth-with-stytch/pages/api/logout.ts
@@ -1,30 +1,30 @@
 // This API route logs a user out.
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { Session } from 'next-iron-session'
-import withSession from '../../lib/withSession'
-type NextIronRequest = NextApiRequest & { session: Session }
+import type { NextApiRequest, NextApiResponse } from "next";
+import { Session } from "next-iron-session";
+import withSession from "../../lib/withSession";
+type NextIronRequest = NextApiRequest & { session: Session };
 
 type Data = {
-  errorString: string
-}
+  errorString: string;
+};
 
 export async function handler(
   req: NextIronRequest,
-  res: NextApiResponse<Data>
+  res: NextApiResponse<Data>,
 ) {
-  if (req.method === 'POST') {
+  if (req.method === "POST") {
     try {
       // Set session
-      req.session.destroy()
-      res.redirect('/')
+      req.session.destroy();
+      res.redirect("/");
     } catch (error) {
-      const errorString = JSON.stringify(error)
-      console.log(error)
-      res.status(400).json({ errorString })
+      const errorString = JSON.stringify(error);
+      console.log(error);
+      res.status(400).json({ errorString });
     }
   } else {
     // Handle any other HTTP method
   }
 }
 
-export default withSession(handler)
+export default withSession(handler);
diff --git a/examples/auth-with-stytch/pages/api/send_otp.ts b/examples/auth-with-stytch/pages/api/send_otp.ts
index 06d31bd009..6599e127cd 100644
--- a/examples/auth-with-stytch/pages/api/send_otp.ts
+++ b/examples/auth-with-stytch/pages/api/send_otp.ts
@@ -1,32 +1,32 @@
 // This API route sends an OTP code to a specified number.
-import type { NextApiRequest, NextApiResponse } from 'next'
-import loadStytch from '../../lib/loadStytch'
+import type { NextApiRequest, NextApiResponse } from "next";
+import loadStytch from "../../lib/loadStytch";
 
 type Data = {
-  methodId: string
-}
+  methodId: string;
+};
 
 export async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
-  if (req.method === 'POST') {
-    const client = loadStytch()
-    const data = JSON.parse(req.body)
+  if (req.method === "POST") {
+    const client = loadStytch();
+    const data = JSON.parse(req.body);
     try {
-      const phoneNumber = data.phoneNumber.replace(/\D/g, '')
+      const phoneNumber = data.phoneNumber.replace(/\D/g, "");
 
       // params are of type stytch.LoginOrCreateUserBySMSRequest
       const params = {
         phone_number: `${data.intlCode}${phoneNumber}`,
-      }
+      };
 
-      const resp = await client.otps.sms.loginOrCreate(params)
-      res.status(200).json({ methodId: resp.phone_id })
+      const resp = await client.otps.sms.loginOrCreate(params);
+      res.status(200).json({ methodId: resp.phone_id });
     } catch (error) {
-      console.log(error)
-      res.status(400)
+      console.log(error);
+      res.status(400);
     }
   } else {
     // Handle any other HTTP method
   }
 }
 
-export default handler
+export default handler;
diff --git a/examples/auth-with-stytch/pages/index.tsx b/examples/auth-with-stytch/pages/index.tsx
index 3974f66563..ba364f5f17 100644
--- a/examples/auth-with-stytch/pages/index.tsx
+++ b/examples/auth-with-stytch/pages/index.tsx
@@ -1,34 +1,34 @@
-import React, { useEffect } from 'react'
-import { useRouter } from 'next/router'
-import { Stytch, StytchProps } from '@stytch/stytch-react'
-import { OAuthProvidersTypes, SDKProductTypes } from '@stytch/stytch-js'
-import styles from '../styles/Home.module.css'
-import withSession, { ServerSideProps } from '../lib/withSession'
-import LoginWithSMS from '../components/LoginWithSMS'
-import { LoginMethod } from '../lib/types'
-import LoginEntryPoint from '../components/LoginEntryPoint'
+import React, { useEffect } from "react";
+import { useRouter } from "next/router";
+import { Stytch, StytchProps } from "@stytch/stytch-react";
+import { OAuthProvidersTypes, SDKProductTypes } from "@stytch/stytch-js";
+import styles from "../styles/Home.module.css";
+import withSession, { ServerSideProps } from "../lib/withSession";
+import LoginWithSMS from "../components/LoginWithSMS";
+import { LoginMethod } from "../lib/types";
+import LoginEntryPoint from "../components/LoginEntryPoint";
 
 // Set the URL base for redirect URLs. The three cases are as follows:
 // 1. Running locally via `vercel dev`; VERCEL_URL will contain localhost, but will not be https.
 // 2. Deploying via Vercel; VERCEL_URL will be generated on runtime and use https.
 // 3. Running locally via `npm run dev`; VERCEL_URL will be undefined and the app will be at localhost.
-let REDIRECT_URL_BASE = ''
+let REDIRECT_URL_BASE = "";
 
-if (process.env.NEXT_PUBLIC_VERCEL_URL?.includes('localhost')) {
-  REDIRECT_URL_BASE = 'http://localhost:3000'
+if (process.env.NEXT_PUBLIC_VERCEL_URL?.includes("localhost")) {
+  REDIRECT_URL_BASE = "http://localhost:3000";
 } else if (process.env.NEXT_PUBLIC_VERCEL_URL !== undefined) {
-  REDIRECT_URL_BASE = `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+  REDIRECT_URL_BASE = `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`;
 } else {
-  REDIRECT_URL_BASE = 'http://localhost:3000'
+  REDIRECT_URL_BASE = "http://localhost:3000";
 }
 
 const stytchProps: StytchProps = {
   loginOrSignupView: {
     products: [SDKProductTypes.oauth, SDKProductTypes.emailMagicLinks],
     emailMagicLinksOptions: {
-      loginRedirectURL: REDIRECT_URL_BASE + '/api/authenticate_magic_link',
+      loginRedirectURL: REDIRECT_URL_BASE + "/api/authenticate_magic_link",
       loginExpirationMinutes: 30,
-      signupRedirectURL: REDIRECT_URL_BASE + '/api/authenticate_magic_link',
+      signupRedirectURL: REDIRECT_URL_BASE + "/api/authenticate_magic_link",
       signupExpirationMinutes: 30,
       createUserAsPending: false,
     },
@@ -42,11 +42,11 @@ const stytchProps: StytchProps = {
   },
   style: {
     fontFamily: '"Helvetica New", Helvetica, sans-serif',
-    primaryColor: '#0577CA',
-    primaryTextColor: '#090909',
-    width: '321px',
+    primaryColor: "#0577CA",
+    primaryTextColor: "#090909",
+    width: "321px",
   },
-  publicToken: process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN || '',
+  publicToken: process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN || "",
   callbacks: {
     onEvent: (data: { eventData: { userId: any; email: any } }) => {
       if (
@@ -56,47 +56,49 @@ const stytchProps: StytchProps = {
         console.log({
           userId: data.eventData.userId,
           email: data.eventData.email,
-        })
+        });
       } else {
-        console.warn('The user is not found. Data: ', data)
+        console.warn("The user is not found. Data: ", data);
       }
     },
     onSuccess: (data) => console.log(data),
     onError: (data) => console.log(data),
   },
-}
+};
 
 type Props = {
-  publicToken: string
+  publicToken: string;
   user: {
-    id: string
-  }
-}
+    id: string;
+  };
+};
 
 const App = (props: Props) => {
-  const { user, publicToken } = props
-  const [loginMethod, setLoginMethod] = React.useState<LoginMethod | null>(null)
-  const router = useRouter()
+  const { user, publicToken } = props;
+  const [loginMethod, setLoginMethod] = React.useState<LoginMethod | null>(
+    null,
+  );
+  const router = useRouter();
 
   useEffect(() => {
     if (user) {
-      router.push('/profile')
+      router.push("/profile");
     }
-  })
+  });
 
   const loginMethodMap: Record<LoginMethod, React.ReactElement> = {
     [LoginMethod.API]: <LoginWithSMS />,
     [LoginMethod.SDK]: (
       <div className={styles.container}>
         <Stytch
-          publicToken={publicToken || ''}
+          publicToken={publicToken || ""}
           loginOrSignupView={stytchProps.loginOrSignupView}
           style={stytchProps.style}
           callbacks={stytchProps.callbacks}
         />
       </div>
     ),
-  }
+  };
 
   return (
     <div className={styles.root}>
@@ -106,19 +108,19 @@ const App = (props: Props) => {
         loginMethodMap[loginMethod]
       )}
     </div>
-  )
-}
+  );
+};
 
 const getServerSidePropsHandler: ServerSideProps = async ({ req }) => {
   // Get the user's session based on the request
-  const user = req.session.get('user') ?? null
+  const user = req.session.get("user") ?? null;
   const props: Props = {
     publicToken: stytchProps.publicToken,
     user,
-  }
-  return { props }
-}
+  };
+  return { props };
+};
 
-export const getServerSideProps = withSession(getServerSidePropsHandler)
+export const getServerSideProps = withSession(getServerSidePropsHandler);
 
-export default App
+export default App;
diff --git a/examples/auth-with-stytch/pages/profile.tsx b/examples/auth-with-stytch/pages/profile.tsx
index 33896e29da..7db3d6362b 100644
--- a/examples/auth-with-stytch/pages/profile.tsx
+++ b/examples/auth-with-stytch/pages/profile.tsx
@@ -1,31 +1,31 @@
-import React, { useEffect } from 'react'
-import styles from '../styles/Home.module.css'
-import StytchContainer from '../components/StytchContainer'
-import withSession, { ServerSideProps } from '../lib/withSession'
-import { useRouter } from 'next/router'
+import React, { useEffect } from "react";
+import styles from "../styles/Home.module.css";
+import StytchContainer from "../components/StytchContainer";
+import withSession, { ServerSideProps } from "../lib/withSession";
+import { useRouter } from "next/router";
 
 type Props = {
   user?: {
-    id: string
-  }
-}
+    id: string;
+  };
+};
 
 const Profile = (props: Props) => {
-  const { user } = props
-  const router = useRouter()
+  const { user } = props;
+  const router = useRouter();
 
   useEffect(() => {
     if (!user) {
-      router.replace('/')
+      router.replace("/");
     }
-  })
+  });
 
   const signOut = async () => {
-    const resp = await fetch('/api/logout', { method: 'POST' })
+    const resp = await fetch("/api/logout", { method: "POST" });
     if (resp.status === 200) {
-      router.push('/')
+      router.push("/");
     }
-  }
+  };
 
   return (
     <>
@@ -33,12 +33,12 @@ const Profile = (props: Props) => {
         <div />
       ) : (
         <StytchContainer>
-          <h2>{'Welcome!'}</h2>
+          <h2>{"Welcome!"}</h2>
           <p className={styles.profileSubHeader}>
             Thank you for using Stytch! Here’s your user info.
           </p>
           <pre className={styles.code}>
-            {JSON.stringify(user, null, 1).replace(' ', '')}
+            {JSON.stringify(user, null, 1).replace(" ", "")}
           </pre>
           <button className={styles.primaryButton} onClick={signOut}>
             Sign out
@@ -46,16 +46,16 @@ const Profile = (props: Props) => {
         </StytchContainer>
       )}
     </>
-  )
-}
+  );
+};
 
 const getServerSidePropsHandler: ServerSideProps = async ({ req }) => {
   // Get the user's session based on the request
-  const user = req.session.get('user') ?? null
-  const props: Props = { user }
-  return { props }
-}
+  const user = req.session.get("user") ?? null;
+  const props: Props = { user };
+  return { props };
+};
 
-export const getServerSideProps = withSession(getServerSidePropsHandler)
+export const getServerSideProps = withSession(getServerSidePropsHandler);
 
-export default Profile
+export default Profile;
diff --git a/examples/auth-with-stytch/styles/Home.module.css b/examples/auth-with-stytch/styles/Home.module.css
index d30afe1a25..e400186dcf 100644
--- a/examples/auth-with-stytch/styles/Home.module.css
+++ b/examples/auth-with-stytch/styles/Home.module.css
@@ -112,7 +112,7 @@
 }
 
 .flag {
-  background: url('/stars-and-stripes.png') no-repeat scroll 8px 16px;
+  background: url("/stars-and-stripes.png") no-repeat scroll 8px 16px;
   border-right: none;
   border-radius: 3px 0 0 3px;
   width: 80px;
diff --git a/examples/auth-with-stytch/styles/globals.css b/examples/auth-with-stytch/styles/globals.css
index c2b16ddb2f..e806d1d5a7 100644
--- a/examples/auth-with-stytch/styles/globals.css
+++ b/examples/auth-with-stytch/styles/globals.css
@@ -11,7 +11,7 @@ a {
 
 * {
   box-sizing: border-box;
-  font-family: IBM Plex Sans, 'sans-serif';
+  font-family: IBM Plex Sans, "sans-serif";
 }
 
 p {
@@ -57,7 +57,7 @@ input::placeholder {
 }
 
 button,
-input[type='submit'] {
+input[type="submit"] {
   border: none;
   border-radius: 3px;
   color: white;
@@ -68,6 +68,6 @@ input[type='submit'] {
 }
 
 button:hover,
-input[type='submit']:hover {
+input[type="submit"]:hover {
   opacity: 0.8;
 }
diff --git a/examples/auth/app/api/auth/[...nextauth]/route.ts b/examples/auth/app/api/auth/[...nextauth]/route.ts
index 883210bb21..e47b0fd8f0 100644
--- a/examples/auth/app/api/auth/[...nextauth]/route.ts
+++ b/examples/auth/app/api/auth/[...nextauth]/route.ts
@@ -1,2 +1,2 @@
-export { GET, POST } from '@/auth'
-export const runtime = 'edge'
+export { GET, POST } from "@/auth";
+export const runtime = "edge";
diff --git a/examples/auth/app/layout.tsx b/examples/auth/app/layout.tsx
index 0d78f7c49a..48f0ecfeb6 100644
--- a/examples/auth/app/layout.tsx
+++ b/examples/auth/app/layout.tsx
@@ -1,18 +1,18 @@
-import './globals.css'
+import "./globals.css";
 
 export const metadata = {
-  title: 'Next.js Authentication',
-  description: 'Example using NextAuth.js',
-}
+  title: "Next.js Authentication",
+  description: "Example using NextAuth.js",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/auth/app/page.tsx b/examples/auth/app/page.tsx
index ca00ddd7d8..6e696de1d3 100644
--- a/examples/auth/app/page.tsx
+++ b/examples/auth/app/page.tsx
@@ -1,41 +1,41 @@
-import { auth, signIn, signOut } from '@/auth'
+import { auth, signIn, signOut } from "@/auth";
 
 function SignIn() {
   return (
     <form
       action={async () => {
-        'use server'
-        await signIn('github')
+        "use server";
+        await signIn("github");
       }}
     >
       <p>You are not logged in</p>
       <button type="submit">Sign in with GitHub</button>
     </form>
-  )
+  );
 }
 
 function SignOut({ children }: { children: React.ReactNode }) {
   return (
     <form
       action={async () => {
-        'use server'
-        await signOut()
+        "use server";
+        await signOut();
       }}
     >
       <p>{children}</p>
       <button type="submit">Sign out</button>
     </form>
-  )
+  );
 }
 
 export default async function Page() {
-  let session = await auth()
-  let user = session?.user?.email
+  let session = await auth();
+  let user = session?.user?.email;
 
   return (
     <section>
       <h1>Home</h1>
       <div>{user ? <SignOut>{`Welcome ${user}`}</SignOut> : <SignIn />}</div>
     </section>
-  )
+  );
 }
diff --git a/examples/auth/auth.ts b/examples/auth/auth.ts
index 9f93d68c2c..567f3d3634 100644
--- a/examples/auth/auth.ts
+++ b/examples/auth/auth.ts
@@ -1,5 +1,5 @@
-import NextAuth from 'next-auth'
-import GitHub from 'next-auth/providers/github'
+import NextAuth from "next-auth";
+import GitHub from "next-auth/providers/github";
 
 export const {
   handlers: { GET, POST },
@@ -8,4 +8,4 @@ export const {
   signOut,
 } = NextAuth({
   providers: [GitHub],
-})
+});
diff --git a/examples/auth/middleware.ts b/examples/auth/middleware.ts
index e9cfe5e2aa..f32baa8a5f 100644
--- a/examples/auth/middleware.ts
+++ b/examples/auth/middleware.ts
@@ -1,6 +1,6 @@
-export { auth as default } from './auth'
+export { auth as default } from "./auth";
 
 // Optionally, don't invoke Middleware on some paths
 export const config = {
-  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
-}
+  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
+};
diff --git a/examples/auth0/additional.d.ts b/examples/auth0/additional.d.ts
index 5cb3568c28..0c1254b549 100644
--- a/examples/auth0/additional.d.ts
+++ b/examples/auth0/additional.d.ts
@@ -1,7 +1,7 @@
-export {}
+export {};
 
 declare global {
   interface Window {
-    __user: any
+    __user: any;
   }
 }
diff --git a/examples/auth0/components/header.tsx b/examples/auth0/components/header.tsx
index 69cf85934b..69de8249d4 100644
--- a/examples/auth0/components/header.tsx
+++ b/examples/auth0/components/header.tsx
@@ -1,9 +1,9 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 type HeaderProps = {
-  user?: any
-  loading: boolean
-}
+  user?: any;
+  loading: boolean;
+};
 
 const Header = ({ user, loading }: HeaderProps) => {
   return (
@@ -80,7 +80,7 @@ const Header = ({ user, loading }: HeaderProps) => {
         }
       `}</style>
     </header>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;
diff --git a/examples/auth0/components/layout.tsx b/examples/auth0/components/layout.tsx
index 02d4cb2288..71999eefc6 100644
--- a/examples/auth0/components/layout.tsx
+++ b/examples/auth0/components/layout.tsx
@@ -1,11 +1,11 @@
-import Head from 'next/head'
-import Header from './header'
+import Head from "next/head";
+import Header from "./header";
 
 type LayoutProps = {
-  user?: any
-  loading?: boolean
-  children: React.ReactNode
-}
+  user?: any;
+  loading?: boolean;
+  children: React.ReactNode;
+};
 
 const Layout = ({ user, loading = false, children }: LayoutProps) => {
   return (
@@ -30,12 +30,12 @@ const Layout = ({ user, loading = false, children }: LayoutProps) => {
         body {
           margin: 0;
           color: #333;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-            Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+            Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
         }
       `}</style>
     </>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;
diff --git a/examples/auth0/interfaces/index.ts b/examples/auth0/interfaces/index.ts
index 1d58c24d47..558c05645f 100644
--- a/examples/auth0/interfaces/index.ts
+++ b/examples/auth0/interfaces/index.ts
@@ -1,9 +1,9 @@
 export type User = {
-  email: string
-  email_verified: boolean
-  name: string
-  nickname: string
-  picture: string
-  sub: string
-  updated_at: string
-}
+  email: string;
+  email_verified: boolean;
+  name: string;
+  nickname: string;
+  picture: string;
+  sub: string;
+  updated_at: string;
+};
diff --git a/examples/auth0/pages/_app.tsx b/examples/auth0/pages/_app.tsx
index 0d8b46ed23..042efe8388 100644
--- a/examples/auth0/pages/_app.tsx
+++ b/examples/auth0/pages/_app.tsx
@@ -1,14 +1,14 @@
-import { UserProvider } from '@auth0/nextjs-auth0/client'
+import { UserProvider } from "@auth0/nextjs-auth0/client";
 
 export default function App({ Component, pageProps }) {
   // optionally pass the 'user' prop from pages that require server-side
   // rendering to prepopulate the 'useUser' hook.
 
-  const { user } = pageProps
+  const { user } = pageProps;
 
   return (
     <UserProvider user={user}>
       <Component {...pageProps} />
     </UserProvider>
-  )
+  );
 }
diff --git a/examples/auth0/pages/about.tsx b/examples/auth0/pages/about.tsx
index a2a8f2cc1b..930210ca6d 100644
--- a/examples/auth0/pages/about.tsx
+++ b/examples/auth0/pages/about.tsx
@@ -1,14 +1,14 @@
-import { useUser } from '@auth0/nextjs-auth0/client'
-import Layout from '../components/layout'
+import { useUser } from "@auth0/nextjs-auth0/client";
+import Layout from "../components/layout";
 
 const About = () => {
-  const { user, isLoading } = useUser()
+  const { user, isLoading } = useUser();
 
   return (
     <Layout user={user} loading={isLoading}>
       <h1>About</h1>
       <p>
-        This project shows different ways to display Profile info: using{' '}
+        This project shows different ways to display Profile info: using{" "}
         <i>Client rendered</i>, <i>Server rendered</i>, and <i>API rendered</i>
       </p>
       <p>
@@ -18,7 +18,7 @@ const About = () => {
         display it
       </p>
     </Layout>
-  )
-}
+  );
+};
 
-export default About
+export default About;
diff --git a/examples/auth0/pages/advanced/api-profile.tsx b/examples/auth0/pages/advanced/api-profile.tsx
index e0c9bee472..617e86e46f 100644
--- a/examples/auth0/pages/advanced/api-profile.tsx
+++ b/examples/auth0/pages/advanced/api-profile.tsx
@@ -1,21 +1,21 @@
-import { useEffect, useState } from 'react'
-import { useUser } from '@auth0/nextjs-auth0/client'
-import Layout from '../../components/layout'
+import { useEffect, useState } from "react";
+import { useUser } from "@auth0/nextjs-auth0/client";
+import Layout from "../../components/layout";
 
 const ApiProfile = () => {
-  const { user, isLoading } = useUser()
+  const { user, isLoading } = useUser();
 
-  const [data, setData] = useState(null)
+  const [data, setData] = useState(null);
 
   useEffect(() => {
-    ;(async () => {
-      const res = await fetch('/api/protected-api')
+    (async () => {
+      const res = await fetch("/api/protected-api");
 
-      const data = await res.json()
+      const data = await res.json();
 
-      setData(data)
-    })()
-  }, [])
+      setData(data);
+    })();
+  }, []);
 
   return (
     <Layout user={user} loading={isLoading}>
@@ -29,9 +29,9 @@ const ApiProfile = () => {
         <p>{JSON.stringify(data)}</p>
       </div>
     </Layout>
-  )
-}
+  );
+};
 
 // Public route.(CSR) also accessing API from the client-side.
 // data is not cached when redirecting between pages.
-export default ApiProfile
+export default ApiProfile;
diff --git a/examples/auth0/pages/advanced/ssr-profile.tsx b/examples/auth0/pages/advanced/ssr-profile.tsx
index 298b890db1..e8f02ecec2 100644
--- a/examples/auth0/pages/advanced/ssr-profile.tsx
+++ b/examples/auth0/pages/advanced/ssr-profile.tsx
@@ -1,10 +1,10 @@
-import { withPageAuthRequired } from '@auth0/nextjs-auth0'
-import Layout from '../../components/layout'
-import { User } from '../../interfaces'
+import { withPageAuthRequired } from "@auth0/nextjs-auth0";
+import Layout from "../../components/layout";
+import { User } from "../../interfaces";
 
 type ProfileProps = {
-  user: User
-}
+  user: User;
+};
 
 export default function Profile({ user }: ProfileProps) {
   return (
@@ -18,9 +18,9 @@ export default function Profile({ user }: ProfileProps) {
         <p>name: {user.name}</p>
       </div>
     </Layout>
-  )
+  );
 }
 
 // Protected route, checking authentication status before rendering the page.(SSR)
 // It's slower than a static page with client side authentication
-export const getServerSideProps = withPageAuthRequired()
+export const getServerSideProps = withPageAuthRequired();
diff --git a/examples/auth0/pages/api/auth/[...auth0].tsx b/examples/auth0/pages/api/auth/[...auth0].tsx
index 1edbfe3eb4..5c189a0d11 100644
--- a/examples/auth0/pages/api/auth/[...auth0].tsx
+++ b/examples/auth0/pages/api/auth/[...auth0].tsx
@@ -1,3 +1,3 @@
-import { handleAuth } from '@auth0/nextjs-auth0'
+import { handleAuth } from "@auth0/nextjs-auth0";
 
-export default handleAuth()
+export default handleAuth();
diff --git a/examples/auth0/pages/api/protected-api.ts b/examples/auth0/pages/api/protected-api.ts
index 0b85a37cf9..b33602c3e4 100644
--- a/examples/auth0/pages/api/protected-api.ts
+++ b/examples/auth0/pages/api/protected-api.ts
@@ -1,20 +1,20 @@
-import { withApiAuthRequired, getSession } from '@auth0/nextjs-auth0'
+import { withApiAuthRequired, getSession } from "@auth0/nextjs-auth0";
 
 // Serverless function
 // Protected API, requests to '/api/protected' without a valid session cookie will fail
 
 async function handle(req, res) {
-  const { user } = await getSession(req, res)
+  const { user } = await getSession(req, res);
 
   try {
     res.status(200).json({
-      session: 'true',
+      session: "true",
       id: user.sub,
       nickname: user.nickname,
-    })
+    });
   } catch (e) {
-    res.status(500).json({ error: 'Unable to fetch', description: e })
+    res.status(500).json({ error: "Unable to fetch", description: e });
   }
 }
 
-export default withApiAuthRequired(handle)
+export default withApiAuthRequired(handle);
diff --git a/examples/auth0/pages/index.tsx b/examples/auth0/pages/index.tsx
index c1815b3581..4bc2f9f7bf 100644
--- a/examples/auth0/pages/index.tsx
+++ b/examples/auth0/pages/index.tsx
@@ -1,8 +1,8 @@
-import { useUser } from '@auth0/nextjs-auth0/client'
-import Layout from '../components/layout'
+import { useUser } from "@auth0/nextjs-auth0/client";
+import Layout from "../components/layout";
 
 const Home = () => {
-  const { user, isLoading } = useUser()
+  const { user, isLoading } = useUser();
 
   return (
     <Layout user={user} loading={isLoading}>
@@ -32,8 +32,8 @@ const Home = () => {
         </>
       )}
     </Layout>
-  )
-}
+  );
+};
 
 // fast/cached SSR page
-export default Home
+export default Home;
diff --git a/examples/auth0/pages/profile.tsx b/examples/auth0/pages/profile.tsx
index f09479bde4..d9e295aaac 100644
--- a/examples/auth0/pages/profile.tsx
+++ b/examples/auth0/pages/profile.tsx
@@ -1,10 +1,10 @@
-import { withPageAuthRequired } from '@auth0/nextjs-auth0/client'
-import Layout from '../components/layout'
-import { User } from '../interfaces'
+import { withPageAuthRequired } from "@auth0/nextjs-auth0/client";
+import Layout from "../components/layout";
+import { User } from "../interfaces";
 
 type ProfileCardProps = {
-  user: User
-}
+  user: User;
+};
 
 const ProfileCard = ({ user }: ProfileCardProps) => {
   return (
@@ -18,16 +18,16 @@ const ProfileCard = ({ user }: ProfileCardProps) => {
         <p>name: {user.name}</p>
       </div>
     </>
-  )
-}
+  );
+};
 
 const Profile = ({ user, isLoading }) => {
   return (
     <Layout user={user} loading={isLoading}>
       {isLoading ? <>Loading...</> : <ProfileCard user={user} />}
     </Layout>
-  )
-}
+  );
+};
 
 // Protected route, checking user authentication client-side.(CSR)
-export default withPageAuthRequired(Profile)
+export default withPageAuthRequired(Profile);
diff --git a/examples/basic-css/pages/index.tsx b/examples/basic-css/pages/index.tsx
index 87423cb5c4..30426c72df 100644
--- a/examples/basic-css/pages/index.tsx
+++ b/examples/basic-css/pages/index.tsx
@@ -1,11 +1,11 @@
-import styles from '../styles.module.css'
+import styles from "../styles.module.css";
 
 const Home = () => {
   return (
     <div className={styles.hello}>
       <p>Hello World</p>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/examples/basic-export/next.config.js b/examples/basic-export/next.config.js
index 45ce13f349..c956189485 100644
--- a/examples/basic-export/next.config.js
+++ b/examples/basic-export/next.config.js
@@ -4,7 +4,7 @@
  * @type {import('next').NextConfig}
  */
 const nextConfig = {
-  output: 'export',
-}
+  output: "export",
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/basic-export/pages/about.tsx b/examples/basic-export/pages/about.tsx
index 2e8a507e2d..4bdeb4b48e 100644
--- a/examples/basic-export/pages/about.tsx
+++ b/examples/basic-export/pages/about.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 const About = () => {
   return (
@@ -9,7 +9,7 @@ const About = () => {
         Go back to the <Link href="/">Home</Link> page.
       </p>
     </div>
-  )
-}
+  );
+};
 
-export default About
+export default About;
diff --git a/examples/basic-export/pages/index.tsx b/examples/basic-export/pages/index.tsx
index 1e543ed2eb..8cee70205e 100644
--- a/examples/basic-export/pages/index.tsx
+++ b/examples/basic-export/pages/index.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 const Home = () => {
   return (
@@ -9,7 +9,7 @@ const Home = () => {
         Visit the <Link href="/about">About</Link> page.
       </p>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/examples/blog-starter/@types/remark-html.d.ts b/examples/blog-starter/@types/remark-html.d.ts
index e1b76b54f7..55183378e3 100644
--- a/examples/blog-starter/@types/remark-html.d.ts
+++ b/examples/blog-starter/@types/remark-html.d.ts
@@ -1 +1 @@
-declare module 'remark-html'
+declare module "remark-html";
diff --git a/examples/blog-starter/_posts/dynamic-routing.md b/examples/blog-starter/_posts/dynamic-routing.md
index b6ef7a26e6..44b0b311f3 100644
--- a/examples/blog-starter/_posts/dynamic-routing.md
+++ b/examples/blog-starter/_posts/dynamic-routing.md
@@ -1,13 +1,13 @@
 ---
-title: 'Dynamic Routing and Static Generation'
-excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.'
-coverImage: '/assets/blog/dynamic-routing/cover.jpg'
-date: '2020-03-16T05:35:07.322Z'
+title: "Dynamic Routing and Static Generation"
+excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus."
+coverImage: "/assets/blog/dynamic-routing/cover.jpg"
+date: "2020-03-16T05:35:07.322Z"
 author:
   name: JJ Kasper
-  picture: '/assets/blog/authors/jj.jpeg'
+  picture: "/assets/blog/authors/jj.jpeg"
 ogImage:
-  url: '/assets/blog/dynamic-routing/cover.jpg'
+  url: "/assets/blog/dynamic-routing/cover.jpg"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
diff --git a/examples/blog-starter/_posts/hello-world.md b/examples/blog-starter/_posts/hello-world.md
index 8d85a1df8f..e3fe9fe827 100644
--- a/examples/blog-starter/_posts/hello-world.md
+++ b/examples/blog-starter/_posts/hello-world.md
@@ -1,13 +1,13 @@
 ---
-title: 'Learn How to Pre-render Pages Using Static Generation with Next.js'
-excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.'
-coverImage: '/assets/blog/hello-world/cover.jpg'
-date: '2020-03-16T05:35:07.322Z'
+title: "Learn How to Pre-render Pages Using Static Generation with Next.js"
+excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus."
+coverImage: "/assets/blog/hello-world/cover.jpg"
+date: "2020-03-16T05:35:07.322Z"
 author:
   name: Tim Neutkens
-  picture: '/assets/blog/authors/tim.jpeg'
+  picture: "/assets/blog/authors/tim.jpeg"
 ogImage:
-  url: '/assets/blog/hello-world/cover.jpg'
+  url: "/assets/blog/hello-world/cover.jpg"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
diff --git a/examples/blog-starter/_posts/preview.md b/examples/blog-starter/_posts/preview.md
index 3d70ba7f99..588bf9dd03 100644
--- a/examples/blog-starter/_posts/preview.md
+++ b/examples/blog-starter/_posts/preview.md
@@ -1,13 +1,13 @@
 ---
-title: 'Preview Mode for Static Generation'
-excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.'
-coverImage: '/assets/blog/preview/cover.jpg'
-date: '2020-03-16T05:35:07.322Z'
+title: "Preview Mode for Static Generation"
+excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus."
+coverImage: "/assets/blog/preview/cover.jpg"
+date: "2020-03-16T05:35:07.322Z"
 author:
   name: Joe Haddad
-  picture: '/assets/blog/authors/joe.jpeg'
+  picture: "/assets/blog/authors/joe.jpeg"
 ogImage:
-  url: '/assets/blog/preview/cover.jpg'
+  url: "/assets/blog/preview/cover.jpg"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
diff --git a/examples/blog-starter/components/alert.tsx b/examples/blog-starter/components/alert.tsx
index 067672f380..8d7d941af8 100644
--- a/examples/blog-starter/components/alert.tsx
+++ b/examples/blog-starter/components/alert.tsx
@@ -1,35 +1,35 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 type Props = {
-  preview?: boolean
-}
+  preview?: boolean;
+};
 
 const Alert = ({ preview }: Props) => {
   return (
     <div
-      className={cn('border-b', {
-        'bg-neutral-800 border-neutral-800 text-white': preview,
-        'bg-neutral-50 border-neutral-200': !preview,
+      className={cn("border-b", {
+        "bg-neutral-800 border-neutral-800 text-white": preview,
+        "bg-neutral-50 border-neutral-200": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This page is a preview.{' '}
+              This page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-teal-300 duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-blue-600 duration-200 transition-colors"
@@ -42,7 +42,7 @@ const Alert = ({ preview }: Props) => {
         </div>
       </Container>
     </div>
-  )
-}
+  );
+};
 
-export default Alert
+export default Alert;
diff --git a/examples/blog-starter/components/avatar.tsx b/examples/blog-starter/components/avatar.tsx
index 920d385162..9c2ea4d381 100644
--- a/examples/blog-starter/components/avatar.tsx
+++ b/examples/blog-starter/components/avatar.tsx
@@ -1,7 +1,7 @@
 type Props = {
-  name: string
-  picture: string
-}
+  name: string;
+  picture: string;
+};
 
 const Avatar = ({ name, picture }: Props) => {
   return (
@@ -9,7 +9,7 @@ const Avatar = ({ name, picture }: Props) => {
       <img src={picture} className="w-12 h-12 rounded-full mr-4" alt={name} />
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
-}
+  );
+};
 
-export default Avatar
+export default Avatar;
diff --git a/examples/blog-starter/components/container.tsx b/examples/blog-starter/components/container.tsx
index 1a1f687144..17458eb8ed 100644
--- a/examples/blog-starter/components/container.tsx
+++ b/examples/blog-starter/components/container.tsx
@@ -1,9 +1,9 @@
 type Props = {
-  children?: React.ReactNode
-}
+  children?: React.ReactNode;
+};
 
 const Container = ({ children }: Props) => {
-  return <div className="container mx-auto px-5">{children}</div>
-}
+  return <div className="container mx-auto px-5">{children}</div>;
+};
 
-export default Container
+export default Container;
diff --git a/examples/blog-starter/components/cover-image.tsx b/examples/blog-starter/components/cover-image.tsx
index 4c200c5b7b..abff0bba95 100644
--- a/examples/blog-starter/components/cover-image.tsx
+++ b/examples/blog-starter/components/cover-image.tsx
@@ -1,25 +1,25 @@
-import cn from 'classnames'
-import Link from 'next/link'
-import Image from 'next/image'
+import cn from "classnames";
+import Link from "next/link";
+import Image from "next/image";
 
 type Props = {
-  title: string
-  src: string
-  slug?: string
-}
+  title: string;
+  src: string;
+  slug?: string;
+};
 
 const CoverImage = ({ title, src, slug }: Props) => {
   const image = (
     <Image
       src={src}
       alt={`Cover Image for ${title}`}
-      className={cn('shadow-sm w-full', {
-        'hover:shadow-lg transition-shadow duration-200': slug,
+      className={cn("shadow-sm w-full", {
+        "hover:shadow-lg transition-shadow duration-200": slug,
       })}
       width={1300}
       height={630}
     />
-  )
+  );
   return (
     <div className="sm:mx-0">
       {slug ? (
@@ -30,7 +30,7 @@ const CoverImage = ({ title, src, slug }: Props) => {
         image
       )}
     </div>
-  )
-}
+  );
+};
 
-export default CoverImage
+export default CoverImage;
diff --git a/examples/blog-starter/components/date-formatter.tsx b/examples/blog-starter/components/date-formatter.tsx
index e827be5e9c..b092f5ec13 100644
--- a/examples/blog-starter/components/date-formatter.tsx
+++ b/examples/blog-starter/components/date-formatter.tsx
@@ -1,12 +1,12 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
 type Props = {
-  dateString: string
-}
+  dateString: string;
+};
 
 const DateFormatter = ({ dateString }: Props) => {
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
-}
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "LLLL	d, yyyy")}</time>;
+};
 
-export default DateFormatter
+export default DateFormatter;
diff --git a/examples/blog-starter/components/footer.tsx b/examples/blog-starter/components/footer.tsx
index d2bcba3336..3cd2edc51e 100644
--- a/examples/blog-starter/components/footer.tsx
+++ b/examples/blog-starter/components/footer.tsx
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 const Footer = () => {
   return (
@@ -26,7 +26,7 @@ const Footer = () => {
         </div>
       </Container>
     </footer>
-  )
-}
+  );
+};
 
-export default Footer
+export default Footer;
diff --git a/examples/blog-starter/components/header.tsx b/examples/blog-starter/components/header.tsx
index 6ecbe1ad0c..0848e1f555 100644
--- a/examples/blog-starter/components/header.tsx
+++ b/examples/blog-starter/components/header.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 const Header = () => {
   return (
@@ -8,7 +8,7 @@ const Header = () => {
       </Link>
       .
     </h2>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;
diff --git a/examples/blog-starter/components/hero-post.tsx b/examples/blog-starter/components/hero-post.tsx
index 6774face1a..86aed42002 100644
--- a/examples/blog-starter/components/hero-post.tsx
+++ b/examples/blog-starter/components/hero-post.tsx
@@ -1,17 +1,17 @@
-import Avatar from './avatar'
-import DateFormatter from './date-formatter'
-import CoverImage from './cover-image'
-import Link from 'next/link'
-import type Author from '../interfaces/author'
+import Avatar from "./avatar";
+import DateFormatter from "./date-formatter";
+import CoverImage from "./cover-image";
+import Link from "next/link";
+import type Author from "../interfaces/author";
 
 type Props = {
-  title: string
-  coverImage: string
-  date: string
-  excerpt: string
-  author: Author
-  slug: string
-}
+  title: string;
+  coverImage: string;
+  date: string;
+  excerpt: string;
+  author: Author;
+  slug: string;
+};
 
 const HeroPost = ({
   title,
@@ -47,7 +47,7 @@ const HeroPost = ({
         </div>
       </div>
     </section>
-  )
-}
+  );
+};
 
-export default HeroPost
+export default HeroPost;
diff --git a/examples/blog-starter/components/intro.tsx b/examples/blog-starter/components/intro.tsx
index d41e6fb1b9..030d7f6c53 100644
--- a/examples/blog-starter/components/intro.tsx
+++ b/examples/blog-starter/components/intro.tsx
@@ -1,4 +1,4 @@
-import { CMS_NAME } from '../lib/constants'
+import { CMS_NAME } from "../lib/constants";
 
 const Intro = () => {
   return (
@@ -7,17 +7,17 @@ const Intro = () => {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-blue-600 duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
+        </a>{" "}
         and {CMS_NAME}.
       </h4>
     </section>
-  )
-}
+  );
+};
 
-export default Intro
+export default Intro;
diff --git a/examples/blog-starter/components/layout.tsx b/examples/blog-starter/components/layout.tsx
index 9cd23e56e1..de3eb1b267 100644
--- a/examples/blog-starter/components/layout.tsx
+++ b/examples/blog-starter/components/layout.tsx
@@ -1,11 +1,11 @@
-import Alert from './alert'
-import Footer from './footer'
-import Meta from './meta'
+import Alert from "./alert";
+import Footer from "./footer";
+import Meta from "./meta";
 
 type Props = {
-  preview?: boolean
-  children: React.ReactNode
-}
+  preview?: boolean;
+  children: React.ReactNode;
+};
 
 const Layout = ({ preview, children }: Props) => {
   return (
@@ -17,7 +17,7 @@ const Layout = ({ preview, children }: Props) => {
       </div>
       <Footer />
     </>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;
diff --git a/examples/blog-starter/components/meta.tsx b/examples/blog-starter/components/meta.tsx
index 24690de3d3..ac3c5fcfc1 100644
--- a/examples/blog-starter/components/meta.tsx
+++ b/examples/blog-starter/components/meta.tsx
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "../lib/constants";
 
 const Meta = () => {
   return (
@@ -38,7 +38,7 @@ const Meta = () => {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
-}
+  );
+};
 
-export default Meta
+export default Meta;
diff --git a/examples/blog-starter/components/more-stories.tsx b/examples/blog-starter/components/more-stories.tsx
index 0bcb92808c..e62918eb07 100644
--- a/examples/blog-starter/components/more-stories.tsx
+++ b/examples/blog-starter/components/more-stories.tsx
@@ -1,9 +1,9 @@
-import PostPreview from './post-preview'
-import type Post from '../interfaces/post'
+import PostPreview from "./post-preview";
+import type Post from "../interfaces/post";
 
 type Props = {
-  posts: Post[]
-}
+  posts: Post[];
+};
 
 const MoreStories = ({ posts }: Props) => {
   return (
@@ -25,7 +25,7 @@ const MoreStories = ({ posts }: Props) => {
         ))}
       </div>
     </section>
-  )
-}
+  );
+};
 
-export default MoreStories
+export default MoreStories;
diff --git a/examples/blog-starter/components/post-body.tsx b/examples/blog-starter/components/post-body.tsx
index cfb1f70ced..e994a567d7 100644
--- a/examples/blog-starter/components/post-body.tsx
+++ b/examples/blog-starter/components/post-body.tsx
@@ -1,18 +1,18 @@
-import markdownStyles from './markdown-styles.module.css'
+import markdownStyles from "./markdown-styles.module.css";
 
 type Props = {
-  content: string
-}
+  content: string;
+};
 
 const PostBody = ({ content }: Props) => {
   return (
     <div className="max-w-2xl mx-auto">
       <div
-        className={markdownStyles['markdown']}
+        className={markdownStyles["markdown"]}
         dangerouslySetInnerHTML={{ __html: content }}
       />
     </div>
-  )
-}
+  );
+};
 
-export default PostBody
+export default PostBody;
diff --git a/examples/blog-starter/components/post-header.tsx b/examples/blog-starter/components/post-header.tsx
index a2316fb324..68dcddf2e5 100644
--- a/examples/blog-starter/components/post-header.tsx
+++ b/examples/blog-starter/components/post-header.tsx
@@ -1,15 +1,15 @@
-import Avatar from './avatar'
-import DateFormatter from './date-formatter'
-import CoverImage from './cover-image'
-import PostTitle from './post-title'
-import type Author from '../interfaces/author'
+import Avatar from "./avatar";
+import DateFormatter from "./date-formatter";
+import CoverImage from "./cover-image";
+import PostTitle from "./post-title";
+import type Author from "../interfaces/author";
 
 type Props = {
-  title: string
-  coverImage: string
-  date: string
-  author: Author
-}
+  title: string;
+  coverImage: string;
+  date: string;
+  author: Author;
+};
 
 const PostHeader = ({ title, coverImage, date, author }: Props) => {
   return (
@@ -30,7 +30,7 @@ const PostHeader = ({ title, coverImage, date, author }: Props) => {
         </div>
       </div>
     </>
-  )
-}
+  );
+};
 
-export default PostHeader
+export default PostHeader;
diff --git a/examples/blog-starter/components/post-preview.tsx b/examples/blog-starter/components/post-preview.tsx
index 10506c87f1..fc173383d6 100644
--- a/examples/blog-starter/components/post-preview.tsx
+++ b/examples/blog-starter/components/post-preview.tsx
@@ -1,17 +1,17 @@
-import Avatar from './avatar'
-import DateFormatter from './date-formatter'
-import CoverImage from './cover-image'
-import Link from 'next/link'
-import type Author from '../interfaces/author'
+import Avatar from "./avatar";
+import DateFormatter from "./date-formatter";
+import CoverImage from "./cover-image";
+import Link from "next/link";
+import type Author from "../interfaces/author";
 
 type Props = {
-  title: string
-  coverImage: string
-  date: string
-  excerpt: string
-  author: Author
-  slug: string
-}
+  title: string;
+  coverImage: string;
+  date: string;
+  excerpt: string;
+  author: Author;
+  slug: string;
+};
 
 const PostPreview = ({
   title,
@@ -41,7 +41,7 @@ const PostPreview = ({
       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
       <Avatar name={author.name} picture={author.picture} />
     </div>
-  )
-}
+  );
+};
 
-export default PostPreview
+export default PostPreview;
diff --git a/examples/blog-starter/components/post-title.tsx b/examples/blog-starter/components/post-title.tsx
index 74dc0fdb10..70ff3d12e5 100644
--- a/examples/blog-starter/components/post-title.tsx
+++ b/examples/blog-starter/components/post-title.tsx
@@ -1,15 +1,15 @@
-import { ReactNode } from 'react'
+import { ReactNode } from "react";
 
 type Props = {
-  children?: ReactNode
-}
+  children?: ReactNode;
+};
 
 const PostTitle = ({ children }: Props) => {
   return (
     <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
-  )
-}
+  );
+};
 
-export default PostTitle
+export default PostTitle;
diff --git a/examples/blog-starter/components/section-separator.tsx b/examples/blog-starter/components/section-separator.tsx
index 5205e528e4..49e9c6ac81 100644
--- a/examples/blog-starter/components/section-separator.tsx
+++ b/examples/blog-starter/components/section-separator.tsx
@@ -1,5 +1,5 @@
 const SectionSeparator = () => {
-  return <hr className="border-neutral-200 mt-28 mb-24" />
-}
+  return <hr className="border-neutral-200 mt-28 mb-24" />;
+};
 
-export default SectionSeparator
+export default SectionSeparator;
diff --git a/examples/blog-starter/interfaces/author.ts b/examples/blog-starter/interfaces/author.ts
index 4d9892b341..dc545c709f 100644
--- a/examples/blog-starter/interfaces/author.ts
+++ b/examples/blog-starter/interfaces/author.ts
@@ -1,6 +1,6 @@
 type Author = {
-  name: string
-  picture: string
-}
+  name: string;
+  picture: string;
+};
 
-export default Author
+export default Author;
diff --git a/examples/blog-starter/interfaces/post.ts b/examples/blog-starter/interfaces/post.ts
index 179bf746fb..816513b00a 100644
--- a/examples/blog-starter/interfaces/post.ts
+++ b/examples/blog-starter/interfaces/post.ts
@@ -1,16 +1,16 @@
-import type Author from './author'
+import type Author from "./author";
 
 type PostType = {
-  slug: string
-  title: string
-  date: string
-  coverImage: string
-  author: Author
-  excerpt: string
+  slug: string;
+  title: string;
+  date: string;
+  coverImage: string;
+  author: Author;
+  excerpt: string;
   ogImage: {
-    url: string
-  }
-  content: string
-}
+    url: string;
+  };
+  content: string;
+};
 
-export default PostType
+export default PostType;
diff --git a/examples/blog-starter/lib/api.ts b/examples/blog-starter/lib/api.ts
index be2edfd854..10a71dfe9a 100644
--- a/examples/blog-starter/lib/api.ts
+++ b/examples/blog-starter/lib/api.ts
@@ -1,47 +1,47 @@
-import fs from 'fs'
-import { join } from 'path'
-import matter from 'gray-matter'
+import fs from "fs";
+import { join } from "path";
+import matter from "gray-matter";
 
-const postsDirectory = join(process.cwd(), '_posts')
+const postsDirectory = join(process.cwd(), "_posts");
 
 export function getPostSlugs() {
-  return fs.readdirSync(postsDirectory)
+  return fs.readdirSync(postsDirectory);
 }
 
 export function getPostBySlug(slug: string, fields: string[] = []) {
-  const realSlug = slug.replace(/\.md$/, '')
-  const fullPath = join(postsDirectory, `${realSlug}.md`)
-  const fileContents = fs.readFileSync(fullPath, 'utf8')
-  const { data, content } = matter(fileContents)
+  const realSlug = slug.replace(/\.md$/, "");
+  const fullPath = join(postsDirectory, `${realSlug}.md`);
+  const fileContents = fs.readFileSync(fullPath, "utf8");
+  const { data, content } = matter(fileContents);
 
   type Items = {
-    [key: string]: string
-  }
+    [key: string]: string;
+  };
 
-  const items: Items = {}
+  const items: Items = {};
 
   // Ensure only the minimal needed data is exposed
   fields.forEach((field) => {
-    if (field === 'slug') {
-      items[field] = realSlug
+    if (field === "slug") {
+      items[field] = realSlug;
     }
-    if (field === 'content') {
-      items[field] = content
+    if (field === "content") {
+      items[field] = content;
     }
 
-    if (typeof data[field] !== 'undefined') {
-      items[field] = data[field]
+    if (typeof data[field] !== "undefined") {
+      items[field] = data[field];
     }
-  })
+  });
 
-  return items
+  return items;
 }
 
 export function getAllPosts(fields: string[] = []) {
-  const slugs = getPostSlugs()
+  const slugs = getPostSlugs();
   const posts = slugs
     .map((slug) => getPostBySlug(slug, fields))
     // sort posts by date in descending order
-    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
-  return posts
+    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1));
+  return posts;
 }
diff --git a/examples/blog-starter/lib/constants.ts b/examples/blog-starter/lib/constants.ts
index 9beaff8f7f..8f89c201b8 100644
--- a/examples/blog-starter/lib/constants.ts
+++ b/examples/blog-starter/lib/constants.ts
@@ -1,4 +1,4 @@
-export const EXAMPLE_PATH = 'blog-starter'
-export const CMS_NAME = 'Markdown'
+export const EXAMPLE_PATH = "blog-starter";
+export const CMS_NAME = "Markdown";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20Starter%20Example.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg'
+  "https://og-image.vercel.app/Next.js%20Blog%20Starter%20Example.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg";
diff --git a/examples/blog-starter/lib/markdownToHtml.ts b/examples/blog-starter/lib/markdownToHtml.ts
index 9b486c82f8..51e31694be 100644
--- a/examples/blog-starter/lib/markdownToHtml.ts
+++ b/examples/blog-starter/lib/markdownToHtml.ts
@@ -1,7 +1,7 @@
-import { remark } from 'remark'
-import html from 'remark-html'
+import { remark } from "remark";
+import html from "remark-html";
 
 export default async function markdownToHtml(markdown: string) {
-  const result = await remark().use(html).process(markdown)
-  return result.toString()
+  const result = await remark().use(html).process(markdown);
+  return result.toString();
 }
diff --git a/examples/blog-starter/pages/_app.tsx b/examples/blog-starter/pages/_app.tsx
index 6ac887c043..0ee799e016 100644
--- a/examples/blog-starter/pages/_app.tsx
+++ b/examples/blog-starter/pages/_app.tsx
@@ -1,6 +1,6 @@
-import { AppProps } from 'next/app'
-import '../styles/index.css'
+import { AppProps } from "next/app";
+import "../styles/index.css";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/blog-starter/pages/_document.tsx b/examples/blog-starter/pages/_document.tsx
index 54e8bf3e2a..b2fff8b426 100644
--- a/examples/blog-starter/pages/_document.tsx
+++ b/examples/blog-starter/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/blog-starter/pages/index.tsx b/examples/blog-starter/pages/index.tsx
index 0dc17c88e7..8e46607bf4 100644
--- a/examples/blog-starter/pages/index.tsx
+++ b/examples/blog-starter/pages/index.tsx
@@ -1,20 +1,20 @@
-import Container from '../components/container'
-import MoreStories from '../components/more-stories'
-import HeroPost from '../components/hero-post'
-import Intro from '../components/intro'
-import Layout from '../components/layout'
-import { getAllPosts } from '../lib/api'
-import Head from 'next/head'
-import { CMS_NAME } from '../lib/constants'
-import Post from '../interfaces/post'
+import Container from "../components/container";
+import MoreStories from "../components/more-stories";
+import HeroPost from "../components/hero-post";
+import Intro from "../components/intro";
+import Layout from "../components/layout";
+import { getAllPosts } from "../lib/api";
+import Head from "next/head";
+import { CMS_NAME } from "../lib/constants";
+import Post from "../interfaces/post";
 
 type Props = {
-  allPosts: Post[]
-}
+  allPosts: Post[];
+};
 
 export default function Index({ allPosts }: Props) {
-  const heroPost = allPosts[0]
-  const morePosts = allPosts.slice(1)
+  const heroPost = allPosts[0];
+  const morePosts = allPosts.slice(1);
   return (
     <>
       <Layout>
@@ -37,20 +37,20 @@ export default function Index({ allPosts }: Props) {
         </Container>
       </Layout>
     </>
-  )
+  );
 }
 
 export const getStaticProps = async () => {
   const allPosts = getAllPosts([
-    'title',
-    'date',
-    'slug',
-    'author',
-    'coverImage',
-    'excerpt',
-  ])
+    "title",
+    "date",
+    "slug",
+    "author",
+    "coverImage",
+    "excerpt",
+  ]);
 
   return {
     props: { allPosts },
-  }
-}
+  };
+};
diff --git a/examples/blog-starter/pages/posts/[slug].tsx b/examples/blog-starter/pages/posts/[slug].tsx
index 9eb67163f0..f0e7afac7c 100644
--- a/examples/blog-starter/pages/posts/[slug].tsx
+++ b/examples/blog-starter/pages/posts/[slug].tsx
@@ -1,28 +1,28 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import Container from '../../components/container'
-import PostBody from '../../components/post-body'
-import Header from '../../components/header'
-import PostHeader from '../../components/post-header'
-import Layout from '../../components/layout'
-import { getPostBySlug, getAllPosts } from '../../lib/api'
-import PostTitle from '../../components/post-title'
-import Head from 'next/head'
-import { CMS_NAME } from '../../lib/constants'
-import markdownToHtml from '../../lib/markdownToHtml'
-import type PostType from '../../interfaces/post'
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Container from "../../components/container";
+import PostBody from "../../components/post-body";
+import Header from "../../components/header";
+import PostHeader from "../../components/post-header";
+import Layout from "../../components/layout";
+import { getPostBySlug, getAllPosts } from "../../lib/api";
+import PostTitle from "../../components/post-title";
+import Head from "next/head";
+import { CMS_NAME } from "../../lib/constants";
+import markdownToHtml from "../../lib/markdownToHtml";
+import type PostType from "../../interfaces/post";
 
 type Props = {
-  post: PostType
-  morePosts: PostType[]
-  preview?: boolean
-}
+  post: PostType;
+  morePosts: PostType[];
+  preview?: boolean;
+};
 
 export default function Post({ post, morePosts, preview }: Props) {
-  const router = useRouter()
-  const title = `${post.title} | Next.js Blog Example with ${CMS_NAME}`
+  const router = useRouter();
+  const title = `${post.title} | Next.js Blog Example with ${CMS_NAME}`;
   if (!router.isFallback && !post?.slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
   return (
     <Layout preview={preview}>
@@ -49,26 +49,26 @@ export default function Post({ post, morePosts, preview }: Props) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 type Params = {
   params: {
-    slug: string
-  }
-}
+    slug: string;
+  };
+};
 
 export async function getStaticProps({ params }: Params) {
   const post = getPostBySlug(params.slug, [
-    'title',
-    'date',
-    'slug',
-    'author',
-    'content',
-    'ogImage',
-    'coverImage',
-  ])
-  const content = await markdownToHtml(post.content || '')
+    "title",
+    "date",
+    "slug",
+    "author",
+    "content",
+    "ogImage",
+    "coverImage",
+  ]);
+  const content = await markdownToHtml(post.content || "");
 
   return {
     props: {
@@ -77,11 +77,11 @@ export async function getStaticProps({ params }: Params) {
         content,
       },
     },
-  }
+  };
 }
 
 export async function getStaticPaths() {
-  const posts = getAllPosts(['slug'])
+  const posts = getAllPosts(["slug"]);
 
   return {
     paths: posts.map((post) => {
@@ -89,8 +89,8 @@ export async function getStaticPaths() {
         params: {
           slug: post.slug,
         },
-      }
+      };
     }),
     fallback: false,
-  }
+  };
 }
diff --git a/examples/blog-starter/postcss.config.js b/examples/blog-starter/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/blog-starter/postcss.config.js
+++ b/examples/blog-starter/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/blog-starter/tailwind.config.js b/examples/blog-starter/tailwind.config.js
index eb65df1d0c..3773723ff4 100644
--- a/examples/blog-starter/tailwind.config.js
+++ b/examples/blog-starter/tailwind.config.js
@@ -1,35 +1,35 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./components/**/*.tsx', './pages/**/*.tsx'],
+  content: ["./components/**/*.tsx", "./pages/**/*.tsx"],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        sm: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        md: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        sm: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        md: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/blog-with-comment/components/comment/form.tsx b/examples/blog-with-comment/components/comment/form.tsx
index 304c59fe83..e904efbe8a 100644
--- a/examples/blog-with-comment/components/comment/form.tsx
+++ b/examples/blog-with-comment/components/comment/form.tsx
@@ -1,17 +1,17 @@
-import { useAuth0 } from '@auth0/auth0-react'
+import { useAuth0 } from "@auth0/auth0-react";
 
 type CommentFormProps = {
-  text: string
-  setText: Function
-  onSubmit: (e: React.FormEvent) => Promise<void>
-}
+  text: string;
+  setText: Function;
+  onSubmit: (e: React.FormEvent) => Promise<void>;
+};
 
 export default function CommentForm({
   text,
   setText,
   onSubmit,
 }: CommentFormProps) {
-  const { isAuthenticated, logout, loginWithPopup } = useAuth0()
+  const { isAuthenticated, logout, loginWithPopup } = useAuth0();
 
   return (
     <form onSubmit={onSubmit}>
@@ -21,7 +21,7 @@ export default function CommentForm({
         placeholder={
           isAuthenticated
             ? `What are your thoughts?`
-            : 'Please login to leave a comment'
+            : "Please login to leave a comment"
         }
         onChange={(e) => setText(e.target.value)}
         value={text}
@@ -52,5 +52,5 @@ export default function CommentForm({
         )}
       </div>
     </form>
-  )
+  );
 }
diff --git a/examples/blog-with-comment/components/comment/index.tsx b/examples/blog-with-comment/components/comment/index.tsx
index c51fcfc52c..a9c7123c85 100644
--- a/examples/blog-with-comment/components/comment/index.tsx
+++ b/examples/blog-with-comment/components/comment/index.tsx
@@ -1,14 +1,14 @@
-import CommentForm from './form'
-import CommentList from './list'
-import useComments from '../../hooks/useComment'
+import CommentForm from "./form";
+import CommentList from "./list";
+import useComments from "../../hooks/useComment";
 
 export default function Comment() {
-  const { text, setText, comments, onSubmit, onDelete } = useComments()
+  const { text, setText, comments, onSubmit, onDelete } = useComments();
 
   return (
     <div className="mt-20">
       <CommentForm onSubmit={onSubmit} text={text} setText={setText} />
       <CommentList comments={comments} onDelete={onDelete} />
     </div>
-  )
+  );
 }
diff --git a/examples/blog-with-comment/components/comment/list.tsx b/examples/blog-with-comment/components/comment/list.tsx
index e633af647e..018baa9cc7 100644
--- a/examples/blog-with-comment/components/comment/list.tsx
+++ b/examples/blog-with-comment/components/comment/list.tsx
@@ -1,22 +1,22 @@
-import type { Comment } from '../../interfaces'
-import distanceToNow from '../../lib/dateRelative'
-import { useAuth0 } from '@auth0/auth0-react'
+import type { Comment } from "../../interfaces";
+import distanceToNow from "../../lib/dateRelative";
+import { useAuth0 } from "@auth0/auth0-react";
 
 type CommentListProps = {
-  comments?: Comment[]
-  onDelete: (comment: Comment) => Promise<void>
-}
+  comments?: Comment[];
+  onDelete: (comment: Comment) => Promise<void>;
+};
 
 export default function CommentList({ comments, onDelete }: CommentListProps) {
-  const { user } = useAuth0()
+  const { user } = useAuth0();
 
   return (
     <div className="space-y-6 mt-10">
       {comments &&
         comments.map((comment) => {
-          const isAuthor = user && user.sub === comment.user.sub
+          const isAuthor = user && user.sub === comment.user.sub;
           const isAdmin =
-            user && user.email === process.env.NEXT_PUBLIC_AUTH0_ADMIN_EMAIL
+            user && user.email === process.env.NEXT_PUBLIC_AUTH0_ADMIN_EMAIL;
 
           return (
             <div key={comment.created_at} className="flex space-x-4">
@@ -50,8 +50,8 @@ export default function CommentList({ comments, onDelete }: CommentListProps) {
                 <div>{comment.text}</div>
               </div>
             </div>
-          )
+          );
         })}
     </div>
-  )
+  );
 }
diff --git a/examples/blog-with-comment/components/container.tsx b/examples/blog-with-comment/components/container.tsx
index 874b7136e6..d568323688 100644
--- a/examples/blog-with-comment/components/container.tsx
+++ b/examples/blog-with-comment/components/container.tsx
@@ -1,7 +1,7 @@
 type ContainerProps = {
-  children: React.ReactNode
-}
+  children: React.ReactNode;
+};
 
 export default function Container({ children }: ContainerProps) {
-  return <div className="container max-w-2xl m-auto px-4">{children}</div>
+  return <div className="container max-w-2xl m-auto px-4">{children}</div>;
 }
diff --git a/examples/blog-with-comment/components/header.tsx b/examples/blog-with-comment/components/header.tsx
index cb62985b69..697b843b32 100644
--- a/examples/blog-with-comment/components/header.tsx
+++ b/examples/blog-with-comment/components/header.tsx
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import Container from '../components/container'
+import Link from "next/link";
+import Container from "../components/container";
 
 export default function Header() {
   return (
@@ -11,5 +11,5 @@ export default function Header() {
         </nav>
       </Container>
     </header>
-  )
+  );
 }
diff --git a/examples/blog-with-comment/environment.d.ts b/examples/blog-with-comment/environment.d.ts
index f6b3c3941c..30efbf0abb 100644
--- a/examples/blog-with-comment/environment.d.ts
+++ b/examples/blog-with-comment/environment.d.ts
@@ -1,8 +1,8 @@
 declare namespace NodeJS {
   export interface ProcessEnv {
-    readonly NODE_ENV: 'development' | 'production' | 'test'
-    readonly NEXT_PUBLIC_AUTH0_DOMAIN: string
-    readonly NEXT_PUBLIC_AUTH0_CLIENT_ID: string
-    readonly NEXT_PUBLIC_BASE_URL: string
+    readonly NODE_ENV: "development" | "production" | "test";
+    readonly NEXT_PUBLIC_AUTH0_DOMAIN: string;
+    readonly NEXT_PUBLIC_AUTH0_CLIENT_ID: string;
+    readonly NEXT_PUBLIC_BASE_URL: string;
   }
 }
diff --git a/examples/blog-with-comment/hooks/useComment.ts b/examples/blog-with-comment/hooks/useComment.ts
index dca379bdf4..35c22eed57 100644
--- a/examples/blog-with-comment/hooks/useComment.ts
+++ b/examples/blog-with-comment/hooks/useComment.ts
@@ -1,57 +1,57 @@
-import type { Comment } from '../interfaces'
-import React, { useState } from 'react'
-import useSWR from 'swr'
-import { useAuth0 } from '@auth0/auth0-react'
+import type { Comment } from "../interfaces";
+import React, { useState } from "react";
+import useSWR from "swr";
+import { useAuth0 } from "@auth0/auth0-react";
 
-const fetcher = (url) => fetch(url).then((res) => res.json())
+const fetcher = (url) => fetch(url).then((res) => res.json());
 
 export default function useComments() {
-  const { getAccessTokenSilently } = useAuth0()
-  const [text, setText] = useState('')
+  const { getAccessTokenSilently } = useAuth0();
+  const [text, setText] = useState("");
 
   const { data: comments, mutate } = useSWR<Comment[]>(
-    '/api/comment',
+    "/api/comment",
     fetcher,
-    { fallbackData: [] }
-  )
+    { fallbackData: [] },
+  );
 
   const onSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    const token = await getAccessTokenSilently()
+    e.preventDefault();
+    const token = await getAccessTokenSilently();
 
     try {
-      await fetch('/api/comment', {
-        method: 'POST',
+      await fetch("/api/comment", {
+        method: "POST",
         body: JSON.stringify({ text }),
         headers: {
           Authorization: token,
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
-      })
-      setText('')
-      await mutate()
+      });
+      setText("");
+      await mutate();
     } catch (err) {
-      console.log(err)
+      console.log(err);
     }
-  }
+  };
 
   const onDelete = async (comment: Comment) => {
-    const token = await getAccessTokenSilently()
+    const token = await getAccessTokenSilently();
 
     try {
-      await fetch('/api/comment', {
-        method: 'DELETE',
+      await fetch("/api/comment", {
+        method: "DELETE",
         body: JSON.stringify({ comment }),
         headers: {
           Authorization: token,
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
-      })
-      await mutate()
+      });
+      await mutate();
     } catch (err) {
-      console.log(err)
+      console.log(err);
     }
-  }
+  };
 
-  return { text, setText, comments, onSubmit, onDelete }
+  return { text, setText, comments, onSubmit, onDelete };
 }
diff --git a/examples/blog-with-comment/interfaces/index.ts b/examples/blog-with-comment/interfaces/index.ts
index 9b1786b29c..3597936910 100644
--- a/examples/blog-with-comment/interfaces/index.ts
+++ b/examples/blog-with-comment/interfaces/index.ts
@@ -1,24 +1,24 @@
 export type User = {
-  name: string
-  picture: string
-  sub: string
-  email?: string
-}
+  name: string;
+  picture: string;
+  sub: string;
+  email?: string;
+};
 
 export type Comment = {
-  id: string
-  created_at: number
-  url: string
-  text: string
-  user: User
-}
+  id: string;
+  created_at: number;
+  url: string;
+  text: string;
+  user: User;
+};
 
 export type Post = {
-  slug?: string
-  title?: string
-  author?: string
-  date?: Date
-  content?: string
-  excerpt?: string
-  [key: string]: any
-}
+  slug?: string;
+  title?: string;
+  author?: string;
+  date?: Date;
+  content?: string;
+  excerpt?: string;
+  [key: string]: any;
+};
diff --git a/examples/blog-with-comment/lib/clearUrl.ts b/examples/blog-with-comment/lib/clearUrl.ts
index ab7f8ce9f7..ec3b8f5275 100644
--- a/examples/blog-with-comment/lib/clearUrl.ts
+++ b/examples/blog-with-comment/lib/clearUrl.ts
@@ -1,6 +1,6 @@
 const clearUrl = (url: string) => {
-  const { origin, pathname } = new URL(url)
-  return `${origin}${pathname}`
-}
+  const { origin, pathname } = new URL(url);
+  return `${origin}${pathname}`;
+};
 
-export default clearUrl
+export default clearUrl;
diff --git a/examples/blog-with-comment/lib/createComment.ts b/examples/blog-with-comment/lib/createComment.ts
index 9f5ae783b7..bacc3ae7f7 100644
--- a/examples/blog-with-comment/lib/createComment.ts
+++ b/examples/blog-with-comment/lib/createComment.ts
@@ -1,34 +1,34 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import type { Comment } from '../interfaces'
-import redis from './redis'
-import { nanoid } from 'nanoid'
-import getUser from './getUser'
-import clearUrl from './clearUrl'
+import type { NextApiRequest, NextApiResponse } from "next";
+import type { Comment } from "../interfaces";
+import redis from "./redis";
+import { nanoid } from "nanoid";
+import getUser from "./getUser";
+import clearUrl from "./clearUrl";
 
 export default async function createComments(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  const url = clearUrl(req.headers.referer)
-  const { text } = req.body
-  const { authorization } = req.headers
+  const url = clearUrl(req.headers.referer);
+  const { text } = req.body;
+  const { authorization } = req.headers;
 
   if (!text || !authorization) {
-    return res.status(400).json({ message: 'Missing parameter.' })
+    return res.status(400).json({ message: "Missing parameter." });
   }
 
   if (!redis) {
     return res
       .status(400)
-      .json({ message: 'Failed to connect to redis client.' })
+      .json({ message: "Failed to connect to redis client." });
   }
 
   try {
     // verify user token
-    const user = await getUser(authorization)
-    if (!user) return res.status(400).json({ message: 'Need authorization.' })
+    const user = await getUser(authorization);
+    if (!user) return res.status(400).json({ message: "Need authorization." });
 
-    const { name, picture, sub, email } = user
+    const { name, picture, sub, email } = user;
 
     const comment: Comment = {
       id: nanoid(),
@@ -36,13 +36,13 @@ export default async function createComments(
       url,
       text,
       user: { name, picture, sub, email },
-    }
+    };
 
     // write data
-    await redis.lpush(url, JSON.stringify(comment))
+    await redis.lpush(url, JSON.stringify(comment));
 
-    return res.status(200).json(comment)
+    return res.status(200).json(comment);
   } catch (_) {
-    return res.status(400).json({ message: 'Unexpected error occurred.' })
+    return res.status(400).json({ message: "Unexpected error occurred." });
   }
 }
diff --git a/examples/blog-with-comment/lib/dateRelative.ts b/examples/blog-with-comment/lib/dateRelative.ts
index 1b6ab9da4e..ee46056857 100644
--- a/examples/blog-with-comment/lib/dateRelative.ts
+++ b/examples/blog-with-comment/lib/dateRelative.ts
@@ -1,7 +1,7 @@
-import formatDistanceToNowStrict from 'date-fns/formatDistanceToNowStrict'
+import formatDistanceToNowStrict from "date-fns/formatDistanceToNowStrict";
 
 export default function distanceToNow(dateTime: number | Date) {
   return formatDistanceToNowStrict(dateTime, {
     addSuffix: true,
-  })
+  });
 }
diff --git a/examples/blog-with-comment/lib/deleteComment.ts b/examples/blog-with-comment/lib/deleteComment.ts
index 9711ea5aec..62e2f36b2a 100644
--- a/examples/blog-with-comment/lib/deleteComment.ts
+++ b/examples/blog-with-comment/lib/deleteComment.ts
@@ -1,43 +1,43 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import type { User, Comment } from '../interfaces'
-import redis from './redis'
-import getUser from './getUser'
-import clearUrl from './clearUrl'
+import type { NextApiRequest, NextApiResponse } from "next";
+import type { User, Comment } from "../interfaces";
+import redis from "./redis";
+import getUser from "./getUser";
+import clearUrl from "./clearUrl";
 
 export default async function deleteComments(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  const url = clearUrl(req.headers.referer)
-  const { comment }: { url: string; comment: Comment } = req.body
-  const { authorization } = req.headers
+  const url = clearUrl(req.headers.referer);
+  const { comment }: { url: string; comment: Comment } = req.body;
+  const { authorization } = req.headers;
 
   if (!comment || !authorization) {
-    return res.status(400).json({ message: 'Missing parameter.' })
+    return res.status(400).json({ message: "Missing parameter." });
   }
 
   if (!redis) {
-    return res.status(500).json({ message: 'Failed to connect to redis.' })
+    return res.status(500).json({ message: "Failed to connect to redis." });
   }
 
   try {
     // verify user token
-    const user: User = await getUser(authorization)
-    if (!user) return res.status(400).json({ message: 'Invalid token.' })
-    comment.user.email = user.email
+    const user: User = await getUser(authorization);
+    if (!user) return res.status(400).json({ message: "Invalid token." });
+    comment.user.email = user.email;
 
-    const isAdmin = process.env.NEXT_PUBLIC_AUTH0_ADMIN_EMAIL === user.email
-    const isAuthor = user.sub === comment.user.sub
+    const isAdmin = process.env.NEXT_PUBLIC_AUTH0_ADMIN_EMAIL === user.email;
+    const isAuthor = user.sub === comment.user.sub;
 
     if (!isAdmin && !isAuthor) {
-      return res.status(400).json({ message: 'Need authorization.' })
+      return res.status(400).json({ message: "Need authorization." });
     }
 
     // delete
-    await redis.lrem(url, 0, JSON.stringify(comment))
+    await redis.lrem(url, 0, JSON.stringify(comment));
 
-    return res.status(200).end()
+    return res.status(200).end();
   } catch (err) {
-    return res.status(400)
+    return res.status(400);
   }
 }
diff --git a/examples/blog-with-comment/lib/fetchComment.ts b/examples/blog-with-comment/lib/fetchComment.ts
index 7649954af7..6a452eea9b 100644
--- a/examples/blog-with-comment/lib/fetchComment.ts
+++ b/examples/blog-with-comment/lib/fetchComment.ts
@@ -1,31 +1,31 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import type { Comment } from '../interfaces'
-import redis from './redis'
-import clearUrl from './clearUrl'
+import type { NextApiRequest, NextApiResponse } from "next";
+import type { Comment } from "../interfaces";
+import redis from "./redis";
+import clearUrl from "./clearUrl";
 
 export default async function fetchComment(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  const url = clearUrl(req.headers.referer)
+  const url = clearUrl(req.headers.referer);
 
   if (!redis) {
-    return res.status(500).json({ message: 'Failed to connect to redis.' })
+    return res.status(500).json({ message: "Failed to connect to redis." });
   }
 
   try {
     // get data
-    const rawComments = await redis.lrange(url, 0, -1)
+    const rawComments = await redis.lrange(url, 0, -1);
 
     // string data to object
     const comments = rawComments.map((c) => {
-      const comment: Comment = JSON.parse(c)
-      delete comment.user.email
-      return comment
-    })
+      const comment: Comment = JSON.parse(c);
+      delete comment.user.email;
+      return comment;
+    });
 
-    return res.status(200).json(comments)
+    return res.status(200).json(comments);
   } catch (_) {
-    return res.status(400).json({ message: 'Unexpected error occurred.' })
+    return res.status(400).json({ message: "Unexpected error occurred." });
   }
 }
diff --git a/examples/blog-with-comment/lib/getPost.ts b/examples/blog-with-comment/lib/getPost.ts
index fc3a413f49..9b0a02b09e 100644
--- a/examples/blog-with-comment/lib/getPost.ts
+++ b/examples/blog-with-comment/lib/getPost.ts
@@ -1,44 +1,44 @@
-import type { Post } from '../interfaces'
-import fs from 'fs'
-import { join } from 'path'
-import matter from 'gray-matter'
+import type { Post } from "../interfaces";
+import fs from "fs";
+import { join } from "path";
+import matter from "gray-matter";
 
-const postsDirectory = join(process.cwd(), '_posts')
+const postsDirectory = join(process.cwd(), "_posts");
 
 export function getPostSlugs() {
-  return fs.readdirSync(postsDirectory)
+  return fs.readdirSync(postsDirectory);
 }
 
 export function getPostBySlug(slug: string, fields: string[] = []) {
-  const realSlug = slug.replace(/\.md$/, '')
-  const fullPath = join(postsDirectory, `${realSlug}.md`)
-  const fileContents = fs.readFileSync(fullPath, 'utf8')
-  const { data, content } = matter(fileContents)
+  const realSlug = slug.replace(/\.md$/, "");
+  const fullPath = join(postsDirectory, `${realSlug}.md`);
+  const fileContents = fs.readFileSync(fullPath, "utf8");
+  const { data, content } = matter(fileContents);
 
-  const items: Post = {}
+  const items: Post = {};
 
   // Ensure only the minimal needed data is exposed
   fields.forEach((field) => {
-    if (field === 'slug') {
-      items[field] = realSlug
+    if (field === "slug") {
+      items[field] = realSlug;
     }
-    if (field === 'content') {
-      items[field] = content
+    if (field === "content") {
+      items[field] = content;
     }
 
-    if (typeof data[field] !== 'undefined') {
-      items[field] = data[field]
+    if (typeof data[field] !== "undefined") {
+      items[field] = data[field];
     }
-  })
+  });
 
-  return items
+  return items;
 }
 
 export function getAllPosts(fields: string[] = []) {
-  const slugs = getPostSlugs()
+  const slugs = getPostSlugs();
   const posts = slugs
     .map((slug) => getPostBySlug(slug, fields))
     // sort posts by date in descending order
-    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
-  return posts
+    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1));
+  return posts;
 }
diff --git a/examples/blog-with-comment/lib/getUser.ts b/examples/blog-with-comment/lib/getUser.ts
index 212fa5883d..89fdc22183 100644
--- a/examples/blog-with-comment/lib/getUser.ts
+++ b/examples/blog-with-comment/lib/getUser.ts
@@ -4,9 +4,9 @@ export default async function getUser(token: string) {
     {
       headers: {
         Authorization: `Bearer ${token}`,
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
       },
-    }
-  )
-  return await response.json()
+    },
+  );
+  return await response.json();
 }
diff --git a/examples/blog-with-comment/lib/markdownToHtml.ts b/examples/blog-with-comment/lib/markdownToHtml.ts
index f195fe0cd7..17467cb740 100644
--- a/examples/blog-with-comment/lib/markdownToHtml.ts
+++ b/examples/blog-with-comment/lib/markdownToHtml.ts
@@ -1,8 +1,8 @@
-import type { VFileCompatible } from 'vfile'
-import { remark } from 'remark'
-import html from 'remark-html'
+import type { VFileCompatible } from "vfile";
+import { remark } from "remark";
+import html from "remark-html";
 
 export default async function markdownToHtml(markdown: VFileCompatible) {
-  const result = await remark().use(html).process(markdown)
-  return result.toString()
+  const result = await remark().use(html).process(markdown);
+  return result.toString();
 }
diff --git a/examples/blog-with-comment/lib/redis.ts b/examples/blog-with-comment/lib/redis.ts
index 362063eee5..8d9aa7af53 100644
--- a/examples/blog-with-comment/lib/redis.ts
+++ b/examples/blog-with-comment/lib/redis.ts
@@ -1,31 +1,31 @@
-import IORedis, { Redis } from 'ioredis'
+import IORedis, { Redis } from "ioredis";
 
 function fixUrl(url: string) {
   if (!url) {
-    return ''
+    return "";
   }
-  if (url.startsWith('redis://') && !url.startsWith('redis://:')) {
-    return url.replace('redis://', 'redis://:')
+  if (url.startsWith("redis://") && !url.startsWith("redis://:")) {
+    return url.replace("redis://", "redis://:");
   }
-  if (url.startsWith('rediss://') && !url.startsWith('rediss://:')) {
-    return url.replace('rediss://', 'rediss://:')
+  if (url.startsWith("rediss://") && !url.startsWith("rediss://:")) {
+    return url.replace("rediss://", "rediss://:");
   }
-  return url
+  return url;
 }
 
 class ClientRedis {
-  static instance: Redis
+  static instance: Redis;
 
   constructor() {
-    throw new Error('Use Singleton.getInstance()')
+    throw new Error("Use Singleton.getInstance()");
   }
 
   static getInstance(): Redis | null {
     if (!ClientRedis.instance) {
-      ClientRedis.instance = new IORedis(fixUrl(process.env.REDIS_URL!))
+      ClientRedis.instance = new IORedis(fixUrl(process.env.REDIS_URL!));
     }
-    return ClientRedis.instance
+    return ClientRedis.instance;
   }
 }
 
-export default ClientRedis.getInstance()
+export default ClientRedis.getInstance();
diff --git a/examples/blog-with-comment/pages/_app.tsx b/examples/blog-with-comment/pages/_app.tsx
index 27ba83cbf2..b2e469802f 100644
--- a/examples/blog-with-comment/pages/_app.tsx
+++ b/examples/blog-with-comment/pages/_app.tsx
@@ -1,9 +1,9 @@
-import 'tailwindcss/tailwind.css'
+import "tailwindcss/tailwind.css";
 
-import type { AppProps } from 'next/app'
-import Head from 'next/head'
-import Header from '../components/header'
-import { Auth0Provider } from '@auth0/auth0-react'
+import type { AppProps } from "next/app";
+import Head from "next/head";
+import Header from "../components/header";
+import { Auth0Provider } from "@auth0/auth0-react";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -26,5 +26,5 @@ export default function MyApp({ Component, pageProps }: AppProps) {
         <Component {...pageProps} />
       </main>
     </Auth0Provider>
-  )
+  );
 }
diff --git a/examples/blog-with-comment/pages/_document.tsx b/examples/blog-with-comment/pages/_document.tsx
index e4bec5126f..5abf39b103 100644
--- a/examples/blog-with-comment/pages/_document.tsx
+++ b/examples/blog-with-comment/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -13,5 +13,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/blog-with-comment/pages/api/comment.ts b/examples/blog-with-comment/pages/api/comment.ts
index fbd024214c..9113fb5390 100644
--- a/examples/blog-with-comment/pages/api/comment.ts
+++ b/examples/blog-with-comment/pages/api/comment.ts
@@ -1,20 +1,20 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import fetchComment from '../../lib/fetchComment'
-import createComments from '../../lib/createComment'
-import deleteComments from '../../lib/deleteComment'
+import type { NextApiRequest, NextApiResponse } from "next";
+import fetchComment from "../../lib/fetchComment";
+import createComments from "../../lib/createComment";
+import deleteComments from "../../lib/deleteComment";
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
   switch (req.method) {
-    case 'GET':
-      return fetchComment(req, res)
-    case 'POST':
-      return createComments(req, res)
-    case 'DELETE':
-      return deleteComments(req, res)
+    case "GET":
+      return fetchComment(req, res);
+    case "POST":
+      return createComments(req, res);
+    case "DELETE":
+      return deleteComments(req, res);
     default:
-      return res.status(400).json({ message: 'Invalid method.' })
+      return res.status(400).json({ message: "Invalid method." });
   }
 }
diff --git a/examples/blog-with-comment/pages/index.tsx b/examples/blog-with-comment/pages/index.tsx
index fafa3de2a8..6621d9bbed 100644
--- a/examples/blog-with-comment/pages/index.tsx
+++ b/examples/blog-with-comment/pages/index.tsx
@@ -1,5 +1,5 @@
-import Container from '../components/container'
-import Image from 'next/image'
+import Container from "../components/container";
+import Image from "next/image";
 
 function HomePage() {
   return (
@@ -29,7 +29,7 @@ function HomePage() {
         />
       </div>
     </>
-  )
+  );
 }
 
-export default HomePage
+export default HomePage;
diff --git a/examples/blog-with-comment/pages/posts/[slug].tsx b/examples/blog-with-comment/pages/posts/[slug].tsx
index 025bcfa174..decafca1f8 100644
--- a/examples/blog-with-comment/pages/posts/[slug].tsx
+++ b/examples/blog-with-comment/pages/posts/[slug].tsx
@@ -1,20 +1,20 @@
-import type { InferGetStaticPropsType } from 'next'
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import Comment from '../../components/comment'
-import Container from '../../components/container'
-import distanceToNow from '../../lib/dateRelative'
-import { getAllPosts, getPostBySlug } from '../../lib/getPost'
-import markdownToHtml from '../../lib/markdownToHtml'
-import Head from 'next/head'
+import type { InferGetStaticPropsType } from "next";
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Comment from "../../components/comment";
+import Container from "../../components/container";
+import distanceToNow from "../../lib/dateRelative";
+import { getAllPosts, getPostBySlug } from "../../lib/getPost";
+import markdownToHtml from "../../lib/markdownToHtml";
+import Head from "next/head";
 
 export default function PostPage({
   post,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  const router = useRouter()
+  const router = useRouter();
 
   if (!router.isFallback && !post?.slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
 
   return (
@@ -48,24 +48,24 @@ export default function PostPage({
         </div>
       )}
     </Container>
-  )
+  );
 }
 
 type Params = {
   params: {
-    slug: string
-  }
-}
+    slug: string;
+  };
+};
 
 export async function getStaticProps({ params }: Params) {
   const post = getPostBySlug(params.slug, [
-    'slug',
-    'title',
-    'excerpt',
-    'date',
-    'content',
-  ])
-  const content = await markdownToHtml(post.content || '')
+    "slug",
+    "title",
+    "excerpt",
+    "date",
+    "content",
+  ]);
+  const content = await markdownToHtml(post.content || "");
 
   return {
     props: {
@@ -74,11 +74,11 @@ export async function getStaticProps({ params }: Params) {
         content,
       },
     },
-  }
+  };
 }
 
 export async function getStaticPaths() {
-  const posts = getAllPosts(['slug'])
+  const posts = getAllPosts(["slug"]);
 
   return {
     paths: posts.map(({ slug }) => {
@@ -86,8 +86,8 @@ export async function getStaticPaths() {
         params: {
           slug,
         },
-      }
+      };
     }),
     fallback: false,
-  }
+  };
 }
diff --git a/examples/blog-with-comment/pages/posts/index.tsx b/examples/blog-with-comment/pages/posts/index.tsx
index 4f2a29a999..9a521750a8 100644
--- a/examples/blog-with-comment/pages/posts/index.tsx
+++ b/examples/blog-with-comment/pages/posts/index.tsx
@@ -1,8 +1,8 @@
-import type { InferGetStaticPropsType } from 'next'
-import Link from 'next/link'
-import Container from '../../components/container'
-import distanceToNow from '../../lib/dateRelative'
-import { getAllPosts } from '../../lib/getPost'
+import type { InferGetStaticPropsType } from "next";
+import Link from "next/link";
+import Container from "../../components/container";
+import distanceToNow from "../../lib/dateRelative";
+import { getAllPosts } from "../../lib/getPost";
 
 export default function NotePage({
   allPosts,
@@ -29,13 +29,13 @@ export default function NotePage({
         <p>No blog posted yet :/</p>
       )}
     </Container>
-  )
+  );
 }
 
 export async function getStaticProps() {
-  const allPosts = getAllPosts(['slug', 'title', 'excerpt', 'date'])
+  const allPosts = getAllPosts(["slug", "title", "excerpt", "date"]);
 
   return {
     props: { allPosts },
-  }
+  };
 }
diff --git a/examples/blog-with-comment/postcss.config.js b/examples/blog-with-comment/postcss.config.js
index 33ad091d26..12a703d900 100644
--- a/examples/blog-with-comment/postcss.config.js
+++ b/examples/blog-with-comment/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/blog-with-comment/tailwind.config.js b/examples/blog-with-comment/tailwind.config.js
index 88e2bc8a4e..dcd89805ef 100644
--- a/examples/blog-with-comment/tailwind.config.js
+++ b/examples/blog-with-comment/tailwind.config.js
@@ -1,14 +1,14 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  mode: 'jit',
+  mode: "jit",
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   variants: {
     extend: {
-      opacity: ['disabled'],
+      opacity: ["disabled"],
     },
   },
-  plugins: [require('@tailwindcss/typography')],
-}
+  plugins: [require("@tailwindcss/typography")],
+};
diff --git a/examples/blog/next.config.js b/examples/blog/next.config.js
index c8f4885908..c0a6c85959 100644
--- a/examples/blog/next.config.js
+++ b/examples/blog/next.config.js
@@ -1,12 +1,12 @@
-const withNextra = require('nextra')({
-  theme: 'nextra-theme-blog',
-  themeConfig: './theme.config.js',
+const withNextra = require("nextra")({
+  theme: "nextra-theme-blog",
+  themeConfig: "./theme.config.js",
   // optional: add `unstable_staticImage: true` to enable Nextra's auto image import
-})
+});
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   // any configs you need
-}
+};
 
-module.exports = withNextra(nextConfig)
+module.exports = withNextra(nextConfig);
diff --git a/examples/blog/pages/_app.tsx b/examples/blog/pages/_app.tsx
index 2674417c20..49be6f4827 100644
--- a/examples/blog/pages/_app.tsx
+++ b/examples/blog/pages/_app.tsx
@@ -1,7 +1,7 @@
-import 'nextra-theme-blog/style.css'
-import type { AppProps } from 'next/app'
-import Head from 'next/head'
-import '../styles/main.css'
+import "nextra-theme-blog/style.css";
+import type { AppProps } from "next/app";
+import Head from "next/head";
+import "../styles/main.css";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
@@ -23,5 +23,5 @@ export default function App({ Component, pageProps }: AppProps) {
       </Head>
       <Component {...pageProps} />
     </>
-  )
+  );
 }
diff --git a/examples/blog/pages/_document.tsx b/examples/blog/pages/_document.tsx
index d480d60cc6..c017647535 100644
--- a/examples/blog/pages/_document.tsx
+++ b/examples/blog/pages/_document.tsx
@@ -1,11 +1,11 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   const meta = {
-    title: 'Next.js Blog Starter Kit',
-    description: 'Clone and deploy your own Next.js portfolio in minutes.',
-    image: 'https://assets.vercel.com/image/upload/q_auto/front/vercel/dps.png',
-  }
+    title: "Next.js Blog Starter Kit",
+    description: "Clone and deploy your own Next.js portfolio in minutes.",
+    image: "https://assets.vercel.com/image/upload/q_auto/front/vercel/dps.png",
+  };
 
   return (
     <Html lang="en">
@@ -27,5 +27,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/blog/pages/photos.mdx b/examples/blog/pages/photos.mdx
index bbfe0b5545..c6edcc7295 100644
--- a/examples/blog/pages/photos.mdx
+++ b/examples/blog/pages/photos.mdx
@@ -8,7 +8,7 @@ date: 2021-03-18
 
 Here's some of my photography.
 
-import Image from 'next/image'
+import Image from "next/image";
 
 <Image
   src="/images/photo2.jpg"
diff --git a/examples/blog/pages/tags/[tag].mdx b/examples/blog/pages/tags/[tag].mdx
index 970952ce0c..23fda99d79 100644
--- a/examples/blog/pages/tags/[tag].mdx
+++ b/examples/blog/pages/tags/[tag].mdx
@@ -3,11 +3,11 @@ type: tag
 title: Tagged Posts
 ---
 
-import { useRouter } from 'next/router'
+import { useRouter } from "next/router";
 
 export const TagName = () => {
-  const { tag } = useRouter().query
-  return tag || null
-}
+  const { tag } = useRouter().query;
+  return tag || null;
+};
 
 # Posts Tagged with “<TagName/>”
diff --git a/examples/blog/scripts/gen-rss.js b/examples/blog/scripts/gen-rss.js
index d7bae5e43f..5988e6744e 100644
--- a/examples/blog/scripts/gen-rss.js
+++ b/examples/blog/scripts/gen-rss.js
@@ -1,38 +1,38 @@
-const { promises: fs } = require('fs')
-const path = require('path')
-const RSS = require('rss')
-const matter = require('gray-matter')
+const { promises: fs } = require("fs");
+const path = require("path");
+const RSS = require("rss");
+const matter = require("gray-matter");
 
 async function generate() {
   const feed = new RSS({
-    title: 'Your Name',
-    site_url: 'https://yoursite.com',
-    feed_url: 'https://yoursite.com/feed.xml',
-  })
+    title: "Your Name",
+    site_url: "https://yoursite.com",
+    feed_url: "https://yoursite.com/feed.xml",
+  });
 
-  const posts = await fs.readdir(path.join(__dirname, '..', 'pages', 'posts'))
+  const posts = await fs.readdir(path.join(__dirname, "..", "pages", "posts"));
 
   await Promise.all(
     posts.map(async (name) => {
-      if (name.startsWith('index.')) return
+      if (name.startsWith("index.")) return;
 
       const content = await fs.readFile(
-        path.join(__dirname, '..', 'pages', 'posts', name)
-      )
-      const frontmatter = matter(content)
+        path.join(__dirname, "..", "pages", "posts", name),
+      );
+      const frontmatter = matter(content);
 
       feed.item({
         title: frontmatter.data.title,
-        url: '/posts/' + name.replace(/\.mdx?/, ''),
+        url: "/posts/" + name.replace(/\.mdx?/, ""),
         date: frontmatter.data.date,
         description: frontmatter.data.description,
-        categories: frontmatter.data.tag.split(', '),
+        categories: frontmatter.data.tag.split(", "),
         author: frontmatter.data.author,
-      })
-    })
-  )
+      });
+    }),
+  );
 
-  await fs.writeFile('./public/feed.xml', feed.xml({ indent: true }))
+  await fs.writeFile("./public/feed.xml", feed.xml({ indent: true }));
 }
 
-generate()
+generate();
diff --git a/examples/blog/styles/main.css b/examples/blog/styles/main.css
index 33f82d02fb..326b847a94 100644
--- a/examples/blog/styles/main.css
+++ b/examples/blog/styles/main.css
@@ -1,27 +1,27 @@
 @font-face {
-  font-family: 'Inter var';
+  font-family: "Inter var";
   font-style: normal;
   font-weight: 100 900;
   font-display: block;
-  src: url(/fonts/Inter-roman.latin.var.woff2) format('woff2');
+  src: url(/fonts/Inter-roman.latin.var.woff2) format("woff2");
 }
 @font-face {
-  font-family: 'Inter var';
+  font-family: "Inter var";
   font-style: italic;
   font-weight: 100 900;
   font-display: block;
-  src: url(/fonts/Inter-italic.latin.var.woff2) format('woff2');
-  font-named-instance: 'Italic';
+  src: url(/fonts/Inter-italic.latin.var.woff2) format("woff2");
+  font-named-instance: "Italic";
 }
 
 body {
-  font-family: 'Inter var', system-ui, -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family: "Inter var", system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   -webkit-font-smoothing: subpixel-antialiased;
-  font-feature-settings: 'case' 1, 'cpsp' 1, 'dlig' 1, 'cv01' 1, 'cv02',
-    'cv03' 1, 'cv04' 1;
-  font-variation-settings: 'wght' 450;
+  font-feature-settings: "case" 1, "cpsp" 1, "dlig" 1, "cv01" 1, "cv02",
+    "cv03" 1, "cv04" 1;
+  font-variation-settings: "wght" 450;
   font-variant: common-ligatures contextual;
   letter-spacing: -0.02em;
 }
@@ -31,13 +31,13 @@ h3,
 h4,
 h5,
 h6 {
-  font-variation-settings: 'wght' 650;
+  font-variation-settings: "wght" 650;
 }
 h1 {
-  font-variation-settings: 'wght' 850;
+  font-variation-settings: "wght" 850;
 }
 h2 {
-  font-variation-settings: 'wght' 750;
+  font-variation-settings: "wght" 750;
 }
 
 @media screen and (min-device-pixel-ratio: 1.5),
diff --git a/examples/blog/theme.config.js b/examples/blog/theme.config.js
index 7dbdccbbad..1a7fc845b2 100644
--- a/examples/blog/theme.config.js
+++ b/examples/blog/theme.config.js
@@ -1,4 +1,4 @@
-const YEAR = new Date().getFullYear()
+const YEAR = new Date().getFullYear();
 
 export default {
   footer: (
@@ -17,4 +17,4 @@ export default {
       `}</style>
     </footer>
   ),
-}
+};
diff --git a/examples/cache-handler-redis/app/[timezone]/page.tsx b/examples/cache-handler-redis/app/[timezone]/page.tsx
index 8c518c7b23..32a7d8a1d6 100644
--- a/examples/cache-handler-redis/app/[timezone]/page.tsx
+++ b/examples/cache-handler-redis/app/[timezone]/page.tsx
@@ -1,36 +1,36 @@
-import { notFound } from 'next/navigation'
-import { CacheStateWatcher } from '../cache-state-watcher'
-import { Suspense } from 'react'
-import { RevalidateFrom } from '../revalidate-from'
-import Link from 'next/link'
+import { notFound } from "next/navigation";
+import { CacheStateWatcher } from "../cache-state-watcher";
+import { Suspense } from "react";
+import { RevalidateFrom } from "../revalidate-from";
+import Link from "next/link";
 
 type TimeData = {
-  unixtime: number
-  datetime: string
-  timezone: string
-}
+  unixtime: number;
+  datetime: string;
+  timezone: string;
+};
 
-const timeZones = ['cet', 'gmt']
+const timeZones = ["cet", "gmt"];
 
-export const revalidate = 10
+export const revalidate = 10;
 
 export async function generateStaticParams() {
-  return timeZones.map((timezone) => ({ timezone }))
+  return timeZones.map((timezone) => ({ timezone }));
 }
 
 export default async function Page({ params: { timezone } }) {
   const data = await fetch(
     `https://worldtimeapi.org/api/timezone/${timezone}`,
     {
-      next: { tags: ['time-data'] },
-    }
-  )
+      next: { tags: ["time-data"] },
+    },
+  );
 
   if (!data.ok) {
-    notFound()
+    notFound();
   }
 
-  const timeData: TimeData = await data.json()
+  const timeData: TimeData = await data.json();
 
   return (
     <>
@@ -64,5 +64,5 @@ export default async function Page({ params: { timezone } }) {
         </Link>
       </footer>
     </>
-  )
+  );
 }
diff --git a/examples/cache-handler-redis/app/cache-state-watcher.tsx b/examples/cache-handler-redis/app/cache-state-watcher.tsx
index 62ea8d321c..e14cbe5e47 100644
--- a/examples/cache-handler-redis/app/cache-state-watcher.tsx
+++ b/examples/cache-handler-redis/app/cache-state-watcher.tsx
@@ -1,43 +1,43 @@
-'use client'
+"use client";
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
 
-type CacheStateWatcherProps = { time: number; revalidateAfter: number }
+type CacheStateWatcherProps = { time: number; revalidateAfter: number };
 
 export function CacheStateWatcher({
   time,
   revalidateAfter,
 }: CacheStateWatcherProps): JSX.Element {
-  const [cacheState, setCacheState] = useState('')
-  const [countDown, setCountDown] = useState('')
+  const [cacheState, setCacheState] = useState("");
+  const [countDown, setCountDown] = useState("");
 
   useEffect(() => {
-    let id = -1
+    let id = -1;
 
     function check(): void {
-      const now = Date.now()
+      const now = Date.now();
 
       setCountDown(
-        Math.max(0, (time + revalidateAfter - now) / 1000).toFixed(3)
-      )
+        Math.max(0, (time + revalidateAfter - now) / 1000).toFixed(3),
+      );
 
       if (now > time + revalidateAfter) {
-        setCacheState('stale')
+        setCacheState("stale");
 
-        return
+        return;
       }
 
-      setCacheState('fresh')
+      setCacheState("fresh");
 
-      id = requestAnimationFrame(check)
+      id = requestAnimationFrame(check);
     }
 
-    id = requestAnimationFrame(check)
+    id = requestAnimationFrame(check);
 
     return () => {
-      cancelAnimationFrame(id)
-    }
-  }, [revalidateAfter, time])
+      cancelAnimationFrame(id);
+    };
+  }, [revalidateAfter, time]);
 
   return (
     <>
@@ -46,5 +46,5 @@ export function CacheStateWatcher({
       </div>
       <div className="stale-after">Stale in: {countDown}</div>
     </>
-  )
+  );
 }
diff --git a/examples/cache-handler-redis/app/global.css b/examples/cache-handler-redis/app/global.css
index 4067a2fffd..ae5912d7bd 100644
--- a/examples/cache-handler-redis/app/global.css
+++ b/examples/cache-handler-redis/app/global.css
@@ -8,7 +8,7 @@ body,
 html {
   margin: 0;
   padding: 0;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   color: #333;
   line-height: 1.6;
   background-color: #f4f4f4;
@@ -62,7 +62,7 @@ html {
   transform: translateY(2px);
 }
 
-.revalidate-from-button[aria-disabled='true'] {
+.revalidate-from-button[aria-disabled="true"] {
   background-color: #ccc;
   cursor: not-allowed;
 }
diff --git a/examples/cache-handler-redis/app/layout.tsx b/examples/cache-handler-redis/app/layout.tsx
index 4eafeb7f13..47b09d7be6 100644
--- a/examples/cache-handler-redis/app/layout.tsx
+++ b/examples/cache-handler-redis/app/layout.tsx
@@ -1,13 +1,13 @@
-import './global.css'
+import "./global.css";
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/cache-handler-redis/app/revalidate-from.tsx b/examples/cache-handler-redis/app/revalidate-from.tsx
index 9ae1ee479c..172128e7a9 100644
--- a/examples/cache-handler-redis/app/revalidate-from.tsx
+++ b/examples/cache-handler-redis/app/revalidate-from.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client";
 
-import { useFormStatus } from 'react-dom'
-import revalidate from './server-actions'
+import { useFormStatus } from "react-dom";
+import revalidate from "./server-actions";
 
 function RevalidateButton() {
-  const { pending } = useFormStatus()
+  const { pending } = useFormStatus();
 
   return (
     <button
@@ -15,7 +15,7 @@ function RevalidateButton() {
     >
       Revalidate
     </button>
-  )
+  );
 }
 
 export function RevalidateFrom() {
@@ -23,5 +23,5 @@ export function RevalidateFrom() {
     <form className="revalidate-from" action={revalidate}>
       <RevalidateButton />
     </form>
-  )
+  );
 }
diff --git a/examples/cache-handler-redis/app/server-actions.ts b/examples/cache-handler-redis/app/server-actions.ts
index cbe24b156b..7b9ea8de91 100644
--- a/examples/cache-handler-redis/app/server-actions.ts
+++ b/examples/cache-handler-redis/app/server-actions.ts
@@ -1,7 +1,7 @@
-'use server'
+"use server";
 
-import { revalidateTag } from 'next/cache'
+import { revalidateTag } from "next/cache";
 
 export default async function revalidate() {
-  revalidateTag('time-data')
+  revalidateTag("time-data");
 }
diff --git a/examples/cache-handler-redis/cache-handler-redis-custom.js b/examples/cache-handler-redis/cache-handler-redis-custom.js
index 98cda68bda..a5f2e307e7 100644
--- a/examples/cache-handler-redis/cache-handler-redis-custom.js
+++ b/examples/cache-handler-redis/cache-handler-redis-custom.js
@@ -1,42 +1,42 @@
 const {
   reviveFromBase64Representation,
   replaceJsonWithBase64,
-} = require('@neshca/json-replacer-reviver')
-const { IncrementalCache } = require('@neshca/cache-handler')
-const createLruCache = require('@neshca/cache-handler/local-lru').default
-const { createClient } = require('redis')
+} = require("@neshca/json-replacer-reviver");
+const { IncrementalCache } = require("@neshca/cache-handler");
+const createLruCache = require("@neshca/cache-handler/local-lru").default;
+const { createClient } = require("redis");
 
-const REVALIDATED_TAGS_KEY = 'sharedRevalidatedTags'
+const REVALIDATED_TAGS_KEY = "sharedRevalidatedTags";
 
 const client = createClient({
-  url: process.env.REDIS_URL ?? 'redis://localhost:6379',
-})
+  url: process.env.REDIS_URL ?? "redis://localhost:6379",
+});
 
-client.on('error', (error) => {
-  console.error('Redis error:', error.message)
-})
+client.on("error", (error) => {
+  console.error("Redis error:", error.message);
+});
 
 IncrementalCache.onCreation(async () => {
   // read more about TTL limitations https://caching-tools.github.io/next-shared-cache/configuration/ttl
-  const useTtl = false
+  const useTtl = false;
 
-  await client.connect()
+  await client.connect();
 
   const redisCache = {
     async get(key) {
       try {
-        const result = (await client.get(key)) ?? null
+        const result = (await client.get(key)) ?? null;
 
         if (!result) {
-          return null
+          return null;
         }
 
         // use reviveFromBase64Representation to restore binary data from Base64
-        return JSON.parse(result, reviveFromBase64Representation)
+        return JSON.parse(result, reviveFromBase64Representation);
       } catch (error) {
-        console.error('cache.get', error)
+        console.error("cache.get", error);
 
-        return null
+        return null;
       }
     },
     async set(key, value, ttl) {
@@ -45,46 +45,48 @@ IncrementalCache.onCreation(async () => {
           key,
           // use replaceJsonWithBase64 to store binary data in Base64 and save space
           JSON.stringify(value, replaceJsonWithBase64),
-          useTtl && typeof ttl === 'number' ? { EX: ttl } : undefined
-        )
+          useTtl && typeof ttl === "number" ? { EX: ttl } : undefined,
+        );
       } catch (error) {
-        console.error('cache.set', error)
+        console.error("cache.set", error);
       }
     },
     async getRevalidatedTags() {
       try {
-        const sharedRevalidatedTags = await client.hGetAll(REVALIDATED_TAGS_KEY)
+        const sharedRevalidatedTags = await client.hGetAll(
+          REVALIDATED_TAGS_KEY,
+        );
 
-        const entries = Object.entries(sharedRevalidatedTags)
+        const entries = Object.entries(sharedRevalidatedTags);
 
         const revalidatedTags = Object.fromEntries(
-          entries.map(([tag, revalidatedAt]) => [tag, Number(revalidatedAt)])
-        )
+          entries.map(([tag, revalidatedAt]) => [tag, Number(revalidatedAt)]),
+        );
 
-        return revalidatedTags
+        return revalidatedTags;
       } catch (error) {
-        console.error('cache.getRevalidatedTags', error)
+        console.error("cache.getRevalidatedTags", error);
       }
     },
     async revalidateTag(tag, revalidatedAt) {
       try {
         await client.hSet(REVALIDATED_TAGS_KEY, {
           [tag]: revalidatedAt,
-        })
+        });
       } catch (error) {
-        console.error('cache.revalidateTag', error)
+        console.error("cache.revalidateTag", error);
       }
     },
-  }
+  };
 
   const localCache = createLruCache({
     useTtl,
-  })
+  });
 
   return {
     cache: [redisCache, localCache],
     useFileSystem: !useTtl,
-  }
-})
+  };
+});
 
-module.exports = IncrementalCache
+module.exports = IncrementalCache;
diff --git a/examples/cache-handler-redis/cache-handler-redis.js b/examples/cache-handler-redis/cache-handler-redis.js
index 3adbbc162c..2c5d3ed97b 100644
--- a/examples/cache-handler-redis/cache-handler-redis.js
+++ b/examples/cache-handler-redis/cache-handler-redis.js
@@ -1,35 +1,35 @@
-const { IncrementalCache } = require('@neshca/cache-handler')
-const createRedisCache = require('@neshca/cache-handler/redis-stack').default
-const createLruCache = require('@neshca/cache-handler/local-lru').default
-const { createClient } = require('redis')
+const { IncrementalCache } = require("@neshca/cache-handler");
+const createRedisCache = require("@neshca/cache-handler/redis-stack").default;
+const createLruCache = require("@neshca/cache-handler/local-lru").default;
+const { createClient } = require("redis");
 
 const client = createClient({
-  url: process.env.REDIS_URL ?? 'redis://localhost:6379',
-})
+  url: process.env.REDIS_URL ?? "redis://localhost:6379",
+});
 
-client.on('error', (error) => {
-  console.error('Redis error:', error.message)
-})
+client.on("error", (error) => {
+  console.error("Redis error:", error.message);
+});
 
 IncrementalCache.onCreation(async () => {
   // read more about TTL limitations https://caching-tools.github.io/next-shared-cache/configuration/ttl
-  const useTtl = true
+  const useTtl = true;
 
-  await client.connect()
+  await client.connect();
 
   const redisCache = await createRedisCache({
     client,
     useTtl,
-  })
+  });
 
   const localCache = createLruCache({
     useTtl,
-  })
+  });
 
   return {
     cache: [redisCache, localCache],
     useFileSystem: !useTtl,
-  }
-})
+  };
+});
 
-module.exports = IncrementalCache
+module.exports = IncrementalCache;
diff --git a/examples/cache-handler-redis/docker-compose.yml b/examples/cache-handler-redis/docker-compose.yml
index 49bc0399c4..13dfe6c373 100644
--- a/examples/cache-handler-redis/docker-compose.yml
+++ b/examples/cache-handler-redis/docker-compose.yml
@@ -1,9 +1,9 @@
-version: '3.8'
+version: "3.8"
 
 services:
   redis-stack:
     image: redis/redis-stack:latest
     container_name: cache-handler-redis
     ports:
-      - '6379:6379'
-      - '8001:8001'
+      - "6379:6379"
+      - "8001:8001"
diff --git a/examples/cache-handler-redis/next.config.js b/examples/cache-handler-redis/next.config.js
index 261e0448d2..f5e91ef3bc 100644
--- a/examples/cache-handler-redis/next.config.js
+++ b/examples/cache-handler-redis/next.config.js
@@ -2,17 +2,17 @@
 const nextConfig = {
   experimental: {
     incrementalCacheHandlerPath:
-      process.env.NODE_ENV === 'production'
+      process.env.NODE_ENV === "production"
         ? require.resolve(
             // './cache-handler-redis-custom.js' // custom configuration
-            './cache-handler-redis.js'
+            "./cache-handler-redis.js",
           )
         : undefined,
   },
   env: {
     NEXT_PUBLIC_REDIS_INSIGHT_URL:
-      process.env.REDIS_INSIGHT_URL ?? 'http://localhost:8001',
+      process.env.REDIS_INSIGHT_URL ?? "http://localhost:8001",
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/catch-all-routes/components/header.tsx b/examples/catch-all-routes/components/header.tsx
index 8dd74be217..556245dc02 100644
--- a/examples/catch-all-routes/components/header.tsx
+++ b/examples/catch-all-routes/components/header.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 const Header = () => (
   <header>
@@ -27,6 +27,6 @@ const Header = () => (
       </li>
     </ul>
   </header>
-)
+);
 
-export default Header
+export default Header;
diff --git a/examples/catch-all-routes/pages/about.tsx b/examples/catch-all-routes/pages/about.tsx
index 255d0764b4..9c125610e3 100644
--- a/examples/catch-all-routes/pages/about.tsx
+++ b/examples/catch-all-routes/pages/about.tsx
@@ -1,10 +1,10 @@
-import Header from '../components/header'
+import Header from "../components/header";
 
 const About = () => (
   <>
     <Header />
     <h1>About page</h1>
   </>
-)
+);
 
-export default About
+export default About;
diff --git a/examples/catch-all-routes/pages/index.tsx b/examples/catch-all-routes/pages/index.tsx
index 0f56525ada..f2e7a7247d 100644
--- a/examples/catch-all-routes/pages/index.tsx
+++ b/examples/catch-all-routes/pages/index.tsx
@@ -1,10 +1,10 @@
-import Header from '../components/header'
+import Header from "../components/header";
 
 const Home = () => (
   <>
     <Header />
     <h1>Hello World!</h1>
   </>
-)
+);
 
-export default Home
+export default Home;
diff --git a/examples/catch-all-routes/pages/post/[...slug].tsx b/examples/catch-all-routes/pages/post/[...slug].tsx
index cf05d6b4f1..e82be24921 100644
--- a/examples/catch-all-routes/pages/post/[...slug].tsx
+++ b/examples/catch-all-routes/pages/post/[...slug].tsx
@@ -1,16 +1,16 @@
-import { useRouter } from 'next/router'
-import Header from '../../components/header'
+import { useRouter } from "next/router";
+import Header from "../../components/header";
 
 const Comment = () => {
-  const router = useRouter()
-  const slug = (router.query.slug as string[]) || []
+  const router = useRouter();
+  const slug = (router.query.slug as string[]) || [];
 
   return (
     <>
       <Header />
-      <h1>Slug: {slug.join('/')}</h1>
+      <h1>Slug: {slug.join("/")}</h1>
     </>
-  )
-}
+  );
+};
 
-export default Comment
+export default Comment;
diff --git a/examples/cloudflare-turnstile/app.css b/examples/cloudflare-turnstile/app.css
index e278079ff7..3578cc5707 100644
--- a/examples/cloudflare-turnstile/app.css
+++ b/examples/cloudflare-turnstile/app.css
@@ -12,7 +12,7 @@ main {
   text-align: center;
 }
 
-button[type='submit'] {
+button[type="submit"] {
   cursor: pointer;
   width: 100%;
   outline: none;
diff --git a/examples/cloudflare-turnstile/next.config.js b/examples/cloudflare-turnstile/next.config.js
index 4488de1db7..3eeced8423 100644
--- a/examples/cloudflare-turnstile/next.config.js
+++ b/examples/cloudflare-turnstile/next.config.js
@@ -2,9 +2,9 @@ module.exports = {
   async rewrites() {
     return [
       {
-        source: '/',
-        destination: '/implicit',
+        source: "/",
+        destination: "/implicit",
       },
-    ]
+    ];
   },
-}
+};
diff --git a/examples/cloudflare-turnstile/pages/_app.tsx b/examples/cloudflare-turnstile/pages/_app.tsx
index 7a774ea733..84a18f8160 100644
--- a/examples/cloudflare-turnstile/pages/_app.tsx
+++ b/examples/cloudflare-turnstile/pages/_app.tsx
@@ -1,6 +1,6 @@
-import type { AppProps } from 'next/app'
-import '../app.css'
+import type { AppProps } from "next/app";
+import "../app.css";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/cloudflare-turnstile/pages/api/handler.ts b/examples/cloudflare-turnstile/pages/api/handler.ts
index 00368bee54..5190bf694d 100644
--- a/examples/cloudflare-turnstile/pages/api/handler.ts
+++ b/examples/cloudflare-turnstile/pages/api/handler.ts
@@ -1,18 +1,18 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from "next";
 
 export default async function Handler(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  const form = new URLSearchParams()
-  form.append('secret', process.env.CLOUDFLARE_TURNSTILE_SECRET_KEY)
-  form.append('response', req.body['cf-turnstile-response'])
-  form.append('remoteip', req.headers['x-forwarded-for'] as string)
+  const form = new URLSearchParams();
+  form.append("secret", process.env.CLOUDFLARE_TURNSTILE_SECRET_KEY);
+  form.append("response", req.body["cf-turnstile-response"]);
+  form.append("remoteip", req.headers["x-forwarded-for"] as string);
 
   const result = await fetch(
-    'https://challenges.cloudflare.com/turnstile/v0/siteverify',
-    { method: 'POST', body: form }
-  )
-  const json = await result.json()
-  res.status(result.status).json(json)
+    "https://challenges.cloudflare.com/turnstile/v0/siteverify",
+    { method: "POST", body: form },
+  );
+  const json = await result.json();
+  res.status(result.status).json(json);
 }
diff --git a/examples/cloudflare-turnstile/pages/explicit.tsx b/examples/cloudflare-turnstile/pages/explicit.tsx
index fc2409ee72..69dc3f5537 100644
--- a/examples/cloudflare-turnstile/pages/explicit.tsx
+++ b/examples/cloudflare-turnstile/pages/explicit.tsx
@@ -1,17 +1,17 @@
-import Script from 'next/script'
+import Script from "next/script";
 
 type RenderParameters = {
-  sitekey: string
-  theme?: 'light' | 'dark'
-  callback?(token: string): void
-}
+  sitekey: string;
+  theme?: "light" | "dark";
+  callback?(token: string): void;
+};
 
 declare global {
   interface Window {
-    onloadTurnstileCallback(): void
+    onloadTurnstileCallback(): void;
     turnstile: {
-      render(container: string | HTMLElement, params: RenderParameters): void
-    }
+      render(container: string | HTMLElement, params: RenderParameters): void;
+    };
   }
 }
 
@@ -39,5 +39,5 @@ export default function ExplicitRender() {
         </p>
       </form>
     </main>
-  )
+  );
 }
diff --git a/examples/cloudflare-turnstile/pages/implicit.tsx b/examples/cloudflare-turnstile/pages/implicit.tsx
index 2da2baa726..368904e3fb 100644
--- a/examples/cloudflare-turnstile/pages/implicit.tsx
+++ b/examples/cloudflare-turnstile/pages/implicit.tsx
@@ -1,4 +1,4 @@
-import Script from 'next/script'
+import Script from "next/script";
 
 export default function ImplicitRender() {
   return (
@@ -20,5 +20,5 @@ export default function ImplicitRender() {
         </p>
       </form>
     </main>
-  )
+  );
 }
diff --git a/examples/cms-agilitycms/components/alert.tsx b/examples/cms-agilitycms/components/alert.tsx
index 2994d59fbd..5ee5cde79a 100644
--- a/examples/cms-agilitycms/components/alert.tsx
+++ b/examples/cms-agilitycms/components/alert.tsx
@@ -1,31 +1,31 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Alert({ preview }) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This is page is a preview.{' '}
+              This is page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -38,5 +38,5 @@ export default function Alert({ preview }) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-agilitycms/components/avatar.tsx b/examples/cms-agilitycms/components/avatar.tsx
index dd0ae301d4..c5babbc8e1 100644
--- a/examples/cms-agilitycms/components/avatar.tsx
+++ b/examples/cms-agilitycms/components/avatar.tsx
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Avatar({ name, picture }) {
   return (
@@ -13,5 +13,5 @@ export default function Avatar({ name, picture }) {
       </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-agilitycms/components/container.tsx b/examples/cms-agilitycms/components/container.tsx
index fc1c29dfb0..92e559ece3 100644
--- a/examples/cms-agilitycms/components/container.tsx
+++ b/examples/cms-agilitycms/components/container.tsx
@@ -1,3 +1,3 @@
 export default function Container({ children }) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }
diff --git a/examples/cms-agilitycms/components/cover-image.tsx b/examples/cms-agilitycms/components/cover-image.tsx
index b5e369dc24..95e5c1802a 100644
--- a/examples/cms-agilitycms/components/cover-image.tsx
+++ b/examples/cms-agilitycms/components/cover-image.tsx
@@ -1,6 +1,6 @@
-import Image from '../lib/components/image'
-import cn from 'classnames'
-import Link from 'next/link'
+import Image from "../lib/components/image";
+import cn from "classnames";
+import Link from "next/link";
 
 export default function CoverImage({ title, responsiveImage, slug = null }) {
   const image = (
@@ -8,11 +8,11 @@ export default function CoverImage({ title, responsiveImage, slug = null }) {
       data={{
         ...responsiveImage,
       }}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": slug,
       })}
     />
-  )
+  );
   return (
     <div className="sm:mx-0">
       {slug ? (
@@ -23,5 +23,5 @@ export default function CoverImage({ title, responsiveImage, slug = null }) {
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-agilitycms/components/date.tsx b/examples/cms-agilitycms/components/date.tsx
index eac5681378..5be2fe25ba 100644
--- a/examples/cms-agilitycms/components/date.tsx
+++ b/examples/cms-agilitycms/components/date.tsx
@@ -1,6 +1,6 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
 export default function Date({ dateString }) {
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "LLLL	d, yyyy")}</time>;
 }
diff --git a/examples/cms-agilitycms/components/footer.tsx b/examples/cms-agilitycms/components/footer.tsx
index da9eed88ec..81422c7c6b 100644
--- a/examples/cms-agilitycms/components/footer.tsx
+++ b/examples/cms-agilitycms/components/footer.tsx
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Footer() {
   return (
@@ -26,5 +26,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-agilitycms/components/header.tsx b/examples/cms-agilitycms/components/header.tsx
index 05cb9af247..e6dea52099 100644
--- a/examples/cms-agilitycms/components/header.tsx
+++ b/examples/cms-agilitycms/components/header.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-agilitycms/components/hero-post.tsx b/examples/cms-agilitycms/components/hero-post.tsx
index 88a235c8b6..c7930c265f 100644
--- a/examples/cms-agilitycms/components/hero-post.tsx
+++ b/examples/cms-agilitycms/components/hero-post.tsx
@@ -1,7 +1,7 @@
-import Link from 'next/link'
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
+import Link from "next/link";
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "../components/cover-image";
 
 export default function HeroPost({
   title,
@@ -39,11 +39,11 @@ export default function HeroPost({
         )}
       </div>
     </section>
-  )
+  );
 }
 
 // The data returned here will be send as `props` to the component
 HeroPost.getCustomInitialProps = async function ({ client }) {
-  const post = await client.getLatestPost()
-  return post
-}
+  const post = await client.getLatestPost();
+  return post;
+};
diff --git a/examples/cms-agilitycms/components/intro.tsx b/examples/cms-agilitycms/components/intro.tsx
index 5931b3c596..e8578bef66 100644
--- a/examples/cms-agilitycms/components/intro.tsx
+++ b/examples/cms-agilitycms/components/intro.tsx
@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '../lib/constants'
+import { CMS_NAME, CMS_URL } from "../lib/constants";
 
 export default function Intro() {
   return (
@@ -7,14 +7,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -24,5 +24,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-agilitycms/components/layout.tsx b/examples/cms-agilitycms/components/layout.tsx
index 99d9535313..a2e161c793 100644
--- a/examples/cms-agilitycms/components/layout.tsx
+++ b/examples/cms-agilitycms/components/layout.tsx
@@ -1,6 +1,6 @@
-import Alert from '../components/alert'
-import Footer from '../components/footer'
-import Meta from '../components/meta'
+import Alert from "../components/alert";
+import Footer from "../components/footer";
+import Meta from "../components/meta";
 
 export default function Layout({ preview, children }) {
   return (
@@ -12,5 +12,5 @@ export default function Layout({ preview, children }) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-agilitycms/components/meta.tsx b/examples/cms-agilitycms/components/meta.tsx
index d9c48d5831..a95395d8b9 100644
--- a/examples/cms-agilitycms/components/meta.tsx
+++ b/examples/cms-agilitycms/components/meta.tsx
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "../lib/constants";
 
 export default function Meta() {
   return (
@@ -38,5 +38,5 @@ export default function Meta() {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-agilitycms/components/more-stories.tsx b/examples/cms-agilitycms/components/more-stories.tsx
index a4e0fdf761..504849ce43 100644
--- a/examples/cms-agilitycms/components/more-stories.tsx
+++ b/examples/cms-agilitycms/components/more-stories.tsx
@@ -1,4 +1,4 @@
-import PostPreview from '../components/post-preview'
+import PostPreview from "../components/post-preview";
 
 export default function MoreStories({ title, posts }) {
   return (
@@ -20,7 +20,7 @@ export default function MoreStories({ title, posts }) {
         ))}
       </div>
     </section>
-  )
+  );
 }
 
 // The data returned here will be send as `props` to the component
@@ -29,11 +29,11 @@ MoreStories.getCustomInitialProps = async function ({
   item,
   pageInSitemap,
 }) {
-  const postToExcludeContentID = pageInSitemap.contentID ?? -1
-  const posts = await client.getPostsForMoreStories({ postToExcludeContentID })
+  const postToExcludeContentID = pageInSitemap.contentID ?? -1;
+  const posts = await client.getPostsForMoreStories({ postToExcludeContentID });
 
   return {
     title: item.fields.title,
     posts,
-  }
-}
+  };
+};
diff --git a/examples/cms-agilitycms/components/post-body.tsx b/examples/cms-agilitycms/components/post-body.tsx
index 4cc2bb52bc..45b5a1fb95 100644
--- a/examples/cms-agilitycms/components/post-body.tsx
+++ b/examples/cms-agilitycms/components/post-body.tsx
@@ -1,12 +1,12 @@
-import markdownStyles from './markdown-styles.module.css'
+import markdownStyles from "./markdown-styles.module.css";
 
 export default function PostBody({ content }) {
   return (
     <div className="max-w-2xl mx-auto">
       <div
-        className={markdownStyles['markdown']}
+        className={markdownStyles["markdown"]}
         dangerouslySetInnerHTML={{ __html: content }}
       />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-agilitycms/components/post-details.tsx b/examples/cms-agilitycms/components/post-details.tsx
index e7f8555d4c..f9318191cb 100644
--- a/examples/cms-agilitycms/components/post-details.tsx
+++ b/examples/cms-agilitycms/components/post-details.tsx
@@ -1,9 +1,9 @@
-import Header from './header'
-import PostHeader from './post-header'
-import PostBody from './post-body'
-import SectionSeparator from './section-separator'
-import Head from 'next/head'
-import { CMS_NAME } from '../lib/constants'
+import Header from "./header";
+import PostHeader from "./post-header";
+import PostBody from "./post-body";
+import SectionSeparator from "./section-separator";
+import Head from "next/head";
+import { CMS_NAME } from "../lib/constants";
 
 export default function PostDetails({ post }) {
   return (
@@ -26,15 +26,15 @@ export default function PostDetails({ post }) {
       </article>
       <SectionSeparator />
     </>
-  )
+  );
 }
 
 // The data returned here will be send as `props` to the component
 PostDetails.getCustomInitialProps = async function ({ client, pageInSitemap }) {
-  const contentID = pageInSitemap.contentID
-  const post = await client.getPostDetails({ contentID })
+  const contentID = pageInSitemap.contentID;
+  const post = await client.getPostDetails({ contentID });
 
   return {
     post,
-  }
-}
+  };
+};
diff --git a/examples/cms-agilitycms/components/post-header.tsx b/examples/cms-agilitycms/components/post-header.tsx
index c04fd54986..cf957b3300 100644
--- a/examples/cms-agilitycms/components/post-header.tsx
+++ b/examples/cms-agilitycms/components/post-header.tsx
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
-import PostTitle from '../components/post-title'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "../components/cover-image";
+import PostTitle from "../components/post-title";
 
 export default function PostHeader({ title, coverImage, date, author }) {
   return (
@@ -27,5 +27,5 @@ export default function PostHeader({ title, coverImage, date, author }) {
         </div>
       )}
     </>
-  )
+  );
 }
diff --git a/examples/cms-agilitycms/components/post-preview.tsx b/examples/cms-agilitycms/components/post-preview.tsx
index 8e0da5d794..ac6b7be9fc 100644
--- a/examples/cms-agilitycms/components/post-preview.tsx
+++ b/examples/cms-agilitycms/components/post-preview.tsx
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function PostPreview({
   title,
@@ -31,5 +31,5 @@ export default function PostPreview({
       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
       {author && <Avatar name={author.name} picture={author.picture} />}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-agilitycms/components/post-title.tsx b/examples/cms-agilitycms/components/post-title.tsx
index edd8cba65c..a15f06616f 100644
--- a/examples/cms-agilitycms/components/post-title.tsx
+++ b/examples/cms-agilitycms/components/post-title.tsx
@@ -3,5 +3,5 @@ export default function PostTitle({ children }) {
     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
-  )
+  );
 }
diff --git a/examples/cms-agilitycms/components/section-separator.tsx b/examples/cms-agilitycms/components/section-separator.tsx
index 4ca5c65fdc..b86fb50b7d 100644
--- a/examples/cms-agilitycms/components/section-separator.tsx
+++ b/examples/cms-agilitycms/components/section-separator.tsx
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }
diff --git a/examples/cms-agilitycms/environment.d.ts b/examples/cms-agilitycms/environment.d.ts
index c6aa05a611..0cc8ae4813 100644
--- a/examples/cms-agilitycms/environment.d.ts
+++ b/examples/cms-agilitycms/environment.d.ts
@@ -1,6 +1,6 @@
 declare namespace NodeJS {
   export interface ProcessEnv {
-    readonly AGILITY_CMS_GUID: string
-    readonly AGILITY_CMS_API_FETCH_KEY: string
+    readonly AGILITY_CMS_GUID: string;
+    readonly AGILITY_CMS_API_FETCH_KEY: string;
   }
 }
diff --git a/examples/cms-agilitycms/lib/api.ts b/examples/cms-agilitycms/lib/api.ts
index c65e7357d4..dd4b8b1740 100644
--- a/examples/cms-agilitycms/lib/api.ts
+++ b/examples/cms-agilitycms/lib/api.ts
@@ -1,34 +1,34 @@
-import agility from '@agility/content-fetch'
-import { CMS_LANG, CMS_CHANNEL } from './constants'
-import { asyncForEach } from './utils'
-export { validatePreview } from './preview'
-import { normalizePosts } from './normalize'
-import { requireComponentDependancyByName } from './dependancies'
+import agility from "@agility/content-fetch";
+import { CMS_LANG, CMS_CHANNEL } from "./constants";
+import { asyncForEach } from "./utils";
+export { validatePreview } from "./preview";
+import { normalizePosts } from "./normalize";
+import { requireComponentDependancyByName } from "./dependancies";
 
 // Our LIVE API client
 const liveClient = agility.getApi({
   guid: process.env.AGILITY_CMS_GUID,
   apiKey: process.env.AGILITY_CMS_API_FETCH_KEY,
-})
+});
 
 // Our PREVIEW API client
 const previewClient = agility.getApi({
   guid: process.env.AGILITY_CMS_GUID,
   apiKey: process.env.AGILITY_CMS_API_PREVIEW_KEY,
   isPreview: true,
-})
+});
 
 export const getClient = (preview = false) =>
-  preview ? previewClient : liveClient
+  preview ? previewClient : liveClient;
 
 // This client is used by nested components to fetch additional data within `getStaticProps`
 export class APIClient {
-  public preview: any
-  public client: any
+  public preview: any;
+  public client: any;
 
   constructor({ preview = false }) {
-    this.preview = preview
-    this.client = getClient(preview)
+    this.preview = preview;
+    this.client = getClient(preview);
   }
 
   async getAllPosts(take) {
@@ -37,16 +37,16 @@ export class APIClient {
       languageCode: CMS_LANG,
       contentLinkDepth: 1,
       take: take, // TODO: Implement pagination
-    })
+    });
 
-    return data.items
+    return data.items;
   }
 
   async getLatestPost() {
-    const data = await this.getAllPosts(1)
-    const normalizedPosts = normalizePosts(data)
+    const data = await this.getAllPosts(1);
+    const normalizedPosts = normalizePosts(data);
 
-    return normalizedPosts[0] || null
+    return normalizedPosts[0] || null;
   }
 
   async getPostDetails({ contentID, preview }) {
@@ -54,75 +54,75 @@ export class APIClient {
       contentID,
       languageCode: CMS_LANG,
       contentLinkDepth: 1,
-    })
-    const normalizedPost = normalizePosts([post])[0]
+    });
+    const normalizedPost = normalizePosts([post])[0];
 
-    return normalizedPost
+    return normalizedPost;
   }
 
   async getPostsForMoreStories({ postToExcludeContentID }) {
-    let allPosts = await this.getAllPosts(5)
+    let allPosts = await this.getAllPosts(5);
 
     //if we don't have a post to exclude, assume we should exclude the latest one
     if (postToExcludeContentID < 0) {
-      allPosts.shift()
+      allPosts.shift();
     }
 
     const postsLessThisPost = allPosts.filter((p) => {
-      return p.contentID !== postToExcludeContentID
-    })
+      return p.contentID !== postToExcludeContentID;
+    });
 
-    const normalizedMorePosts = normalizePosts(postsLessThisPost)
-    return normalizedMorePosts
+    const normalizedMorePosts = normalizePosts(postsLessThisPost);
+    return normalizedMorePosts;
   }
 }
 
 export async function getAgilityPaths() {
-  console.log(`Agility CMS => Fetching sitemap for getAgilityPaths...`)
+  console.log(`Agility CMS => Fetching sitemap for getAgilityPaths...`);
 
   const sitemapFlat = await getClient().getSitemapFlat({
     channelName: CMS_CHANNEL,
     languageCode: CMS_LANG,
-  })
+  });
 
   //returns an array of paths as a string (i.e.  ['/home', '/posts']
   //skips folders...
   const paths = Object.keys(sitemapFlat)
     .filter((s) => sitemapFlat[s].isFolder !== true)
     .map((s) => {
-      return s
-    })
+      return s;
+    });
 
-  return paths
+  return paths;
 }
 
 export async function getAgilityPageProps({ params, preview }) {
   //determine if we are in preview mode
-  const client = getClient(preview)
+  const client = getClient(preview);
 
-  let path = '/'
+  let path = "/";
   if (params) {
     //build path by iterating through slugs
-    path = ''
+    path = "";
     params.slug.forEach((slug) => {
-      path += '/' + slug
-    })
+      path += "/" + slug;
+    });
   }
 
-  console.log(`Agility CMS => Getting page props for '${path}'...`)
+  console.log(`Agility CMS => Getting page props for '${path}'...`);
 
   //get sitemap
   const sitemap = await client.getSitemapFlat({
     channelName: CMS_CHANNEL,
     languageCode: CMS_LANG,
-  })
+  });
 
-  let pageInSitemap = sitemap[path]
-  let page = null
+  let pageInSitemap = sitemap[path];
+  let page = null;
 
-  if (path === '/') {
-    let firstPagePathInSitemap = Object.keys(sitemap)[0]
-    pageInSitemap = sitemap[firstPagePathInSitemap]
+  if (path === "/") {
+    let firstPagePathInSitemap = Object.keys(sitemap)[0];
+    pageInSitemap = sitemap[firstPagePathInSitemap];
   }
 
   if (pageInSitemap) {
@@ -131,71 +131,71 @@ export async function getAgilityPageProps({ params, preview }) {
       pageID: pageInSitemap.pageID,
       languageCode: CMS_LANG,
       contentLinkDepth: 1,
-    })
+    });
   } else {
     //Could not find page
-    console.error('page [' + path + '] not found in sitemap.')
-    return
+    console.error("page [" + path + "] not found in sitemap.");
+    return;
   }
 
   if (!page) {
-    console.error('page [' + path + '] not found in getpage method.')
-    return
+    console.error("page [" + path + "] not found in getpage method.");
+    return;
   }
 
   //resolve the page template
-  let pageTemplateName = page.templateName.replace(/[^0-9a-zA-Z]/g, '')
+  let pageTemplateName = page.templateName.replace(/[^0-9a-zA-Z]/g, "");
 
   //resolve the modules per content zone
   await asyncForEach(Object.keys(page.zones), async (zoneName) => {
-    let modules = []
+    let modules = [];
 
     //grab the modules for this content zone
-    const modulesForThisContentZone = page.zones[zoneName]
+    const modulesForThisContentZone = page.zones[zoneName];
 
     //loop through the zone's modules
     await asyncForEach(modulesForThisContentZone, async (moduleItem) => {
       let ModuleComponentToRender = requireComponentDependancyByName(
-        moduleItem.module
-      )
+        moduleItem.module,
+      );
 
       if (ModuleComponentToRender) {
         //resolve any additional data for the modules
-        let moduleData = null
+        let moduleData = null;
 
         if (ModuleComponentToRender.getCustomInitialProps) {
           //we have some additional data in the module we'll need, execute that method now, so it can be included in SSG
           console.log(
-            `Agility CMS => Fetching additional data via getCustomInitialProps for ${moduleItem.module}...`
-          )
+            `Agility CMS => Fetching additional data via getCustomInitialProps for ${moduleItem.module}...`,
+          );
           moduleData = await ModuleComponentToRender.getCustomInitialProps({
             client: new APIClient({ preview }),
             item: moduleItem.item,
             languageCode: CMS_LANG,
             channelName: CMS_CHANNEL,
             pageInSitemap: pageInSitemap,
-          })
+          });
         }
 
         //if we have additional module data, then overwrite our props that will be sent to the module
         if (moduleData != null) {
-          moduleItem.item = moduleData
+          moduleItem.item = moduleData;
         }
 
         modules.push({
           moduleName: moduleItem.module,
           item: moduleItem.item,
-        })
+        });
       } else {
         console.error(
-          `No react component found for the module "${moduleItem.module}". Cannot render module.`
-        )
+          `No react component found for the module "${moduleItem.module}". Cannot render module.`,
+        );
       }
-    })
+    });
 
     //store as dictionary
-    page.zones[zoneName] = modules
-  })
+    page.zones[zoneName] = modules;
+  });
 
   return {
     sitemapNode: pageInSitemap,
@@ -203,5 +203,5 @@ export async function getAgilityPageProps({ params, preview }) {
     pageTemplateName: pageTemplateName,
     languageCode: CMS_LANG,
     channelName: CMS_CHANNEL,
-  }
+  };
 }
diff --git a/examples/cms-agilitycms/lib/components/content-zone.tsx b/examples/cms-agilitycms/lib/components/content-zone.tsx
index fa050f0519..7c938ff1ce 100644
--- a/examples/cms-agilitycms/lib/components/content-zone.tsx
+++ b/examples/cms-agilitycms/lib/components/content-zone.tsx
@@ -1,18 +1,18 @@
-import { requireComponentDependancyByName } from '../dependancies'
+import { requireComponentDependancyByName } from "../dependancies";
 
 export default function ContentZone(props) {
   function RenderModules() {
-    let modules = props.page.zones[props.name]
+    let modules = props.page.zones[props.name];
 
     return modules.map((m, i) => {
-      const AgilityModule = requireComponentDependancyByName(m.moduleName)
-      return <AgilityModule key={i} {...m.item} />
-    })
+      const AgilityModule = requireComponentDependancyByName(m.moduleName);
+      return <AgilityModule key={i} {...m.item} />;
+    });
   }
 
   return (
     <div>
       <RenderModules />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-agilitycms/lib/components/image.tsx b/examples/cms-agilitycms/lib/components/image.tsx
index 38e686a6c4..f8b22195fa 100644
--- a/examples/cms-agilitycms/lib/components/image.tsx
+++ b/examples/cms-agilitycms/lib/components/image.tsx
@@ -1,13 +1,13 @@
-import React, { useCallback, useState } from 'react'
-import { useInView } from 'react-intersection-observer'
+import React, { useCallback, useState } from "react";
+import { useInView } from "react-intersection-observer";
 
 type State = {
-  lazyLoad: boolean
-  isSsr: boolean
-  isIntersectionObserverAvailable: boolean
-  inView?: boolean
-  loaded: boolean
-}
+  lazyLoad: boolean;
+  isSsr: boolean;
+  isIntersectionObserverAvailable: boolean;
+  inView?: boolean;
+  loaded: boolean;
+};
 
 const imageAddStrategy = ({
   lazyLoad,
@@ -17,19 +17,19 @@ const imageAddStrategy = ({
   loaded,
 }: State) => {
   if (!lazyLoad) {
-    return true
+    return true;
   }
 
   if (isSsr) {
-    return false
+    return false;
   }
 
   if (isIntersectionObserverAvailable) {
-    return inView || loaded
+    return inView || loaded;
   }
 
-  return true
-}
+  return true;
+};
 
 const imageShowStrategy = ({
   lazyLoad,
@@ -38,47 +38,47 @@ const imageShowStrategy = ({
   loaded,
 }: State) => {
   if (!lazyLoad) {
-    return true
+    return true;
   }
 
   if (isSsr) {
-    return false
+    return false;
   }
 
   if (isIntersectionObserverAvailable) {
-    return loaded
+    return loaded;
   }
 
-  return true
-}
+  return true;
+};
 
 type ImageData = {
-  aspectRatio: number
-  base64?: string
-  height?: number
-  width: number
-  sizes?: string
-  src?: string
-  srcSet?: string
-  webpSrcSet?: string
-  bgColor?: string
-  alt?: string
-  title?: string
-}
+  aspectRatio: number;
+  base64?: string;
+  height?: number;
+  width: number;
+  sizes?: string;
+  src?: string;
+  srcSet?: string;
+  webpSrcSet?: string;
+  bgColor?: string;
+  alt?: string;
+  title?: string;
+};
 
 type ImageProps = {
-  data: ImageData
-  className?: string
-  pictureClassName?: string
-  fadeInDuration?: number
-  intersectionTreshold?: number
-  intersectionThreshold?: number
-  intersectionMargin?: string
-  lazyLoad?: boolean
-  style?: React.CSSProperties
-  pictureStyle?: React.CSSProperties
-  explicitWidth?: boolean
-}
+  data: ImageData;
+  className?: string;
+  pictureClassName?: string;
+  fadeInDuration?: number;
+  intersectionTreshold?: number;
+  intersectionThreshold?: number;
+  intersectionMargin?: string;
+  lazyLoad?: boolean;
+  style?: React.CSSProperties;
+  pictureStyle?: React.CSSProperties;
+  explicitWidth?: boolean;
+};
 
 const Image = function ({
   className,
@@ -92,31 +92,31 @@ const Image = function ({
   explicitWidth,
   data,
 }: ImageProps) {
-  const [loaded, setLoaded] = useState(false)
+  const [loaded, setLoaded] = useState(false);
 
   const handleLoad = useCallback(() => {
-    setLoaded(true)
-  }, [])
+    setLoaded(true);
+  }, []);
 
   const [ref, inView] = useInView({
     threshold: intersectionTreshold || 0,
-    rootMargin: intersectionMargin || '0px 0px 0px 0px',
+    rootMargin: intersectionMargin || "0px 0px 0px 0px",
     triggerOnce: true,
-  })
+  });
 
-  const isSsr = typeof window === 'undefined'
+  const isSsr = typeof window === "undefined";
 
   const isIntersectionObserverAvailable = isSsr
     ? false
-    : !!window.IntersectionObserver
+    : !!window.IntersectionObserver;
 
   const absolutePositioning: React.CSSProperties = {
-    position: 'absolute',
+    position: "absolute",
     left: 0,
     top: 0,
     bottom: 0,
     right: 0,
-  }
+  };
 
   const addImage = imageAddStrategy({
     lazyLoad,
@@ -124,29 +124,29 @@ const Image = function ({
     isIntersectionObserverAvailable,
     inView,
     loaded,
-  })
+  });
   const showImage = imageShowStrategy({
     lazyLoad,
     isSsr,
     isIntersectionObserverAvailable,
     inView,
     loaded,
-  })
+  });
 
   const webpSource = data.webpSrcSet && (
     <source srcSet={data.webpSrcSet} sizes={data.sizes} type="image/webp" />
-  )
+  );
 
   const regularSource = data.srcSet && (
     <source srcSet={data.srcSet} sizes={data.sizes} />
-  )
+  );
 
   const placeholder = (
     <div
       style={{
         backgroundImage: data.base64 ? `url(${data.base64})` : null,
         backgroundColor: data.bgColor,
-        backgroundSize: 'cover',
+        backgroundSize: "cover",
         opacity: showImage ? 0 : 1,
         transition:
           !fadeInDuration || fadeInDuration > 0
@@ -155,34 +155,34 @@ const Image = function ({
         ...absolutePositioning,
       }}
     />
-  )
+  );
 
-  const { width, aspectRatio } = data
-  const height = data.height || width / aspectRatio
+  const { width, aspectRatio } = data;
+  const height = data.height || width / aspectRatio;
 
   const sizer = (
     <svg
       className={pictureClassName}
       style={{
-        width: explicitWidth ? `${width}px` : '100%',
-        height: 'auto',
-        display: 'block',
+        width: explicitWidth ? `${width}px` : "100%",
+        height: "auto",
+        display: "block",
         ...pictureStyle,
       }}
       height={height}
       width={width}
     />
-  )
+  );
 
   return (
     <div
       ref={ref}
       className={className}
       style={{
-        display: 'inline-block',
-        overflow: 'hidden',
+        display: "inline-block",
+        overflow: "hidden",
         ...style,
-        position: 'relative',
+        position: "relative",
       }}
     >
       {sizer}
@@ -206,7 +206,7 @@ const Image = function ({
               alt={data.alt}
               title={data.title}
               onLoad={handleLoad}
-              style={{ width: '100%' }}
+              style={{ width: "100%" }}
             />
           )}
         </picture>
@@ -219,7 +219,7 @@ const Image = function ({
         </picture>
       </noscript>
     </div>
-  )
-}
+  );
+};
 
-export default Image
+export default Image;
diff --git a/examples/cms-agilitycms/lib/components/one-column-template.tsx b/examples/cms-agilitycms/lib/components/one-column-template.tsx
index dcc863bbe8..99360097f2 100644
--- a/examples/cms-agilitycms/lib/components/one-column-template.tsx
+++ b/examples/cms-agilitycms/lib/components/one-column-template.tsx
@@ -1,9 +1,9 @@
-import ContentZone from './content-zone'
+import ContentZone from "./content-zone";
 
 export default function OneColumnTemplate(props) {
   return (
     <>
       <ContentZone name="MainContentZone" {...props} />
     </>
-  )
+  );
 }
diff --git a/examples/cms-agilitycms/lib/components/page-template.tsx b/examples/cms-agilitycms/lib/components/page-template.tsx
index 9d4b4cc722..7a3754aabf 100644
--- a/examples/cms-agilitycms/lib/components/page-template.tsx
+++ b/examples/cms-agilitycms/lib/components/page-template.tsx
@@ -1,8 +1,8 @@
-import { requireComponentDependancyByName } from '../dependancies'
+import { requireComponentDependancyByName } from "../dependancies";
 
 export default function CMSPageTemplate(props) {
   const AgilityPageTemplateToRender = requireComponentDependancyByName(
-    props.pageTemplateName
-  )
-  return <AgilityPageTemplateToRender {...props} />
+    props.pageTemplateName,
+  );
+  return <AgilityPageTemplateToRender {...props} />;
 }
diff --git a/examples/cms-agilitycms/lib/components/rich-text-area.tsx b/examples/cms-agilitycms/lib/components/rich-text-area.tsx
index 7ff6f6f456..5234bf2b9a 100644
--- a/examples/cms-agilitycms/lib/components/rich-text-area.tsx
+++ b/examples/cms-agilitycms/lib/components/rich-text-area.tsx
@@ -1,13 +1,13 @@
 const setHTML = (textblob) => {
-  return { __html: textblob }
-}
+  return { __html: textblob };
+};
 
 export default function RichTextArea({ fields }) {
-  const { textblob } = fields
+  const { textblob } = fields;
   return (
     <div
       className="default-rich-text-area"
       dangerouslySetInnerHTML={setHTML(textblob)}
     />
-  )
+  );
 }
diff --git a/examples/cms-agilitycms/lib/constants.ts b/examples/cms-agilitycms/lib/constants.ts
index 2b5257afb6..e7be5dc1fd 100644
--- a/examples/cms-agilitycms/lib/constants.ts
+++ b/examples/cms-agilitycms/lib/constants.ts
@@ -1,7 +1,7 @@
-export const EXAMPLE_PATH = 'cms-agilitycms'
-export const CMS_NAME = 'Agility CMS'
-export const CMS_URL = 'https://www.agilitycms.com'
-export const CMS_LANG = 'en-us'
-export const CMS_CHANNEL = 'website'
+export const EXAMPLE_PATH = "cms-agilitycms";
+export const CMS_NAME = "Agility CMS";
+export const CMS_URL = "https://www.agilitycms.com";
+export const CMS_LANG = "en-us";
+export const CMS_CHANNEL = "website";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**Agility%20CMS**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fcdn.agilitycms.com%2Fcontent-manager%2Fimages%2Flogos%2F3d69eddf6f00b8824feb126d9ac2bed3ec6e85c0.png&widths=undefined&widths=350&heights=200&heights=auto'
+  "https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**Agility%20CMS**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fcdn.agilitycms.com%2Fcontent-manager%2Fimages%2Flogos%2F3d69eddf6f00b8824feb126d9ac2bed3ec6e85c0.png&widths=undefined&widths=350&heights=200&heights=auto";
diff --git a/examples/cms-agilitycms/lib/dependancies.ts b/examples/cms-agilitycms/lib/dependancies.ts
index 183fceba8a..46c650e972 100644
--- a/examples/cms-agilitycms/lib/dependancies.ts
+++ b/examples/cms-agilitycms/lib/dependancies.ts
@@ -1,40 +1,40 @@
-import { convertPascalToKebabCase } from './utils'
-const path = require('path')
-const userComponentsPath = path.resolve('./components')
-const libComponentsPath = path.resolve('./lib/components')
+import { convertPascalToKebabCase } from "./utils";
+const path = require("path");
+const userComponentsPath = path.resolve("./components");
+const libComponentsPath = path.resolve("./lib/components");
 
 const requireComponent = (name) => {
-  let Component = null
+  let Component = null;
 
   try {
     //check the user path first (must be relative paths)
-    Component = require(`../components/${name}.tsx`).default
+    Component = require(`../components/${name}.tsx`).default;
   } catch {}
 
   if (!Component)
     try {
       //fallback to lib path (must be relative paths)
-      Component = require(`./components/${name}.tsx`).default
+      Component = require(`./components/${name}.tsx`).default;
     } catch {}
 
-  return Component
-}
+  return Component;
+};
 
 //Bug: when dynamic imports are used within the module, it doest not get outputted server-side
 //let AgilityModule = dynamic(() => import ('../components/' + m.moduleName));
 
 export const requireComponentDependancyByName = (name) => {
-  let pascalCaseName = name
-  let kebabCaseName = convertPascalToKebabCase(name)
-  let Component = null
+  let pascalCaseName = name;
+  let kebabCaseName = convertPascalToKebabCase(name);
+  let Component = null;
 
   try {
-    Component = requireComponent(kebabCaseName)
+    Component = requireComponent(kebabCaseName);
   } catch {}
 
   if (!Component) {
     try {
-      Component = requireComponent(pascalCaseName)
+      Component = requireComponent(pascalCaseName);
     } catch {}
   }
 
@@ -44,8 +44,8 @@ export const requireComponentDependancyByName = (name) => {
         ${userComponentsPath}/${kebabCaseName}.tsx',
         ${libComponentsPath}/${kebabCaseName}.tsx',
         ${userComponentsPath}/${pascalCaseName}.tsx',
-        ${libComponentsPath}/${pascalCaseName}.tsx'.`
+        ${libComponentsPath}/${pascalCaseName}.tsx'.`;
   }
 
-  return Component
-}
+  return Component;
+};
diff --git a/examples/cms-agilitycms/lib/normalize.ts b/examples/cms-agilitycms/lib/normalize.ts
index 620a979549..3f7966ce46 100644
--- a/examples/cms-agilitycms/lib/normalize.ts
+++ b/examples/cms-agilitycms/lib/normalize.ts
@@ -46,10 +46,10 @@ export function normalizePosts(postsFromAgility) {
           bgColor: null,
         },
       },
-    }
+    };
 
-    return normalizedPost
-  })
+    return normalizedPost;
+  });
 
-  return posts
+  return posts;
 }
diff --git a/examples/cms-agilitycms/lib/preview.ts b/examples/cms-agilitycms/lib/preview.ts
index dc0b0a7dd7..79e9050fd2 100644
--- a/examples/cms-agilitycms/lib/preview.ts
+++ b/examples/cms-agilitycms/lib/preview.ts
@@ -1,28 +1,28 @@
-import crypto from 'crypto'
-import { getClient } from './api'
-import { CMS_LANG, CMS_CHANNEL } from './constants'
+import crypto from "crypto";
+import { getClient } from "./api";
+import { CMS_LANG, CMS_CHANNEL } from "./constants";
 
 //Generates a preview key to compare against
 export function generatePreviewKey() {
   //the string we want to encode
-  const str = `-1_${process.env.AGILITY_CMS_SECURITY_KEY}_Preview`
+  const str = `-1_${process.env.AGILITY_CMS_SECURITY_KEY}_Preview`;
 
   //build our byte array
-  let data = []
+  let data = [];
   for (var i = 0; i < str.length; ++i) {
-    data.push(str.charCodeAt(i))
-    data.push(0)
+    data.push(str.charCodeAt(i));
+    data.push(0);
   }
 
   //convert byte array to buffer
-  const strBuffer = Buffer.from(data)
+  const strBuffer = Buffer.from(data);
   //encode it!
   const previewKey = crypto
-    .createHash('sha512')
+    .createHash("sha512")
     .update(strBuffer)
-    .digest('base64')
+    .digest("base64");
 
-  return previewKey
+  return previewKey;
 }
 
 //Checks that the requested page exists, if not return a 401
@@ -33,33 +33,33 @@ export async function validateSlugForPreview({ slug, contentID }) {
       error: false,
       message: null,
       slug: `/`,
-    }
+    };
   }
 
-  const client = getClient(true)
+  const client = getClient(true);
   //this is a standard page
   const sitemapFlat = await client.getSitemapFlat({
     channelName: CMS_CHANNEL,
     languageCode: CMS_LANG,
-  })
+  });
 
-  let sitemapNode = null
+  let sitemapNode = null;
 
   if (!contentID) {
     //For standard pages
-    sitemapNode = sitemapFlat[slug]
+    sitemapNode = sitemapFlat[slug];
   } else {
-    console.log(contentID)
+    console.log(contentID);
     //For dynamic pages - need to adjust the actual slug
     slug = Object.keys(sitemapFlat).find((key) => {
-      const node = sitemapFlat[key]
+      const node = sitemapFlat[key];
       if (node.contentID === contentID) {
-        return node
+        return node;
       }
-      return false
-    })
+      return false;
+    });
 
-    sitemapNode = sitemapFlat[slug]
+    sitemapNode = sitemapFlat[slug];
   }
 
   if (!sitemapNode) {
@@ -67,14 +67,14 @@ export async function validateSlugForPreview({ slug, contentID }) {
       error: true,
       message: `Invalid page. '${slug}' was not found in the sitemap. Are you trying to preview a Dynamic Page Item? If so, ensure you have your List Preview Page, Item Preview Page, and Item Preview Query String Parameter set (contentid) .`,
       slug: null,
-    }
+    };
   }
 
   return {
     error: false,
     message: null,
     slug: sitemapNode.path,
-  }
+  };
 }
 
 //Validates whether the incoming preview request is valid
@@ -84,30 +84,33 @@ export async function validatePreview({ agilityPreviewKey, slug, contentID }) {
     return {
       error: true,
       message: `Missing agilitypreviewkey.`,
-    }
+    };
   }
 
   //sanitize incoming key (replace spaces with '+')
   if (agilityPreviewKey.includes(` `)) {
-    agilityPreviewKey = agilityPreviewKey.split(` `).join(`+`)
+    agilityPreviewKey = agilityPreviewKey.split(` `).join(`+`);
   }
 
   //compare the preview key being used
-  const correctPreviewKey = generatePreviewKey()
+  const correctPreviewKey = generatePreviewKey();
 
   if (agilityPreviewKey !== correctPreviewKey) {
     return {
       error: true,
       message: `Invalid agilitypreviewkey.`,
       //message: `Invalid agilitypreviewkey. Incoming key is=${agilityPreviewKey} compared to=${correctPreviewKey}...`
-    }
+    };
   }
 
-  const validateSlugResponse = await validateSlugForPreview({ slug, contentID })
+  const validateSlugResponse = await validateSlugForPreview({
+    slug,
+    contentID,
+  });
 
   if (validateSlugResponse.error) {
     //kickout
-    return validateSlugResponse
+    return validateSlugResponse;
   }
 
   //return success
@@ -115,5 +118,5 @@ export async function validatePreview({ agilityPreviewKey, slug, contentID }) {
     error: false,
     message: null,
     slug: validateSlugResponse.slug,
-  }
+  };
 }
diff --git a/examples/cms-agilitycms/lib/use-preview-redirect.ts b/examples/cms-agilitycms/lib/use-preview-redirect.ts
index 1088b5d468..4dcca1f966 100644
--- a/examples/cms-agilitycms/lib/use-preview-redirect.ts
+++ b/examples/cms-agilitycms/lib/use-preview-redirect.ts
@@ -1,20 +1,20 @@
-import { useEffect } from 'react'
-import { useRouter } from 'next/router'
+import { useEffect } from "react";
+import { useRouter } from "next/router";
 
 export default function usePreviewRedirect() {
-  const router = useRouter()
-  const { agilitypreviewkey, contentid } = router.query
+  const router = useRouter();
+  const { agilitypreviewkey, contentid } = router.query;
 
   useEffect(() => {
     // kickout if we don't have an agilityPreviewKey
-    if (!agilitypreviewkey) return
+    if (!agilitypreviewkey) return;
 
     // redirect to our preview API route
-    let redirectLink = `/api/preview?slug=${window.location.pathname}&agilitypreviewkey=${agilitypreviewkey}`
+    let redirectLink = `/api/preview?slug=${window.location.pathname}&agilitypreviewkey=${agilitypreviewkey}`;
 
     // Check if we have a `contentid` in the query, if so this is a preview request for a Dynamic Page Item
-    if (contentid) redirectLink = `${redirectLink}&contentid=${contentid}`
+    if (contentid) redirectLink = `${redirectLink}&contentid=${contentid}`;
 
-    window.location.href = redirectLink
-  }, [agilitypreviewkey, contentid])
+    window.location.href = redirectLink;
+  }, [agilitypreviewkey, contentid]);
 }
diff --git a/examples/cms-agilitycms/lib/utils.ts b/examples/cms-agilitycms/lib/utils.ts
index 0d47e3ae90..f6351a1daf 100644
--- a/examples/cms-agilitycms/lib/utils.ts
+++ b/examples/cms-agilitycms/lib/utils.ts
@@ -1,14 +1,14 @@
 const asyncForEach = async (array, callback) => {
   for (let index = 0; index < array.length; index++) {
-    await callback(array[index], index, array)
+    await callback(array[index], index, array);
   }
-}
+};
 
 const convertPascalToKebabCase = (string) => {
   return string
-    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-    .replace(/([A-Z])([A-Z])(?=[a-z])/g, '$1-$2')
-    .toLowerCase()
-}
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replace(/([A-Z])([A-Z])(?=[a-z])/g, "$1-$2")
+    .toLowerCase();
+};
 
-export { asyncForEach, convertPascalToKebabCase }
+export { asyncForEach, convertPascalToKebabCase };
diff --git a/examples/cms-agilitycms/pages/[...slug].tsx b/examples/cms-agilitycms/pages/[...slug].tsx
index 24cca5fcc7..349b3d09ee 100644
--- a/examples/cms-agilitycms/pages/[...slug].tsx
+++ b/examples/cms-agilitycms/pages/[...slug].tsx
@@ -1,12 +1,12 @@
-import Head from 'next/head'
-import ErrorPage from 'next/error'
-import { useRouter } from 'next/router'
-import Layout from '../components/layout'
-import Container from '../components/container'
-import { CMS_NAME } from '../lib/constants'
-import { getAgilityPaths, getAgilityPageProps } from '../lib/api'
-import usePreviewRedirect from '../lib/use-preview-redirect'
-import CMSPageTemplate from '../lib/components/page-template'
+import Head from "next/head";
+import ErrorPage from "next/error";
+import { useRouter } from "next/router";
+import Layout from "../components/layout";
+import Container from "../components/container";
+import { CMS_NAME } from "../lib/constants";
+import { getAgilityPaths, getAgilityPageProps } from "../lib/api";
+import usePreviewRedirect from "../lib/use-preview-redirect";
+import CMSPageTemplate from "../lib/components/page-template";
 
 export default function Slug({
   sitemapNode,
@@ -16,11 +16,11 @@ export default function Slug({
   channelName,
   preview,
 }) {
-  usePreviewRedirect()
+  usePreviewRedirect();
 
-  const router = useRouter()
+  const router = useRouter();
   if (!router.isFallback && !page) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
 
   return (
@@ -45,14 +45,14 @@ export default function Slug({
         </Container>
       </Layout>
     </>
-  )
+  );
 }
 
 export async function getStaticProps({ params, preview = false }) {
-  const props = await getAgilityPageProps({ params, preview })
+  const props = await getAgilityPageProps({ params, preview });
 
   if (!props) {
-    return { props: {} }
+    return { props: {} };
   }
 
   return {
@@ -64,13 +64,13 @@ export async function getStaticProps({ params, preview = false }) {
       channelName: props.channelName,
       preview,
     },
-  }
+  };
 }
 
 export async function getStaticPaths() {
-  const paths = await getAgilityPaths()
+  const paths = await getAgilityPaths();
   return {
     paths: paths,
     fallback: true,
-  }
+  };
 }
diff --git a/examples/cms-agilitycms/pages/_app.tsx b/examples/cms-agilitycms/pages/_app.tsx
index bbd8269522..54750cbd0f 100644
--- a/examples/cms-agilitycms/pages/_app.tsx
+++ b/examples/cms-agilitycms/pages/_app.tsx
@@ -1,5 +1,5 @@
-import '../styles/index.css'
+import "../styles/index.css";
 
 export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/cms-agilitycms/pages/_document.tsx b/examples/cms-agilitycms/pages/_document.tsx
index 950169082c..93f2ce4a2f 100644
--- a/examples/cms-agilitycms/pages/_document.tsx
+++ b/examples/cms-agilitycms/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function MyDocument() {
   return (
@@ -9,5 +9,5 @@ export default function MyDocument() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/cms-agilitycms/pages/api/exit-preview.ts b/examples/cms-agilitycms/pages/api/exit-preview.ts
index e541916503..8ac64019d6 100644
--- a/examples/cms-agilitycms/pages/api/exit-preview.ts
+++ b/examples/cms-agilitycms/pages/api/exit-preview.ts
@@ -1,13 +1,13 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from "next";
 
 export default async function handler(
   _req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-agilitycms/pages/api/preview.ts b/examples/cms-agilitycms/pages/api/preview.ts
index 1502b4f344..be3bea1127 100644
--- a/examples/cms-agilitycms/pages/api/preview.ts
+++ b/examples/cms-agilitycms/pages/api/preview.ts
@@ -1,9 +1,9 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { validatePreview } from '../../lib/api'
+import type { NextApiRequest, NextApiResponse } from "next";
+import { validatePreview } from "../../lib/api";
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
   // Check the secret and next parameters
   // This secret should only be known to this API route and the CMS
@@ -13,19 +13,19 @@ export default async function handler(
     agilityPreviewKey: req.query.agilitypreviewkey,
     slug: req.query.slug,
     contentID: req.query.contentid,
-  })
+  });
 
   if (validationResp.error) {
-    return res.status(401).end(`${validationResp.message}`)
+    return res.status(401).end(`${validationResp.message}`);
   }
 
   // Enable Draft Mode by setting the cookie
-  res.setDraftMode({ enable: true })
+  res.setDraftMode({ enable: true });
 
   // Redirect to the slug
-  if (!('slug' in validationResp)) {
-    throw new Error('invariant missing slug in validation response')
+  if (!("slug" in validationResp)) {
+    throw new Error("invariant missing slug in validation response");
   }
-  res.writeHead(307, { Location: validationResp.slug })
-  res.end()
+  res.writeHead(307, { Location: validationResp.slug });
+  res.end();
 }
diff --git a/examples/cms-agilitycms/pages/index.ts b/examples/cms-agilitycms/pages/index.ts
index b4526473bc..ef43b38359 100644
--- a/examples/cms-agilitycms/pages/index.ts
+++ b/examples/cms-agilitycms/pages/index.ts
@@ -1,5 +1,5 @@
-import Page, { getStaticProps } from './[...slug]'
+import Page, { getStaticProps } from "./[...slug]";
 
-export default Page
+export default Page;
 
-export { getStaticProps }
+export { getStaticProps };
diff --git a/examples/cms-agilitycms/postcss.config.js b/examples/cms-agilitycms/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-agilitycms/postcss.config.js
+++ b/examples/cms-agilitycms/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-agilitycms/tailwind.config.js b/examples/cms-agilitycms/tailwind.config.js
index ea0efae6d7..a8f65a525d 100644
--- a/examples/cms-agilitycms/tailwind.config.js
+++ b/examples/cms-agilitycms/tailwind.config.js
@@ -1,38 +1,38 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/cms-builder-io/components/alert.js b/examples/cms-builder-io/components/alert.js
index 2994d59fbd..5ee5cde79a 100644
--- a/examples/cms-builder-io/components/alert.js
+++ b/examples/cms-builder-io/components/alert.js
@@ -1,31 +1,31 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Alert({ preview }) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This is page is a preview.{' '}
+              This is page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -38,5 +38,5 @@ export default function Alert({ preview }) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-builder-io/components/avatar.js b/examples/cms-builder-io/components/avatar.js
index 635f3f9091..528c5e6635 100644
--- a/examples/cms-builder-io/components/avatar.js
+++ b/examples/cms-builder-io/components/avatar.js
@@ -1,4 +1,4 @@
-import BuilderImage from './builder-image'
+import BuilderImage from "./builder-image";
 
 export default function Avatar({ name, picture }) {
   return (
@@ -13,5 +13,5 @@ export default function Avatar({ name, picture }) {
       </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-builder-io/components/builder-image.js b/examples/cms-builder-io/components/builder-image.js
index 89d38ff150..1c7870a596 100644
--- a/examples/cms-builder-io/components/builder-image.js
+++ b/examples/cms-builder-io/components/builder-image.js
@@ -1,11 +1,11 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 const builderLoader = ({ src, width, quality }) => {
-  return `${src}?width=${width}&quality=${quality || 75}`
-}
+  return `${src}?width=${width}&quality=${quality || 75}`;
+};
 
 const BuilderImage = (props) => {
-  return <Image loader={builderLoader} {...props} />
-}
+  return <Image loader={builderLoader} {...props} />;
+};
 
-export default BuilderImage
+export default BuilderImage;
diff --git a/examples/cms-builder-io/components/container.js b/examples/cms-builder-io/components/container.js
index fc1c29dfb0..92e559ece3 100644
--- a/examples/cms-builder-io/components/container.js
+++ b/examples/cms-builder-io/components/container.js
@@ -1,3 +1,3 @@
 export default function Container({ children }) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }
diff --git a/examples/cms-builder-io/components/cover-image.js b/examples/cms-builder-io/components/cover-image.js
index 7ab6d84193..e9f993e4b2 100644
--- a/examples/cms-builder-io/components/cover-image.js
+++ b/examples/cms-builder-io/components/cover-image.js
@@ -1,6 +1,6 @@
-import BuilderImage from './builder-image'
-import Link from 'next/link'
-import cn from 'classnames'
+import BuilderImage from "./builder-image";
+import Link from "next/link";
+import cn from "classnames";
 
 export default function CoverImage({ title, url, slug }) {
   const image = (
@@ -8,12 +8,12 @@ export default function CoverImage({ title, url, slug }) {
       width={2000}
       height={1000}
       alt={`Cover Image for ${title}`}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": slug,
       })}
       src={url}
     />
-  )
+  );
 
   return (
     <div className="sm:mx-0">
@@ -25,5 +25,5 @@ export default function CoverImage({ title, url, slug }) {
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-builder-io/components/date.js b/examples/cms-builder-io/components/date.js
index 4fd5b35f56..751a16f0a1 100644
--- a/examples/cms-builder-io/components/date.js
+++ b/examples/cms-builder-io/components/date.js
@@ -1,9 +1,9 @@
-import { format } from 'date-fns'
+import { format } from "date-fns";
 
 export default function DateComponent({ dateString }) {
   return (
     <time dateTime={new Date(dateString)}>
-      {format(new Date(dateString), 'LLLL	d, yyyy')}
+      {format(new Date(dateString), "LLLL	d, yyyy")}
     </time>
-  )
+  );
 }
diff --git a/examples/cms-builder-io/components/footer.js b/examples/cms-builder-io/components/footer.js
index da9eed88ec..81422c7c6b 100644
--- a/examples/cms-builder-io/components/footer.js
+++ b/examples/cms-builder-io/components/footer.js
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Footer() {
   return (
@@ -26,5 +26,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-builder-io/components/header.js b/examples/cms-builder-io/components/header.js
index 05cb9af247..e6dea52099 100644
--- a/examples/cms-builder-io/components/header.js
+++ b/examples/cms-builder-io/components/header.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-builder-io/components/hero-post.js b/examples/cms-builder-io/components/hero-post.js
index ef4a855eef..b8aa551ee8 100644
--- a/examples/cms-builder-io/components/hero-post.js
+++ b/examples/cms-builder-io/components/hero-post.js
@@ -1,7 +1,7 @@
-import Link from 'next/link'
-import Avatar from '../components/avatar'
-import DateComponent from '../components/date'
-import CoverImage from '../components/cover-image'
+import Link from "next/link";
+import Avatar from "../components/avatar";
+import DateComponent from "../components/date";
+import CoverImage from "../components/cover-image";
 
 export default function HeroPost({
   title,
@@ -33,5 +33,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-builder-io/components/intro.js b/examples/cms-builder-io/components/intro.js
index 5931b3c596..e8578bef66 100644
--- a/examples/cms-builder-io/components/intro.js
+++ b/examples/cms-builder-io/components/intro.js
@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '../lib/constants'
+import { CMS_NAME, CMS_URL } from "../lib/constants";
 
 export default function Intro() {
   return (
@@ -7,14 +7,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -24,5 +24,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-builder-io/components/layout.js b/examples/cms-builder-io/components/layout.js
index 99d9535313..a2e161c793 100644
--- a/examples/cms-builder-io/components/layout.js
+++ b/examples/cms-builder-io/components/layout.js
@@ -1,6 +1,6 @@
-import Alert from '../components/alert'
-import Footer from '../components/footer'
-import Meta from '../components/meta'
+import Alert from "../components/alert";
+import Footer from "../components/footer";
+import Meta from "../components/meta";
 
 export default function Layout({ preview, children }) {
   return (
@@ -12,5 +12,5 @@ export default function Layout({ preview, children }) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-builder-io/components/meta.js b/examples/cms-builder-io/components/meta.js
index d9c48d5831..a95395d8b9 100644
--- a/examples/cms-builder-io/components/meta.js
+++ b/examples/cms-builder-io/components/meta.js
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "../lib/constants";
 
 export default function Meta() {
   return (
@@ -38,5 +38,5 @@ export default function Meta() {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-builder-io/components/more-stories.js b/examples/cms-builder-io/components/more-stories.js
index 45714977fe..649b0b2e41 100644
--- a/examples/cms-builder-io/components/more-stories.js
+++ b/examples/cms-builder-io/components/more-stories.js
@@ -1,4 +1,4 @@
-import PostPreview from './post-preview'
+import PostPreview from "./post-preview";
 
 export default function MoreStories({ posts }) {
   return (
@@ -20,5 +20,5 @@ export default function MoreStories({ posts }) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-builder-io/components/post-body.js b/examples/cms-builder-io/components/post-body.js
index 7a704e2559..5cf6d22559 100644
--- a/examples/cms-builder-io/components/post-body.js
+++ b/examples/cms-builder-io/components/post-body.js
@@ -1,5 +1,5 @@
-import { BUILDER_CONFIG } from '@/lib/constants'
-import { BuilderComponent } from '@builder.io/react'
+import { BUILDER_CONFIG } from "@/lib/constants";
+import { BuilderComponent } from "@builder.io/react";
 export default function PostBody({ content }) {
   return (
     <div className="max-w-2xl mx-auto">
@@ -9,5 +9,5 @@ export default function PostBody({ content }) {
         content={content}
       />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-builder-io/components/post-header.js b/examples/cms-builder-io/components/post-header.js
index 46562af1a4..de8e6f176b 100644
--- a/examples/cms-builder-io/components/post-header.js
+++ b/examples/cms-builder-io/components/post-header.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import DateComponent from '../components/date'
-import CoverImage from '../components/cover-image'
-import PostTitle from '../components/post-title'
+import Avatar from "../components/avatar";
+import DateComponent from "../components/date";
+import CoverImage from "../components/cover-image";
+import PostTitle from "../components/post-title";
 
 export default function PostHeader({ title, coverImage, date, author }) {
   return (
@@ -22,5 +22,5 @@ export default function PostHeader({ title, coverImage, date, author }) {
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-builder-io/components/post-preview.js b/examples/cms-builder-io/components/post-preview.js
index 877d1b9408..3d2e7434fe 100644
--- a/examples/cms-builder-io/components/post-preview.js
+++ b/examples/cms-builder-io/components/post-preview.js
@@ -1,7 +1,7 @@
-import Link from 'next/link'
-import Avatar from '../components/avatar'
-import DateComponent from '../components/date'
-import CoverImage from './cover-image'
+import Link from "next/link";
+import Avatar from "../components/avatar";
+import DateComponent from "../components/date";
+import CoverImage from "./cover-image";
 
 export default function PostPreview({
   title,
@@ -27,5 +27,5 @@ export default function PostPreview({
       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
       {author && <Avatar name={author.name} picture={author.image} />}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-builder-io/components/post-title.js b/examples/cms-builder-io/components/post-title.js
index edd8cba65c..a15f06616f 100644
--- a/examples/cms-builder-io/components/post-title.js
+++ b/examples/cms-builder-io/components/post-title.js
@@ -3,5 +3,5 @@ export default function PostTitle({ children }) {
     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
-  )
+  );
 }
diff --git a/examples/cms-builder-io/components/section-separator.js b/examples/cms-builder-io/components/section-separator.js
index 4ca5c65fdc..b86fb50b7d 100644
--- a/examples/cms-builder-io/components/section-separator.js
+++ b/examples/cms-builder-io/components/section-separator.js
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }
diff --git a/examples/cms-builder-io/lib/api.js b/examples/cms-builder-io/lib/api.js
index 14b287ab1f..7469065afd 100644
--- a/examples/cms-builder-io/lib/api.js
+++ b/examples/cms-builder-io/lib/api.js
@@ -1,22 +1,22 @@
-import { Builder, builder } from '@builder.io/react'
-import { BUILDER_CONFIG } from './constants'
+import { Builder, builder } from "@builder.io/react";
+import { BUILDER_CONFIG } from "./constants";
 
-builder.init(BUILDER_CONFIG.apiKey)
-Builder.isStatic = true
+builder.init(BUILDER_CONFIG.apiKey);
+Builder.isStatic = true;
 
 export function getAllPostsWithSlug() {
   return builder.getAll(BUILDER_CONFIG.postsModel, {
     options: { noTargeting: true },
     apiKey: BUILDER_CONFIG.apiKey,
-  })
+  });
 }
 
 export function getDraftPost(id) {
   return fetch(
-    `https://builder.io/api/v2/content/${BUILDER_CONFIG.postsModel}/${id}?apiKey=${BUILDER_CONFIG.apiKey}&preview=true&noCache=true&cachebust=tru&includeRefs=true`
+    `https://builder.io/api/v2/content/${BUILDER_CONFIG.postsModel}/${id}?apiKey=${BUILDER_CONFIG.apiKey}&preview=true&noCache=true&cachebust=tru&includeRefs=true`,
   )
     .then((res) => res.json())
-    .then((res) => res || null)
+    .then((res) => res || null);
 }
 
 export async function searchPosts(query, preview, limit = 20, offset = 0) {
@@ -32,20 +32,20 @@ export async function searchPosts(query, preview, limit = 20, offset = 0) {
       noTargeting: true,
     },
     query,
-  })
+  });
 
   if (preview) {
-    posts = await Promise.all(posts.map((post) => getDraftPost(post.id)))
+    posts = await Promise.all(posts.map((post) => getDraftPost(post.id)));
   }
 
-  return posts
+  return posts;
 }
 
 export function getAllPostsForHome(preview) {
   return searchPosts(
-    { 'data.slug': { $exists: true }, 'data.author': { $exists: true } },
-    preview
-  )
+    { "data.slug": { $exists: true }, "data.author": { $exists: true } },
+    preview,
+  );
 }
 
 export async function getPost(mongoQuery, preview) {
@@ -62,9 +62,9 @@ export async function getPost(mongoQuery, preview) {
           },
           query: mongoQuery,
         })
-        .toPromise()
+        .toPromise();
 
-  return post || null
+  return post || null;
 }
 
 export async function getPostAndMorePosts(slug, preview, previewData) {
@@ -73,22 +73,22 @@ export async function getPostAndMorePosts(slug, preview, previewData) {
       ? await getDraftPost(previewData.postDraftId)
       : await getPost(
           {
-            'data.slug': { $eq: slug },
+            "data.slug": { $eq: slug },
           },
-          preview
-        )
+          preview,
+        );
 
   const morePosts = await searchPosts(
     {
-      'data.slug': { $ne: slug, $exists: true },
-      'data.author': { $exists: true },
+      "data.slug": { $ne: slug, $exists: true },
+      "data.author": { $exists: true },
     },
     preview,
-    2
-  )
+    2,
+  );
 
   return {
     post,
     morePosts,
-  }
+  };
 }
diff --git a/examples/cms-builder-io/lib/constants.js b/examples/cms-builder-io/lib/constants.js
index ab533b7f34..d7b11e9d21 100644
--- a/examples/cms-builder-io/lib/constants.js
+++ b/examples/cms-builder-io/lib/constants.js
@@ -1,10 +1,10 @@
-export const EXAMPLE_PATH = 'cms-builder-io'
-export const CMS_NAME = 'Builder.io'
-export const CMS_URL = 'https://builder.io/'
+export const EXAMPLE_PATH = "cms-builder-io";
+export const CMS_NAME = "Builder.io";
+export const CMS_URL = "https://builder.io/";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20example%20with%20**Builder.io**.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fcdn.builder.io%2Fapi%2Fv1%2Fimage%2Fassets%252FYJIGb4i01jvw0SRdL5Bt%252F79c8b61740bc41d5ae722c000ddb5915'
+  "https://og-image.vercel.app/Next.js%20Blog%20example%20with%20**Builder.io**.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fcdn.builder.io%2Fapi%2Fv1%2Fimage%2Fassets%252FYJIGb4i01jvw0SRdL5Bt%252F79c8b61740bc41d5ae722c000ddb5915";
 export const BUILDER_CONFIG = {
   apiKey: process.env.NEXT_PUBLIC_BUILDER_API_KEY,
-  postsModel: 'post',
-  previewSecret: 'micky-mouse',
-}
+  postsModel: "post",
+  previewSecret: "micky-mouse",
+};
diff --git a/examples/cms-builder-io/next.config.js b/examples/cms-builder-io/next.config.js
index 4b85878bba..4db72266b6 100644
--- a/examples/cms-builder-io/next.config.js
+++ b/examples/cms-builder-io/next.config.js
@@ -3,25 +3,25 @@ module.exports = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'cdn.builder.io',
-        port: '',
-        pathname: '/my-account/**',
+        protocol: "https",
+        hostname: "cdn.builder.io",
+        port: "",
+        pathname: "/my-account/**",
       },
     ],
   },
   async headers() {
     return [
       {
-        source: '/:path*',
+        source: "/:path*",
         headers: [
           {
-            key: 'Content-Security-Policy',
+            key: "Content-Security-Policy",
             value:
-              'frame-ancestors https://*.builder.io https://builder.io http://localhost:1234',
+              "frame-ancestors https://*.builder.io https://builder.io http://localhost:1234",
           },
         ],
       },
-    ]
+    ];
   },
-}
+};
diff --git a/examples/cms-builder-io/pages/_app.js b/examples/cms-builder-io/pages/_app.js
index f18e112c7c..a82d9dd7b0 100644
--- a/examples/cms-builder-io/pages/_app.js
+++ b/examples/cms-builder-io/pages/_app.js
@@ -1,7 +1,7 @@
-import '@/styles/index.css'
+import "@/styles/index.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-builder-io/pages/api/exit-preview.js b/examples/cms-builder-io/pages/api/exit-preview.js
index a63a171ba4..16b744e88e 100644
--- a/examples/cms-builder-io/pages/api/exit-preview.js
+++ b/examples/cms-builder-io/pages/api/exit-preview.js
@@ -1,8 +1,8 @@
 export default async function exit(_, res) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-builder-io/pages/api/preview.js b/examples/cms-builder-io/pages/api/preview.js
index 6ce4ed0b29..1a63dec214 100644
--- a/examples/cms-builder-io/pages/api/preview.js
+++ b/examples/cms-builder-io/pages/api/preview.js
@@ -1,30 +1,30 @@
-import { getDraftPost } from '@/lib/api'
-import { BUILDER_CONFIG } from '@/lib/constants'
-import querystring from 'querystring'
+import { getDraftPost } from "@/lib/api";
+import { BUILDER_CONFIG } from "@/lib/constants";
+import querystring from "querystring";
 
 export default async function preview(req, res) {
-  const postId = req.query[`builder.overrides.${BUILDER_CONFIG.postsModel}`]
+  const postId = req.query[`builder.overrides.${BUILDER_CONFIG.postsModel}`];
   if (req.query.secret !== BUILDER_CONFIG.previewSecret || !postId) {
-    return res.status(401).json({ message: 'Invalid request' })
+    return res.status(401).json({ message: "Invalid request" });
   }
 
   // Check if the post with the given `slug` exists
-  const post = await getDraftPost(postId)
+  const post = await getDraftPost(postId);
 
   // If the slug doesn't exist prevent preview mode from being enabled
   if (!post) {
-    return res.status(401).json({ message: 'Invalid post' })
+    return res.status(401).json({ message: "Invalid post" });
   }
 
   // Enable Preview Mode by setting the cookies
   res.setPreviewData({
     postDraftId: postId,
-  })
+  });
 
   // Redirect to the path from the fetched post
   // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
   res.writeHead(307, {
     Location: `/posts/${post.data.slug}?${querystring.stringify(req.query)}`,
-  })
-  res.end()
+  });
+  res.end();
 }
diff --git a/examples/cms-builder-io/pages/index.js b/examples/cms-builder-io/pages/index.js
index daaed1a1d2..d3042ba897 100644
--- a/examples/cms-builder-io/pages/index.js
+++ b/examples/cms-builder-io/pages/index.js
@@ -1,15 +1,15 @@
-import Container from '@/components/container'
-import MoreStories from '@/components/more-stories'
-import HeroPost from '@/components/hero-post'
-import Intro from '@/components/intro'
-import Layout from '@/components/layout'
-import { getAllPostsForHome } from '@/lib/api'
-import Head from 'next/head'
-import { CMS_NAME } from '@/lib/constants'
+import Container from "@/components/container";
+import MoreStories from "@/components/more-stories";
+import HeroPost from "@/components/hero-post";
+import Intro from "@/components/intro";
+import Layout from "@/components/layout";
+import { getAllPostsForHome } from "@/lib/api";
+import Head from "next/head";
+import { CMS_NAME } from "@/lib/constants";
 
 export default function Index({ allPosts, preview }) {
-  const heroPost = allPosts[0]
-  const morePosts = allPosts.slice(1)
+  const heroPost = allPosts[0];
+  const morePosts = allPosts.slice(1);
   return (
     <>
       <Layout preview={preview}>
@@ -32,13 +32,13 @@ export default function Index({ allPosts, preview }) {
         </Container>
       </Layout>
     </>
-  )
+  );
 }
 
 export async function getStaticProps({ preview = null }) {
-  const allPosts = (await getAllPostsForHome(preview)) || []
+  const allPosts = (await getAllPostsForHome(preview)) || [];
   return {
     props: { allPosts, preview },
     revalidate: 20,
-  }
+  };
 }
diff --git a/examples/cms-builder-io/pages/posts/[slug].js b/examples/cms-builder-io/pages/posts/[slug].js
index 5b05b7c947..c80518a20b 100644
--- a/examples/cms-builder-io/pages/posts/[slug].js
+++ b/examples/cms-builder-io/pages/posts/[slug].js
@@ -1,27 +1,27 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import Container from '@/components/container'
-import PostBody from '@/components/post-body'
-import MoreStories from '@/components/more-stories'
-import Header from '@/components/header'
-import PostHeader from '@/components/post-header'
-import SectionSeparator from '@/components/section-separator'
-import Layout from '@/components/layout'
-import { getAllPostsWithSlug, getPostAndMorePosts } from '@/lib/api'
-import PostTitle from '@/components/post-title'
-import Head from 'next/head'
-import { CMS_NAME, BUILDER_CONFIG } from '@/lib/constants'
-import { Builder, builder, BuilderContent } from '@builder.io/react'
-import '@builder.io/widgets'
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Container from "@/components/container";
+import PostBody from "@/components/post-body";
+import MoreStories from "@/components/more-stories";
+import Header from "@/components/header";
+import PostHeader from "@/components/post-header";
+import SectionSeparator from "@/components/section-separator";
+import Layout from "@/components/layout";
+import { getAllPostsWithSlug, getPostAndMorePosts } from "@/lib/api";
+import PostTitle from "@/components/post-title";
+import Head from "next/head";
+import { CMS_NAME, BUILDER_CONFIG } from "@/lib/constants";
+import { Builder, builder, BuilderContent } from "@builder.io/react";
+import "@builder.io/widgets";
 
-builder.init(BUILDER_CONFIG.apiKey)
-Builder.isStatic = true
+builder.init(BUILDER_CONFIG.apiKey);
+Builder.isStatic = true;
 
 export default function Post({ post, morePosts, preview }) {
-  const router = useRouter()
-  const isLive = !Builder.isEditing && !Builder.isPreviewing && !preview
+  const router = useRouter();
+  const isLive = !Builder.isEditing && !Builder.isPreviewing && !preview;
   if (!router.isFallback && !post && isLive) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
   return (
     <Layout preview={preview}>
@@ -65,15 +65,15 @@ export default function Post({ post, morePosts, preview }) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps({ params, preview = false, previewData }) {
   let { post, morePosts } = await getPostAndMorePosts(
     params.slug,
     preview,
-    previewData
-  )
+    previewData,
+  );
 
   return {
     props: {
@@ -82,13 +82,13 @@ export async function getStaticProps({ params, preview = false, previewData }) {
       post,
       morePosts,
     },
-  }
+  };
 }
 
 export async function getStaticPaths() {
-  const allPosts = await getAllPostsWithSlug()
+  const allPosts = await getAllPostsWithSlug();
   return {
     paths: allPosts?.map((post) => `/posts/${post.data.slug}`) || [],
     fallback: true,
-  }
+  };
 }
diff --git a/examples/cms-builder-io/postcss.config.js b/examples/cms-builder-io/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-builder-io/postcss.config.js
+++ b/examples/cms-builder-io/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-builder-io/tailwind.config.js b/examples/cms-builder-io/tailwind.config.js
index 572cfc26ee..9cccf9a04d 100644
--- a/examples/cms-builder-io/tailwind.config.js
+++ b/examples/cms-builder-io/tailwind.config.js
@@ -1,37 +1,37 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./components/**/*.js', './pages/**/*.js'],
+  content: ["./components/**/*.js", "./pages/**/*.js"],
   theme: {
     extend: {
       fontFamily: {
         sans: '-apple-system, "Helvetica Neue", "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
       },
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
-}
+};
diff --git a/examples/cms-buttercms/components/author-card.js b/examples/cms-buttercms/components/author-card.js
index da25b5e222..0ea47f8244 100644
--- a/examples/cms-buttercms/components/author-card.js
+++ b/examples/cms-buttercms/components/author-card.js
@@ -3,5 +3,5 @@ export default function AuthorCard({ author }) {
     <a>
       {author.first_name} {author.last_name}
     </a>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/blog/blog.js b/examples/cms-buttercms/components/blog/blog.js
index cd1f7a7795..95ba7daee5 100644
--- a/examples/cms-buttercms/components/blog/blog.js
+++ b/examples/cms-buttercms/components/blog/blog.js
@@ -1,6 +1,6 @@
-import Link from 'next/link'
+import Link from "next/link";
 
-import PostPreviewCondensed from './post-preview-condensed'
+import PostPreviewCondensed from "./post-preview-condensed";
 
 export default function Blog({ posts }) {
   return (
@@ -38,5 +38,5 @@ export default function Blog({ posts }) {
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/blog/categories-widget.js b/examples/cms-buttercms/components/blog/categories-widget.js
index f1c7f0f2a3..39d1aca04b 100644
--- a/examples/cms-buttercms/components/blog/categories-widget.js
+++ b/examples/cms-buttercms/components/blog/categories-widget.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function CategoriesWidget({ categories }) {
   return (
@@ -14,5 +14,5 @@ export default function CategoriesWidget({ categories }) {
         ))}
       </ul>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/blog/post-preview-condensed.js b/examples/cms-buttercms/components/blog/post-preview-condensed.js
index e0bdf1fad6..83748ead3a 100644
--- a/examples/cms-buttercms/components/blog/post-preview-condensed.js
+++ b/examples/cms-buttercms/components/blog/post-preview-condensed.js
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import Image from 'next/image'
+import Link from "next/link";
+import Image from "next/image";
 
 export default function PostPreviewCondensed({
   title,
@@ -34,5 +34,5 @@ export default function PostPreviewCondensed({
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/blog/post-preview.js b/examples/cms-buttercms/components/blog/post-preview.js
index 2c34be86f2..0794978f59 100644
--- a/examples/cms-buttercms/components/blog/post-preview.js
+++ b/examples/cms-buttercms/components/blog/post-preview.js
@@ -1,8 +1,8 @@
-import Image from 'next/image'
-import Link from 'next/link'
+import Image from "next/image";
+import Link from "next/link";
 
-import HumanDate from '@/components/human-date'
-import AuthorCard from '@/components/author-card'
+import HumanDate from "@/components/human-date";
+import AuthorCard from "@/components/author-card";
 
 export default function PostsPreview({
   title,
@@ -26,7 +26,7 @@ export default function PostsPreview({
               <AuthorCard author={author} />
             </li>
             <li>
-              <i className="lni lni-calendar"></i>{' '}
+              <i className="lni lni-calendar"></i>{" "}
               <HumanDate dateString={date} />
             </li>
             {tags.map((tag) => (
@@ -59,5 +59,5 @@ export default function PostsPreview({
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/blog/posts-list.js b/examples/cms-buttercms/components/blog/posts-list.js
index 59a8245ba3..67fe942d73 100644
--- a/examples/cms-buttercms/components/blog/posts-list.js
+++ b/examples/cms-buttercms/components/blog/posts-list.js
@@ -1,4 +1,4 @@
-import PostsPreview from './post-preview'
+import PostsPreview from "./post-preview";
 
 export default function PostsList({ posts }) {
   return (
@@ -20,5 +20,5 @@ export default function PostsList({ posts }) {
         {!posts.length && <div>No blog posts found.</div>}
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/blog/search-widget.js b/examples/cms-buttercms/components/blog/search-widget.js
index da498214b2..28d1e45a89 100644
--- a/examples/cms-buttercms/components/blog/search-widget.js
+++ b/examples/cms-buttercms/components/blog/search-widget.js
@@ -11,5 +11,5 @@ export default function SearchWidget() {
         </form>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/footer-section.js b/examples/cms-buttercms/components/footer-section.js
index e421538f0b..bae913978b 100644
--- a/examples/cms-buttercms/components/footer-section.js
+++ b/examples/cms-buttercms/components/footer-section.js
@@ -1,10 +1,10 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function FooterSection({ mainMenu }) {
   const links = mainMenu.map((link) => ({
     ...link,
-    url: link.url[0] === '#' ? `/${link.url}` : link.url,
-  }))
+    url: link.url[0] === "#" ? `/${link.url}` : link.url,
+  }));
 
   return (
     <footer className="footer pt-120">
@@ -74,5 +74,5 @@ export default function FooterSection({ mainMenu }) {
         </div>
       </div>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/header-section.js b/examples/cms-buttercms/components/header-section.js
index 1a88a8b4e1..c3273fa89a 100644
--- a/examples/cms-buttercms/components/header-section.js
+++ b/examples/cms-buttercms/components/header-section.js
@@ -1,32 +1,32 @@
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef } from "react";
 
-import Image from 'next/image'
+import Image from "next/image";
 
-import MainMenu from './main-menu/main-menu'
+import MainMenu from "./main-menu/main-menu";
 
 export default function HeaderSection({ mainMenu }) {
-  const [isNavbarSticky, setIsNavbarSticky] = useState(false)
-  const navbarAreaEl = useRef(null)
+  const [isNavbarSticky, setIsNavbarSticky] = useState(false);
+  const navbarAreaEl = useRef(null);
 
   function fixNavBar() {
     if (navbarAreaEl.current) {
-      setIsNavbarSticky(window.pageYOffset > navbarAreaEl.current.offsetTop)
+      setIsNavbarSticky(window.pageYOffset > navbarAreaEl.current.offsetTop);
     }
   }
 
   useEffect(() => {
-    window.addEventListener('scroll', fixNavBar)
+    window.addEventListener("scroll", fixNavBar);
 
     return () => {
-      window.removeEventListener('scroll', fixNavBar)
-    }
-  }, [])
+      window.removeEventListener("scroll", fixNavBar);
+    };
+  }, []);
 
   return (
     <header className="header">
       <div
         ref={navbarAreaEl}
-        className={`navbar-area ${isNavbarSticky ? 'sticky' : ''}`}
+        className={`navbar-area ${isNavbarSticky ? "sticky" : ""}`}
       >
         <div className="container">
           <div className="row align-items-center">
@@ -47,5 +47,5 @@ export default function HeaderSection({ mainMenu }) {
         </div>
       </div>
     </header>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/human-date.js b/examples/cms-buttercms/components/human-date.js
index 59a52989ad..166386ade9 100644
--- a/examples/cms-buttercms/components/human-date.js
+++ b/examples/cms-buttercms/components/human-date.js
@@ -1,6 +1,6 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
 export default function HumanDate({ dateString }) {
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'MMM	d, yyyy')}</time>
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "MMM	d, yyyy")}</time>;
 }
diff --git a/examples/cms-buttercms/components/landing-page-sections/feature.js b/examples/cms-buttercms/components/landing-page-sections/feature.js
index 68ce10e56d..ecafcb39d1 100644
--- a/examples/cms-buttercms/components/landing-page-sections/feature.js
+++ b/examples/cms-buttercms/components/landing-page-sections/feature.js
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Feature({ headline, description, icon }) {
   return (
@@ -13,5 +13,5 @@ export default function Feature({ headline, description, icon }) {
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/landing-page-sections/features.js b/examples/cms-buttercms/components/landing-page-sections/features.js
index fa70e7f052..9c41cfcabe 100644
--- a/examples/cms-buttercms/components/landing-page-sections/features.js
+++ b/examples/cms-buttercms/components/landing-page-sections/features.js
@@ -1,4 +1,4 @@
-import Feature from './feature'
+import Feature from "./feature";
 
 export default function Features({
   headline,
@@ -32,5 +32,5 @@ export default function Features({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/landing-page-sections/hero.js b/examples/cms-buttercms/components/landing-page-sections/hero.js
index f9d267be2e..0f61d5801c 100644
--- a/examples/cms-buttercms/components/landing-page-sections/hero.js
+++ b/examples/cms-buttercms/components/landing-page-sections/hero.js
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Hero({
   headline,
@@ -39,5 +39,5 @@ export default function Hero({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/landing-page-sections/landing-page-section.js b/examples/cms-buttercms/components/landing-page-sections/landing-page-section.js
index fa9ed57208..a923d27f6e 100644
--- a/examples/cms-buttercms/components/landing-page-sections/landing-page-section.js
+++ b/examples/cms-buttercms/components/landing-page-sections/landing-page-section.js
@@ -1,50 +1,50 @@
-import dynamic from 'next/dynamic'
+import dynamic from "next/dynamic";
 
-import camelcaseKeys from 'camelcase-keys'
+import camelcaseKeys from "camelcase-keys";
 
-import Preloader from '@/components/preloader'
-import MissingSection from './missing-section'
+import Preloader from "@/components/preloader";
+import MissingSection from "./missing-section";
 
 export default function LandingPageSection({ type, sectionData }) {
   const sectionsComponentPaths = () => ({
     hero: dynamic(
       () =>
-        import('@/components/landing-page-sections/hero').catch(
-          () => () => MissingSection
+        import("@/components/landing-page-sections/hero").catch(
+          () => () => MissingSection,
         ),
       {
         loading: Preloader,
-      }
+      },
     ),
     two_column_with_image: dynamic(
       () =>
         import(
-          '@/components/landing-page-sections/two-column-with-image'
+          "@/components/landing-page-sections/two-column-with-image"
         ).catch(() => () => MissingSection),
       {
         loading: Preloader,
-      }
+      },
     ),
     features: dynamic(
       () =>
-        import('@/components/landing-page-sections/features').catch(
-          () => () => MissingSection
+        import("@/components/landing-page-sections/features").catch(
+          () => () => MissingSection,
         ),
       {
         loading: Preloader,
-      }
+      },
     ),
     testimonials: dynamic(
       () =>
-        import('@/components/landing-page-sections/testimonials').catch(
-          () => () => MissingSection
+        import("@/components/landing-page-sections/testimonials").catch(
+          () => () => MissingSection,
         ),
       {
         loading: Preloader,
-      }
+      },
     ),
-  })
-  const SectionComponent = sectionsComponentPaths()[type] || MissingSection
+  });
+  const SectionComponent = sectionsComponentPaths()[type] || MissingSection;
 
-  return <SectionComponent type={type} {...camelcaseKeys(sectionData)} />
+  return <SectionComponent type={type} {...camelcaseKeys(sectionData)} />;
 }
diff --git a/examples/cms-buttercms/components/landing-page-sections/missing-section.js b/examples/cms-buttercms/components/landing-page-sections/missing-section.js
index 0feed8dd83..9baae0862f 100644
--- a/examples/cms-buttercms/components/landing-page-sections/missing-section.js
+++ b/examples/cms-buttercms/components/landing-page-sections/missing-section.js
@@ -1,10 +1,10 @@
 export default function MissingSection({ type, ...sectionData }) {
-  console.log(`Missing section ${type} data ${sectionData}`)
+  console.log(`Missing section ${type} data ${sectionData}`);
 
   return (
     <div>
       <h3>Missing a template for {type}</h3>
       <p>Check console for component details</p>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/landing-page-sections/testimonial.js b/examples/cms-buttercms/components/landing-page-sections/testimonial.js
index 602551243f..38f66195eb 100644
--- a/examples/cms-buttercms/components/landing-page-sections/testimonial.js
+++ b/examples/cms-buttercms/components/landing-page-sections/testimonial.js
@@ -12,5 +12,5 @@ export default function Testimonial({ quote, name, title }) {
         <p>{title}</p>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/landing-page-sections/testimonials.js b/examples/cms-buttercms/components/landing-page-sections/testimonials.js
index fe163ae7cb..4878bdcbb8 100644
--- a/examples/cms-buttercms/components/landing-page-sections/testimonials.js
+++ b/examples/cms-buttercms/components/landing-page-sections/testimonials.js
@@ -1,8 +1,8 @@
-import { useEffect } from 'react'
+import { useEffect } from "react";
 
-import { tns } from 'tiny-slider'
+import { tns } from "tiny-slider";
 
-import Testimonial from './testimonial'
+import Testimonial from "./testimonial";
 
 export default function Testimonials({
   headline,
@@ -11,22 +11,22 @@ export default function Testimonials({
 }) {
   useEffect(() => {
     tns({
-      container: '.testimonial-active',
+      container: ".testimonial-active",
       autoplay: true,
       autoplayTimeout: 5000,
       autoplayButtonOutput: false,
       mouseDrag: true,
       gutter: 0,
       nav: false,
-      navPosition: 'bottom',
+      navPosition: "bottom",
       controls: true,
       controlsText: [
         '<i class="lni lni-chevron-left"></i>',
         '<i class="lni lni-chevron-right"></i>',
       ],
       items: 1,
-    })
-  })
+    });
+  });
 
   return (
     <section id={scrollAnchorId} className="testimonial-section mt-100">
@@ -53,5 +53,5 @@ export default function Testimonials({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/landing-page-sections/two-column-with-image.js b/examples/cms-buttercms/components/landing-page-sections/two-column-with-image.js
index 87e3a79435..4a6ed37f7b 100644
--- a/examples/cms-buttercms/components/landing-page-sections/two-column-with-image.js
+++ b/examples/cms-buttercms/components/landing-page-sections/two-column-with-image.js
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function TwoColumnWithImage({
   headline,
@@ -13,7 +13,7 @@ export default function TwoColumnWithImage({
     <section id={scrollAnchorId} className="cta-section">
       <div className="container">
         <div className="row">
-          {image && imagePosition === 'left' && (
+          {image && imagePosition === "left" && (
             <div className="col-lg-6 order-last order-lg-first">
               <div className="left-image cta-image ">
                 <Image
@@ -40,7 +40,7 @@ export default function TwoColumnWithImage({
               </a>
             </div>
           </div>
-          {image && imagePosition === 'right' && (
+          {image && imagePosition === "right" && (
             <div className="col-lg-6">
               <div className="right-image cta-image text-lg-end">
                 <Image
@@ -56,5 +56,5 @@ export default function TwoColumnWithImage({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/main-menu/main-menu-link.js b/examples/cms-buttercms/components/main-menu/main-menu-link.js
index a4e941864d..029ed0781c 100644
--- a/examples/cms-buttercms/components/main-menu/main-menu-link.js
+++ b/examples/cms-buttercms/components/main-menu/main-menu-link.js
@@ -1,9 +1,9 @@
 export default function MainMenuLink({ url, label, active, callbackOnClick }) {
   return (
     <li className="nav-item" onClick={callbackOnClick}>
-      <a className={`page-scroll ${active ? 'active' : ''}`} href={`/${url}`}>
+      <a className={`page-scroll ${active ? "active" : ""}`} href={`/${url}`}>
         {label}
       </a>
     </li>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/main-menu/main-menu.js b/examples/cms-buttercms/components/main-menu/main-menu.js
index 67263cacd0..9fe313a788 100644
--- a/examples/cms-buttercms/components/main-menu/main-menu.js
+++ b/examples/cms-buttercms/components/main-menu/main-menu.js
@@ -1,63 +1,63 @@
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef } from "react";
 
-import MainMenuLink from './main-menu-link'
+import MainMenuLink from "./main-menu-link";
 
 export default function ManiMenu({ mainMenuLinks }) {
   const [activeMenuLink, setActiveMenuLink] = useState(
-    mainMenuLinks.length ? mainMenuLinks[0].url : ''
-  )
+    mainMenuLinks.length ? mainMenuLinks[0].url : "",
+  );
 
   function highlightLinks() {
-    const sections = document.querySelectorAll('.page-scroll')
+    const sections = document.querySelectorAll(".page-scroll");
     const scrollPos =
       window.pageYOffset ||
       document.documentElement.scrollTop ||
-      document.body.scrollTop
+      document.body.scrollTop;
 
     sections.forEach((currLink) => {
-      const val = currLink.getAttribute('href').slice(1)
-      if (val[0] !== '#') {
-        return
+      const val = currLink.getAttribute("href").slice(1);
+      if (val[0] !== "#") {
+        return;
       }
-      const refElement = document.querySelector(val)
+      const refElement = document.querySelector(val);
 
       if (!refElement) {
-        return
+        return;
       }
 
-      const scrollTopMinus = scrollPos + 73
+      const scrollTopMinus = scrollPos + 73;
 
       if (
         refElement.offsetTop <= scrollTopMinus &&
         refElement.offsetTop + refElement.offsetHeight > scrollTopMinus
       ) {
-        setActiveMenuLink(val)
+        setActiveMenuLink(val);
       }
-    })
+    });
   }
 
   useEffect(() => {
-    window.addEventListener('scroll', highlightLinks)
+    window.addEventListener("scroll", highlightLinks);
 
     return () => {
-      window.removeEventListener('scroll', highlightLinks)
-    }
-  }, [])
+      window.removeEventListener("scroll", highlightLinks);
+    };
+  }, []);
 
-  const [isMenuActive, setMenuActive] = useState(false)
-  const menuLinksEl = useRef(null)
+  const [isMenuActive, setMenuActive] = useState(false);
+  const menuLinksEl = useRef(null);
 
   function inactivateMenu() {
-    setMenuActive(false)
+    setMenuActive(false);
     if (menuLinksEl.current) {
-      menuLinksEl.current.classList.remove('show')
+      menuLinksEl.current.classList.remove("show");
     }
   }
 
   return (
     <>
       <button
-        className={`navbar-toggler ${isMenuActive ? 'active' : ''}`}
+        className={`navbar-toggler ${isMenuActive ? "active" : ""}`}
         type="button"
         data-bs-toggle="collapse"
         data-bs-target="#navbarSupportedContent"
@@ -91,5 +91,5 @@ export default function ManiMenu({ mainMenuLinks }) {
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/missing-token-section.js b/examples/cms-buttercms/components/missing-token-section.js
index 1f799acba4..6101be0887 100644
--- a/examples/cms-buttercms/components/missing-token-section.js
+++ b/examples/cms-buttercms/components/missing-token-section.js
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function MissingTokenSection() {
   return (
@@ -9,7 +9,7 @@ export default function MissingTokenSection() {
             <div className="hero-content">
               <h1>Configure your ButterCMS API Token</h1>
               <p>
-                Please add your API token to <code>.env</code> file as{' '}
+                Please add your API token to <code>.env</code> file as{" "}
                 <code>NEXT_PUBLIC_BUTTER_CMS_API_KEY</code>.
               </p>
               <a
@@ -34,5 +34,5 @@ export default function MissingTokenSection() {
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/preloader.js b/examples/cms-buttercms/components/preloader.js
index d20c82d70b..aefb3587f5 100644
--- a/examples/cms-buttercms/components/preloader.js
+++ b/examples/cms-buttercms/components/preloader.js
@@ -16,5 +16,5 @@ export default function Preloader() {
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/components/scroll-to-top-button.js b/examples/cms-buttercms/components/scroll-to-top-button.js
index cc5da38f8d..68bf99e27b 100644
--- a/examples/cms-buttercms/components/scroll-to-top-button.js
+++ b/examples/cms-buttercms/components/scroll-to-top-button.js
@@ -1,21 +1,21 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
 
 export default function ScrollToButtonButton() {
-  const [hasScrollToTopButton, setHasScrollToTopButton] = useState(false)
+  const [hasScrollToTopButton, setHasScrollToTopButton] = useState(false);
 
   function toggleScrollTopButton() {
     setHasScrollToTopButton(
-      document.body.scrollTop > 50 || document.documentElement.scrollTop > 50
-    )
+      document.body.scrollTop > 50 || document.documentElement.scrollTop > 50,
+    );
   }
 
   useEffect(() => {
-    window.addEventListener('scroll', toggleScrollTopButton)
+    window.addEventListener("scroll", toggleScrollTopButton);
 
     return () => {
-      window.removeEventListener('scroll', toggleScrollTopButton)
-    }
-  }, [])
+      window.removeEventListener("scroll", toggleScrollTopButton);
+    };
+  }, []);
 
   return (
     <>
@@ -25,5 +25,5 @@ export default function ScrollToButtonButton() {
         </a>
       )}
     </>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/css/lineicons.css b/examples/cms-buttercms/css/lineicons.css
index 8b733f83e8..6ec9758739 100644
--- a/examples/cms-buttercms/css/lineicons.css
+++ b/examples/cms-buttercms/css/lineicons.css
@@ -5,13 +5,13 @@ Author: lineicons.com
 
 -------------------------------- */
 @font-face {
-  font-family: 'LineIcons';
-  src: url('fonts/LineIcons.eot');
-  src: url('fonts/LineIcons.eot') format('embedded-opentype'),
-    url('fonts/LineIcons.woff2') format('woff2'),
-    url('fonts/LineIcons.woff') format('woff'),
-    url('fonts/LineIcons.ttf') format('truetype'),
-    url('fonts/LineIcons.svg') format('svg');
+  font-family: "LineIcons";
+  src: url("fonts/LineIcons.eot");
+  src: url("fonts/LineIcons.eot") format("embedded-opentype"),
+    url("fonts/LineIcons.woff2") format("woff2"),
+    url("fonts/LineIcons.woff") format("woff"),
+    url("fonts/LineIcons.ttf") format("truetype"),
+    url("fonts/LineIcons.svg") format("svg");
   font-weight: normal;
   font-style: normal;
 }
@@ -20,7 +20,7 @@ Author: lineicons.com
 -------------------------*/
 .lni {
   display: inline-block;
-  font: normal normal normal 1em/1 'LineIcons';
+  font: normal normal normal 1em/1 "LineIcons";
   color: inherit;
   flex-shrink: 0;
   speak: none;
@@ -86,2129 +86,2129 @@ Author: lineicons.com
 -------------------------*/
 
 .lni-500px::before {
-  content: '\ea03';
+  content: "\ea03";
 }
 
 .lni-add-files::before {
-  content: '\ea01';
+  content: "\ea01";
 }
 
 .lni-adobe::before {
-  content: '\ea06';
+  content: "\ea06";
 }
 
 .lni-agenda::before {
-  content: '\ea02';
+  content: "\ea02";
 }
 
 .lni-airbnb::before {
-  content: '\ea07';
+  content: "\ea07";
 }
 
 .lni-alarm-clock::before {
-  content: '\ea08';
+  content: "\ea08";
 }
 
 .lni-alarm::before {
-  content: '\ea04';
+  content: "\ea04";
 }
 
 .lni-amazon-original::before {
-  content: '\ea05';
+  content: "\ea05";
 }
 
 .lni-amazon-pay::before {
-  content: '\ea09';
+  content: "\ea09";
 }
 
 .lni-amazon::before {
-  content: '\ea0a';
+  content: "\ea0a";
 }
 
 .lni-ambulance::before {
-  content: '\ea0b';
+  content: "\ea0b";
 }
 
 .lni-amex::before {
-  content: '\ea0c';
+  content: "\ea0c";
 }
 
 .lni-anchor::before {
-  content: '\ea0d';
+  content: "\ea0d";
 }
 
 .lni-android-original::before {
-  content: '\ea0e';
+  content: "\ea0e";
 }
 
 .lni-android::before {
-  content: '\ea0f';
+  content: "\ea0f";
 }
 
 .lni-angellist::before {
-  content: '\ea10';
+  content: "\ea10";
 }
 
 .lni-angle-double-down::before {
-  content: '\ea11';
+  content: "\ea11";
 }
 
 .lni-angle-double-left::before {
-  content: '\ea12';
+  content: "\ea12";
 }
 
 .lni-angle-double-right::before {
-  content: '\ea13';
+  content: "\ea13";
 }
 
 .lni-angle-double-up::before {
-  content: '\ea14';
+  content: "\ea14";
 }
 
 .lni-angular::before {
-  content: '\ea15';
+  content: "\ea15";
 }
 
 .lni-apartment::before {
-  content: '\ea16';
+  content: "\ea16";
 }
 
 .lni-app-store::before {
-  content: '\ea17';
+  content: "\ea17";
 }
 
 .lni-apple-music::before {
-  content: '\ea18';
+  content: "\ea18";
 }
 
 .lni-apple-pay::before {
-  content: '\ea19';
+  content: "\ea19";
 }
 
 .lni-apple::before {
-  content: '\ea1a';
+  content: "\ea1a";
 }
 
 .lni-archive::before {
-  content: '\ea1f';
+  content: "\ea1f";
 }
 
 .lni-arrow-down-circle::before {
-  content: '\ea1b';
+  content: "\ea1b";
 }
 
 .lni-arrow-down::before {
-  content: '\ea1c';
+  content: "\ea1c";
 }
 
 .lni-arrow-left-circle::before {
-  content: '\ea1d';
+  content: "\ea1d";
 }
 
 .lni-arrow-left::before {
-  content: '\ea1e';
+  content: "\ea1e";
 }
 
 .lni-arrow-right-circle::before {
-  content: '\ea20';
+  content: "\ea20";
 }
 
 .lni-arrow-right::before {
-  content: '\ea21';
+  content: "\ea21";
 }
 
 .lni-arrow-top-left::before {
-  content: '\ea22';
+  content: "\ea22";
 }
 
 .lni-arrow-top-right::before {
-  content: '\ea23';
+  content: "\ea23";
 }
 
 .lni-arrow-up-circle::before {
-  content: '\ea24';
+  content: "\ea24";
 }
 
 .lni-arrow-up::before {
-  content: '\ea25';
+  content: "\ea25";
 }
 
 .lni-arrows-horizontal::before {
-  content: '\ea26';
+  content: "\ea26";
 }
 
 .lni-arrows-vertical::before {
-  content: '\ea27';
+  content: "\ea27";
 }
 
 .lni-atlassian::before {
-  content: '\ea28';
+  content: "\ea28";
 }
 
 .lni-aws::before {
-  content: '\ea29';
+  content: "\ea29";
 }
 
 .lni-azure::before {
-  content: '\ea2a';
+  content: "\ea2a";
 }
 
 .lni-backward::before {
-  content: '\ea2b';
+  content: "\ea2b";
 }
 
 .lni-baloon::before {
-  content: '\ea2c';
+  content: "\ea2c";
 }
 
 .lni-ban::before {
-  content: '\ea2d';
+  content: "\ea2d";
 }
 
 .lni-bar-chart::before {
-  content: '\ea2e';
+  content: "\ea2e";
 }
 
 .lni-basketball::before {
-  content: '\ea2f';
+  content: "\ea2f";
 }
 
 .lni-behance-original::before {
-  content: '\ea30';
+  content: "\ea30";
 }
 
 .lni-behance::before {
-  content: '\ea31';
+  content: "\ea31";
 }
 
 .lni-bi-cycle::before {
-  content: '\ea32';
+  content: "\ea32";
 }
 
 .lni-bitbucket::before {
-  content: '\ea33';
+  content: "\ea33";
 }
 
 .lni-bitcoin::before {
-  content: '\ea34';
+  content: "\ea34";
 }
 
 .lni-blackboard::before {
-  content: '\ea35';
+  content: "\ea35";
 }
 
 .lni-blogger::before {
-  content: '\ea36';
+  content: "\ea36";
 }
 
 .lni-bluetooth-original::before {
-  content: '\ea37';
+  content: "\ea37";
 }
 
 .lni-bluetooth::before {
-  content: '\ea38';
+  content: "\ea38";
 }
 
 .lni-bold::before {
-  content: '\ea39';
+  content: "\ea39";
 }
 
 .lni-bolt-alt::before {
-  content: '\ea3a';
+  content: "\ea3a";
 }
 
 .lni-bolt::before {
-  content: '\ea40';
+  content: "\ea40";
 }
 
 .lni-book::before {
-  content: '\ea3b';
+  content: "\ea3b";
 }
 
 .lni-bookmark-alt::before {
-  content: '\ea3c';
+  content: "\ea3c";
 }
 
 .lni-bookmark::before {
-  content: '\ea3d';
+  content: "\ea3d";
 }
 
 .lni-bootstrap::before {
-  content: '\ea3e';
+  content: "\ea3e";
 }
 
 .lni-bricks::before {
-  content: '\ea3f';
+  content: "\ea3f";
 }
 
 .lni-bridge::before {
-  content: '\ea41';
+  content: "\ea41";
 }
 
 .lni-briefcase::before {
-  content: '\ea42';
+  content: "\ea42";
 }
 
 .lni-brush-alt::before {
-  content: '\ea43';
+  content: "\ea43";
 }
 
 .lni-brush::before {
-  content: '\ea44';
+  content: "\ea44";
 }
 
 .lni-btc::before {
-  content: '\ea45';
+  content: "\ea45";
 }
 
 .lni-bubble::before {
-  content: '\ea46';
+  content: "\ea46";
 }
 
 .lni-bug::before {
-  content: '\ea47';
+  content: "\ea47";
 }
 
 .lni-bulb::before {
-  content: '\ea48';
+  content: "\ea48";
 }
 
 .lni-bullhorn::before {
-  content: '\ea49';
+  content: "\ea49";
 }
 
 .lni-burger::before {
-  content: '\ea4a';
+  content: "\ea4a";
 }
 
 .lni-bus::before {
-  content: '\ea4b';
+  content: "\ea4b";
 }
 
 .lni-cake::before {
-  content: '\ea4c';
+  content: "\ea4c";
 }
 
 .lni-calculator::before {
-  content: '\ea4d';
+  content: "\ea4d";
 }
 
 .lni-calendar::before {
-  content: '\ea4e';
+  content: "\ea4e";
 }
 
 .lni-camera::before {
-  content: '\ea4f';
+  content: "\ea4f";
 }
 
 .lni-candy-cane::before {
-  content: '\ea50';
+  content: "\ea50";
 }
 
 .lni-candy::before {
-  content: '\ea51';
+  content: "\ea51";
 }
 
 .lni-capsule::before {
-  content: '\ea52';
+  content: "\ea52";
 }
 
 .lni-car-alt::before {
-  content: '\ea53';
+  content: "\ea53";
 }
 
 .lni-car::before {
-  content: '\ea54';
+  content: "\ea54";
 }
 
 .lni-caravan::before {
-  content: '\ea55';
+  content: "\ea55";
 }
 
 .lni-cart-full::before {
-  content: '\ea56';
+  content: "\ea56";
 }
 
 .lni-cart::before {
-  content: '\ea57';
+  content: "\ea57";
 }
 
 .lni-certificate::before {
-  content: '\ea58';
+  content: "\ea58";
 }
 
 .lni-check-box::before {
-  content: '\ea59';
+  content: "\ea59";
 }
 
 .lni-checkmark-circle::before {
-  content: '\ea5a';
+  content: "\ea5a";
 }
 
 .lni-checkmark::before {
-  content: '\ea5b';
+  content: "\ea5b";
 }
 
 .lni-chef-hat::before {
-  content: '\ea5c';
+  content: "\ea5c";
 }
 
 .lni-chevron-down-circle::before {
-  content: '\ea5d';
+  content: "\ea5d";
 }
 
 .lni-chevron-down::before {
-  content: '\ea5e';
+  content: "\ea5e";
 }
 
 .lni-chevron-left-circle::before {
-  content: '\ea5f';
+  content: "\ea5f";
 }
 
 .lni-chevron-left::before {
-  content: '\ea60';
+  content: "\ea60";
 }
 
 .lni-chevron-right-circle::before {
-  content: '\ea61';
+  content: "\ea61";
 }
 
 .lni-chevron-right::before {
-  content: '\ea62';
+  content: "\ea62";
 }
 
 .lni-chevron-up-circle::before {
-  content: '\ea63';
+  content: "\ea63";
 }
 
 .lni-chevron-up::before {
-  content: '\ea64';
+  content: "\ea64";
 }
 
 .lni-chrome::before {
-  content: '\ea65';
+  content: "\ea65";
 }
 
 .lni-chromecast::before {
-  content: '\ea66';
+  content: "\ea66";
 }
 
 .lni-circle-minus::before {
-  content: '\ea67';
+  content: "\ea67";
 }
 
 .lni-circle-plus::before {
-  content: '\ea68';
+  content: "\ea68";
 }
 
 .lni-clipboard::before {
-  content: '\ea69';
+  content: "\ea69";
 }
 
 .lni-close::before {
-  content: '\ea6a';
+  content: "\ea6a";
 }
 
 .lni-cloud-check::before {
-  content: '\ea6b';
+  content: "\ea6b";
 }
 
 .lni-cloud-download::before {
-  content: '\ea6c';
+  content: "\ea6c";
 }
 
 .lni-cloud-network::before {
-  content: '\ea6d';
+  content: "\ea6d";
 }
 
 .lni-cloud-sync::before {
-  content: '\ea6e';
+  content: "\ea6e";
 }
 
 .lni-cloud-upload::before {
-  content: '\ea6f';
+  content: "\ea6f";
 }
 
 .lni-cloud::before {
-  content: '\ea70';
+  content: "\ea70";
 }
 
 .lni-cloudflare::before {
-  content: '\ea71';
+  content: "\ea71";
 }
 
 .lni-cloudy-sun::before {
-  content: '\ea72';
+  content: "\ea72";
 }
 
 .lni-code-alt::before {
-  content: '\ea73';
+  content: "\ea73";
 }
 
 .lni-code::before {
-  content: '\ea74';
+  content: "\ea74";
 }
 
 .lni-codepen::before {
-  content: '\ea75';
+  content: "\ea75";
 }
 
 .lni-coffee-cup::before {
-  content: '\ea76';
+  content: "\ea76";
 }
 
 .lni-cog::before {
-  content: '\ea77';
+  content: "\ea77";
 }
 
 .lni-cogs::before {
-  content: '\ea78';
+  content: "\ea78";
 }
 
 .lni-coin::before {
-  content: '\ea79';
+  content: "\ea79";
 }
 
 .lni-comments-alt::before {
-  content: '\ea7a';
+  content: "\ea7a";
 }
 
 .lni-comments-reply::before {
-  content: '\ea7b';
+  content: "\ea7b";
 }
 
 .lni-comments::before {
-  content: '\ea7c';
+  content: "\ea7c";
 }
 
 .lni-compass::before {
-  content: '\ea7d';
+  content: "\ea7d";
 }
 
 .lni-connectdevelop::before {
-  content: '\ea7e';
+  content: "\ea7e";
 }
 
 .lni-construction-hammer::before {
-  content: '\ea7f';
+  content: "\ea7f";
 }
 
 .lni-construction::before {
-  content: '\ea80';
+  content: "\ea80";
 }
 
 .lni-consulting::before {
-  content: '\ea81';
+  content: "\ea81";
 }
 
 .lni-control-panel::before {
-  content: '\ea82';
+  content: "\ea82";
 }
 
 .lni-cool::before {
-  content: '\ea83';
+  content: "\ea83";
 }
 
 .lni-cpanel::before {
-  content: '\ea84';
+  content: "\ea84";
 }
 
 .lni-creative-commons::before {
-  content: '\ea85';
+  content: "\ea85";
 }
 
 .lni-credit-cards::before {
-  content: '\ea86';
+  content: "\ea86";
 }
 
 .lni-crop::before {
-  content: '\ea87';
+  content: "\ea87";
 }
 
 .lni-cross-circle::before {
-  content: '\ea88';
+  content: "\ea88";
 }
 
 .lni-crown::before {
-  content: '\ea89';
+  content: "\ea89";
 }
 
 .lni-css3::before {
-  content: '\ea8a';
+  content: "\ea8a";
 }
 
 .lni-cup::before {
-  content: '\ea8b';
+  content: "\ea8b";
 }
 
 .lni-customer::before {
-  content: '\ea8c';
+  content: "\ea8c";
 }
 
 .lni-cut::before {
-  content: '\ea8d';
+  content: "\ea8d";
 }
 
 .lni-dashboard::before {
-  content: '\ea8e';
+  content: "\ea8e";
 }
 
 .lni-database::before {
-  content: '\ea8f';
+  content: "\ea8f";
 }
 
 .lni-delivery::before {
-  content: '\ea90';
+  content: "\ea90";
 }
 
 .lni-dev::before {
-  content: '\ea91';
+  content: "\ea91";
 }
 
 .lni-diamond-alt::before {
-  content: '\ea92';
+  content: "\ea92";
 }
 
 .lni-diamond::before {
-  content: '\ea93';
+  content: "\ea93";
 }
 
 .lni-digitalocean::before {
-  content: '\ea94';
+  content: "\ea94";
 }
 
 .lni-diners-club::before {
-  content: '\ea95';
+  content: "\ea95";
 }
 
 .lni-dinner::before {
-  content: '\ea96';
+  content: "\ea96";
 }
 
 .lni-direction-alt::before {
-  content: '\ea97';
+  content: "\ea97";
 }
 
 .lni-direction-ltr::before {
-  content: '\ea98';
+  content: "\ea98";
 }
 
 .lni-direction-rtl::before {
-  content: '\ea99';
+  content: "\ea99";
 }
 
 .lni-direction::before {
-  content: '\ea9a';
+  content: "\ea9a";
 }
 
 .lni-discord::before {
-  content: '\ea9b';
+  content: "\ea9b";
 }
 
 .lni-discover::before {
-  content: '\ea9c';
+  content: "\ea9c";
 }
 
 .lni-display-alt::before {
-  content: '\ea9d';
+  content: "\ea9d";
 }
 
 .lni-display::before {
-  content: '\ea9e';
+  content: "\ea9e";
 }
 
 .lni-docker::before {
-  content: '\ea9f';
+  content: "\ea9f";
 }
 
 .lni-dollar::before {
-  content: '\eaa0';
+  content: "\eaa0";
 }
 
 .lni-domain::before {
-  content: '\eaa1';
+  content: "\eaa1";
 }
 
 .lni-download::before {
-  content: '\eaa2';
+  content: "\eaa2";
 }
 
 .lni-dribbble::before {
-  content: '\eaa3';
+  content: "\eaa3";
 }
 
 .lni-drop::before {
-  content: '\eaa4';
+  content: "\eaa4";
 }
 
 .lni-dropbox-original::before {
-  content: '\eaa5';
+  content: "\eaa5";
 }
 
 .lni-dropbox::before {
-  content: '\eaa6';
+  content: "\eaa6";
 }
 
 .lni-drupal-original::before {
-  content: '\eaa7';
+  content: "\eaa7";
 }
 
 .lni-drupal::before {
-  content: '\eaa8';
+  content: "\eaa8";
 }
 
 .lni-dumbbell::before {
-  content: '\eaa9';
+  content: "\eaa9";
 }
 
 .lni-edge::before {
-  content: '\eaaa';
+  content: "\eaaa";
 }
 
 .lni-empty-file::before {
-  content: '\eaab';
+  content: "\eaab";
 }
 
 .lni-enter::before {
-  content: '\eaac';
+  content: "\eaac";
 }
 
 .lni-envato::before {
-  content: '\eaad';
+  content: "\eaad";
 }
 
 .lni-envelope::before {
-  content: '\eaae';
+  content: "\eaae";
 }
 
 .lni-eraser::before {
-  content: '\eaaf';
+  content: "\eaaf";
 }
 
 .lni-euro::before {
-  content: '\eab0';
+  content: "\eab0";
 }
 
 .lni-exit-down::before {
-  content: '\eab1';
+  content: "\eab1";
 }
 
 .lni-exit-up::before {
-  content: '\eab2';
+  content: "\eab2";
 }
 
 .lni-exit::before {
-  content: '\eab3';
+  content: "\eab3";
 }
 
 .lni-eye::before {
-  content: '\eab4';
+  content: "\eab4";
 }
 
 .lni-facebook-filled::before {
-  content: '\eab5';
+  content: "\eab5";
 }
 
 .lni-facebook-messenger::before {
-  content: '\eab6';
+  content: "\eab6";
 }
 
 .lni-facebook-original::before {
-  content: '\eab7';
+  content: "\eab7";
 }
 
 .lni-facebook-oval::before {
-  content: '\eab8';
+  content: "\eab8";
 }
 
 .lni-facebook::before {
-  content: '\eab9';
+  content: "\eab9";
 }
 
 .lni-figma::before {
-  content: '\eaba';
+  content: "\eaba";
 }
 
 .lni-files::before {
-  content: '\eabb';
+  content: "\eabb";
 }
 
 .lni-firefox-original::before {
-  content: '\eabc';
+  content: "\eabc";
 }
 
 .lni-firefox::before {
-  content: '\eabd';
+  content: "\eabd";
 }
 
 .lni-fireworks::before {
-  content: '\eabe';
+  content: "\eabe";
 }
 
 .lni-first-aid::before {
-  content: '\eabf';
+  content: "\eabf";
 }
 
 .lni-flag-alt::before {
-  content: '\eac0';
+  content: "\eac0";
 }
 
 .lni-flag::before {
-  content: '\eac1';
+  content: "\eac1";
 }
 
 .lni-flags::before {
-  content: '\eac2';
+  content: "\eac2";
 }
 
 .lni-flickr::before {
-  content: '\eac3';
+  content: "\eac3";
 }
 
 .lni-flower::before {
-  content: '\eac4';
+  content: "\eac4";
 }
 
 .lni-folder::before {
-  content: '\eac5';
+  content: "\eac5";
 }
 
 .lni-forward::before {
-  content: '\eac6';
+  content: "\eac6";
 }
 
 .lni-frame-expand::before {
-  content: '\eac7';
+  content: "\eac7";
 }
 
 .lni-fresh-juice::before {
-  content: '\eac8';
+  content: "\eac8";
 }
 
 .lni-friendly::before {
-  content: '\eac9';
+  content: "\eac9";
 }
 
 .lni-full-screen::before {
-  content: '\eaca';
+  content: "\eaca";
 }
 
 .lni-funnel::before {
-  content: '\eacb';
+  content: "\eacb";
 }
 
 .lni-gallery::before {
-  content: '\eacc';
+  content: "\eacc";
 }
 
 .lni-game::before {
-  content: '\eacd';
+  content: "\eacd";
 }
 
 .lni-gatsby::before {
-  content: '\eace';
+  content: "\eace";
 }
 
 .lni-gift::before {
-  content: '\eacf';
+  content: "\eacf";
 }
 
 .lni-git::before {
-  content: '\ead0';
+  content: "\ead0";
 }
 
 .lni-github-original::before {
-  content: '\ead1';
+  content: "\ead1";
 }
 
 .lni-github::before {
-  content: '\ead2';
+  content: "\ead2";
 }
 
 .lni-goodreads::before {
-  content: '\ead3';
+  content: "\ead3";
 }
 
 .lni-google-drive::before {
-  content: '\ead4';
+  content: "\ead4";
 }
 
 .lni-google-pay::before {
-  content: '\ead5';
+  content: "\ead5";
 }
 
 .lni-google-wallet::before {
-  content: '\ead6';
+  content: "\ead6";
 }
 
 .lni-google::before {
-  content: '\ead7';
+  content: "\ead7";
 }
 
 .lni-graduation::before {
-  content: '\ead8';
+  content: "\ead8";
 }
 
 .lni-graph::before {
-  content: '\ead9';
+  content: "\ead9";
 }
 
 .lni-grid-alt::before {
-  content: '\eada';
+  content: "\eada";
 }
 
 .lni-grid::before {
-  content: '\eadb';
+  content: "\eadb";
 }
 
 .lni-grow::before {
-  content: '\eadc';
+  content: "\eadc";
 }
 
 .lni-hacker-news::before {
-  content: '\eadd';
+  content: "\eadd";
 }
 
 .lni-hammer::before {
-  content: '\eade';
+  content: "\eade";
 }
 
 .lni-hand::before {
-  content: '\eadf';
+  content: "\eadf";
 }
 
 .lni-handshake::before {
-  content: '\eae0';
+  content: "\eae0";
 }
 
 .lni-happy::before {
-  content: '\eae1';
+  content: "\eae1";
 }
 
 .lni-harddrive::before {
-  content: '\eae2';
+  content: "\eae2";
 }
 
 .lni-headphone-alt::before {
-  content: '\eae3';
+  content: "\eae3";
 }
 
 .lni-headphone::before {
-  content: '\eae4';
+  content: "\eae4";
 }
 
 .lni-heart-filled::before {
-  content: '\eae5';
+  content: "\eae5";
 }
 
 .lni-heart-monitor::before {
-  content: '\eae6';
+  content: "\eae6";
 }
 
 .lni-heart::before {
-  content: '\eae7';
+  content: "\eae7";
 }
 
 .lni-helicopter::before {
-  content: '\eae8';
+  content: "\eae8";
 }
 
 .lni-helmet::before {
-  content: '\eae9';
+  content: "\eae9";
 }
 
 .lni-help::before {
-  content: '\eaea';
+  content: "\eaea";
 }
 
 .lni-highlight-alt::before {
-  content: '\eaeb';
+  content: "\eaeb";
 }
 
 .lni-highlight::before {
-  content: '\eaec';
+  content: "\eaec";
 }
 
 .lni-home::before {
-  content: '\eaed';
+  content: "\eaed";
 }
 
 .lni-hospital::before {
-  content: '\eaee';
+  content: "\eaee";
 }
 
 .lni-hourglass::before {
-  content: '\eaef';
+  content: "\eaef";
 }
 
 .lni-html5::before {
-  content: '\eaf0';
+  content: "\eaf0";
 }
 
 .lni-image::before {
-  content: '\eaf1';
+  content: "\eaf1";
 }
 
 .lni-imdb::before {
-  content: '\eaf2';
+  content: "\eaf2";
 }
 
 .lni-inbox::before {
-  content: '\eaf3';
+  content: "\eaf3";
 }
 
 .lni-indent-decrease::before {
-  content: '\eaf4';
+  content: "\eaf4";
 }
 
 .lni-indent-increase::before {
-  content: '\eaf5';
+  content: "\eaf5";
 }
 
 .lni-infinite::before {
-  content: '\eaf6';
+  content: "\eaf6";
 }
 
 .lni-information::before {
-  content: '\eaf7';
+  content: "\eaf7";
 }
 
 .lni-instagram-filled::before {
-  content: '\eaf8';
+  content: "\eaf8";
 }
 
 .lni-instagram-original::before {
-  content: '\eaf9';
+  content: "\eaf9";
 }
 
 .lni-instagram::before {
-  content: '\eafa';
+  content: "\eafa";
 }
 
 .lni-invention::before {
-  content: '\eafb';
+  content: "\eafb";
 }
 
 .lni-invest-monitor::before {
-  content: '\eafc';
+  content: "\eafc";
 }
 
 .lni-investment::before {
-  content: '\eafd';
+  content: "\eafd";
 }
 
 .lni-island::before {
-  content: '\eafe';
+  content: "\eafe";
 }
 
 .lni-italic::before {
-  content: '\eaff';
+  content: "\eaff";
 }
 
 .lni-java::before {
-  content: '\eb00';
+  content: "\eb00";
 }
 
 .lni-javascript::before {
-  content: '\eb01';
+  content: "\eb01";
 }
 
 .lni-jcb::before {
-  content: '\eb02';
+  content: "\eb02";
 }
 
 .lni-joomla-original::before {
-  content: '\eb03';
+  content: "\eb03";
 }
 
 .lni-joomla::before {
-  content: '\eb04';
+  content: "\eb04";
 }
 
 .lni-jsfiddle::before {
-  content: '\eb05';
+  content: "\eb05";
 }
 
 .lni-juice::before {
-  content: '\eb06';
+  content: "\eb06";
 }
 
 .lni-key::before {
-  content: '\eb07';
+  content: "\eb07";
 }
 
 .lni-keyboard::before {
-  content: '\eb08';
+  content: "\eb08";
 }
 
 .lni-keyword-research::before {
-  content: '\eb09';
+  content: "\eb09";
 }
 
 .lni-laptop-phone::before {
-  content: '\eb0a';
+  content: "\eb0a";
 }
 
 .lni-laptop::before {
-  content: '\eb0b';
+  content: "\eb0b";
 }
 
 .lni-laravel::before {
-  content: '\eb0c';
+  content: "\eb0c";
 }
 
 .lni-layers::before {
-  content: '\eb0d';
+  content: "\eb0d";
 }
 
 .lni-layout::before {
-  content: '\eb0e';
+  content: "\eb0e";
 }
 
 .lni-leaf::before {
-  content: '\eb0f';
+  content: "\eb0f";
 }
 
 .lni-library::before {
-  content: '\eb10';
+  content: "\eb10";
 }
 
 .lni-license::before {
-  content: '\eb11';
+  content: "\eb11";
 }
 
 .lni-lifering::before {
-  content: '\eb12';
+  content: "\eb12";
 }
 
 .lni-line-dashed::before {
-  content: '\eb13';
+  content: "\eb13";
 }
 
 .lni-line-dotted::before {
-  content: '\eb14';
+  content: "\eb14";
 }
 
 .lni-line-double::before {
-  content: '\eb15';
+  content: "\eb15";
 }
 
 .lni-line-spacing::before {
-  content: '\eb16';
+  content: "\eb16";
 }
 
 .lni-line::before {
-  content: '\eb17';
+  content: "\eb17";
 }
 
 .lni-lineicons-alt::before {
-  content: '\eb18';
+  content: "\eb18";
 }
 
 .lni-lineicons::before {
-  content: '\eb19';
+  content: "\eb19";
 }
 
 .lni-link::before {
-  content: '\eb1a';
+  content: "\eb1a";
 }
 
 .lni-linkedin-original::before {
-  content: '\eb1b';
+  content: "\eb1b";
 }
 
 .lni-linkedin::before {
-  content: '\eb1c';
+  content: "\eb1c";
 }
 
 .lni-list::before {
-  content: '\eb1d';
+  content: "\eb1d";
 }
 
 .lni-lock-alt::before {
-  content: '\eb1e';
+  content: "\eb1e";
 }
 
 .lni-lock::before {
-  content: '\eb1f';
+  content: "\eb1f";
 }
 
 .lni-magento::before {
-  content: '\eb20';
+  content: "\eb20";
 }
 
 .lni-magnet::before {
-  content: '\eb21';
+  content: "\eb21";
 }
 
 .lni-magnifier::before {
-  content: '\eb22';
+  content: "\eb22";
 }
 
 .lni-mailchimp::before {
-  content: '\eb23';
+  content: "\eb23";
 }
 
 .lni-map-marker::before {
-  content: '\eb24';
+  content: "\eb24";
 }
 
 .lni-map::before {
-  content: '\eb25';
+  content: "\eb25";
 }
 
 .lni-markdown::before {
-  content: '\eb26';
+  content: "\eb26";
 }
 
 .lni-mashroom::before {
-  content: '\eb27';
+  content: "\eb27";
 }
 
 .lni-mastercard::before {
-  content: '\eb28';
+  content: "\eb28";
 }
 
 .lni-medium::before {
-  content: '\eb29';
+  content: "\eb29";
 }
 
 .lni-menu::before {
-  content: '\eb2a';
+  content: "\eb2a";
 }
 
 .lni-mic::before {
-  content: '\eb2b';
+  content: "\eb2b";
 }
 
 .lni-microphone::before {
-  content: '\eb2c';
+  content: "\eb2c";
 }
 
 .lni-microscope::before {
-  content: '\eb2d';
+  content: "\eb2d";
 }
 
 .lni-microsoft-edge::before {
-  content: '\eb2e';
+  content: "\eb2e";
 }
 
 .lni-microsoft::before {
-  content: '\eb2f';
+  content: "\eb2f";
 }
 
 .lni-minus::before {
-  content: '\eb30';
+  content: "\eb30";
 }
 
 .lni-mobile::before {
-  content: '\eb31';
+  content: "\eb31";
 }
 
 .lni-money-location::before {
-  content: '\eb32';
+  content: "\eb32";
 }
 
 .lni-money-protection::before {
-  content: '\eb33';
+  content: "\eb33";
 }
 
 .lni-more-alt::before {
-  content: '\eb34';
+  content: "\eb34";
 }
 
 .lni-more::before {
-  content: '\eb35';
+  content: "\eb35";
 }
 
 .lni-mouse::before {
-  content: '\eb36';
+  content: "\eb36";
 }
 
 .lni-move::before {
-  content: '\eb37';
+  content: "\eb37";
 }
 
 .lni-music::before {
-  content: '\eb38';
+  content: "\eb38";
 }
 
 .lni-netlify::before {
-  content: '\eb39';
+  content: "\eb39";
 }
 
 .lni-network::before {
-  content: '\eb3a';
+  content: "\eb3a";
 }
 
 .lni-night::before {
-  content: '\eb3b';
+  content: "\eb3b";
 }
 
 .lni-nodejs-alt::before {
-  content: '\eb3c';
+  content: "\eb3c";
 }
 
 .lni-nodejs::before {
-  content: '\eb3d';
+  content: "\eb3d";
 }
 
 .lni-notepad::before {
-  content: '\eb3e';
+  content: "\eb3e";
 }
 
 .lni-npm::before {
-  content: '\eb3f';
+  content: "\eb3f";
 }
 
 .lni-offer::before {
-  content: '\eb40';
+  content: "\eb40";
 }
 
 .lni-opera::before {
-  content: '\eb41';
+  content: "\eb41";
 }
 
 .lni-package::before {
-  content: '\eb42';
+  content: "\eb42";
 }
 
 .lni-page-break::before {
-  content: '\eb43';
+  content: "\eb43";
 }
 
 .lni-pagination::before {
-  content: '\eb44';
+  content: "\eb44";
 }
 
 .lni-paint-bucket::before {
-  content: '\eb45';
+  content: "\eb45";
 }
 
 .lni-paint-roller::before {
-  content: '\eb46';
+  content: "\eb46";
 }
 
 .lni-pallet::before {
-  content: '\eb47';
+  content: "\eb47";
 }
 
 .lni-paperclip::before {
-  content: '\eb48';
+  content: "\eb48";
 }
 
 .lni-patreon::before {
-  content: '\eb49';
+  content: "\eb49";
 }
 
 .lni-pause::before {
-  content: '\eb4a';
+  content: "\eb4a";
 }
 
 .lni-paypal-original::before {
-  content: '\eb4b';
+  content: "\eb4b";
 }
 
 .lni-paypal::before {
-  content: '\eb4c';
+  content: "\eb4c";
 }
 
 .lni-pencil-alt::before {
-  content: '\eb4d';
+  content: "\eb4d";
 }
 
 .lni-pencil::before {
-  content: '\eb4e';
+  content: "\eb4e";
 }
 
 .lni-phone-set::before {
-  content: '\eb4f';
+  content: "\eb4f";
 }
 
 .lni-phone::before {
-  content: '\eb50';
+  content: "\eb50";
 }
 
 .lni-php::before {
-  content: '\eb51';
+  content: "\eb51";
 }
 
 .lni-pie-chart::before {
-  content: '\eb52';
+  content: "\eb52";
 }
 
 .lni-pilcrow::before {
-  content: '\eb53';
+  content: "\eb53";
 }
 
 .lni-pin::before {
-  content: '\eb54';
+  content: "\eb54";
 }
 
 .lni-pinterest::before {
-  content: '\eb55';
+  content: "\eb55";
 }
 
 .lni-pizza::before {
-  content: '\eb56';
+  content: "\eb56";
 }
 
 .lni-plane::before {
-  content: '\eb57';
+  content: "\eb57";
 }
 
 .lni-play-store::before {
-  content: '\eb58';
+  content: "\eb58";
 }
 
 .lni-play::before {
-  content: '\eb59';
+  content: "\eb59";
 }
 
 .lni-playstation::before {
-  content: '\eb5a';
+  content: "\eb5a";
 }
 
 .lni-plug::before {
-  content: '\eb5b';
+  content: "\eb5b";
 }
 
 .lni-plus::before {
-  content: '\eb5c';
+  content: "\eb5c";
 }
 
 .lni-pointer-down::before {
-  content: '\eb5d';
+  content: "\eb5d";
 }
 
 .lni-pointer-left::before {
-  content: '\eb5e';
+  content: "\eb5e";
 }
 
 .lni-pointer-right::before {
-  content: '\eb5f';
+  content: "\eb5f";
 }
 
 .lni-pointer-top::before {
-  content: '\eb60';
+  content: "\eb60";
 }
 
 .lni-pointer::before {
-  content: '\eb61';
+  content: "\eb61";
 }
 
 .lni-popup::before {
-  content: '\eb62';
+  content: "\eb62";
 }
 
 .lni-postcard::before {
-  content: '\eb63';
+  content: "\eb63";
 }
 
 .lni-pound::before {
-  content: '\eb64';
+  content: "\eb64";
 }
 
 .lni-power-switch::before {
-  content: '\eb65';
+  content: "\eb65";
 }
 
 .lni-printer::before {
-  content: '\eb66';
+  content: "\eb66";
 }
 
 .lni-producthunt::before {
-  content: '\eb67';
+  content: "\eb67";
 }
 
 .lni-protection::before {
-  content: '\eb68';
+  content: "\eb68";
 }
 
 .lni-pulse::before {
-  content: '\eb69';
+  content: "\eb69";
 }
 
 .lni-pyramids::before {
-  content: '\eb6a';
+  content: "\eb6a";
 }
 
 .lni-python::before {
-  content: '\eb6b';
+  content: "\eb6b";
 }
 
 .lni-question-circle::before {
-  content: '\eb6c';
+  content: "\eb6c";
 }
 
 .lni-quora::before {
-  content: '\eb6d';
+  content: "\eb6d";
 }
 
 .lni-quotation::before {
-  content: '\eb6e';
+  content: "\eb6e";
 }
 
 .lni-radio-button::before {
-  content: '\eb6f';
+  content: "\eb6f";
 }
 
 .lni-rain::before {
-  content: '\eb70';
+  content: "\eb70";
 }
 
 .lni-react::before {
-  content: '\eb73';
+  content: "\eb73";
 }
 
 .lni-reddit::before {
-  content: '\eb71';
+  content: "\eb71";
 }
 
 .lni-reload::before {
-  content: '\eb72';
+  content: "\eb72";
 }
 
 .lni-remove-file::before {
-  content: '\eb74';
+  content: "\eb74";
 }
 
 .lni-reply::before {
-  content: '\eb75';
+  content: "\eb75";
 }
 
 .lni-restaurant::before {
-  content: '\eb76';
+  content: "\eb76";
 }
 
 .lni-revenue::before {
-  content: '\eb77';
+  content: "\eb77";
 }
 
 .lni-road::before {
-  content: '\eb78';
+  content: "\eb78";
 }
 
 .lni-rocket::before {
-  content: '\eb79';
+  content: "\eb79";
 }
 
 .lni-rss-feed::before {
-  content: '\eb7a';
+  content: "\eb7a";
 }
 
 .lni-ruler-alt::before {
-  content: '\eb7b';
+  content: "\eb7b";
 }
 
 .lni-ruler-pencil::before {
-  content: '\eb7c';
+  content: "\eb7c";
 }
 
 .lni-ruler::before {
-  content: '\eb7d';
+  content: "\eb7d";
 }
 
 .lni-rupee::before {
-  content: '\eb7e';
+  content: "\eb7e";
 }
 
 .lni-sad::before {
-  content: '\eb7f';
+  content: "\eb7f";
 }
 
 .lni-save::before {
-  content: '\eb80';
+  content: "\eb80";
 }
 
 .lni-school-bench-alt::before {
-  content: '\eb81';
+  content: "\eb81";
 }
 
 .lni-school-bench::before {
-  content: '\eb82';
+  content: "\eb82";
 }
 
 .lni-scooter::before {
-  content: '\eb83';
+  content: "\eb83";
 }
 
 .lni-scroll-down::before {
-  content: '\eb84';
+  content: "\eb84";
 }
 
 .lni-search-alt::before {
-  content: '\eb85';
+  content: "\eb85";
 }
 
 .lni-search::before {
-  content: '\eb86';
+  content: "\eb86";
 }
 
 .lni-select::before {
-  content: '\eb87';
+  content: "\eb87";
 }
 
 .lni-seo::before {
-  content: '\eb88';
+  content: "\eb88";
 }
 
 .lni-service::before {
-  content: '\eb89';
+  content: "\eb89";
 }
 
 .lni-share-alt-1::before {
-  content: '\eb8a';
+  content: "\eb8a";
 }
 
 .lni-share-alt::before {
-  content: '\eb8b';
+  content: "\eb8b";
 }
 
 .lni-share::before {
-  content: '\eb8c';
+  content: "\eb8c";
 }
 
 .lni-shield::before {
-  content: '\eb8d';
+  content: "\eb8d";
 }
 
 .lni-shift-left::before {
-  content: '\eb8e';
+  content: "\eb8e";
 }
 
 .lni-shift-right::before {
-  content: '\eb8f';
+  content: "\eb8f";
 }
 
 .lni-ship::before {
-  content: '\eb90';
+  content: "\eb90";
 }
 
 .lni-shopify::before {
-  content: '\eb91';
+  content: "\eb91";
 }
 
 .lni-shopping-basket::before {
-  content: '\eb92';
+  content: "\eb92";
 }
 
 .lni-shortcode::before {
-  content: '\eb93';
+  content: "\eb93";
 }
 
 .lni-shovel::before {
-  content: '\eb94';
+  content: "\eb94";
 }
 
 .lni-shuffle::before {
-  content: '\eb95';
+  content: "\eb95";
 }
 
 .lni-signal::before {
-  content: '\eb96';
+  content: "\eb96";
 }
 
 .lni-sketch::before {
-  content: '\eb97';
+  content: "\eb97";
 }
 
 .lni-skipping-rope::before {
-  content: '\eb98';
+  content: "\eb98";
 }
 
 .lni-skype::before {
-  content: '\eb99';
+  content: "\eb99";
 }
 
 .lni-slack-line::before {
-  content: '\eb9a';
+  content: "\eb9a";
 }
 
 .lni-slack::before {
-  content: '\eb9b';
+  content: "\eb9b";
 }
 
 .lni-slice::before {
-  content: '\eb9c';
+  content: "\eb9c";
 }
 
 .lni-slideshare::before {
-  content: '\eb9d';
+  content: "\eb9d";
 }
 
 .lni-slim::before {
-  content: '\eb9e';
+  content: "\eb9e";
 }
 
 .lni-smile::before {
-  content: '\eb9f';
+  content: "\eb9f";
 }
 
 .lni-snapchat::before {
-  content: '\eba0';
+  content: "\eba0";
 }
 
 .lni-sort-alpha-asc::before {
-  content: '\eba1';
+  content: "\eba1";
 }
 
 .lni-sort-amount-asc::before {
-  content: '\eba2';
+  content: "\eba2";
 }
 
 .lni-sort-amount-dsc::before {
-  content: '\eba3';
+  content: "\eba3";
 }
 
 .lni-soundcloud-original::before {
-  content: '\eba4';
+  content: "\eba4";
 }
 
 .lni-soundcloud::before {
-  content: '\eba5';
+  content: "\eba5";
 }
 
 .lni-speechless::before {
-  content: '\eba6';
+  content: "\eba6";
 }
 
 .lni-spellcheck::before {
-  content: '\eba7';
+  content: "\eba7";
 }
 
 .lni-spinner-arrow::before {
-  content: '\eba8';
+  content: "\eba8";
 }
 
 .lni-spinner-solid::before {
-  content: '\eba9';
+  content: "\eba9";
 }
 
 .lni-spinner::before {
-  content: '\ebaa';
+  content: "\ebaa";
 }
 
 .lni-spotify-original::before {
-  content: '\ebab';
+  content: "\ebab";
 }
 
 .lni-spotify::before {
-  content: '\ebac';
+  content: "\ebac";
 }
 
 .lni-spray::before {
-  content: '\ebad';
+  content: "\ebad";
 }
 
 .lni-sprout::before {
-  content: '\ebae';
+  content: "\ebae";
 }
 
 .lni-squarespace::before {
-  content: '\ebaf';
+  content: "\ebaf";
 }
 
 .lni-stackoverflow::before {
-  content: '\ebb0';
+  content: "\ebb0";
 }
 
 .lni-stamp::before {
-  content: '\ebb1';
+  content: "\ebb1";
 }
 
 .lni-star-empty::before {
-  content: '\ebb2';
+  content: "\ebb2";
 }
 
 .lni-star-filled::before {
-  content: '\ebb3';
+  content: "\ebb3";
 }
 
 .lni-star-half::before {
-  content: '\ebb4';
+  content: "\ebb4";
 }
 
 .lni-star::before {
-  content: '\ebb5';
+  content: "\ebb5";
 }
 
 .lni-stats-down::before {
-  content: '\ebb6';
+  content: "\ebb6";
 }
 
 .lni-stats-up::before {
-  content: '\ebb7';
+  content: "\ebb7";
 }
 
 .lni-steam::before {
-  content: '\ebb8';
+  content: "\ebb8";
 }
 
 .lni-sthethoscope::before {
-  content: '\ebb9';
+  content: "\ebb9";
 }
 
 .lni-stop::before {
-  content: '\ebba';
+  content: "\ebba";
 }
 
 .lni-strikethrough::before {
-  content: '\ebbb';
+  content: "\ebbb";
 }
 
 .lni-stripe::before {
-  content: '\ebbc';
+  content: "\ebbc";
 }
 
 .lni-stumbleupon::before {
-  content: '\ebbd';
+  content: "\ebbd";
 }
 
 .lni-sun::before {
-  content: '\ebbe';
+  content: "\ebbe";
 }
 
 .lni-support::before {
-  content: '\ebbf';
+  content: "\ebbf";
 }
 
 .lni-surf-board::before {
-  content: '\ebc0';
+  content: "\ebc0";
 }
 
 .lni-suspect::before {
-  content: '\ebc1';
+  content: "\ebc1";
 }
 
 .lni-swift::before {
-  content: '\ebc2';
+  content: "\ebc2";
 }
 
 .lni-syringe::before {
-  content: '\ebc3';
+  content: "\ebc3";
 }
 
 .lni-tab::before {
-  content: '\ebc4';
+  content: "\ebc4";
 }
 
 .lni-tag::before {
-  content: '\ebc5';
+  content: "\ebc5";
 }
 
 .lni-target-customer::before {
-  content: '\ebc6';
+  content: "\ebc6";
 }
 
 .lni-target-revenue::before {
-  content: '\ebc7';
+  content: "\ebc7";
 }
 
 .lni-target::before {
-  content: '\ebc8';
+  content: "\ebc8";
 }
 
 .lni-taxi::before {
-  content: '\ebc9';
+  content: "\ebc9";
 }
 
 .lni-teabag::before {
-  content: '\ebca';
+  content: "\ebca";
 }
 
 .lni-telegram-original::before {
-  content: '\ebcb';
+  content: "\ebcb";
 }
 
 .lni-telegram::before {
-  content: '\ebcc';
+  content: "\ebcc";
 }
 
 .lni-text-align-center::before {
-  content: '\ebcd';
+  content: "\ebcd";
 }
 
 .lni-text-align-justify::before {
-  content: '\ebce';
+  content: "\ebce";
 }
 
 .lni-text-align-left::before {
-  content: '\ebcf';
+  content: "\ebcf";
 }
 
 .lni-text-align-right::before {
-  content: '\ebd0';
+  content: "\ebd0";
 }
 
 .lni-text-format-remove::before {
-  content: '\ebd4';
+  content: "\ebd4";
 }
 
 .lni-text-format::before {
-  content: '\ebd1';
+  content: "\ebd1";
 }
 
 .lni-thought::before {
-  content: '\ebd2';
+  content: "\ebd2";
 }
 
 .lni-thumbs-down::before {
-  content: '\ebd3';
+  content: "\ebd3";
 }
 
 .lni-thumbs-up::before {
-  content: '\ebd5';
+  content: "\ebd5";
 }
 
 .lni-thunder-alt::before {
-  content: '\ebd6';
+  content: "\ebd6";
 }
 
 .lni-thunder::before {
-  content: '\ebd7';
+  content: "\ebd7";
 }
 
 .lni-ticket-alt::before {
-  content: '\ebd8';
+  content: "\ebd8";
 }
 
 .lni-ticket::before {
-  content: '\ebd9';
+  content: "\ebd9";
 }
 
 .lni-tiktok::before {
-  content: '\ebda';
+  content: "\ebda";
 }
 
 .lni-timer::before {
-  content: '\ebdb';
+  content: "\ebdb";
 }
 
 .lni-tounge::before {
-  content: '\ebdc';
+  content: "\ebdc";
 }
 
 .lni-train-alt::before {
-  content: '\ebdd';
+  content: "\ebdd";
 }
 
 .lni-train::before {
-  content: '\ebde';
+  content: "\ebde";
 }
 
 .lni-trash-can::before {
-  content: '\ebdf';
+  content: "\ebdf";
 }
 
 .lni-travel::before {
-  content: '\ebe0';
+  content: "\ebe0";
 }
 
 .lni-tree::before {
-  content: '\ebe1';
+  content: "\ebe1";
 }
 
 .lni-trees::before {
-  content: '\ebe2';
+  content: "\ebe2";
 }
 
 .lni-trello::before {
-  content: '\ebe3';
+  content: "\ebe3";
 }
 
 .lni-trowel::before {
-  content: '\ebe4';
+  content: "\ebe4";
 }
 
 .lni-tshirt::before {
-  content: '\ebe5';
+  content: "\ebe5";
 }
 
 .lni-tumblr::before {
-  content: '\ebe6';
+  content: "\ebe6";
 }
 
 .lni-twitch::before {
-  content: '\ebe7';
+  content: "\ebe7";
 }
 
 .lni-twitter-filled::before {
-  content: '\ebe8';
+  content: "\ebe8";
 }
 
 .lni-twitter-original::before {
-  content: '\ebe9';
+  content: "\ebe9";
 }
 
 .lni-twitter::before {
-  content: '\ebea';
+  content: "\ebea";
 }
 
 .lni-ubuntu::before {
-  content: '\ebeb';
+  content: "\ebeb";
 }
 
 .lni-underline::before {
-  content: '\ebec';
+  content: "\ebec";
 }
 
 .lni-unlink::before {
-  content: '\ebed';
+  content: "\ebed";
 }
 
 .lni-unlock::before {
-  content: '\ebee';
+  content: "\ebee";
 }
 
 .lni-unsplash::before {
-  content: '\ebef';
+  content: "\ebef";
 }
 
 .lni-upload::before {
-  content: '\ebf0';
+  content: "\ebf0";
 }
 
 .lni-user::before {
-  content: '\ebf1';
+  content: "\ebf1";
 }
 
 .lni-users::before {
-  content: '\ebf6';
+  content: "\ebf6";
 }
 
 .lni-ux::before {
-  content: '\ebf2';
+  content: "\ebf2";
 }
 
 .lni-vector::before {
-  content: '\ebf3';
+  content: "\ebf3";
 }
 
 .lni-video::before {
-  content: '\ebf4';
+  content: "\ebf4";
 }
 
 .lni-vimeo::before {
-  content: '\ebf5';
+  content: "\ebf5";
 }
 
 .lni-visa::before {
-  content: '\ebf7';
+  content: "\ebf7";
 }
 
 .lni-vk::before {
-  content: '\ebf8';
+  content: "\ebf8";
 }
 
 .lni-volume-high::before {
-  content: '\ebf9';
+  content: "\ebf9";
 }
 
 .lni-volume-low::before {
-  content: '\ebfa';
+  content: "\ebfa";
 }
 
 .lni-volume-medium::before {
-  content: '\ebfb';
+  content: "\ebfb";
 }
 
 .lni-volume-mute::before {
-  content: '\ebfc';
+  content: "\ebfc";
 }
 
 .lni-volume::before {
-  content: '\ebfd';
+  content: "\ebfd";
 }
 
 .lni-wallet::before {
-  content: '\ebfe';
+  content: "\ebfe";
 }
 
 .lni-warning::before {
-  content: '\ebff';
+  content: "\ebff";
 }
 
 .lni-website-alt::before {
-  content: '\ec00';
+  content: "\ec00";
 }
 
 .lni-website::before {
-  content: '\ec01';
+  content: "\ec01";
 }
 
 .lni-wechat::before {
-  content: '\ec02';
+  content: "\ec02";
 }
 
 .lni-weight::before {
-  content: '\ec03';
+  content: "\ec03";
 }
 
 .lni-whatsapp::before {
-  content: '\ec04';
+  content: "\ec04";
 }
 
 .lni-wheelbarrow::before {
-  content: '\ec05';
+  content: "\ec05";
 }
 
 .lni-wheelchair::before {
-  content: '\ec06';
+  content: "\ec06";
 }
 
 .lni-windows::before {
-  content: '\ec07';
+  content: "\ec07";
 }
 
 .lni-wordpress-filled::before {
-  content: '\ec08';
+  content: "\ec08";
 }
 
 .lni-wordpress::before {
-  content: '\ec09';
+  content: "\ec09";
 }
 
 .lni-world-alt::before {
-  content: '\ec0a';
+  content: "\ec0a";
 }
 
 .lni-world::before {
-  content: '\ec0c';
+  content: "\ec0c";
 }
 
 .lni-write::before {
-  content: '\ec0b';
+  content: "\ec0b";
 }
 
 .lni-xbox::before {
-  content: '\ec0d';
+  content: "\ec0d";
 }
 
 .lni-yahoo::before {
-  content: '\ec0e';
+  content: "\ec0e";
 }
 
 .lni-ycombinator::before {
-  content: '\ec0f';
+  content: "\ec0f";
 }
 
 .lni-yen::before {
-  content: '\ec10';
+  content: "\ec10";
 }
 
 .lni-youtube::before {
-  content: '\ec13';
+  content: "\ec13";
 }
 
 .lni-zip::before {
-  content: '\ec11';
+  content: "\ec11";
 }
 
 .lni-zoom-in::before {
-  content: '\ec12';
+  content: "\ec12";
 }
 
 .lni-zoom-out::before {
-  content: '\ec14';
+  content: "\ec14";
 }
diff --git a/examples/cms-buttercms/css/main.css b/examples/cms-buttercms/css/main.css
index 3448f3ad5e..ac5538c15b 100644
--- a/examples/cms-buttercms/css/main.css
+++ b/examples/cms-buttercms/css/main.css
@@ -5,7 +5,7 @@ html {
 }
 
 body {
-  font-family: 'Sen', sans-serif;
+  font-family: "Sen", sans-serif;
   font-weight: normal;
   font-style: normal;
   color: rgba(0, 0, 0, 0.7);
@@ -217,7 +217,7 @@ p {
 }
 
 .btn-hover::after {
-  content: '';
+  content: "";
   position: absolute;
   width: 0%;
   height: 0%;
@@ -966,7 +966,7 @@ p {
 }
 
 .hero-section::after {
-  content: '';
+  content: "";
   position: absolute;
   width: 862px;
   height: 862px;
@@ -1057,7 +1057,7 @@ p {
 ================================== */
 .feature-section {
   position: relative;
-  background-image: url('../public/images/common-bg.svg');
+  background-image: url("../public/images/common-bg.svg");
   background-size: cover;
   background-position: bottom center;
   padding-top: 180px;
@@ -1100,7 +1100,7 @@ p {
 
 .single-feature .feature-icon::before,
 .single-feature .feature-icon::after {
-  content: '';
+  content: "";
   position: absolute;
   width: 100%;
   height: 100%;
@@ -1220,7 +1220,7 @@ p {
 ======================== */
 .blog-section {
   padding-top: 160px;
-  background-image: url('../public/images/common-bg.svg');
+  background-image: url("../public/images/common-bg.svg");
   background-size: cover;
   background-position: bottom-center;
 }
@@ -1366,7 +1366,7 @@ p {
 .single-blog.standard::after,
 .standard.single-post::after,
 .standard.blog-roll-card::after {
-  content: '';
+  content: "";
   position: absolute;
   background: #37c2cc;
   border-radius: 50%;
@@ -1455,7 +1455,7 @@ p {
 }
 
 .breadcrumb-nav li::after {
-  content: '';
+  content: "";
   font-size: 10px;
   position: relative;
   font-family: lineIcons;
@@ -1463,7 +1463,7 @@ p {
 }
 
 .breadcrumb-nav li:last-child::after {
-  content: '';
+  content: "";
 }
 
 .single-post,
@@ -1552,7 +1552,7 @@ p {
   .single-post-meta-info li::before,
   .blog-roll-card-meta-info li::before {
     position: absolute;
-    content: '';
+    content: "";
     right: -5px;
     top: 50%;
     background-color: #d2d2d2;
@@ -1725,7 +1725,7 @@ p {
 		TESTIMONIAL CSS
 =========================== */
 .testimonial-section {
-  background-image: url('../public/images/testimonial/testimonial-bg.svg');
+  background-image: url("../public/images/testimonial/testimonial-bg.svg");
   background-size: cover;
   background-position: bottom center;
   padding-top: 75px;
diff --git a/examples/cms-buttercms/css/tiny-slider.min.css b/examples/cms-buttercms/css/tiny-slider.min.css
index f2fef5a0a2..89689dde2b 100644
--- a/examples/cms-buttercms/css/tiny-slider.min.css
+++ b/examples/cms-buttercms/css/tiny-slider.min.css
@@ -27,7 +27,7 @@
   white-space: normal;
 }
 .tns-horizontal.tns-no-subpixel:after {
-  content: '';
+  content: "";
   display: table;
   clear: both;
 }
@@ -122,7 +122,7 @@
   right: 0;
 }
 .tns-t-ct:after {
-  content: '';
+  content: "";
   display: table;
   clear: both;
 }
diff --git a/examples/cms-buttercms/lib/api.js b/examples/cms-buttercms/lib/api.js
index b4a07b946f..cc9670bcc9 100644
--- a/examples/cms-buttercms/lib/api.js
+++ b/examples/cms-buttercms/lib/api.js
@@ -1,140 +1,140 @@
-import Butter from 'buttercms'
+import Butter from "buttercms";
 
-let butter
+let butter;
 
-const previewSetting = process.env.PREVIEW
+const previewSetting = process.env.PREVIEW;
 // make preview mode by default
 const preview =
-  previewSetting === 'true' || previewSetting === undefined ? 1 : 0
+  previewSetting === "true" || previewSetting === undefined ? 1 : 0;
 
 try {
-  butter = Butter(process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY, preview)
+  butter = Butter(process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY, preview);
 } catch (e) {
-  console.log(e)
+  console.log(e);
 }
 
-const defaultPageSize = 100
-const defaultPostCount = 10
+const defaultPageSize = 100;
+const defaultPostCount = 10;
 
 async function getLandingPagesData(page, pageSize = defaultPageSize) {
   try {
     const params = {
       page,
       page_size: pageSize,
-    }
-    const response = await butter.page.list('landing-page', params)
+    };
+    const response = await butter.page.list("landing-page", params);
 
     return {
       pages: response?.data?.data,
       prevPage: response?.data?.meta.previous_page,
       nextPage: response?.data?.meta.next_page,
-    }
+    };
   } catch (e) {
-    throw e.response.data.detail
+    throw e.response.data.detail;
   }
 }
 
 export async function getLandingPage(slug) {
   try {
-    const page = await butter.page.retrieve('landing-page', slug)
+    const page = await butter.page.retrieve("landing-page", slug);
 
-    return page?.data?.data
+    return page?.data?.data;
   } catch (e) {
-    throw e.response.data.detail
+    throw e.response.data.detail;
   }
 }
 
 export async function getLandingPages() {
-  let paginatedLandingPages = []
-  let currentPage = 1
+  let paginatedLandingPages = [];
+  let currentPage = 1;
   while (!!currentPage) {
-    const landingPagesData = await getLandingPagesData(currentPage)
-    paginatedLandingPages.push(...landingPagesData.pages)
-    currentPage = landingPagesData.nextPage
+    const landingPagesData = await getLandingPagesData(currentPage);
+    paginatedLandingPages.push(...landingPagesData.pages);
+    currentPage = landingPagesData.nextPage;
   }
 
-  return paginatedLandingPages
+  return paginatedLandingPages;
 }
 
 export async function getPostsData(
-  { page, pageSize, tag, category } = { page: 1, pageSize: defaultPostCount }
+  { page, pageSize, tag, category } = { page: 1, pageSize: defaultPostCount },
 ) {
   try {
     // https://buttercms.com/docs/api/node?javascript#get-your-blog-posts
     const params = {
       page_size: pageSize || defaultPostCount,
       page: page || 1,
-    }
+    };
 
     if (tag) {
-      params.tag_slug = tag
+      params.tag_slug = tag;
     }
 
     if (category) {
-      params.category_slug = category
+      params.category_slug = category;
     }
-    const response = await butter.post.list(params)
+    const response = await butter.post.list(params);
 
     return {
       posts: response?.data?.data,
       prevPage: response?.data?.meta.previous_page,
       nextPage: response?.data?.meta.next_page,
-    }
+    };
   } catch (e) {
-    throw e.response.data.detail
+    throw e.response.data.detail;
   }
 }
 
 export async function getPost(slug) {
   try {
-    const response = await butter.post.retrieve(slug)
+    const response = await butter.post.retrieve(slug);
 
-    return response?.data?.data
+    return response?.data?.data;
   } catch (e) {
-    throw e.response.data.detail
+    throw e.response.data.detail;
   }
 }
 
 export async function getMainMenu() {
   try {
-    const response = await butter.content.retrieve(['navigation_menu'])
+    const response = await butter.content.retrieve(["navigation_menu"]);
 
     const mainMenu = response?.data?.data?.navigation_menu.find(
-      (menu) => menu.name === 'Main menu'
-    )
+      (menu) => menu.name === "Main menu",
+    );
 
-    return mainMenu ? mainMenu.menu_items : []
+    return mainMenu ? mainMenu.menu_items : [];
   } catch (e) {
-    throw e.response.data.detail
+    throw e.response.data.detail;
   }
 }
 
 export async function getCategories() {
   try {
-    const response = await butter.category.list()
+    const response = await butter.category.list();
 
-    return response?.data?.data
+    return response?.data?.data;
   } catch (e) {
-    throw e.response.data.detail
+    throw e.response.data.detail;
   }
 }
 
 export async function getTags() {
   try {
-    const response = await butter.tag.list()
+    const response = await butter.tag.list();
 
-    return response?.data?.data
+    return response?.data?.data;
   } catch (e) {
-    throw e.response.data.detail
+    throw e.response.data.detail;
   }
 }
 
 export async function searchPosts({ query }) {
   try {
-    const response = await butter.post.search(query)
+    const response = await butter.post.search(query);
 
-    return response?.data?.data
+    return response?.data?.data;
   } catch (e) {
-    throw e.response.data.detail
+    throw e.response.data.detail;
   }
 }
diff --git a/examples/cms-buttercms/next.config.js b/examples/cms-buttercms/next.config.js
index 0ec3e61ea5..7e40612a77 100644
--- a/examples/cms-buttercms/next.config.js
+++ b/examples/cms-buttercms/next.config.js
@@ -4,40 +4,40 @@ module.exports = {
   async rewrites() {
     return [
       {
-        source: '/',
-        destination: '/landing-page/landing-page-with-components',
+        source: "/",
+        destination: "/landing-page/landing-page-with-components",
       },
-    ]
+    ];
   },
   redirects() {
     const sourcesRequiringAuthToken = [
-      '/',
-      '/landing-page/:slug*',
-      '/blog/:path*',
-    ]
+      "/",
+      "/landing-page/:slug*",
+      "/blog/:path*",
+    ];
 
     return process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY
       ? [
           {
-            source: '/missing-token',
-            destination: '/',
+            source: "/missing-token",
+            destination: "/",
             permanent: false,
           },
         ]
       : sourcesRequiringAuthToken.map((source) => ({
           source: source,
-          destination: '/missing-token',
+          destination: "/missing-token",
           permanent: false,
-        }))
+        }));
   },
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'cdn.buttercms.com',
-        port: '',
-        pathname: '/my-account/**',
+        protocol: "https",
+        hostname: "cdn.buttercms.com",
+        port: "",
+        pathname: "/my-account/**",
       },
     ],
   },
-}
+};
diff --git a/examples/cms-buttercms/pages/_app.js b/examples/cms-buttercms/pages/_app.js
index 881a7c2d14..410f62dbdd 100644
--- a/examples/cms-buttercms/pages/_app.js
+++ b/examples/cms-buttercms/pages/_app.js
@@ -1,49 +1,49 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
 
-import Router from 'next/router'
-import App from 'next/app'
-import Head from 'next/head'
-import { useRouter } from 'next/router'
+import Router from "next/router";
+import App from "next/app";
+import Head from "next/head";
+import { useRouter } from "next/router";
 
-import { getMainMenu } from '@/lib/api'
+import { getMainMenu } from "@/lib/api";
 
-import FooterSection from '@/components/footer-section'
-import HeaderSection from '@/components/header-section'
-import ScrollToButtonButton from '@/components/scroll-to-top-button'
-import Preloader from '@/components/preloader'
+import FooterSection from "@/components/footer-section";
+import HeaderSection from "@/components/header-section";
+import ScrollToButtonButton from "@/components/scroll-to-top-button";
+import Preloader from "@/components/preloader";
 
-import 'bootstrap/dist/css/bootstrap.css'
-import '@/css/lineicons.css'
+import "bootstrap/dist/css/bootstrap.css";
+import "@/css/lineicons.css";
 
-import '@/css/tiny-slider.min.css'
-import '@/css/main.css'
+import "@/css/tiny-slider.min.css";
+import "@/css/main.css";
 
 function MyApp({ Component, pageProps, mainMenu }) {
-  const [isLoading, setIsLoading] = useState(false)
-  const router = useRouter()
-  const authToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+  const authToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY;
 
   useEffect(() => {
-    import('bootstrap/dist/js/bootstrap.js')
+    import("bootstrap/dist/js/bootstrap.js");
 
     const showLoader = () => {
-      setIsLoading(true)
-    }
+      setIsLoading(true);
+    };
 
     const removeLoader = () => {
-      setIsLoading(false)
-    }
+      setIsLoading(false);
+    };
 
-    Router.events.on('routeChangeStart', showLoader)
-    Router.events.on('routeChangeComplete', removeLoader)
-    Router.events.on('routeChangeError', removeLoader)
+    Router.events.on("routeChangeStart", showLoader);
+    Router.events.on("routeChangeComplete", removeLoader);
+    Router.events.on("routeChangeError", removeLoader);
 
     return () => {
-      Router.events.off('routeChangeStart', showLoader)
-      Router.events.off('routeChangeComplete', removeLoader)
-      Router.events.off('routeChangeError', removeLoader)
-    }
-  }, [authToken, router])
+      Router.events.off("routeChangeStart", showLoader);
+      Router.events.off("routeChangeComplete", removeLoader);
+      Router.events.off("routeChangeError", removeLoader);
+    };
+  }, [authToken, router]);
 
   const pageLayout = authToken ? (
     <>
@@ -54,7 +54,7 @@ function MyApp({ Component, pageProps, mainMenu }) {
     </>
   ) : (
     <Component {...pageProps} />
-  )
+  );
 
   return (
     <>
@@ -80,23 +80,23 @@ function MyApp({ Component, pageProps, mainMenu }) {
 
       {!isLoading && pageLayout}
     </>
-  )
+  );
 }
 
 MyApp.getInitialProps = async (appContext) => {
-  const appProps = await App.getInitialProps(appContext)
-  const authToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY
-  let mainMenu = []
+  const appProps = await App.getInitialProps(appContext);
+  const authToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY;
+  let mainMenu = [];
 
   if (authToken) {
     try {
-      mainMenu = await getMainMenu()
+      mainMenu = await getMainMenu();
     } catch (e) {
-      console.error("Couldn't load main menu links.", e)
+      console.error("Couldn't load main menu links.", e);
     }
   }
 
-  return { ...appProps, mainMenu }
-}
+  return { ...appProps, mainMenu };
+};
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-buttercms/pages/_document.js b/examples/cms-buttercms/pages/_document.js
index e2437f5e8e..10de9e7eb9 100644
--- a/examples/cms-buttercms/pages/_document.js
+++ b/examples/cms-buttercms/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -14,5 +14,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/cms-buttercms/pages/blog.js b/examples/cms-buttercms/pages/blog.js
index 474302b71d..63fa074f51 100644
--- a/examples/cms-buttercms/pages/blog.js
+++ b/examples/cms-buttercms/pages/blog.js
@@ -1,12 +1,12 @@
-import Link from 'next/link'
+import Link from "next/link";
 
-import camelcaseKeys from 'camelcase-keys'
+import camelcaseKeys from "camelcase-keys";
 
-import PostsList from '@/components/blog/posts-list'
+import PostsList from "@/components/blog/posts-list";
 
-import { getPostsData, getCategories } from '@/lib/api'
-import CategoriesWidget from '@/components/blog/categories-widget'
-import SearchWidget from '@/components/blog/search-widget'
+import { getPostsData, getCategories } from "@/lib/api";
+import CategoriesWidget from "@/components/blog/categories-widget";
+import SearchWidget from "@/components/blog/search-widget";
 
 export default function Blog({ posts, categories }) {
   return (
@@ -41,26 +41,26 @@ export default function Blog({ posts, categories }) {
         </div>
       </section>
     </>
-  )
+  );
 }
 
 export async function getStaticProps() {
-  const butterToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY
+  const butterToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY;
 
   if (butterToken) {
     try {
-      const blogPosts = (await getPostsData()).posts
-      const categories = await getCategories()
+      const blogPosts = (await getPostsData()).posts;
+      const categories = await getCategories();
 
-      return { props: { posts: camelcaseKeys(blogPosts), categories } }
+      return { props: { posts: camelcaseKeys(blogPosts), categories } };
     } catch (e) {
-      console.log('Could not get posts', e)
+      console.log("Could not get posts", e);
 
       return {
         props: { posts: [], categories: [] },
-      }
+      };
     }
   }
 
-  return { props: { posts: [], categories: [] } }
+  return { props: { posts: [], categories: [] } };
 }
diff --git a/examples/cms-buttercms/pages/blog/[slug].js b/examples/cms-buttercms/pages/blog/[slug].js
index f2e12b599d..bc776d8105 100644
--- a/examples/cms-buttercms/pages/blog/[slug].js
+++ b/examples/cms-buttercms/pages/blog/[slug].js
@@ -1,26 +1,26 @@
-import Image from 'next/image'
-import Head from 'next/head'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import camelcaseKeys from 'camelcase-keys'
+import Image from "next/image";
+import Head from "next/head";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import camelcaseKeys from "camelcase-keys";
 
-import { getPost, getPostsData, getCategories } from '@/lib/api'
+import { getPost, getPostsData, getCategories } from "@/lib/api";
 
-import HumanDate from '@/components/human-date'
-import CategoriesWidget from '@/components/blog/categories-widget'
-import SearchWidget from '@/components/blog/search-widget'
-import AuthorCard from '@/components/author-card'
-import Preloader from '@/components/preloader'
+import HumanDate from "@/components/human-date";
+import CategoriesWidget from "@/components/blog/categories-widget";
+import SearchWidget from "@/components/blog/search-widget";
+import AuthorCard from "@/components/author-card";
+import Preloader from "@/components/preloader";
 
 export default function BlogPost({ post, categories }) {
-  const router = useRouter()
+  const router = useRouter();
   if (router.isFallback) {
-    return <Preloader />
+    return <Preloader />;
   }
 
   if (!post) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
 
   return (
@@ -81,7 +81,7 @@ export default function BlogPost({ post, categories }) {
                     </li>
                     <li>
                       <a>
-                        <i className="lni lni-calendar"></i>{' '}
+                        <i className="lni lni-calendar"></i>{" "}
                         <HumanDate dateString={post.published} />
                       </a>
                     </li>
@@ -119,41 +119,41 @@ export default function BlogPost({ post, categories }) {
         </div>
       </section>
     </>
-  )
+  );
 }
 
 export async function getStaticProps({ params }) {
   try {
-    const post = await getPost(params.slug)
-    const categories = await getCategories()
-    return { props: { post: camelcaseKeys(post), categories } }
+    const post = await getPost(params.slug);
+    const categories = await getCategories();
+    return { props: { post: camelcaseKeys(post), categories } };
   } catch (e) {
-    console.error(`Couldn't load post or categories data.`, e)
+    console.error(`Couldn't load post or categories data.`, e);
 
     return {
       notFound: true,
-    }
+    };
   }
 }
 
 export async function getStaticPaths() {
-  const butterToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY
+  const butterToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY;
 
   if (butterToken) {
     try {
-      const posts = (await getPostsData()).posts
+      const posts = (await getPostsData()).posts;
 
       return {
         paths: posts.map((post) => `/blog/${post.slug}`),
         fallback: true,
-      }
+      };
     } catch (e) {
-      console.error(`Couldn't load posts.`, e)
+      console.error(`Couldn't load posts.`, e);
     }
   }
 
   return {
     paths: [],
     fallback: false,
-  }
+  };
 }
diff --git a/examples/cms-buttercms/pages/blog/category/[slug].js b/examples/cms-buttercms/pages/blog/category/[slug].js
index d188d3a242..719554a940 100644
--- a/examples/cms-buttercms/pages/blog/category/[slug].js
+++ b/examples/cms-buttercms/pages/blog/category/[slug].js
@@ -1,12 +1,12 @@
-import Link from 'next/link'
+import Link from "next/link";
 
-import camelcaseKeys from 'camelcase-keys'
+import camelcaseKeys from "camelcase-keys";
 
-import PostsList from '@/components/blog/posts-list'
+import PostsList from "@/components/blog/posts-list";
 
-import { getPostsData, getCategories } from '@/lib/api'
-import CategoriesWidget from '@/components/blog/categories-widget'
-import SearchWidget from '@/components/blog/search-widget'
+import { getPostsData, getCategories } from "@/lib/api";
+import CategoriesWidget from "@/components/blog/categories-widget";
+import SearchWidget from "@/components/blog/search-widget";
 
 export default function Category({ posts, categories, slug }) {
   return (
@@ -44,48 +44,48 @@ export default function Category({ posts, categories, slug }) {
         </div>
       </section>
     </>
-  )
+  );
 }
 
 export async function getStaticProps({ params: { slug } }) {
   try {
-    const blogPosts = (await getPostsData({ category: slug })).posts
-    const categories = await getCategories()
+    const blogPosts = (await getPostsData({ category: slug })).posts;
+    const categories = await getCategories();
 
     return {
       props: { posts: camelcaseKeys(blogPosts), categories, slug },
       revalidate: 1,
-    }
+    };
   } catch (e) {
     return {
       notFound: true,
-    }
+    };
   }
 }
 
 export async function getStaticPaths() {
-  const butterToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY
+  const butterToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY;
 
   if (butterToken) {
     try {
-      const categories = await getCategories()
+      const categories = await getCategories();
 
       return {
         paths: categories.map((category) => `/blog/category/${category.slug}`),
         fallback: true,
-      }
+      };
     } catch (e) {
-      console.error(`Couldn't load categories.`, e)
+      console.error(`Couldn't load categories.`, e);
 
       return {
         paths: [],
         fallback: false,
-      }
+      };
     }
   }
 
   return {
     paths: [],
     fallback: false,
-  }
+  };
 }
diff --git a/examples/cms-buttercms/pages/blog/search.js b/examples/cms-buttercms/pages/blog/search.js
index f96b392448..c8a45e5a48 100644
--- a/examples/cms-buttercms/pages/blog/search.js
+++ b/examples/cms-buttercms/pages/blog/search.js
@@ -1,12 +1,12 @@
-import Link from 'next/link'
+import Link from "next/link";
 
-import camelcaseKeys from 'camelcase-keys'
+import camelcaseKeys from "camelcase-keys";
 
-import PostsList from '@/components/blog/posts-list'
+import PostsList from "@/components/blog/posts-list";
 
-import { getCategories, searchPosts } from '@/lib/api'
-import CategoriesWidget from '@/components/blog/categories-widget'
-import SearchWidget from '@/components/blog/search-widget'
+import { getCategories, searchPosts } from "@/lib/api";
+import CategoriesWidget from "@/components/blog/categories-widget";
+import SearchWidget from "@/components/blog/search-widget";
 
 export default function Search({ posts, categories, query }) {
   return (
@@ -44,14 +44,14 @@ export default function Search({ posts, categories, query }) {
         </div>
       </section>
     </>
-  )
+  );
 }
 
 export async function getServerSideProps({ query: { query } }) {
-  const blogPosts = await searchPosts({ query })
-  const categories = await getCategories()
+  const blogPosts = await searchPosts({ query });
+  const categories = await getCategories();
 
   return {
     props: { posts: camelcaseKeys(blogPosts), categories, query },
-  }
+  };
 }
diff --git a/examples/cms-buttercms/pages/blog/tag/[slug].js b/examples/cms-buttercms/pages/blog/tag/[slug].js
index ad6afa415a..3c8e84a7cb 100644
--- a/examples/cms-buttercms/pages/blog/tag/[slug].js
+++ b/examples/cms-buttercms/pages/blog/tag/[slug].js
@@ -1,12 +1,12 @@
-import Link from 'next/link'
+import Link from "next/link";
 
-import camelcaseKeys from 'camelcase-keys'
+import camelcaseKeys from "camelcase-keys";
 
-import PostsList from '@/components/blog/posts-list'
+import PostsList from "@/components/blog/posts-list";
 
-import { getPostsData, getCategories, getTags } from '@/lib/api'
-import CategoriesWidget from '@/components/blog/categories-widget'
-import SearchWidget from '@/components/blog/search-widget'
+import { getPostsData, getCategories, getTags } from "@/lib/api";
+import CategoriesWidget from "@/components/blog/categories-widget";
+import SearchWidget from "@/components/blog/search-widget";
 
 export default function Tag({ posts, categories, slug }) {
   return (
@@ -44,47 +44,47 @@ export default function Tag({ posts, categories, slug }) {
         </div>
       </section>
     </>
-  )
+  );
 }
 
 export async function getStaticProps({ params: { slug } }) {
   try {
-    const blogPosts = (await getPostsData({ tag: slug })).posts
-    const categories = await getCategories()
+    const blogPosts = (await getPostsData({ tag: slug })).posts;
+    const categories = await getCategories();
 
     return {
       props: { posts: camelcaseKeys(blogPosts), categories, slug },
       revalidate: 1,
-    }
+    };
   } catch (e) {
     return {
       notFound: true,
-    }
+    };
   }
 }
 
 export async function getStaticPaths() {
-  const butterToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY
+  const butterToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY;
   if (butterToken) {
     try {
-      const tags = await getTags()
+      const tags = await getTags();
 
       return {
         paths: tags.map((tag) => `/blog/tag/${tag.slug}`),
         fallback: true,
-      }
+      };
     } catch (e) {
-      console.error(`Couldn't load tags.`, e)
+      console.error(`Couldn't load tags.`, e);
 
       return {
         paths: [],
         fallback: false,
-      }
+      };
     }
   }
 
   return {
     paths: [],
     fallback: false,
-  }
+  };
 }
diff --git a/examples/cms-buttercms/pages/landing-page/[slug].js b/examples/cms-buttercms/pages/landing-page/[slug].js
index 3c2f913fc6..9ee646c1fe 100644
--- a/examples/cms-buttercms/pages/landing-page/[slug].js
+++ b/examples/cms-buttercms/pages/landing-page/[slug].js
@@ -1,23 +1,23 @@
-import Head from 'next/head'
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
+import Head from "next/head";
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
 
-import camelcaseKeys from 'camelcase-keys'
+import camelcaseKeys from "camelcase-keys";
 
-import { getLandingPage, getLandingPages, getPostsData } from '@/lib/api'
+import { getLandingPage, getLandingPages, getPostsData } from "@/lib/api";
 
-import LandingPageSection from '@/components/landing-page-sections/landing-page-section'
-import Blog from '@/components/blog/blog'
-import Preloader from '@/components/preloader'
+import LandingPageSection from "@/components/landing-page-sections/landing-page-section";
+import Blog from "@/components/blog/blog";
+import Preloader from "@/components/preloader";
 
 export default function LandingPage({ page, blogPosts }) {
-  const router = useRouter()
+  const router = useRouter();
   if (router.isFallback) {
-    return <Preloader />
+    return <Preloader />;
   }
 
   if (!page) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
 
   return (
@@ -40,44 +40,44 @@ export default function LandingPage({ page, blogPosts }) {
       ))}
       <Blog posts={blogPosts} />
     </>
-  )
+  );
 }
 
 export async function getStaticProps({ params }) {
   try {
-    const page = await getLandingPage(params.slug)
-    const blogPosts = (await getPostsData({ page: 1, pageSize: 2 })).posts
+    const page = await getLandingPage(params.slug);
+    const blogPosts = (await getPostsData({ page: 1, pageSize: 2 })).posts;
 
     return {
       props: { page: camelcaseKeys(page), blogPosts: camelcaseKeys(blogPosts) },
-    }
+    };
   } catch (e) {
-    console.error(`Couldn't load content for Landing page ${params.slug}.`, e)
+    console.error(`Couldn't load content for Landing page ${params.slug}.`, e);
 
     return {
       notFound: true,
-    }
+    };
   }
 }
 
 export async function getStaticPaths() {
-  const butterToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY
+  const butterToken = process.env.NEXT_PUBLIC_BUTTER_CMS_API_KEY;
 
   if (butterToken) {
     try {
-      const landingPages = await getLandingPages()
+      const landingPages = await getLandingPages();
 
       return {
         paths: landingPages.map((page) => `/landing-page/${page.slug}`),
         fallback: true,
-      }
+      };
     } catch (e) {
-      console.error("Couldn't load content for Landing pages.", e)
+      console.error("Couldn't load content for Landing pages.", e);
     }
 
     return {
       paths: [],
       fallback: false,
-    }
+    };
   }
 }
diff --git a/examples/cms-buttercms/pages/missing-token.js b/examples/cms-buttercms/pages/missing-token.js
index a6b1ef1b62..8108a6db25 100644
--- a/examples/cms-buttercms/pages/missing-token.js
+++ b/examples/cms-buttercms/pages/missing-token.js
@@ -1,11 +1,11 @@
-import MissingTokenSection from '@/components/missing-token-section'
+import MissingTokenSection from "@/components/missing-token-section";
 
 export default function MissingToken() {
-  return <MissingTokenSection />
+  return <MissingTokenSection />;
 }
 
 export async function getStaticProps() {
   return {
     props: {},
-  }
+  };
 }
diff --git a/examples/cms-contentful/app/api/disable-draft/route.ts b/examples/cms-contentful/app/api/disable-draft/route.ts
index 40282bae83..06f063b72a 100644
--- a/examples/cms-contentful/app/api/disable-draft/route.ts
+++ b/examples/cms-contentful/app/api/disable-draft/route.ts
@@ -1,6 +1,6 @@
-import { draftMode } from 'next/headers'
+import { draftMode } from "next/headers";
 
 export async function GET(request: Request) {
-  draftMode().disable()
-  return new Response('Draft mode is disabled')
+  draftMode().disable();
+  return new Response("Draft mode is disabled");
 }
diff --git a/examples/cms-contentful/app/api/draft/route.ts b/examples/cms-contentful/app/api/draft/route.ts
index 16dd1f3126..fb0d83fb20 100644
--- a/examples/cms-contentful/app/api/draft/route.ts
+++ b/examples/cms-contentful/app/api/draft/route.ts
@@ -1,22 +1,22 @@
-import { draftMode } from 'next/headers'
-import { redirect } from 'next/navigation'
-import { getPreviewPostBySlug } from '../../../lib/api'
+import { draftMode } from "next/headers";
+import { redirect } from "next/navigation";
+import { getPreviewPostBySlug } from "../../../lib/api";
 
 export async function GET(request: Request) {
-  const { searchParams } = new URL(request.url)
-  const secret = searchParams.get('secret')
-  const slug = searchParams.get('slug')
+  const { searchParams } = new URL(request.url);
+  const secret = searchParams.get("secret");
+  const slug = searchParams.get("slug");
 
   if (secret !== process.env.CONTENTFUL_PREVIEW_SECRET) {
-    return new Response('Invalid token', { status: 401 })
+    return new Response("Invalid token", { status: 401 });
   }
 
-  const post = await getPreviewPostBySlug(slug)
+  const post = await getPreviewPostBySlug(slug);
 
   if (!post) {
-    return new Response('Invalid slug', { status: 401 })
+    return new Response("Invalid slug", { status: 401 });
   }
 
-  draftMode().enable()
-  redirect(`/posts/${post.slug}`)
+  draftMode().enable();
+  redirect(`/posts/${post.slug}`);
 }
diff --git a/examples/cms-contentful/app/api/revalidate/route.ts b/examples/cms-contentful/app/api/revalidate/route.ts
index 21cbcca25b..fca894f2a9 100644
--- a/examples/cms-contentful/app/api/revalidate/route.ts
+++ b/examples/cms-contentful/app/api/revalidate/route.ts
@@ -1,15 +1,15 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { revalidateTag } from 'next/cache'
+import { NextRequest, NextResponse } from "next/server";
+import { revalidateTag } from "next/cache";
 
 export async function POST(request: NextRequest) {
-  const requestHeaders = new Headers(request.headers)
-  const secret = requestHeaders.get('x-vercel-reval-key')
+  const requestHeaders = new Headers(request.headers);
+  const secret = requestHeaders.get("x-vercel-reval-key");
 
   if (secret !== process.env.CONTENTFUL_REVALIDATE_SECRET) {
-    return NextResponse.json({ message: 'Invalid secret' }, { status: 401 })
+    return NextResponse.json({ message: "Invalid secret" }, { status: 401 });
   }
 
-  revalidateTag('posts')
+  revalidateTag("posts");
 
-  return NextResponse.json({ revalidated: true, now: Date.now() })
+  return NextResponse.json({ revalidated: true, now: Date.now() });
 }
diff --git a/examples/cms-contentful/app/avatar.tsx b/examples/cms-contentful/app/avatar.tsx
index 0f9f8f49e0..1504e97110 100644
--- a/examples/cms-contentful/app/avatar.tsx
+++ b/examples/cms-contentful/app/avatar.tsx
@@ -1,11 +1,11 @@
-import ContentfulImage from '@/lib/contentful-image'
+import ContentfulImage from "@/lib/contentful-image";
 
 export default function Avatar({
   name,
   picture,
 }: {
-  name: string
-  picture: any
+  name: string;
+  picture: any;
 }) {
   return (
     <div className="flex items-center">
@@ -20,5 +20,5 @@ export default function Avatar({
       </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-contentful/app/cover-image.tsx b/examples/cms-contentful/app/cover-image.tsx
index 494271f9e5..cf4057acc3 100644
--- a/examples/cms-contentful/app/cover-image.tsx
+++ b/examples/cms-contentful/app/cover-image.tsx
@@ -1,8 +1,8 @@
-import ContentfulImage from '../lib/contentful-image'
-import Link from 'next/link'
+import ContentfulImage from "../lib/contentful-image";
+import Link from "next/link";
 
 function cn(...classes: any[]) {
-  return classes.filter(Boolean).join(' ')
+  return classes.filter(Boolean).join(" ");
 }
 
 export default function CoverImage({
@@ -10,9 +10,9 @@ export default function CoverImage({
   url,
   slug,
 }: {
-  title: string
-  url: string
-  slug?: string
+  title: string;
+  url: string;
+  slug?: string;
 }) {
   const image = (
     <ContentfulImage
@@ -20,12 +20,12 @@ export default function CoverImage({
       priority
       width={2000}
       height={1000}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": slug,
       })}
       src={url}
     />
-  )
+  );
 
   return (
     <div className="sm:mx-0">
@@ -37,5 +37,5 @@ export default function CoverImage({
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-contentful/app/date.tsx b/examples/cms-contentful/app/date.tsx
index 6ce68f75ea..2ca5b6190a 100644
--- a/examples/cms-contentful/app/date.tsx
+++ b/examples/cms-contentful/app/date.tsx
@@ -1,9 +1,9 @@
-import { format } from 'date-fns'
+import { format } from "date-fns";
 
 export default function DateComponent({ dateString }: { dateString: string }) {
   return (
     <time dateTime={dateString}>
-      {format(new Date(dateString), 'LLLL	d, yyyy')}
+      {format(new Date(dateString), "LLLL	d, yyyy")}
     </time>
-  )
+  );
 }
diff --git a/examples/cms-contentful/app/layout.tsx b/examples/cms-contentful/app/layout.tsx
index 2d8409b1cd..52a72fc08e 100644
--- a/examples/cms-contentful/app/layout.tsx
+++ b/examples/cms-contentful/app/layout.tsx
@@ -1,17 +1,17 @@
-import './globals.css'
-import { Inter } from 'next/font/google'
-import { EXAMPLE_PATH, CMS_NAME } from '@/lib/constants'
+import "./globals.css";
+import { Inter } from "next/font/google";
+import { EXAMPLE_PATH, CMS_NAME } from "@/lib/constants";
 
 export const metadata = {
   title: `Next.js and ${CMS_NAME} Example`,
   description: `This is a blog built with Next.js and ${CMS_NAME}.`,
-}
+};
 
 const inter = Inter({
-  variable: '--font-inter',
-  subsets: ['latin'],
-  display: 'swap',
-})
+  variable: "--font-inter",
+  subsets: ["latin"],
+  display: "swap",
+});
 
 function Footer() {
   return (
@@ -38,13 +38,13 @@ function Footer() {
         </div>
       </div>
     </footer>
-  )
+  );
 }
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en" className={inter.variable}>
@@ -55,5 +55,5 @@ export default function RootLayout({
         </section>
       </body>
     </html>
-  )
+  );
 }
diff --git a/examples/cms-contentful/app/more-stories.tsx b/examples/cms-contentful/app/more-stories.tsx
index e2f1b98c46..e5146e45d6 100644
--- a/examples/cms-contentful/app/more-stories.tsx
+++ b/examples/cms-contentful/app/more-stories.tsx
@@ -1,7 +1,7 @@
-import Link from 'next/link'
-import Avatar from './avatar'
-import DateComponent from './date'
-import CoverImage from './cover-image'
+import Link from "next/link";
+import Avatar from "./avatar";
+import DateComponent from "./date";
+import CoverImage from "./cover-image";
 
 function PostPreview({
   title,
@@ -11,12 +11,12 @@ function PostPreview({
   author,
   slug,
 }: {
-  title: string
-  coverImage: any
-  date: string
-  excerpt: string
-  author: any
-  slug: string
+  title: string;
+  coverImage: any;
+  date: string;
+  excerpt: string;
+  author: any;
+  slug: string;
 }) {
   return (
     <div>
@@ -34,7 +34,7 @@ function PostPreview({
       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
       {author && <Avatar name={author.name} picture={author.picture} />}
     </div>
-  )
+  );
 }
 
 export default function MoreStories({ morePosts }: { morePosts: any[] }) {
@@ -57,5 +57,5 @@ export default function MoreStories({ morePosts }: { morePosts: any[] }) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-contentful/app/page.tsx b/examples/cms-contentful/app/page.tsx
index 9c24300750..d698bde538 100644
--- a/examples/cms-contentful/app/page.tsx
+++ b/examples/cms-contentful/app/page.tsx
@@ -1,13 +1,13 @@
-import Link from 'next/link'
-import { draftMode } from 'next/headers'
+import Link from "next/link";
+import { draftMode } from "next/headers";
 
-import Date from './date'
-import CoverImage from './cover-image'
-import Avatar from './avatar'
-import MoreStories from './more-stories'
+import Date from "./date";
+import CoverImage from "./cover-image";
+import Avatar from "./avatar";
+import MoreStories from "./more-stories";
 
-import { getAllPosts } from '@/lib/api'
-import { CMS_NAME, CMS_URL } from '@/lib/constants'
+import { getAllPosts } from "@/lib/api";
+import { CMS_NAME, CMS_URL } from "@/lib/constants";
 
 function Intro() {
   return (
@@ -16,14 +16,14 @@ function Intro() {
         Blog.
       </h1>
       <h2 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -33,7 +33,7 @@ function Intro() {
         .
       </h2>
     </section>
-  )
+  );
 }
 
 function HeroPost({
@@ -44,12 +44,12 @@ function HeroPost({
   author,
   slug,
 }: {
-  title: string
-  coverImage: any
-  date: string
-  excerpt: string
-  author: any
-  slug: string
+  title: string;
+  coverImage: any;
+  date: string;
+  excerpt: string;
+  author: any;
+  slug: string;
 }) {
   return (
     <section>
@@ -73,14 +73,14 @@ function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
 
 export default async function Page() {
-  const { isEnabled } = draftMode()
-  const allPosts = await getAllPosts(isEnabled)
-  const heroPost = allPosts[0]
-  const morePosts = allPosts.slice(1)
+  const { isEnabled } = draftMode();
+  const allPosts = await getAllPosts(isEnabled);
+  const heroPost = allPosts[0];
+  const morePosts = allPosts.slice(1);
 
   return (
     <div className="container mx-auto px-5">
@@ -97,5 +97,5 @@ export default async function Page() {
       )}
       <MoreStories morePosts={morePosts} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-contentful/app/posts/[slug]/page.tsx b/examples/cms-contentful/app/posts/[slug]/page.tsx
index e71d0f5b80..02fc7f5818 100644
--- a/examples/cms-contentful/app/posts/[slug]/page.tsx
+++ b/examples/cms-contentful/app/posts/[slug]/page.tsx
@@ -1,29 +1,29 @@
-import Link from 'next/link'
-import { draftMode } from 'next/headers'
+import Link from "next/link";
+import { draftMode } from "next/headers";
 
-import MoreStories from '../../more-stories'
-import Avatar from '../../avatar'
-import Date from '../../date'
-import CoverImage from '../../cover-image'
+import MoreStories from "../../more-stories";
+import Avatar from "../../avatar";
+import Date from "../../date";
+import CoverImage from "../../cover-image";
 
-import { Markdown } from '@/lib/markdown'
-import { getAllPosts, getPostAndMorePosts } from '@/lib/api'
+import { Markdown } from "@/lib/markdown";
+import { getAllPosts, getPostAndMorePosts } from "@/lib/api";
 
 export async function generateStaticParams() {
-  const allPosts = await getAllPosts(false)
+  const allPosts = await getAllPosts(false);
 
   return allPosts.map((post) => ({
     slug: post.slug,
-  }))
+  }));
 }
 
 export default async function PostPage({
   params,
 }: {
-  params: { slug: string }
+  params: { slug: string };
 }) {
-  const { isEnabled } = draftMode()
-  const { post, morePosts } = await getPostAndMorePosts(params.slug, isEnabled)
+  const { isEnabled } = draftMode();
+  const { post, morePosts } = await getPostAndMorePosts(params.slug, isEnabled);
 
   return (
     <div className="container mx-auto px-5">
@@ -65,5 +65,5 @@ export default async function PostPage({
       <hr className="border-accent-2 mt-28 mb-24" />
       <MoreStories morePosts={morePosts} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-contentful/lib/api.ts b/examples/cms-contentful/lib/api.ts
index 9e35a30267..9c4249c319 100644
--- a/examples/cms-contentful/lib/api.ts
+++ b/examples/cms-contentful/lib/api.ts
@@ -26,15 +26,15 @@ const POST_GRAPHQL_FIELDS = `
       }
     }
   }
-`
+`;
 
 async function fetchGraphQL(query: string, preview = false): Promise<any> {
   return fetch(
     `https://graphql.contentful.com/content/v1/spaces/${process.env.CONTENTFUL_SPACE_ID}`,
     {
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
         Authorization: `Bearer ${
           preview
             ? process.env.CONTENTFUL_PREVIEW_ACCESS_TOKEN
@@ -42,17 +42,17 @@ async function fetchGraphQL(query: string, preview = false): Promise<any> {
         }`,
       },
       body: JSON.stringify({ query }),
-      next: { tags: ['posts'] },
-    }
-  ).then((response) => response.json())
+      next: { tags: ["posts"] },
+    },
+  ).then((response) => response.json());
 }
 
 function extractPost(fetchResponse: any): any {
-  return fetchResponse?.data?.postCollection?.items?.[0]
+  return fetchResponse?.data?.postCollection?.items?.[0];
 }
 
 function extractPostEntries(fetchResponse: any): any[] {
-  return fetchResponse?.data?.postCollection?.items
+  return fetchResponse?.data?.postCollection?.items;
 }
 
 export async function getPreviewPostBySlug(slug: string | null): Promise<any> {
@@ -64,57 +64,57 @@ export async function getPreviewPostBySlug(slug: string | null): Promise<any> {
         }
       }
     }`,
-    true
-  )
-  return extractPost(entry)
+    true,
+  );
+  return extractPost(entry);
 }
 
 export async function getAllPosts(isDraftMode: boolean): Promise<any[]> {
   const entries = await fetchGraphQL(
     `query {
       postCollection(where: { slug_exists: true }, order: date_DESC, preview: ${
-        isDraftMode ? 'true' : 'false'
+        isDraftMode ? "true" : "false"
       }) {
         items {
           ${POST_GRAPHQL_FIELDS}
         }
       }
     }`,
-    isDraftMode
-  )
-  return extractPostEntries(entries)
+    isDraftMode,
+  );
+  return extractPostEntries(entries);
 }
 
 export async function getPostAndMorePosts(
   slug: string,
-  preview: boolean
+  preview: boolean,
 ): Promise<any> {
   const entry = await fetchGraphQL(
     `query {
       postCollection(where: { slug: "${slug}" }, preview: ${
-      preview ? 'true' : 'false'
+      preview ? "true" : "false"
     }, limit: 1) {
         items {
           ${POST_GRAPHQL_FIELDS}
         }
       }
     }`,
-    preview
-  )
+    preview,
+  );
   const entries = await fetchGraphQL(
     `query {
       postCollection(where: { slug_not_in: "${slug}" }, order: date_DESC, preview: ${
-      preview ? 'true' : 'false'
+      preview ? "true" : "false"
     }, limit: 2) {
         items {
           ${POST_GRAPHQL_FIELDS}
         }
       }
     }`,
-    preview
-  )
+    preview,
+  );
   return {
     post: extractPost(entry),
     morePosts: extractPostEntries(entries),
-  }
+  };
 }
diff --git a/examples/cms-contentful/lib/constants.ts b/examples/cms-contentful/lib/constants.ts
index b7c5cc3ae6..023442e86e 100644
--- a/examples/cms-contentful/lib/constants.ts
+++ b/examples/cms-contentful/lib/constants.ts
@@ -1,3 +1,3 @@
-export const EXAMPLE_PATH = 'cms-contentful'
-export const CMS_NAME = 'Contentful'
-export const CMS_URL = 'https://www.contentful.com'
+export const EXAMPLE_PATH = "cms-contentful";
+export const CMS_NAME = "Contentful";
+export const CMS_URL = "https://www.contentful.com";
diff --git a/examples/cms-contentful/lib/contentful-image.tsx b/examples/cms-contentful/lib/contentful-image.tsx
index be14003dcb..88b22b9e62 100644
--- a/examples/cms-contentful/lib/contentful-image.tsx
+++ b/examples/cms-contentful/lib/contentful-image.tsx
@@ -1,18 +1,18 @@
-'use client'
+"use client";
 
-import Image from 'next/image'
+import Image from "next/image";
 
 interface ContentfulImageProps {
-  src: string
-  width?: number
-  quality?: number
-  [key: string]: any // For other props that might be passed
+  src: string;
+  width?: number;
+  quality?: number;
+  [key: string]: any; // For other props that might be passed
 }
 
 const contentfulLoader = ({ src, width, quality }: ContentfulImageProps) => {
-  return `${src}?w=${width}&q=${quality || 75}`
-}
+  return `${src}?w=${width}&q=${quality || 75}`;
+};
 
 export default function ContentfulImage(props: ContentfulImageProps) {
-  return <Image alt={props.alt} loader={contentfulLoader} {...props} />
+  return <Image alt={props.alt} loader={contentfulLoader} {...props} />;
 }
diff --git a/examples/cms-contentful/lib/markdown.tsx b/examples/cms-contentful/lib/markdown.tsx
index 4a8fe36bdd..bf1dcdaa5e 100644
--- a/examples/cms-contentful/lib/markdown.tsx
+++ b/examples/cms-contentful/lib/markdown.tsx
@@ -1,40 +1,40 @@
-import Image from 'next/image'
-import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
-import { BLOCKS } from '@contentful/rich-text-types'
+import Image from "next/image";
+import { documentToReactComponents } from "@contentful/rich-text-react-renderer";
+import { BLOCKS } from "@contentful/rich-text-types";
 
 interface Asset {
   sys: {
-    id: string
-  }
-  url: string
-  description: string
+    id: string;
+  };
+  url: string;
+  description: string;
 }
 
 interface AssetLink {
-  block: Asset[]
+  block: Asset[];
 }
 
 interface Content {
-  json: any
+  json: any;
   links: {
-    assets: AssetLink
-  }
+    assets: AssetLink;
+  };
 }
 
 function RichTextAsset({
   id,
   assets,
 }: {
-  id: string
-  assets: Asset[] | undefined
+  id: string;
+  assets: Asset[] | undefined;
 }) {
-  const asset = assets?.find((asset) => asset.sys.id === id)
+  const asset = assets?.find((asset) => asset.sys.id === id);
 
   if (asset?.url) {
-    return <Image src={asset.url} layout="fill" alt={asset.description} />
+    return <Image src={asset.url} layout="fill" alt={asset.description} />;
   }
 
-  return null
+  return null;
 }
 
 export function Markdown({ content }: { content: Content }) {
@@ -47,5 +47,5 @@ export function Markdown({ content }: { content: Content }) {
         />
       ),
     },
-  })
+  });
 }
diff --git a/examples/cms-contentful/lib/setup.js b/examples/cms-contentful/lib/setup.js
index 2f0bc44086..a075d3324a 100644
--- a/examples/cms-contentful/lib/setup.js
+++ b/examples/cms-contentful/lib/setup.js
@@ -1,16 +1,16 @@
-const spaceImport = require('contentful-import')
-const exportFile = require('./export.json')
+const spaceImport = require("contentful-import");
+const exportFile = require("./export.json");
 
-const { CONTENTFUL_SPACE_ID, CONTENTFUL_MANAGEMENT_TOKEN } = process.env
+const { CONTENTFUL_SPACE_ID, CONTENTFUL_MANAGEMENT_TOKEN } = process.env;
 
 if (!CONTENTFUL_SPACE_ID || !CONTENTFUL_MANAGEMENT_TOKEN) {
   throw new Error(
     [
-      'Parameters missing...',
-      'Please run the setup command as follows',
-      'CONTENTFUL_SPACE_ID=XXX CONTENTFUL_MANAGEMENT_TOKEN=CFPAT-XXX npm run setup',
-    ].join('\n')
-  )
+      "Parameters missing...",
+      "Please run the setup command as follows",
+      "CONTENTFUL_SPACE_ID=XXX CONTENTFUL_MANAGEMENT_TOKEN=CFPAT-XXX npm run setup",
+    ].join("\n"),
+  );
 }
 
 spaceImport({
@@ -18,5 +18,5 @@ spaceImport({
   managementToken: CONTENTFUL_MANAGEMENT_TOKEN,
   content: exportFile,
 })
-  .then(() => console.log('The content model of your space is set up!'))
-  .catch((e) => console.error(e))
+  .then(() => console.log("The content model of your space is set up!"))
+  .catch((e) => console.error(e));
diff --git a/examples/cms-contentful/next.config.js b/examples/cms-contentful/next.config.js
index a431787965..0941a5c2b7 100644
--- a/examples/cms-contentful/next.config.js
+++ b/examples/cms-contentful/next.config.js
@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   images: {
-    loader: 'custom',
-    formats: ['image/avif', 'image/webp'],
+    loader: "custom",
+    formats: ["image/avif", "image/webp"],
   },
-}
+};
diff --git a/examples/cms-contentful/postcss.config.js b/examples/cms-contentful/postcss.config.js
index 33ad091d26..12a703d900 100644
--- a/examples/cms-contentful/postcss.config.js
+++ b/examples/cms-contentful/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-contentful/tailwind.config.ts b/examples/cms-contentful/tailwind.config.ts
index 163165c9be..8913044074 100644
--- a/examples/cms-contentful/tailwind.config.ts
+++ b/examples/cms-contentful/tailwind.config.ts
@@ -1,16 +1,16 @@
-import type { Config } from 'tailwindcss'
-import typography from '@tailwindcss/typography'
+import type { Config } from "tailwindcss";
+import typography from "@tailwindcss/typography";
 
 export default {
   content: [
-    './app/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './lib/**/*.{ts,tsx}',
+    "./app/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./lib/**/*.{ts,tsx}",
   ],
   theme: {
     extend: {
       fontFamily: {
-        sans: ['var(--font-inter)'],
+        sans: ["var(--font-inter)"],
       },
     },
   },
@@ -18,4 +18,4 @@ export default {
     hoverOnlyWhenSupported: true,
   },
   plugins: [typography],
-} satisfies Config
+} satisfies Config;
diff --git a/examples/cms-cosmic/components/alert.tsx b/examples/cms-cosmic/components/alert.tsx
index a7ae558e52..4f65719f64 100644
--- a/examples/cms-cosmic/components/alert.tsx
+++ b/examples/cms-cosmic/components/alert.tsx
@@ -1,36 +1,36 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '@/lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "@/lib/constants";
 
 type AlertProps = {
-  preview: boolean
-}
+  preview: boolean;
+};
 
 const Alert = (props: AlertProps) => {
-  const { preview } = props
+  const { preview } = props;
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This page is a preview.{' '}
+              This page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -43,7 +43,7 @@ const Alert = (props: AlertProps) => {
         </div>
       </Container>
     </div>
-  )
-}
+  );
+};
 
-export default Alert
+export default Alert;
diff --git a/examples/cms-cosmic/components/avatar.tsx b/examples/cms-cosmic/components/avatar.tsx
index 2a331968eb..7cfa11ae38 100644
--- a/examples/cms-cosmic/components/avatar.tsx
+++ b/examples/cms-cosmic/components/avatar.tsx
@@ -1,12 +1,12 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 type AvatarProps = {
-  name: string
-  picture: string
-}
+  name: string;
+  picture: string;
+};
 
 const Avatar = (props: AvatarProps) => {
-  const { name, picture } = props
+  const { name, picture } = props;
 
   return (
     <div className="flex items-center">
@@ -22,7 +22,7 @@ const Avatar = (props: AvatarProps) => {
       </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
-}
+  );
+};
 
-export default Avatar
+export default Avatar;
diff --git a/examples/cms-cosmic/components/container.tsx b/examples/cms-cosmic/components/container.tsx
index 9e96a9db02..d152426b68 100644
--- a/examples/cms-cosmic/components/container.tsx
+++ b/examples/cms-cosmic/components/container.tsx
@@ -1,12 +1,12 @@
-import { ReactNode } from 'react'
+import { ReactNode } from "react";
 
 type ContainerProps = {
-  children: ReactNode
-}
+  children: ReactNode;
+};
 
 const Container = (props: ContainerProps) => {
-  const { children } = props
-  return <div className="container mx-auto px-5">{children}</div>
-}
+  const { children } = props;
+  return <div className="container mx-auto px-5">{children}</div>;
+};
 
-export default Container
+export default Container;
diff --git a/examples/cms-cosmic/components/cover-image.tsx b/examples/cms-cosmic/components/cover-image.tsx
index ff28720b0f..098ad609dc 100644
--- a/examples/cms-cosmic/components/cover-image.tsx
+++ b/examples/cms-cosmic/components/cover-image.tsx
@@ -1,33 +1,33 @@
-import cn from 'classnames'
-import Link from 'next/link'
-import Imgix from 'react-imgix'
+import cn from "classnames";
+import Link from "next/link";
+import Imgix from "react-imgix";
 
 type CoverImageProps = {
-  title
-  url
-  slug
-}
+  title;
+  url;
+  slug;
+};
 const CoverImage = (props: CoverImageProps) => {
-  const { title, url, slug } = props
+  const { title, url, slug } = props;
 
   const image = (
     <Imgix
       src={url}
       alt={`Cover Image for ${title}`}
-      className={cn('lazyload shadow-small w-full', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn("lazyload shadow-small w-full", {
+        "hover:shadow-medium transition-shadow duration-200": slug,
       })}
       sizes="100vw"
       attributeConfig={{
-        src: 'data-src',
-        srcSet: 'data-srcset',
-        sizes: 'data-sizes',
+        src: "data-src",
+        srcSet: "data-srcset",
+        sizes: "data-sizes",
       }}
       htmlAttributes={{
         src: `${url}?auto=format,compress&q=1&blur=500&w=auto`,
       }}
     />
-  )
+  );
   return (
     <div className="sm:mx-0">
       {slug ? (
@@ -38,6 +38,6 @@ const CoverImage = (props: CoverImageProps) => {
         image
       )}
     </div>
-  )
-}
-export default CoverImage
+  );
+};
+export default CoverImage;
diff --git a/examples/cms-cosmic/components/date.tsx b/examples/cms-cosmic/components/date.tsx
index f47148b75f..40b42c8d41 100644
--- a/examples/cms-cosmic/components/date.tsx
+++ b/examples/cms-cosmic/components/date.tsx
@@ -1,13 +1,13 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
 type DateProps = {
-  dateString: string
-}
+  dateString: string;
+};
 
 const Date = (props: DateProps) => {
-  const { dateString } = props
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
-}
+  const { dateString } = props;
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "LLLL	d, yyyy")}</time>;
+};
 
-export default Date
+export default Date;
diff --git a/examples/cms-cosmic/components/footer.tsx b/examples/cms-cosmic/components/footer.tsx
index 21af8f901a..f34edbe829 100644
--- a/examples/cms-cosmic/components/footer.tsx
+++ b/examples/cms-cosmic/components/footer.tsx
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '@/lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "@/lib/constants";
 
 const Footer = () => {
   return (
@@ -26,7 +26,7 @@ const Footer = () => {
         </div>
       </Container>
     </footer>
-  )
-}
+  );
+};
 
-export default Footer
+export default Footer;
diff --git a/examples/cms-cosmic/components/header.tsx b/examples/cms-cosmic/components/header.tsx
index 6ecbe1ad0c..0848e1f555 100644
--- a/examples/cms-cosmic/components/header.tsx
+++ b/examples/cms-cosmic/components/header.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 const Header = () => {
   return (
@@ -8,7 +8,7 @@ const Header = () => {
       </Link>
       .
     </h2>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;
diff --git a/examples/cms-cosmic/components/hero-post.tsx b/examples/cms-cosmic/components/hero-post.tsx
index 25faf0cdf1..17eda184a0 100644
--- a/examples/cms-cosmic/components/hero-post.tsx
+++ b/examples/cms-cosmic/components/hero-post.tsx
@@ -1,20 +1,20 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
-import { AuthorType, ImgixType } from 'interfaces'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
+import { AuthorType, ImgixType } from "interfaces";
 
 type HeroPostProps = {
-  title: string
-  coverImage: ImgixType
-  date: string
-  excerpt: string
-  author: AuthorType
-  slug: string
-}
+  title: string;
+  coverImage: ImgixType;
+  date: string;
+  excerpt: string;
+  author: AuthorType;
+  slug: string;
+};
 
 const HeroPost = (props: HeroPostProps) => {
-  const { title, coverImage, date, excerpt, author, slug } = props
+  const { title, coverImage, date, excerpt, author, slug } = props;
 
   return (
     <section>
@@ -41,7 +41,7 @@ const HeroPost = (props: HeroPostProps) => {
         </div>
       </div>
     </section>
-  )
-}
+  );
+};
 
-export default HeroPost
+export default HeroPost;
diff --git a/examples/cms-cosmic/components/intro.tsx b/examples/cms-cosmic/components/intro.tsx
index 041acb864b..f564cab382 100644
--- a/examples/cms-cosmic/components/intro.tsx
+++ b/examples/cms-cosmic/components/intro.tsx
@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '@/lib/constants'
+import { CMS_NAME, CMS_URL } from "@/lib/constants";
 
 const Intro = () => {
   return (
@@ -7,14 +7,14 @@ const Intro = () => {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -24,7 +24,7 @@ const Intro = () => {
         .
       </h4>
     </section>
-  )
-}
+  );
+};
 
-export default Intro
+export default Intro;
diff --git a/examples/cms-cosmic/components/layout.tsx b/examples/cms-cosmic/components/layout.tsx
index 40299b54ea..93234498b6 100644
--- a/examples/cms-cosmic/components/layout.tsx
+++ b/examples/cms-cosmic/components/layout.tsx
@@ -1,14 +1,14 @@
-import Alert from './alert'
-import Footer from './footer'
-import Meta from './meta'
-import 'lazysizes'
-import 'lazysizes/plugins/parent-fit/ls.parent-fit'
-import { ReactNode } from 'react'
+import Alert from "./alert";
+import Footer from "./footer";
+import Meta from "./meta";
+import "lazysizes";
+import "lazysizes/plugins/parent-fit/ls.parent-fit";
+import { ReactNode } from "react";
 
 type LayoutProps = {
-  preview: boolean
-  children: ReactNode
-}
+  preview: boolean;
+  children: ReactNode;
+};
 
 const Layout = ({ preview, children }: LayoutProps) => {
   return (
@@ -20,7 +20,7 @@ const Layout = ({ preview, children }: LayoutProps) => {
       </div>
       <Footer />
     </>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;
diff --git a/examples/cms-cosmic/components/meta.tsx b/examples/cms-cosmic/components/meta.tsx
index 633d6ae277..d0411dfa4e 100644
--- a/examples/cms-cosmic/components/meta.tsx
+++ b/examples/cms-cosmic/components/meta.tsx
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '@/lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "@/lib/constants";
 
 const Meta = () => {
   return (
@@ -38,7 +38,7 @@ const Meta = () => {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
-}
+  );
+};
 
-export default Meta
+export default Meta;
diff --git a/examples/cms-cosmic/components/more-stories.tsx b/examples/cms-cosmic/components/more-stories.tsx
index ec76847180..b95eb23c25 100644
--- a/examples/cms-cosmic/components/more-stories.tsx
+++ b/examples/cms-cosmic/components/more-stories.tsx
@@ -1,12 +1,12 @@
-import { PostType } from 'interfaces'
-import PostPreview from './post-preview'
+import { PostType } from "interfaces";
+import PostPreview from "./post-preview";
 
 type MoreStoriesProps = {
-  posts: PostType[]
-}
+  posts: PostType[];
+};
 
 const MoreStories = (props: MoreStoriesProps) => {
-  const { posts } = props
+  const { posts } = props;
   return (
     <section>
       <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
@@ -26,7 +26,7 @@ const MoreStories = (props: MoreStoriesProps) => {
         ))}
       </div>
     </section>
-  )
-}
+  );
+};
 
-export default MoreStories
+export default MoreStories;
diff --git a/examples/cms-cosmic/components/post-body.tsx b/examples/cms-cosmic/components/post-body.tsx
index 3796ee1653..9959643e16 100644
--- a/examples/cms-cosmic/components/post-body.tsx
+++ b/examples/cms-cosmic/components/post-body.tsx
@@ -1,19 +1,19 @@
-import markdownStyles from './markdown-styles.module.css'
+import markdownStyles from "./markdown-styles.module.css";
 
 type PostBodyProps = {
-  content: string
-}
+  content: string;
+};
 
 const PostBody = (props: PostBodyProps) => {
-  const { content } = props
+  const { content } = props;
   return (
     <div className="max-w-2xl mx-auto">
       <div
-        className={markdownStyles['markdown']}
+        className={markdownStyles["markdown"]}
         dangerouslySetInnerHTML={{ __html: content }}
       />
     </div>
-  )
-}
+  );
+};
 
-export default PostBody
+export default PostBody;
diff --git a/examples/cms-cosmic/components/post-header.tsx b/examples/cms-cosmic/components/post-header.tsx
index 39739e5692..265d0b58e9 100644
--- a/examples/cms-cosmic/components/post-header.tsx
+++ b/examples/cms-cosmic/components/post-header.tsx
@@ -1,18 +1,18 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import PostTitle from './post-title'
-import { AuthorType, ImgixType } from 'interfaces'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import PostTitle from "./post-title";
+import { AuthorType, ImgixType } from "interfaces";
 
 type PostHeaderProps = {
-  title: string
-  coverImage: ImgixType
-  date: string
-  author: AuthorType
-}
+  title: string;
+  coverImage: ImgixType;
+  date: string;
+  author: AuthorType;
+};
 
 const PostHeader = (props: PostHeaderProps) => {
-  const { title, coverImage, date, author } = props
+  const { title, coverImage, date, author } = props;
   return (
     <>
       <PostTitle>{title}</PostTitle>
@@ -23,7 +23,7 @@ const PostHeader = (props: PostHeaderProps) => {
         />
       </div>
       <div className="mb-8 md:mb-16 sm:mx-0">
-        <CoverImage title={title} url={coverImage.imgix_url} slug={''} />
+        <CoverImage title={title} url={coverImage.imgix_url} slug={""} />
       </div>
       <div className="max-w-2xl mx-auto">
         <div className="block md:hidden mb-6">
@@ -37,7 +37,7 @@ const PostHeader = (props: PostHeaderProps) => {
         </div>
       </div>
     </>
-  )
-}
+  );
+};
 
-export default PostHeader
+export default PostHeader;
diff --git a/examples/cms-cosmic/components/post-preview.tsx b/examples/cms-cosmic/components/post-preview.tsx
index 9762659e93..87c95f7db7 100644
--- a/examples/cms-cosmic/components/post-preview.tsx
+++ b/examples/cms-cosmic/components/post-preview.tsx
@@ -1,20 +1,20 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
-import { AuthorType, ImgixType } from 'interfaces'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
+import { AuthorType, ImgixType } from "interfaces";
 
 type PostPreviewProps = {
-  title: string
-  coverImage: ImgixType
-  date: string
-  excerpt: string
-  author: AuthorType
-  slug: string
-}
+  title: string;
+  coverImage: ImgixType;
+  date: string;
+  excerpt: string;
+  author: AuthorType;
+  slug: string;
+};
 
 const PostPreview = (props: PostPreviewProps) => {
-  const { title, coverImage, date, excerpt, author, slug } = props
+  const { title, coverImage, date, excerpt, author, slug } = props;
 
   return (
     <div>
@@ -32,7 +32,7 @@ const PostPreview = (props: PostPreviewProps) => {
       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
       <Avatar name={author.title} picture={author.metadata.picture.imgix_url} />
     </div>
-  )
-}
+  );
+};
 
-export default PostPreview
+export default PostPreview;
diff --git a/examples/cms-cosmic/components/post-title.tsx b/examples/cms-cosmic/components/post-title.tsx
index 0757d9ff59..c2a43937d5 100644
--- a/examples/cms-cosmic/components/post-title.tsx
+++ b/examples/cms-cosmic/components/post-title.tsx
@@ -1,15 +1,15 @@
-import { ReactNode } from 'react'
+import { ReactNode } from "react";
 
 type PostTitleProps = {
-  children: ReactNode
-}
+  children: ReactNode;
+};
 
 const PostTitle = (props: PostTitleProps) => {
-  const { children } = props
+  const { children } = props;
   return (
     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
-  )
-}
-export default PostTitle
+  );
+};
+export default PostTitle;
diff --git a/examples/cms-cosmic/components/section-separator.tsx b/examples/cms-cosmic/components/section-separator.tsx
index 2787cea58d..519b162aac 100644
--- a/examples/cms-cosmic/components/section-separator.tsx
+++ b/examples/cms-cosmic/components/section-separator.tsx
@@ -1,5 +1,5 @@
 const SectionSeparator = () => {
-  return <hr className="border-accent-2 mt-28 mb-24" />
-}
+  return <hr className="border-accent-2 mt-28 mb-24" />;
+};
 
-export default SectionSeparator
+export default SectionSeparator;
diff --git a/examples/cms-cosmic/interfaces/index.ts b/examples/cms-cosmic/interfaces/index.ts
index 95891de2a2..44b92b732f 100644
--- a/examples/cms-cosmic/interfaces/index.ts
+++ b/examples/cms-cosmic/interfaces/index.ts
@@ -1,24 +1,24 @@
 export type ImgixType = {
-  url: string
-  imgix_url: string
-}
+  url: string;
+  imgix_url: string;
+};
 
 export type AuthorType = {
-  title: string
+  title: string;
   metadata: {
-    picture: ImgixType
-  }
-}
+    picture: ImgixType;
+  };
+};
 
 export type PostType = {
-  title: string
-  slug: string
-  content: string
-  created_at: string
+  title: string;
+  slug: string;
+  content: string;
+  created_at: string;
   metadata: {
-    cover_image: ImgixType
-    author: AuthorType
-    excerpt: string
-    content: string
-  }
-}
+    cover_image: ImgixType;
+    author: AuthorType;
+    excerpt: string;
+    content: string;
+  };
+};
diff --git a/examples/cms-cosmic/lib/api.tsx b/examples/cms-cosmic/lib/api.tsx
index f84f708795..c3270ab118 100644
--- a/examples/cms-cosmic/lib/api.tsx
+++ b/examples/cms-cosmic/lib/api.tsx
@@ -1,97 +1,97 @@
-import Cosmic from 'cosmicjs'
-import { PostType } from 'interfaces'
-import ErrorPage from 'next/error'
+import Cosmic from "cosmicjs";
+import { PostType } from "interfaces";
+import ErrorPage from "next/error";
 
-const BUCKET_SLUG = process.env.COSMIC_BUCKET_SLUG
-const READ_KEY = process.env.COSMIC_READ_KEY
+const BUCKET_SLUG = process.env.COSMIC_BUCKET_SLUG;
+const READ_KEY = process.env.COSMIC_READ_KEY;
 
 const bucket = Cosmic().bucket({
   slug: BUCKET_SLUG,
   read_key: READ_KEY,
-})
+});
 
 export const getPreviewPostBySlug = async (slug: string) => {
   const params = {
     query: {
       slug,
-      type: 'posts',
+      type: "posts",
     },
-    props: 'slug',
-    status: 'any',
-  }
+    props: "slug",
+    status: "any",
+  };
 
   try {
-    const data = await bucket.getObjects(params)
-    return data.objects[0]
+    const data = await bucket.getObjects(params);
+    return data.objects[0];
   } catch (err) {
     // Don't throw if an slug doesn't exist
-    return <ErrorPage statusCode={err.status} />
+    return <ErrorPage statusCode={err.status} />;
   }
-}
+};
 
 export const getAllPostsWithSlug = async () => {
   const params = {
     query: {
-      type: 'posts',
+      type: "posts",
     },
-    props: 'slug',
-  }
-  const data = await bucket.getObjects(params)
-  return data.objects
-}
+    props: "slug",
+  };
+  const data = await bucket.getObjects(params);
+  return data.objects;
+};
 
 export const getAllPostsForHome = async (
-  preview: boolean
+  preview: boolean,
 ): Promise<PostType[]> => {
   const params = {
     query: {
-      type: 'posts',
+      type: "posts",
     },
-    props: 'title,slug,metadata,created_at',
-    sort: '-created_at',
-    ...(preview && { status: 'any' }),
-  }
-  const data = await bucket.getObjects(params)
-  return data.objects
-}
+    props: "title,slug,metadata,created_at",
+    sort: "-created_at",
+    ...(preview && { status: "any" }),
+  };
+  const data = await bucket.getObjects(params);
+  return data.objects;
+};
 
 export const getPostAndMorePosts = async (
   slug: string,
-  preview: boolean
+  preview: boolean,
 ): Promise<{
-  post: PostType
-  morePosts: PostType[]
+  post: PostType;
+  morePosts: PostType[];
 }> => {
   const singleObjectParams = {
     query: {
       slug,
-      type: 'posts',
+      type: "posts",
     },
-    props: 'slug,title,metadata,created_at',
-    ...(preview && { status: 'any' }),
-  }
+    props: "slug,title,metadata,created_at",
+    ...(preview && { status: "any" }),
+  };
   const moreObjectParams = {
     query: {
-      type: 'posts',
+      type: "posts",
     },
     limit: 3,
-    props: 'title,slug,metadata,created_at',
-    ...(preview && { status: 'any' }),
-  }
-  let object
+    props: "title,slug,metadata,created_at",
+    ...(preview && { status: "any" }),
+  };
+  let object;
   try {
-    const data = await bucket.getObjects(singleObjectParams)
-    object = data.objects[0]
+    const data = await bucket.getObjects(singleObjectParams);
+    object = data.objects[0];
   } catch (err) {
-    throw err
+    throw err;
   }
-  const moreObjects = await bucket.getObjects(moreObjectParams)
+  const moreObjects = await bucket.getObjects(moreObjectParams);
   const morePosts = moreObjects.objects
     ?.filter(({ slug: object_slug }) => object_slug !== slug)
-    .slice(0, 2)
+    .slice(0, 2);
 
   return {
     post: object,
     morePosts,
-  }
-}
+  };
+};
diff --git a/examples/cms-cosmic/lib/constants.ts b/examples/cms-cosmic/lib/constants.ts
index e42d97d7c9..f48fbe9028 100644
--- a/examples/cms-cosmic/lib/constants.ts
+++ b/examples/cms-cosmic/lib/constants.ts
@@ -1,5 +1,5 @@
-export const EXAMPLE_PATH = 'cms-cosmic'
-export const CMS_NAME = 'Cosmic'
-export const CMS_URL = 'https://cosmicjs.com/'
+export const EXAMPLE_PATH = "cms-cosmic";
+export const CMS_NAME = "Cosmic";
+export const CMS_URL = "https://cosmicjs.com/";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Example%20Blog%20with%20**Cosmic**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fweb-assets.cosmicjs.com%2Fimages%2Flogo.svg'
+  "https://og-image.vercel.app/Next.js%20Example%20Blog%20with%20**Cosmic**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fweb-assets.cosmicjs.com%2Fimages%2Flogo.svg";
diff --git a/examples/cms-cosmic/lib/markdownToHtml.ts b/examples/cms-cosmic/lib/markdownToHtml.ts
index 4c506cd6a8..8aa0896877 100644
--- a/examples/cms-cosmic/lib/markdownToHtml.ts
+++ b/examples/cms-cosmic/lib/markdownToHtml.ts
@@ -1,9 +1,9 @@
-import { remark } from 'remark'
-import html from 'remark-html'
+import { remark } from "remark";
+import html from "remark-html";
 
 const markdownToHtml = async (markdown: string) => {
-  const result = await remark().use(html).process(markdown)
-  return result.toString()
-}
+  const result = await remark().use(html).process(markdown);
+  return result.toString();
+};
 
-export default markdownToHtml
+export default markdownToHtml;
diff --git a/examples/cms-cosmic/next.config.js b/examples/cms-cosmic/next.config.js
index 0686d7806e..4bbbed4fd4 100644
--- a/examples/cms-cosmic/next.config.js
+++ b/examples/cms-cosmic/next.config.js
@@ -3,11 +3,11 @@ module.exports = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'imgix.cosmicjs.com',
-        port: '',
-        pathname: '/my-account/**',
+        protocol: "https",
+        hostname: "imgix.cosmicjs.com",
+        port: "",
+        pathname: "/my-account/**",
       },
     ],
   },
-}
+};
diff --git a/examples/cms-cosmic/pages/_app.tsx b/examples/cms-cosmic/pages/_app.tsx
index 2bc8da1079..f8834e922d 100644
--- a/examples/cms-cosmic/pages/_app.tsx
+++ b/examples/cms-cosmic/pages/_app.tsx
@@ -1,8 +1,8 @@
-import '@/styles/index.css'
-import type { AppProps } from 'next/app'
+import "@/styles/index.css";
+import type { AppProps } from "next/app";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-cosmic/pages/_document.tsx b/examples/cms-cosmic/pages/_document.tsx
index 54e8bf3e2a..b2fff8b426 100644
--- a/examples/cms-cosmic/pages/_document.tsx
+++ b/examples/cms-cosmic/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/cms-cosmic/pages/api/exit-preview.ts b/examples/cms-cosmic/pages/api/exit-preview.ts
index 1ccbab5f93..a4d5188543 100644
--- a/examples/cms-cosmic/pages/api/exit-preview.ts
+++ b/examples/cms-cosmic/pages/api/exit-preview.ts
@@ -1,8 +1,8 @@
 export default function exit(_, res) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-cosmic/pages/api/preview.ts b/examples/cms-cosmic/pages/api/preview.ts
index f908a5e505..bca46f1548 100644
--- a/examples/cms-cosmic/pages/api/preview.ts
+++ b/examples/cms-cosmic/pages/api/preview.ts
@@ -1,4 +1,4 @@
-import { getPreviewPostBySlug } from '@/lib/api'
+import { getPreviewPostBySlug } from "@/lib/api";
 
 export default async function preview(req, res) {
   // Check the secret and next parameters
@@ -7,22 +7,22 @@ export default async function preview(req, res) {
     req.query.secret !== process.env.COSMIC_PREVIEW_SECRET ||
     !req.query.slug
   ) {
-    return res.status(401).json({ message: 'Invalid token' })
+    return res.status(401).json({ message: "Invalid token" });
   }
 
   // Fetch the headless CMS to check if the provided `slug` exists
-  const post = await getPreviewPostBySlug(req.query.slug)
+  const post = await getPreviewPostBySlug(req.query.slug);
 
   // If the slug doesn't exist prevent preview mode from being enabled
   if (!post) {
-    return res.status(401).json({ message: 'Invalid slug' })
+    return res.status(401).json({ message: "Invalid slug" });
   }
 
   // Enable Draft Mode by setting the cookie
-  res.setDraftMode({ enable: true })
+  res.setDraftMode({ enable: true });
 
   // Redirect to the path from the fetched post
   // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
-  res.writeHead(307, { Location: `/posts/${post.slug}` })
-  res.end()
+  res.writeHead(307, { Location: `/posts/${post.slug}` });
+  res.end();
 }
diff --git a/examples/cms-cosmic/pages/index.tsx b/examples/cms-cosmic/pages/index.tsx
index 7c946c8e9e..7f0e8c2a8e 100644
--- a/examples/cms-cosmic/pages/index.tsx
+++ b/examples/cms-cosmic/pages/index.tsx
@@ -1,23 +1,23 @@
-import Container from '@/components/container'
-import MoreStories from '@/components/more-stories'
-import HeroPost from '@/components/hero-post'
-import Intro from '@/components/intro'
-import Layout from '@/components/layout'
-import { getAllPostsForHome } from '@/lib/api'
-import Head from 'next/head'
-import { CMS_NAME } from '@/lib/constants'
-import { PostType } from 'interfaces'
+import Container from "@/components/container";
+import MoreStories from "@/components/more-stories";
+import HeroPost from "@/components/hero-post";
+import Intro from "@/components/intro";
+import Layout from "@/components/layout";
+import { getAllPostsForHome } from "@/lib/api";
+import Head from "next/head";
+import { CMS_NAME } from "@/lib/constants";
+import { PostType } from "interfaces";
 
 type IndexProps = {
-  allPosts: PostType[]
-  preview: boolean
-}
+  allPosts: PostType[];
+  preview: boolean;
+};
 
 const Index = (props: IndexProps) => {
-  const { allPosts, preview } = props
+  const { allPosts, preview } = props;
 
-  const heroPost = allPosts[0]
-  const morePosts = allPosts.slice(1)
+  const heroPost = allPosts[0];
+  const morePosts = allPosts.slice(1);
 
   return (
     <>
@@ -41,19 +41,19 @@ const Index = (props: IndexProps) => {
         </Container>
       </Layout>
     </>
-  )
-}
+  );
+};
 
-export default Index
+export default Index;
 
 type staticProps = {
-  preview: boolean
-}
+  preview: boolean;
+};
 
 export const getStaticProps = async (props: staticProps) => {
-  const { preview = null } = props
-  const allPosts = (await getAllPostsForHome(preview)) || []
+  const { preview = null } = props;
+  const allPosts = (await getAllPostsForHome(preview)) || [];
   return {
     props: { allPosts, preview },
-  }
-}
+  };
+};
diff --git a/examples/cms-cosmic/pages/posts/[slug].tsx b/examples/cms-cosmic/pages/posts/[slug].tsx
index 3be31b1819..02ec4a3de0 100644
--- a/examples/cms-cosmic/pages/posts/[slug].tsx
+++ b/examples/cms-cosmic/pages/posts/[slug].tsx
@@ -1,31 +1,31 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import Container from '@/components/container'
-import PostBody from '@/components/post-body'
-import MoreStories from '@/components/more-stories'
-import Header from '@/components/header'
-import PostHeader from '@/components/post-header'
-import SectionSeparator from '@/components/section-separator'
-import Layout from '@/components/layout'
-import { getAllPostsWithSlug, getPostAndMorePosts } from '@/lib/api'
-import PostTitle from '@/components/post-title'
-import Head from 'next/head'
-import { CMS_NAME } from '@/lib/constants'
-import markdownToHtml from '@/lib/markdownToHtml'
-import { PostType } from 'interfaces'
-import { ParsedUrlQueryInput } from 'querystring'
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Container from "@/components/container";
+import PostBody from "@/components/post-body";
+import MoreStories from "@/components/more-stories";
+import Header from "@/components/header";
+import PostHeader from "@/components/post-header";
+import SectionSeparator from "@/components/section-separator";
+import Layout from "@/components/layout";
+import { getAllPostsWithSlug, getPostAndMorePosts } from "@/lib/api";
+import PostTitle from "@/components/post-title";
+import Head from "next/head";
+import { CMS_NAME } from "@/lib/constants";
+import markdownToHtml from "@/lib/markdownToHtml";
+import { PostType } from "interfaces";
+import { ParsedUrlQueryInput } from "querystring";
 
 type PostProps = {
-  post: PostType
-  morePosts: PostType[]
-  preview
-}
+  post: PostType;
+  morePosts: PostType[];
+  preview;
+};
 
 const Post = (props: PostProps) => {
-  const { post, morePosts, preview } = props
-  const router = useRouter()
+  const { post, morePosts, preview } = props;
+  const router = useRouter();
   if (!router.isFallback && !post?.slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
   return (
     <Layout preview={preview}>
@@ -59,39 +59,39 @@ const Post = (props: PostProps) => {
         )}
       </Container>
     </Layout>
-  )
-}
-export default Post
+  );
+};
+export default Post;
 
 type staticProps = {
-  params: ParsedUrlQueryInput
-  preview: boolean
-}
+  params: ParsedUrlQueryInput;
+  preview: boolean;
+};
 
 export const getStaticProps = async (props: staticProps) => {
-  const { params, preview = null } = props
+  const { params, preview = null } = props;
   try {
-    const data = await getPostAndMorePosts(params.slug as string, preview)
-    const content = await markdownToHtml(data['post']?.metadata?.content || '')
+    const data = await getPostAndMorePosts(params.slug as string, preview);
+    const content = await markdownToHtml(data["post"]?.metadata?.content || "");
     return {
       props: {
         preview,
         post: {
-          ...data['post'],
+          ...data["post"],
           content,
         },
-        morePosts: data['morePosts'] || [],
+        morePosts: data["morePosts"] || [],
       },
-    }
+    };
   } catch (err) {
-    return <ErrorPage statusCode={err.status} />
+    return <ErrorPage statusCode={err.status} />;
   }
-}
+};
 
 export async function getStaticPaths() {
-  const allPosts = (await getAllPostsWithSlug()) || []
+  const allPosts = (await getAllPostsWithSlug()) || [];
   return {
     paths: allPosts.map((post) => `/posts/${post.slug}`),
     fallback: true,
-  }
+  };
 }
diff --git a/examples/cms-cosmic/postcss.config.js b/examples/cms-cosmic/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-cosmic/postcss.config.js
+++ b/examples/cms-cosmic/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-cosmic/tailwind.config.js b/examples/cms-cosmic/tailwind.config.js
index ea0efae6d7..a8f65a525d 100644
--- a/examples/cms-cosmic/tailwind.config.js
+++ b/examples/cms-cosmic/tailwind.config.js
@@ -1,38 +1,38 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/cms-datocms/components/alert.js b/examples/cms-datocms/components/alert.js
index 051f331964..98355c9031 100644
--- a/examples/cms-datocms/components/alert.js
+++ b/examples/cms-datocms/components/alert.js
@@ -1,31 +1,31 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '@/lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "@/lib/constants";
 
 export default function Alert({ preview }) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This is page is a preview.{' '}
+              This is page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -38,5 +38,5 @@ export default function Alert({ preview }) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-datocms/components/avatar.js b/examples/cms-datocms/components/avatar.js
index dd0ae301d4..c5babbc8e1 100644
--- a/examples/cms-datocms/components/avatar.js
+++ b/examples/cms-datocms/components/avatar.js
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Avatar({ name, picture }) {
   return (
@@ -13,5 +13,5 @@ export default function Avatar({ name, picture }) {
       </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-datocms/components/container.js b/examples/cms-datocms/components/container.js
index fc1c29dfb0..92e559ece3 100644
--- a/examples/cms-datocms/components/container.js
+++ b/examples/cms-datocms/components/container.js
@@ -1,3 +1,3 @@
 export default function Container({ children }) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }
diff --git a/examples/cms-datocms/components/cover-image.js b/examples/cms-datocms/components/cover-image.js
index 3d41c4a133..863a614615 100644
--- a/examples/cms-datocms/components/cover-image.js
+++ b/examples/cms-datocms/components/cover-image.js
@@ -1,6 +1,6 @@
-import { Image } from 'react-datocms'
-import cn from 'classnames'
-import Link from 'next/link'
+import { Image } from "react-datocms";
+import cn from "classnames";
+import Link from "next/link";
 
 export default function CoverImage({ title, responsiveImage, slug }) {
   const image = (
@@ -9,11 +9,11 @@ export default function CoverImage({ title, responsiveImage, slug }) {
         ...responsiveImage,
         alt: `Cover Image for ${title}`,
       }}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": slug,
       })}
     />
-  )
+  );
   return (
     <div className="sm:mx-0">
       {slug ? (
@@ -24,5 +24,5 @@ export default function CoverImage({ title, responsiveImage, slug }) {
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-datocms/components/date.js b/examples/cms-datocms/components/date.js
index eac5681378..5be2fe25ba 100644
--- a/examples/cms-datocms/components/date.js
+++ b/examples/cms-datocms/components/date.js
@@ -1,6 +1,6 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
 export default function Date({ dateString }) {
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "LLLL	d, yyyy")}</time>;
 }
diff --git a/examples/cms-datocms/components/footer.js b/examples/cms-datocms/components/footer.js
index b305c3eb40..d4213d236e 100644
--- a/examples/cms-datocms/components/footer.js
+++ b/examples/cms-datocms/components/footer.js
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '@/lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "@/lib/constants";
 
 export default function Footer() {
   return (
@@ -26,5 +26,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-datocms/components/header.js b/examples/cms-datocms/components/header.js
index 05cb9af247..e6dea52099 100644
--- a/examples/cms-datocms/components/header.js
+++ b/examples/cms-datocms/components/header.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-datocms/components/hero-post.js b/examples/cms-datocms/components/hero-post.js
index 35d8dfba8d..4ee9ac580c 100644
--- a/examples/cms-datocms/components/hero-post.js
+++ b/examples/cms-datocms/components/hero-post.js
@@ -1,7 +1,7 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function HeroPost({
   title,
@@ -37,5 +37,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-datocms/components/intro.js b/examples/cms-datocms/components/intro.js
index c3003c6196..b751ac199e 100644
--- a/examples/cms-datocms/components/intro.js
+++ b/examples/cms-datocms/components/intro.js
@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '@/lib/constants'
+import { CMS_NAME, CMS_URL } from "@/lib/constants";
 
 export default function Intro() {
   return (
@@ -7,14 +7,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -24,5 +24,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-datocms/components/layout.js b/examples/cms-datocms/components/layout.js
index 399802b095..d9e7c4b074 100644
--- a/examples/cms-datocms/components/layout.js
+++ b/examples/cms-datocms/components/layout.js
@@ -1,6 +1,6 @@
-import Alert from './alert'
-import Footer from './footer'
-import Meta from './meta'
+import Alert from "./alert";
+import Footer from "./footer";
+import Meta from "./meta";
 
 export default function Layout({ preview, children }) {
   return (
@@ -12,5 +12,5 @@ export default function Layout({ preview, children }) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-datocms/components/meta.js b/examples/cms-datocms/components/meta.js
index cec6227420..88aac65487 100644
--- a/examples/cms-datocms/components/meta.js
+++ b/examples/cms-datocms/components/meta.js
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '@/lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "@/lib/constants";
 
 export default function Meta() {
   return (
@@ -38,5 +38,5 @@ export default function Meta() {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-datocms/components/more-stories.js b/examples/cms-datocms/components/more-stories.js
index 4bab320f65..5a5be97d44 100644
--- a/examples/cms-datocms/components/more-stories.js
+++ b/examples/cms-datocms/components/more-stories.js
@@ -1,4 +1,4 @@
-import PostPreview from './post-preview'
+import PostPreview from "./post-preview";
 
 export default function MoreStories({ posts }) {
   return (
@@ -20,5 +20,5 @@ export default function MoreStories({ posts }) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-datocms/components/post-body.js b/examples/cms-datocms/components/post-body.js
index 4cc2bb52bc..45b5a1fb95 100644
--- a/examples/cms-datocms/components/post-body.js
+++ b/examples/cms-datocms/components/post-body.js
@@ -1,12 +1,12 @@
-import markdownStyles from './markdown-styles.module.css'
+import markdownStyles from "./markdown-styles.module.css";
 
 export default function PostBody({ content }) {
   return (
     <div className="max-w-2xl mx-auto">
       <div
-        className={markdownStyles['markdown']}
+        className={markdownStyles["markdown"]}
         dangerouslySetInnerHTML={{ __html: content }}
       />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-datocms/components/post-header.js b/examples/cms-datocms/components/post-header.js
index 0163da046c..53586d3b81 100644
--- a/examples/cms-datocms/components/post-header.js
+++ b/examples/cms-datocms/components/post-header.js
@@ -1,7 +1,7 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import PostTitle from './post-title'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import PostTitle from "./post-title";
 
 export default function PostHeader({ title, coverImage, date, author }) {
   return (
@@ -25,5 +25,5 @@ export default function PostHeader({ title, coverImage, date, author }) {
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-datocms/components/post-preview.js b/examples/cms-datocms/components/post-preview.js
index 535f35b966..f390279547 100644
--- a/examples/cms-datocms/components/post-preview.js
+++ b/examples/cms-datocms/components/post-preview.js
@@ -1,7 +1,7 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function PostPreview({
   title,
@@ -31,5 +31,5 @@ export default function PostPreview({
       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
       <Avatar name={author.name} picture={author.picture} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-datocms/components/post-title.js b/examples/cms-datocms/components/post-title.js
index edd8cba65c..a15f06616f 100644
--- a/examples/cms-datocms/components/post-title.js
+++ b/examples/cms-datocms/components/post-title.js
@@ -3,5 +3,5 @@ export default function PostTitle({ children }) {
     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
-  )
+  );
 }
diff --git a/examples/cms-datocms/components/section-separator.js b/examples/cms-datocms/components/section-separator.js
index 4ca5c65fdc..b86fb50b7d 100644
--- a/examples/cms-datocms/components/section-separator.js
+++ b/examples/cms-datocms/components/section-separator.js
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }
diff --git a/examples/cms-datocms/lib/api.js b/examples/cms-datocms/lib/api.js
index 53b819048b..7758ee686e 100644
--- a/examples/cms-datocms/lib/api.js
+++ b/examples/cms-datocms/lib/api.js
@@ -1,5 +1,5 @@
-const API_URL = 'https://graphql.datocms.com'
-const API_TOKEN = process.env.DATOCMS_API_TOKEN
+const API_URL = "https://graphql.datocms.com";
+const API_TOKEN = process.env.DATOCMS_API_TOKEN;
 
 // See: https://www.datocms.com/blog/offer-responsive-progressive-lqip-images-in-2020
 const responsiveImageFragment = `
@@ -16,27 +16,27 @@ const responsiveImageFragment = `
     bgColor
     base64
   }
-`
+`;
 
 async function fetchAPI(query, { variables, preview } = {}) {
-  const res = await fetch(API_URL + (preview ? '/preview' : ''), {
-    method: 'POST',
+  const res = await fetch(API_URL + (preview ? "/preview" : ""), {
+    method: "POST",
     headers: {
-      'Content-Type': 'application/json',
+      "Content-Type": "application/json",
       Authorization: `Bearer ${API_TOKEN}`,
     },
     body: JSON.stringify({
       query,
       variables,
     }),
-  })
+  });
 
-  const json = await res.json()
+  const json = await res.json();
   if (json.errors) {
-    console.error(json.errors)
-    throw new Error('Failed to fetch API')
+    console.error(json.errors);
+    throw new Error("Failed to fetch API");
   }
-  return json.data
+  return json.data;
 }
 
 export async function getPreviewPostBySlug(slug) {
@@ -52,9 +52,9 @@ export async function getPreviewPostBySlug(slug) {
       variables: {
         slug,
       },
-    }
-  )
-  return data?.post
+    },
+  );
+  return data?.post;
 }
 
 export async function getAllPostsWithSlug() {
@@ -64,8 +64,8 @@ export async function getAllPostsWithSlug() {
         slug
       }
     }
-  `)
-  return data?.allPosts
+  `);
+  return data?.allPosts;
 }
 
 export async function getAllPostsForHome(preview) {
@@ -93,9 +93,9 @@ export async function getAllPostsForHome(preview) {
 
     ${responsiveImageFragment}
   `,
-    { preview }
-  )
-  return data?.allPosts
+    { preview },
+  );
+  return data?.allPosts;
 }
 
 export async function getPostAndMorePosts(slug, preview) {
@@ -149,7 +149,7 @@ export async function getPostAndMorePosts(slug, preview) {
       variables: {
         slug,
       },
-    }
-  )
-  return data
+    },
+  );
+  return data;
 }
diff --git a/examples/cms-datocms/lib/constants.js b/examples/cms-datocms/lib/constants.js
index 6d1c255670..d2dc89f942 100644
--- a/examples/cms-datocms/lib/constants.js
+++ b/examples/cms-datocms/lib/constants.js
@@ -1,5 +1,5 @@
-export const EXAMPLE_PATH = 'cms-datocms'
-export const CMS_NAME = 'DatoCMS'
-export const CMS_URL = 'https://www.datocms.com/'
+export const EXAMPLE_PATH = "cms-datocms";
+export const CMS_NAME = "DatoCMS";
+export const CMS_URL = "https://www.datocms.com/";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**DatoCMS**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjYxLjI3NCA4MC41NjIiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeTE9IjQwLjQ0IiB4Mj0iNzguNjg3IiB5Mj0iNDAuNDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZjU5M2QiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmZjc3NTEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48dGl0bGU%2BZnVsbF9zbWFsbGVyPC90aXRsZT48cGF0aCBkPSJNMzkuMzQ0Ljg0NEgwVjgwLjAzN0gzOS4zNDRjMTkuNjc3LDAsMzkuMzQzLTE3LjcyOSwzOS4zNDMtMzkuNTkxUzU5LjAyMS44NDQsMzkuMzQ0Ljg0NFptMCw1Ny41ODlhMTcuOTkzLDE3Ljk5MywwLDEsMSwxOC0xNy45ODdBMTcuOTg2LDE3Ljk4NiwwLDAsMSwzOS4zNDQsNTguNDMzWiIgZmlsbD0idXJsKCNhKSIvPjxwYXRoIGQ9Ik0xMTkuMDU0Ljg1OGMxMS44NDIsMCwxNy45MTYsNy4xNzksMTcuOTE2LDE3LjA1OHY4LjgzNWMwLDkuODc4LTYuMDc0LDE3LjA1Ny0xNy45MTYsMTcuMDU3SDEwMC4yNzlWLjg1OFptNy4zNjMsMTdjMC01LjQ2LTIuODg0LTguMzQ0LTkuMjY1LTguMzQ0aC02LjM4MVYzNS4xNTZoNi4zODFjNi4zODEsMCw5LjI2NS0yLjg4NCw5LjI2NS04LjM0NFptNDMuMjQxLDE3Ljk3N0gxNTQuMTM1bC0yLjM5Myw3Ljk3N0gxNDEuMTg5TDE1Ni41MjcuODU4aDEwLjhsMTUuMzM5LDQyLjk1SDE3Mi4xMTJabS0xMi45NDYtOC40NjdoMTAuMzY5bC01LjE1NC0xNi45OTVaTTIxNi4wMzMuODU4djguOWgtMTEuNlY0My44MDhIMTkzLjg4M1Y5Ljc1NWgtMTEuNlYuODU4Wm0yNS41NDUsNDMuODA5Yy0xMy4wMDcsMC0xOS42OTUtOC4zNDUtMTkuNjk1LTE5LjU3M1YxOS41NzJDMjIxLjg4Myw4LjM0NCwyMjguNTcxLDAsMjQxLjU3OCwwczE5LjcsOC4zNDQsMTkuNywxOS41NzJ2NS41MjJDMjYxLjI3NCwzNi4zMjIsMjU0LjU4Niw0NC42NjcsMjQxLjU3OCw0NC42NjdabTAtMzUuODk0Yy02LjEzNSwwLTkuMTQyLDQuMTEyLTkuMTQyLDEwLjI0N3Y2LjYyNmMwLDYuMTM2LDMuMDA3LDEwLjI0Nyw5LjE0MiwxMC4yNDdzOS4xNDItNC4xMTEsOS4xNDItMTAuMjQ3VjE5LjAyQzI1MC43MiwxMi44ODUsMjQ3LjcxNCw4Ljc3MywyNDEuNTc4LDguNzczWk0xMDkuNjksNzUuMjQ0YTQuODEzLDQuODEzLDAsMCwwLDUuMi00Ljg2OGg1Ljk1NGMtLjA3NSw1LjU0Mi00LjE1NiwxMC4xODYtMTEuMDg0LDEwLjE4Ni04LjA4OCwwLTExLjk4Mi01LjA5My0xMS45ODItMTEuOTA4VjY1LjIwOWMwLTYuODE1LDMuODk0LTExLjkwNywxMS45ODItMTEuOTA3LDYuOTI4LDAsMTEuMDA5LDQuNjQyLDExLjA4NCwxMC4xODRoLTUuOTU0YTQuODEzLDQuODEzLDAsMCwwLTUuMi00Ljg2OGMtMy44OTUsMC01LjQ2OCwyLjU4NC01LjQ2OCw2LjI5MXY0LjA0NEMxMDQuMjIyLDcyLjY2LDEwNS44LDc1LjI0NCwxMDkuNjksNzUuMjQ0Wm0zNy4wNTUtMjEuNDE5aDUuOTE3VjgwLjAzN2gtNi4xNzhWNjYuMTgzbC00LjEyLDguMDEyaC01LjA5MmwtNC4wODEtOC4wMTJWODAuMDM3aC02LjE3OVY1My44MjVoNS45MTZsNi44OSwxNC4yNjdaTTE2OS41MSw4MC41NjJjLTYuMjkxLDAtMTAuNTIyLTMtMTAuNTIyLTguMjc2di0uNzEyaDYuMTc4VjcyLjFjMCwyLjIwOSwxLjQyMywzLjU1Nyw0LjM4MSwzLjU1NywyLjY1OSwwLDQuNDE5LTEuMDg2LDQuNDE5LTMuMTA4YTIuMTUxLDIuMTUxLDAsMCwwLTEuOC0yLjMyMWwtNi41NTMtMS42NDhjLTQuMDgyLTEuMDExLTYuMTc5LTIuODA4LTYuMTc5LTcuMDc3LDAtNS4yMDUsMy43MDctOC4yLDkuOTIzLTguMiw1Ljg3OSwwLDkuNjI0LDMuMTgyLDkuNjI0LDcuOTc1di42MzdIMTczLjAzdi0uNDQ5YzAtMS43NjEtLjk3NC0zLjIyMS0zLjY3LTMuMjIxLTIuMjQ3LDAtMy42NjkuNzg2LTMuNjY5LDIuNjU4YTEuOTk0LDEuOTk0LDAsMCwwLDEuNjg1LDIuMTM1bDYuOTY0LDEuODcyYzQuMTk0LDEuMTIzLDUuODc5LDMuNDQ1LDUuODc5LDcuMDc3QzE4MC4yMTksNzcuMjI5LDE3NS41NzYsODAuNTYyLDE2OS41MSw4MC41NjJaIiBmaWxsPSIjZmY3NzUxIi8%2BPC9zdmc%2B&widths=undefined&widths=350&heights=200&heights=auto'
+  "https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**DatoCMS**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjYxLjI3NCA4MC41NjIiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeTE9IjQwLjQ0IiB4Mj0iNzguNjg3IiB5Mj0iNDAuNDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZjU5M2QiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmZjc3NTEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48dGl0bGU%2BZnVsbF9zbWFsbGVyPC90aXRsZT48cGF0aCBkPSJNMzkuMzQ0Ljg0NEgwVjgwLjAzN0gzOS4zNDRjMTkuNjc3LDAsMzkuMzQzLTE3LjcyOSwzOS4zNDMtMzkuNTkxUzU5LjAyMS44NDQsMzkuMzQ0Ljg0NFptMCw1Ny41ODlhMTcuOTkzLDE3Ljk5MywwLDEsMSwxOC0xNy45ODdBMTcuOTg2LDE3Ljk4NiwwLDAsMSwzOS4zNDQsNTguNDMzWiIgZmlsbD0idXJsKCNhKSIvPjxwYXRoIGQ9Ik0xMTkuMDU0Ljg1OGMxMS44NDIsMCwxNy45MTYsNy4xNzksMTcuOTE2LDE3LjA1OHY4LjgzNWMwLDkuODc4LTYuMDc0LDE3LjA1Ny0xNy45MTYsMTcuMDU3SDEwMC4yNzlWLjg1OFptNy4zNjMsMTdjMC01LjQ2LTIuODg0LTguMzQ0LTkuMjY1LTguMzQ0aC02LjM4MVYzNS4xNTZoNi4zODFjNi4zODEsMCw5LjI2NS0yLjg4NCw5LjI2NS04LjM0NFptNDMuMjQxLDE3Ljk3N0gxNTQuMTM1bC0yLjM5Myw3Ljk3N0gxNDEuMTg5TDE1Ni41MjcuODU4aDEwLjhsMTUuMzM5LDQyLjk1SDE3Mi4xMTJabS0xMi45NDYtOC40NjdoMTAuMzY5bC01LjE1NC0xNi45OTVaTTIxNi4wMzMuODU4djguOWgtMTEuNlY0My44MDhIMTkzLjg4M1Y5Ljc1NWgtMTEuNlYuODU4Wm0yNS41NDUsNDMuODA5Yy0xMy4wMDcsMC0xOS42OTUtOC4zNDUtMTkuNjk1LTE5LjU3M1YxOS41NzJDMjIxLjg4Myw4LjM0NCwyMjguNTcxLDAsMjQxLjU3OCwwczE5LjcsOC4zNDQsMTkuNywxOS41NzJ2NS41MjJDMjYxLjI3NCwzNi4zMjIsMjU0LjU4Niw0NC42NjcsMjQxLjU3OCw0NC42NjdabTAtMzUuODk0Yy02LjEzNSwwLTkuMTQyLDQuMTEyLTkuMTQyLDEwLjI0N3Y2LjYyNmMwLDYuMTM2LDMuMDA3LDEwLjI0Nyw5LjE0MiwxMC4yNDdzOS4xNDItNC4xMTEsOS4xNDItMTAuMjQ3VjE5LjAyQzI1MC43MiwxMi44ODUsMjQ3LjcxNCw4Ljc3MywyNDEuNTc4LDguNzczWk0xMDkuNjksNzUuMjQ0YTQuODEzLDQuODEzLDAsMCwwLDUuMi00Ljg2OGg1Ljk1NGMtLjA3NSw1LjU0Mi00LjE1NiwxMC4xODYtMTEuMDg0LDEwLjE4Ni04LjA4OCwwLTExLjk4Mi01LjA5My0xMS45ODItMTEuOTA4VjY1LjIwOWMwLTYuODE1LDMuODk0LTExLjkwNywxMS45ODItMTEuOTA3LDYuOTI4LDAsMTEuMDA5LDQuNjQyLDExLjA4NCwxMC4xODRoLTUuOTU0YTQuODEzLDQuODEzLDAsMCwwLTUuMi00Ljg2OGMtMy44OTUsMC01LjQ2OCwyLjU4NC01LjQ2OCw2LjI5MXY0LjA0NEMxMDQuMjIyLDcyLjY2LDEwNS44LDc1LjI0NCwxMDkuNjksNzUuMjQ0Wm0zNy4wNTUtMjEuNDE5aDUuOTE3VjgwLjAzN2gtNi4xNzhWNjYuMTgzbC00LjEyLDguMDEyaC01LjA5MmwtNC4wODEtOC4wMTJWODAuMDM3aC02LjE3OVY1My44MjVoNS45MTZsNi44OSwxNC4yNjdaTTE2OS41MSw4MC41NjJjLTYuMjkxLDAtMTAuNTIyLTMtMTAuNTIyLTguMjc2di0uNzEyaDYuMTc4VjcyLjFjMCwyLjIwOSwxLjQyMywzLjU1Nyw0LjM4MSwzLjU1NywyLjY1OSwwLDQuNDE5LTEuMDg2LDQuNDE5LTMuMTA4YTIuMTUxLDIuMTUxLDAsMCwwLTEuOC0yLjMyMWwtNi41NTMtMS42NDhjLTQuMDgyLTEuMDExLTYuMTc5LTIuODA4LTYuMTc5LTcuMDc3LDAtNS4yMDUsMy43MDctOC4yLDkuOTIzLTguMiw1Ljg3OSwwLDkuNjI0LDMuMTgyLDkuNjI0LDcuOTc1di42MzdIMTczLjAzdi0uNDQ5YzAtMS43NjEtLjk3NC0zLjIyMS0zLjY3LTMuMjIxLTIuMjQ3LDAtMy42NjkuNzg2LTMuNjY5LDIuNjU4YTEuOTk0LDEuOTk0LDAsMCwwLDEuNjg1LDIuMTM1bDYuOTY0LDEuODcyYzQuMTk0LDEuMTIzLDUuODc5LDMuNDQ1LDUuODc5LDcuMDc3QzE4MC4yMTksNzcuMjI5LDE3NS41NzYsODAuNTYyLDE2OS41MSw4MC41NjJaIiBmaWxsPSIjZmY3NzUxIi8%2BPC9zdmc%2B&widths=undefined&widths=350&heights=200&heights=auto";
diff --git a/examples/cms-datocms/lib/markdownToHtml.js b/examples/cms-datocms/lib/markdownToHtml.js
index 735fed2df3..fe3948ba7d 100644
--- a/examples/cms-datocms/lib/markdownToHtml.js
+++ b/examples/cms-datocms/lib/markdownToHtml.js
@@ -1,7 +1,7 @@
-import { remark } from 'remark'
-import html from 'remark-html'
+import { remark } from "remark";
+import html from "remark-html";
 
 export default async function markdownToHtml(markdown) {
-  const result = await remark().use(html).process(markdown)
-  return result.toString()
+  const result = await remark().use(html).process(markdown);
+  return result.toString();
 }
diff --git a/examples/cms-datocms/next.config.js b/examples/cms-datocms/next.config.js
index c9f97ae353..d19081c83b 100644
--- a/examples/cms-datocms/next.config.js
+++ b/examples/cms-datocms/next.config.js
@@ -3,11 +3,11 @@ module.exports = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'www.datocms-assets.com',
-        port: '',
-        pathname: '/my-account/**',
+        protocol: "https",
+        hostname: "www.datocms-assets.com",
+        port: "",
+        pathname: "/my-account/**",
       },
     ],
   },
-}
+};
diff --git a/examples/cms-datocms/pages/_app.js b/examples/cms-datocms/pages/_app.js
index f18e112c7c..a82d9dd7b0 100644
--- a/examples/cms-datocms/pages/_app.js
+++ b/examples/cms-datocms/pages/_app.js
@@ -1,7 +1,7 @@
-import '@/styles/index.css'
+import "@/styles/index.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-datocms/pages/_document.js b/examples/cms-datocms/pages/_document.js
index 54e8bf3e2a..b2fff8b426 100644
--- a/examples/cms-datocms/pages/_document.js
+++ b/examples/cms-datocms/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/cms-datocms/pages/api/exit-preview.js b/examples/cms-datocms/pages/api/exit-preview.js
index a63a171ba4..16b744e88e 100644
--- a/examples/cms-datocms/pages/api/exit-preview.js
+++ b/examples/cms-datocms/pages/api/exit-preview.js
@@ -1,8 +1,8 @@
 export default async function exit(_, res) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-datocms/pages/api/preview.js b/examples/cms-datocms/pages/api/preview.js
index 0fe49f2b5a..ff0ca5cb4d 100644
--- a/examples/cms-datocms/pages/api/preview.js
+++ b/examples/cms-datocms/pages/api/preview.js
@@ -1,4 +1,4 @@
-import { getPreviewPostBySlug } from '@/lib/api'
+import { getPreviewPostBySlug } from "@/lib/api";
 
 export default async function preview(req, res) {
   // Check the secret and next parameters
@@ -7,22 +7,22 @@ export default async function preview(req, res) {
     req.query.secret !== process.env.DATOCMS_PREVIEW_SECRET ||
     !req.query.slug
   ) {
-    return res.status(401).json({ message: 'Invalid token' })
+    return res.status(401).json({ message: "Invalid token" });
   }
 
   // Fetch the headless CMS to check if the provided `slug` exists
-  const post = await getPreviewPostBySlug(req.query.slug)
+  const post = await getPreviewPostBySlug(req.query.slug);
 
   // If the slug doesn't exist prevent preview mode from being enabled
   if (!post) {
-    return res.status(401).json({ message: 'Invalid slug' })
+    return res.status(401).json({ message: "Invalid slug" });
   }
 
   // Enable Draft Mode by setting the cookie
-  res.setDraftMode({ enable: true })
+  res.setDraftMode({ enable: true });
 
   // Redirect to the path from the fetched post
   // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
-  res.writeHead(307, { Location: `/posts/${post.slug}` })
-  res.end()
+  res.writeHead(307, { Location: `/posts/${post.slug}` });
+  res.end();
 }
diff --git a/examples/cms-datocms/pages/index.js b/examples/cms-datocms/pages/index.js
index c9a1143ed7..3993af5f59 100644
--- a/examples/cms-datocms/pages/index.js
+++ b/examples/cms-datocms/pages/index.js
@@ -1,15 +1,15 @@
-import Container from '@/components/container'
-import MoreStories from '@/components/more-stories'
-import HeroPost from '@/components/hero-post'
-import Intro from '@/components/intro'
-import Layout from '@/components/layout'
-import { getAllPostsForHome } from '@/lib/api'
-import Head from 'next/head'
-import { CMS_NAME } from '@/lib/constants'
+import Container from "@/components/container";
+import MoreStories from "@/components/more-stories";
+import HeroPost from "@/components/hero-post";
+import Intro from "@/components/intro";
+import Layout from "@/components/layout";
+import { getAllPostsForHome } from "@/lib/api";
+import Head from "next/head";
+import { CMS_NAME } from "@/lib/constants";
 
 export default function Index({ allPosts }) {
-  const heroPost = allPosts[0]
-  const morePosts = allPosts.slice(1)
+  const heroPost = allPosts[0];
+  const morePosts = allPosts.slice(1);
   return (
     <>
       <Layout>
@@ -32,12 +32,12 @@ export default function Index({ allPosts }) {
         </Container>
       </Layout>
     </>
-  )
+  );
 }
 
 export async function getStaticProps({ preview = false }) {
-  const allPosts = (await getAllPostsForHome(preview)) || []
+  const allPosts = (await getAllPostsForHome(preview)) || [];
   return {
     props: { allPosts },
-  }
+  };
 }
diff --git a/examples/cms-datocms/pages/posts/[slug].js b/examples/cms-datocms/pages/posts/[slug].js
index a39aa7d6f3..86478d8863 100644
--- a/examples/cms-datocms/pages/posts/[slug].js
+++ b/examples/cms-datocms/pages/posts/[slug].js
@@ -1,22 +1,22 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import Container from '@/components/container'
-import PostBody from '@/components/post-body'
-import MoreStories from '@/components/more-stories'
-import Header from '@/components/header'
-import PostHeader from '@/components/post-header'
-import SectionSeparator from '@/components/section-separator'
-import Layout from '@/components/layout'
-import { getAllPostsWithSlug, getPostAndMorePosts } from '@/lib/api'
-import PostTitle from '@/components/post-title'
-import Head from 'next/head'
-import { CMS_NAME } from '@/lib/constants'
-import markdownToHtml from '@/lib/markdownToHtml'
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Container from "@/components/container";
+import PostBody from "@/components/post-body";
+import MoreStories from "@/components/more-stories";
+import Header from "@/components/header";
+import PostHeader from "@/components/post-header";
+import SectionSeparator from "@/components/section-separator";
+import Layout from "@/components/layout";
+import { getAllPostsWithSlug, getPostAndMorePosts } from "@/lib/api";
+import PostTitle from "@/components/post-title";
+import Head from "next/head";
+import { CMS_NAME } from "@/lib/constants";
+import markdownToHtml from "@/lib/markdownToHtml";
 
 export default function Post({ post, morePosts, preview }) {
-  const router = useRouter()
+  const router = useRouter();
   if (!router.isFallback && !post?.slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
   return (
     <Layout preview={preview}>
@@ -47,12 +47,12 @@ export default function Post({ post, morePosts, preview }) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps({ params, preview = false }) {
-  const data = await getPostAndMorePosts(params.slug, preview)
-  const content = await markdownToHtml(data?.post?.content || '')
+  const data = await getPostAndMorePosts(params.slug, preview);
+  const content = await markdownToHtml(data?.post?.content || "");
 
   return {
     props: {
@@ -63,13 +63,13 @@ export async function getStaticProps({ params, preview = false }) {
       },
       morePosts: data?.morePosts ?? [],
     },
-  }
+  };
 }
 
 export async function getStaticPaths() {
-  const allPosts = await getAllPostsWithSlug()
+  const allPosts = await getAllPostsWithSlug();
   return {
     paths: allPosts?.map((post) => `/posts/${post.slug}`) || [],
     fallback: true,
-  }
+  };
 }
diff --git a/examples/cms-datocms/postcss.config.js b/examples/cms-datocms/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-datocms/postcss.config.js
+++ b/examples/cms-datocms/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-datocms/tailwind.config.js b/examples/cms-datocms/tailwind.config.js
index ea0efae6d7..a8f65a525d 100644
--- a/examples/cms-datocms/tailwind.config.js
+++ b/examples/cms-datocms/tailwind.config.js
@@ -1,38 +1,38 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/cms-dotcms/components/alert.tsx b/examples/cms-dotcms/components/alert.tsx
index bb6838dfdc..e32dbe973c 100644
--- a/examples/cms-dotcms/components/alert.tsx
+++ b/examples/cms-dotcms/components/alert.tsx
@@ -1,31 +1,31 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '@lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "@lib/constants";
 
 export default function Alert({ preview }) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This is page is a preview.{' '}
+              This is page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -38,5 +38,5 @@ export default function Alert({ preview }) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-dotcms/components/avatar.tsx b/examples/cms-dotcms/components/avatar.tsx
index b683a70db2..410f3d0693 100644
--- a/examples/cms-dotcms/components/avatar.tsx
+++ b/examples/cms-dotcms/components/avatar.tsx
@@ -1,4 +1,4 @@
-import DotCmsImage from './dotcms-image'
+import DotCmsImage from "./dotcms-image";
 
 export default function Avatar({ name, picture }) {
   return (
@@ -15,5 +15,5 @@ export default function Avatar({ name, picture }) {
       </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-dotcms/components/blocks.tsx b/examples/cms-dotcms/components/blocks.tsx
index 788aa2cb2d..358de66c07 100644
--- a/examples/cms-dotcms/components/blocks.tsx
+++ b/examples/cms-dotcms/components/blocks.tsx
@@ -1,24 +1,24 @@
-import cn from 'classnames'
-import DotCmsImage from './dotcms-image'
-import Link from 'next/link'
+import cn from "classnames";
+import DotCmsImage from "./dotcms-image";
+import Link from "next/link";
 
-export const Bold = ({ children }) => <strong>{children}</strong>
-export const Italic = ({ children }) => <em>{children}</em>
-export const Strike = ({ children }) => <s>{children}</s>
-export const Underline = ({ children }) => <u>{children}</u>
+export const Bold = ({ children }) => <strong>{children}</strong>;
+export const Italic = ({ children }) => <em>{children}</em>;
+export const Strike = ({ children }) => <s>{children}</s>;
+export const Underline = ({ children }) => <u>{children}</u>;
 export const DotLink = ({ attrs: { href, target }, children }) => {
-  const regEx = /https?:\/\//
+  const regEx = /https?:\/\//;
 
   return regEx.test(href) ? (
     <a href={href} rel="noopener noreferrer" target="_blank">
       {children}
     </a>
   ) : (
-    <Link href={href} target={target || '_self'} legacyBehavior>
+    <Link href={href} target={target || "_self"} legacyBehavior>
       {children}
     </Link>
-  )
-}
+  );
+};
 
 const nodeMarks = {
   link: DotLink,
@@ -26,28 +26,28 @@ const nodeMarks = {
   underline: Underline,
   italic: Italic,
   strike: Strike,
-}
+};
 
 export const TextNode = (props) => {
-  const { marks = [], text } = props
-  const mark = marks[0] || { type: '', attrs: {} }
-  const newProps = { ...props, marks: marks.slice(1) }
-  const Component = nodeMarks[mark?.type]
+  const { marks = [], text } = props;
+  const mark = marks[0] || { type: "", attrs: {} };
+  const newProps = { ...props, marks: marks.slice(1) };
+  const Component = nodeMarks[mark?.type];
 
   if (!Component) {
-    return text
+    return text;
   }
 
   return (
     <Component attrs={mark.attrs}>
       <TextNode {...newProps} />
     </Component>
-  )
-}
+  );
+};
 
 export const DotImage = ({ attrs: { textAlign, data } }) => {
-  const { asset, title } = data
-  const [imgTitle] = title.split('.')
+  const { asset, title } = data;
+  const [imgTitle] = title.split(".");
 
   return (
     <DotCmsImage
@@ -56,43 +56,43 @@ export const DotImage = ({ attrs: { textAlign, data } }) => {
       width="800"
       height="400"
       alt={`Cover Image for ${title}`}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow  duration-200': imgTitle,
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow  duration-200": imgTitle,
       })}
       src={asset}
     />
-  )
-}
+  );
+};
 
 export const ListItem = ({ children }) => {
-  return <li>{children}</li>
-}
+  return <li>{children}</li>;
+};
 
 export const OrderedList = ({ children }) => {
-  return <ol>{children}</ol>
-}
+  return <ol>{children}</ol>;
+};
 
 export const Paragraph = ({ children }) => {
-  return <p>{children}</p>
-}
+  return <p>{children}</p>;
+};
 
 export const BulletList = ({ children }) => {
-  return <ul>{children}</ul>
-}
+  return <ul>{children}</ul>;
+};
 
 export const Heading = ({ level, children }) => {
-  const Tag = `h${level}` as keyof JSX.IntrinsicElements
-  return <Tag>{children}</Tag>
-}
+  const Tag = `h${level}` as keyof JSX.IntrinsicElements;
+  return <Tag>{children}</Tag>;
+};
 
 export const BlockQuote = ({ children }) => {
-  return <blockquote>{children}</blockquote>
-}
+  return <blockquote>{children}</blockquote>;
+};
 
 export const CodeBlock = ({ language, children }) => {
   return (
     <pre data-language={language}>
       <code>{children}</code>
     </pre>
-  )
-}
+  );
+};
diff --git a/examples/cms-dotcms/components/container.tsx b/examples/cms-dotcms/components/container.tsx
index fc1c29dfb0..92e559ece3 100644
--- a/examples/cms-dotcms/components/container.tsx
+++ b/examples/cms-dotcms/components/container.tsx
@@ -1,3 +1,3 @@
 export default function Container({ children }) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }
diff --git a/examples/cms-dotcms/components/content-blocks.tsx b/examples/cms-dotcms/components/content-blocks.tsx
index dea23142b7..13e77f355e 100644
--- a/examples/cms-dotcms/components/content-blocks.tsx
+++ b/examples/cms-dotcms/components/content-blocks.tsx
@@ -8,7 +8,7 @@ import {
   OrderedList,
   Paragraph,
   TextNode,
-} from './blocks'
+} from "./blocks";
 
 /*
   dotCMS Block Editor is a new rich content editor that allows you to create your content as building blocks.
@@ -21,70 +21,70 @@ export const ContentBlocks = ({ content }) => {
     <>
       {content?.map((data, index) => {
         switch (data.type) {
-          case 'paragraph':
+          case "paragraph":
             return (
               <Paragraph key={index}>
                 <ContentBlocks content={data.content} />
               </Paragraph>
-            )
-          case 'heading':
+            );
+          case "heading":
             return (
               <Heading key={index} level={data.attrs.level}>
                 <ContentBlocks content={data.content} />
               </Heading>
-            )
+            );
 
-          case 'bulletList':
+          case "bulletList":
             return (
               <BulletList key={index}>
                 <ContentBlocks content={data.content} />
               </BulletList>
-            )
+            );
 
-          case 'orderedList':
+          case "orderedList":
             return (
               <OrderedList key={index}>
                 <ContentBlocks content={data.content} />
               </OrderedList>
-            )
+            );
 
-          case 'dotImage':
-            return <DotImage key={index} {...data} />
+          case "dotImage":
+            return <DotImage key={index} {...data} />;
 
-          case 'horizontalRule':
-            return <hr key={index} />
+          case "horizontalRule":
+            return <hr key={index} />;
 
-          case 'blockquote':
+          case "blockquote":
             return (
               <BlockQuote key={index}>
                 <ContentBlocks content={data.content} />
               </BlockQuote>
-            )
+            );
 
-          case 'codeBlock':
+          case "codeBlock":
             return (
               <CodeBlock language={data.attrs.language} key={index}>
                 <ContentBlocks content={data.content} />
               </CodeBlock>
-            )
+            );
 
-          case 'hardBreak':
-            return <br key={index} />
+          case "hardBreak":
+            return <br key={index} />;
 
-          case 'text':
-            return <TextNode key={index} {...data} />
+          case "text":
+            return <TextNode key={index} {...data} />;
 
-          case 'listItem':
+          case "listItem":
             return (
               <ListItem key={index}>
                 <ContentBlocks content={data.content} />
               </ListItem>
-            )
+            );
 
           default:
-            return <p>Block not supported</p>
+            return <p>Block not supported</p>;
         }
       })}
     </>
-  )
-}
+  );
+};
diff --git a/examples/cms-dotcms/components/cover-image.tsx b/examples/cms-dotcms/components/cover-image.tsx
index 30b7a3aaca..a77c43acba 100644
--- a/examples/cms-dotcms/components/cover-image.tsx
+++ b/examples/cms-dotcms/components/cover-image.tsx
@@ -1,17 +1,17 @@
-import DotCmsImage from './dotcms-image'
-import Link from 'next/link'
-import cn from 'classnames'
+import DotCmsImage from "./dotcms-image";
+import Link from "next/link";
+import cn from "classnames";
 
 export default function CoverImage(props) {
   const image = (
     <DotCmsImage
       {...props}
       alt={`Cover Image for ${props.title}`}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': props.slug,
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": props.slug,
       })}
     />
-  )
+  );
 
   return (
     <div className="-mx-5 sm:mx-0">
@@ -23,5 +23,5 @@ export default function CoverImage(props) {
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-dotcms/components/date.tsx b/examples/cms-dotcms/components/date.tsx
index 3a02dc6800..95bf96f4b7 100644
--- a/examples/cms-dotcms/components/date.tsx
+++ b/examples/cms-dotcms/components/date.tsx
@@ -1,9 +1,9 @@
-import { format } from 'date-fns'
+import { format } from "date-fns";
 
 export default function DateComponent({ dateString }) {
   return (
     <time dateTime={dateString}>
-      {format(new Date(dateString), 'LLLL d, yyyy')}
+      {format(new Date(dateString), "LLLL d, yyyy")}
     </time>
-  )
+  );
 }
diff --git a/examples/cms-dotcms/components/dotcms-image.tsx b/examples/cms-dotcms/components/dotcms-image.tsx
index 4b43669af2..6f0336477d 100644
--- a/examples/cms-dotcms/components/dotcms-image.tsx
+++ b/examples/cms-dotcms/components/dotcms-image.tsx
@@ -1,5 +1,5 @@
-import Image from 'next/image'
-const DEFAULT_QUALITY = 20
+import Image from "next/image";
+const DEFAULT_QUALITY = 20;
 
 // https://dotcms.com/docs/latest/image-resizing-and-processing
 const getUrlWithResizingParameters = ({
@@ -7,25 +7,25 @@ const getUrlWithResizingParameters = ({
   width,
   quality = DEFAULT_QUALITY,
 }) => {
-  const urlParams = []
-  const lastSeparatorIdx = src.lastIndexOf('/')
-  const imageIdentifierAndField = src.slice(0, lastSeparatorIdx)
+  const urlParams = [];
+  const lastSeparatorIdx = src.lastIndexOf("/");
+  const imageIdentifierAndField = src.slice(0, lastSeparatorIdx);
 
-  urlParams.push(imageIdentifierAndField)
-  urlParams.push(width + 'w')
-  urlParams.push(quality + 'q')
+  urlParams.push(imageIdentifierAndField);
+  urlParams.push(width + "w");
+  urlParams.push(quality + "q");
 
-  return urlParams.join('/')
-}
+  return urlParams.join("/");
+};
 
 const dotCmsLoader = (props) => {
   return `${process.env.NEXT_PUBLIC_DOTCMS_HOST}${getUrlWithResizingParameters(
-    props
-  )}`
-}
+    props,
+  )}`;
+};
 
 const DotCmsImage = (params) => {
-  return <Image {...params} loader={dotCmsLoader} />
-}
+  return <Image {...params} loader={dotCmsLoader} />;
+};
 
-export default DotCmsImage
+export default DotCmsImage;
diff --git a/examples/cms-dotcms/components/footer.tsx b/examples/cms-dotcms/components/footer.tsx
index b36b942c4a..0f7d4dbd3f 100644
--- a/examples/cms-dotcms/components/footer.tsx
+++ b/examples/cms-dotcms/components/footer.tsx
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '@lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "@lib/constants";
 
 export default function Footer() {
   return (
@@ -26,5 +26,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-dotcms/components/header.tsx b/examples/cms-dotcms/components/header.tsx
index 05cb9af247..e6dea52099 100644
--- a/examples/cms-dotcms/components/header.tsx
+++ b/examples/cms-dotcms/components/header.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-dotcms/components/hero-post.tsx b/examples/cms-dotcms/components/hero-post.tsx
index fb72072956..96faa90fd5 100644
--- a/examples/cms-dotcms/components/hero-post.tsx
+++ b/examples/cms-dotcms/components/hero-post.tsx
@@ -1,8 +1,8 @@
-import Link from 'next/link'
-import Avatar from '@components/avatar'
-import DateComponent from '@components/date'
-import CoverImage from '@components/cover-image'
-import cn from 'classnames'
+import Link from "next/link";
+import Avatar from "@components/avatar";
+import DateComponent from "@components/date";
+import CoverImage from "@components/cover-image";
+import cn from "classnames";
 
 export default function HeroPost({
   title,
@@ -21,11 +21,11 @@ export default function HeroPost({
           title={title}
           slug={slug}
           objectFit="cover"
-          layout={'intrinsic'}
+          layout={"intrinsic"}
           src={coverImage.idPath}
           alt={`Cover Image for ${title}`}
-          className={cn('shadow-small', {
-            'hover:shadow-medium transition-shadow duration-200': slug,
+          className={cn("shadow-small", {
+            "hover:shadow-medium transition-shadow duration-200": slug,
           })}
         />
       </div>
@@ -55,5 +55,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-dotcms/components/intro.tsx b/examples/cms-dotcms/components/intro.tsx
index cfa4cad95f..a5ca7c6c1e 100644
--- a/examples/cms-dotcms/components/intro.tsx
+++ b/examples/cms-dotcms/components/intro.tsx
@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '@lib/constants'
+import { CMS_NAME, CMS_URL } from "@lib/constants";
 
 export default function Intro() {
   return (
@@ -7,14 +7,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -24,5 +24,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-dotcms/components/layout.tsx b/examples/cms-dotcms/components/layout.tsx
index 15fb7e1f3d..15ecbb7189 100644
--- a/examples/cms-dotcms/components/layout.tsx
+++ b/examples/cms-dotcms/components/layout.tsx
@@ -1,6 +1,6 @@
-import Alert from '@components/alert'
-import Footer from '@components/footer'
-import Meta from '@components/meta'
+import Alert from "@components/alert";
+import Footer from "@components/footer";
+import Meta from "@components/meta";
 
 export default function Layout({ preview, children }) {
   return (
@@ -12,5 +12,5 @@ export default function Layout({ preview, children }) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-dotcms/components/meta.tsx b/examples/cms-dotcms/components/meta.tsx
index 28c8cb4dc3..87b4866be1 100644
--- a/examples/cms-dotcms/components/meta.tsx
+++ b/examples/cms-dotcms/components/meta.tsx
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '@lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "@lib/constants";
 
 export default function Meta() {
   return (
@@ -38,5 +38,5 @@ export default function Meta() {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-dotcms/components/more-stories.tsx b/examples/cms-dotcms/components/more-stories.tsx
index 35c2017c8e..4fadc66de9 100644
--- a/examples/cms-dotcms/components/more-stories.tsx
+++ b/examples/cms-dotcms/components/more-stories.tsx
@@ -1,4 +1,4 @@
-import PostPreview from '@components/post-preview'
+import PostPreview from "@components/post-preview";
 
 export default function MoreStories({ posts }) {
   return (
@@ -20,5 +20,5 @@ export default function MoreStories({ posts }) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-dotcms/components/post-body.tsx b/examples/cms-dotcms/components/post-body.tsx
index 539c95152d..b0c76143f8 100644
--- a/examples/cms-dotcms/components/post-body.tsx
+++ b/examples/cms-dotcms/components/post-body.tsx
@@ -1,6 +1,6 @@
-import { ContentBlocks } from './content-blocks'
-import DateComponent from './date'
-import Avatar from './avatar'
+import { ContentBlocks } from "./content-blocks";
+import DateComponent from "./date";
+import Avatar from "./avatar";
 
 export default function PostBody({ content }) {
   return (
@@ -14,7 +14,7 @@ export default function PostBody({ content }) {
         ) : null}
       </div>
       <div className="mb-6 text-lg">
-        {content.postingDate !== 'now' ? (
+        {content.postingDate !== "now" ? (
           <div className="mb-6 text-lg">
             Posted <DateComponent dateString={content.postingDate} />
           </div>
@@ -22,5 +22,5 @@ export default function PostBody({ content }) {
       </div>
       <ContentBlocks content={content.blogContent.json.content} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-dotcms/components/post-header.tsx b/examples/cms-dotcms/components/post-header.tsx
index a38be55643..39eb2417ba 100644
--- a/examples/cms-dotcms/components/post-header.tsx
+++ b/examples/cms-dotcms/components/post-header.tsx
@@ -1,6 +1,6 @@
-import Avatar from '@components/avatar'
-import CoverImage from '@components/cover-image'
-import PostTitle from '@components/post-title'
+import Avatar from "@components/avatar";
+import CoverImage from "@components/cover-image";
+import PostTitle from "@components/post-title";
 
 export default function PostHeader({ title, coverImage, author }) {
   return (
@@ -21,9 +21,9 @@ export default function PostHeader({ title, coverImage, author }) {
           height={1000}
           src={coverImage.idPath}
           objectFit="cover"
-          layout={'intrinsic'}
+          layout={"intrinsic"}
         />
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-dotcms/components/post-preview.tsx b/examples/cms-dotcms/components/post-preview.tsx
index 0d1e36e255..3b967c3f0a 100644
--- a/examples/cms-dotcms/components/post-preview.tsx
+++ b/examples/cms-dotcms/components/post-preview.tsx
@@ -1,7 +1,7 @@
-import Link from 'next/link'
-import Avatar from '@components/avatar'
-import DateComponent from '@components/date'
-import CoverImage from './cover-image'
+import Link from "next/link";
+import Avatar from "@components/avatar";
+import DateComponent from "@components/date";
+import CoverImage from "./cover-image";
 
 export default function PostPreview({
   title,
@@ -21,7 +21,7 @@ export default function PostPreview({
           slug={slug}
           src={coverImage.idPath}
           objectFit="cover"
-          layout={'intrinsic'}
+          layout={"intrinsic"}
         />
       </div>
       <h3 className="mb-3 text-3xl leading-snug">
@@ -29,7 +29,7 @@ export default function PostPreview({
           {title}
         </Link>
       </h3>
-      {date !== 'now' ? (
+      {date !== "now" ? (
         <div className="mb-4 text-lg">
           <DateComponent dateString={date} />
         </div>
@@ -42,5 +42,5 @@ export default function PostPreview({
         />
       ) : null}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-dotcms/components/post-title.tsx b/examples/cms-dotcms/components/post-title.tsx
index edd8cba65c..a15f06616f 100644
--- a/examples/cms-dotcms/components/post-title.tsx
+++ b/examples/cms-dotcms/components/post-title.tsx
@@ -3,5 +3,5 @@ export default function PostTitle({ children }) {
     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
-  )
+  );
 }
diff --git a/examples/cms-dotcms/components/section-separator.tsx b/examples/cms-dotcms/components/section-separator.tsx
index 4ca5c65fdc..b86fb50b7d 100644
--- a/examples/cms-dotcms/components/section-separator.tsx
+++ b/examples/cms-dotcms/components/section-separator.tsx
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }
diff --git a/examples/cms-dotcms/lib/api.ts b/examples/cms-dotcms/lib/api.ts
index d44ba03bb9..44ee5ad072 100644
--- a/examples/cms-dotcms/lib/api.ts
+++ b/examples/cms-dotcms/lib/api.ts
@@ -8,28 +8,28 @@
  */
 async function fetchAPI(query, { variables } = { variables: null }) {
   const res = await fetch(
-    process.env.NEXT_PUBLIC_DOTCMS_HOST + '/api/v1/graphql',
+    process.env.NEXT_PUBLIC_DOTCMS_HOST + "/api/v1/graphql",
     {
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
         Authorization: `Bearer ${process.env.DOTCMS_TOKEN}`,
       },
       body: JSON.stringify({
         query,
         variables,
       }),
-    }
-  )
+    },
+  );
 
-  const json = await res.json()
+  const json = await res.json();
 
   if (json.errors) {
-    console.error(json.errors)
-    throw new Error('Failed to fetch API')
+    console.error(json.errors);
+    throw new Error("Failed to fetch API");
   }
 
-  return json.data
+  return json.data;
 }
 
 /**
@@ -40,9 +40,9 @@ async function fetchAPI(query, { variables } = { variables: null }) {
  */
 const showPreviewPosts = (preview) => {
   return preview === true
-    ? '+working:true +deleted:false'
-    : '+live:true +deleted:false'
-}
+    ? "+working:true +deleted:false"
+    : "+live:true +deleted:false";
+};
 
 /**
  * Fetch a single post and more posts
@@ -96,15 +96,15 @@ export async function getPostAndMorePosts(slug, preview) {
       variables: {
         query: `+urlmap:/blog/post/${slug} ${showPreviewPosts(preview)}`,
         morePostsQuery: `-urlmap:/blog/post/${slug} ${showPreviewPosts(
-          preview
+          preview,
         )}`,
       },
-    }
-  )
+    },
+  );
   return {
     post: data?.post[0] ?? {},
     morePosts: data?.morePosts ?? [],
-  }
+  };
 }
 
 /**
@@ -115,7 +115,7 @@ export async function getPostAndMorePosts(slug, preview) {
  * @returns {Promise<{post, morePosts}>}
  */
 export async function getPreviewPostBySlug(slug, isPreview) {
-  return await getPostAndMorePosts(slug, isPreview)
+  return await getPostAndMorePosts(slug, isPreview);
 }
 
 /**
@@ -133,9 +133,9 @@ export async function getAllPostsWithSlug() {
         urlTitle
       }
     }
-  `)
+  `);
 
-  return entries?.BlogCollection ?? []
+  return entries?.BlogCollection ?? [];
 }
 
 /**
@@ -170,7 +170,7 @@ export async function getAllPostsForHome(preview) {
       variables: {
         query: `${showPreviewPosts(preview)}`,
       },
-    }
-  )
-  return entries?.BlogCollection ?? []
+    },
+  );
+  return entries?.BlogCollection ?? [];
 }
diff --git a/examples/cms-dotcms/lib/constants.ts b/examples/cms-dotcms/lib/constants.ts
index 2b126e1961..113e39778b 100644
--- a/examples/cms-dotcms/lib/constants.ts
+++ b/examples/cms-dotcms/lib/constants.ts
@@ -1,5 +1,5 @@
-export const EXAMPLE_PATH = 'cms-dotcms'
-export const CMS_NAME = 'dotCMS'
-export const CMS_URL = 'https://dotcms.com/'
+export const EXAMPLE_PATH = "cms-dotcms";
+export const CMS_NAME = "dotCMS";
+export const CMS_URL = "https://dotcms.com/";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**dotCMS**.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fcdn.dotcms.com%2FdA%2F99fe3769-d649%2F256w%2Fdotcms.png&widths=undefined&widths=350&heights=undefined&heights=auto'
+  "https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**dotCMS**.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fcdn.dotcms.com%2FdA%2F99fe3769-d649%2F256w%2Fdotcms.png&widths=undefined&widths=350&heights=undefined&heights=auto";
diff --git a/examples/cms-dotcms/next.config.js b/examples/cms-dotcms/next.config.js
index 5d2b9d520d..d99b54f494 100644
--- a/examples/cms-dotcms/next.config.js
+++ b/examples/cms-dotcms/next.config.js
@@ -1,15 +1,15 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   async rewrites() {
-    const baseUrl = process.env.NEXT_PUBLIC_DOTCMS_HOST
+    const baseUrl = process.env.NEXT_PUBLIC_DOTCMS_HOST;
     return [
       {
-        source: '/images/:slug*',
+        source: "/images/:slug*",
         destination: `${baseUrl}/images/:slug*`,
       },
-    ]
+    ];
   },
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/cms-dotcms/pages/_app.tsx b/examples/cms-dotcms/pages/_app.tsx
index e59c9508cd..9c245beb9b 100644
--- a/examples/cms-dotcms/pages/_app.tsx
+++ b/examples/cms-dotcms/pages/_app.tsx
@@ -1,7 +1,7 @@
-import '@styles/index.css'
+import "@styles/index.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-dotcms/pages/api/exit-preview.tsx b/examples/cms-dotcms/pages/api/exit-preview.tsx
index a63a171ba4..16b744e88e 100644
--- a/examples/cms-dotcms/pages/api/exit-preview.tsx
+++ b/examples/cms-dotcms/pages/api/exit-preview.tsx
@@ -1,8 +1,8 @@
 export default async function exit(_, res) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-dotcms/pages/api/preview.tsx b/examples/cms-dotcms/pages/api/preview.tsx
index 8b364deb6b..d84c625979 100644
--- a/examples/cms-dotcms/pages/api/preview.tsx
+++ b/examples/cms-dotcms/pages/api/preview.tsx
@@ -1,31 +1,31 @@
-import { getPreviewPostBySlug } from '@lib/api'
+import { getPreviewPostBySlug } from "@lib/api";
 
 export default async function preview(req, res) {
-  const { secret, slug } = req.query
+  const { secret, slug } = req.query;
 
   if (secret !== process.env.DOTCMS_PREVIEW_SECRET || !slug) {
-    return res.status(401).json({ message: 'Invalid token' })
+    return res.status(401).json({ message: "Invalid token" });
   }
 
   // Fetch the headless CMS to check if the provided `slug` exists
-  const post = await getPreviewPostBySlug(slug, true)
+  const post = await getPreviewPostBySlug(slug, true);
 
   // If the slug doesn't exist prevent preview mode from being enabled
   if (Object.keys(post.post).length < 1) {
-    return res.status(401).json({ message: 'Invalid slug' })
+    return res.status(401).json({ message: "Invalid slug" });
   }
 
   // Enable Draft Mode by setting the cookie
-  res.setDraftMode({ enable: true })
+  res.setDraftMode({ enable: true });
 
   // Redirect to the path from the fetched post
-  const url = `/posts/${post.post.urlTitle}`
-  res.setHeader('Content-Type', 'text/html')
+  const url = `/posts/${post.post.urlTitle}`;
+  res.setHeader("Content-Type", "text/html");
   res.write(
     `<!DOCTYPE html><html><head><meta http-equiv="Refresh" content="0; url=${url}" />
     <script>window.location.href = '${url}'</script>
     </head>
-    </html>`
-  )
-  res.end()
+    </html>`,
+  );
+  res.end();
 }
diff --git a/examples/cms-dotcms/pages/index.tsx b/examples/cms-dotcms/pages/index.tsx
index 777192e1d2..6b5ca06408 100644
--- a/examples/cms-dotcms/pages/index.tsx
+++ b/examples/cms-dotcms/pages/index.tsx
@@ -1,16 +1,16 @@
-import Container from '@components/container'
-import MoreStories from '@components/more-stories'
-import HeroPost from '@components/hero-post'
-import Intro from '@components/intro'
-import Layout from '@components/layout'
-import { getAllPostsForHome } from '@lib/api'
-import Head from 'next/head'
-import { CMS_NAME } from '@lib/constants'
+import Container from "@components/container";
+import MoreStories from "@components/more-stories";
+import HeroPost from "@components/hero-post";
+import Intro from "@components/intro";
+import Layout from "@components/layout";
+import { getAllPostsForHome } from "@lib/api";
+import Head from "next/head";
+import { CMS_NAME } from "@lib/constants";
 
 export default function Index({ preview, allPosts }) {
-  const heroPost = allPosts[0]
-  const morePosts = allPosts.slice(1)
-  const title = `Next.js Blog Example with ${CMS_NAME}`
+  const heroPost = allPosts[0];
+  const morePosts = allPosts.slice(1);
+  const title = `Next.js Blog Example with ${CMS_NAME}`;
   return (
     <>
       <Layout preview={preview}>
@@ -33,13 +33,13 @@ export default function Index({ preview, allPosts }) {
         </Container>
       </Layout>
     </>
-  )
+  );
 }
 
 export async function getStaticProps({ preview = false }) {
-  const allPosts = await getAllPostsForHome(preview)
+  const allPosts = await getAllPostsForHome(preview);
 
   return {
     props: { preview, allPosts },
-  }
+  };
 }
diff --git a/examples/cms-dotcms/pages/posts/[slug].tsx b/examples/cms-dotcms/pages/posts/[slug].tsx
index 2a74d60c49..274b206ad2 100644
--- a/examples/cms-dotcms/pages/posts/[slug].tsx
+++ b/examples/cms-dotcms/pages/posts/[slug].tsx
@@ -1,27 +1,27 @@
-import { useRouter } from 'next/router'
-import Head from 'next/head'
-import ErrorPage from 'next/error'
-import Container from '@components/container'
-import MoreStories from '@components/more-stories'
-import Header from '@components/header'
-import PostHeader from '@components/post-header'
-import PostBody from '@components/post-body'
-import SectionSeparator from '@components/section-separator'
-import Layout from '@components/layout'
-import PostTitle from '@components/post-title'
-import { CMS_NAME } from '@lib/constants'
-import { getAllPostsWithSlug, getPostAndMorePosts } from '@lib/api'
+import { useRouter } from "next/router";
+import Head from "next/head";
+import ErrorPage from "next/error";
+import Container from "@components/container";
+import MoreStories from "@components/more-stories";
+import Header from "@components/header";
+import PostHeader from "@components/post-header";
+import PostBody from "@components/post-body";
+import SectionSeparator from "@components/section-separator";
+import Layout from "@components/layout";
+import PostTitle from "@components/post-title";
+import { CMS_NAME } from "@lib/constants";
+import { getAllPostsWithSlug, getPostAndMorePosts } from "@lib/api";
 
 export default function Post({ post, morePosts, preview }) {
-  const router = useRouter()
+  const router = useRouter();
 
   if (!router.isFallback && !post) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
 
   const title = `${
-    post?.title || 'dotcms'
-  } | Next.js Blog Example with ${CMS_NAME}`
+    post?.title || "dotcms"
+  } | Next.js Blog Example with ${CMS_NAME}`;
 
   return (
     <Layout preview={preview}>
@@ -58,25 +58,25 @@ export default function Post({ post, morePosts, preview }) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps({ params, preview = false }) {
-  const data = await getPostAndMorePosts(params.slug, preview)
+  const data = await getPostAndMorePosts(params.slug, preview);
 
   return {
     props: {
       preview,
       ...data,
     },
-  }
+  };
 }
 
 export async function getStaticPaths() {
-  const allPosts = await getAllPostsWithSlug()
+  const allPosts = await getAllPostsWithSlug();
 
   return {
     paths: allPosts?.map((post) => `/posts/${post.urlTitle}`) || [],
     fallback: true,
-  }
+  };
 }
diff --git a/examples/cms-dotcms/postcss.config.js b/examples/cms-dotcms/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-dotcms/postcss.config.js
+++ b/examples/cms-dotcms/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-dotcms/tailwind.config.js b/examples/cms-dotcms/tailwind.config.js
index 031eb4ff96..78e1b03152 100644
--- a/examples/cms-dotcms/tailwind.config.js
+++ b/examples/cms-dotcms/tailwind.config.js
@@ -1,48 +1,48 @@
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       container: {
         screens: {
-          sm: '640px',
-          md: '768px',
-          lg: '1024px',
-          xl: '1280px',
+          sm: "640px",
+          md: "768px",
+          lg: "1024px",
+          xl: "1280px",
         },
       },
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   variants: {
     extend: {},
   },
-  plugins: [require('@tailwindcss/typography')],
-}
+  plugins: [require("@tailwindcss/typography")],
+};
diff --git a/examples/cms-drupal/components/alert.js b/examples/cms-drupal/components/alert.js
index b924cb097f..8e8729368f 100644
--- a/examples/cms-drupal/components/alert.js
+++ b/examples/cms-drupal/components/alert.js
@@ -1,31 +1,31 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Alert({ preview }) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This page is a preview.{' '}
+              This page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -38,5 +38,5 @@ export default function Alert({ preview }) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-drupal/components/avatar.js b/examples/cms-drupal/components/avatar.js
index 1921a72463..6a92c7e70c 100644
--- a/examples/cms-drupal/components/avatar.js
+++ b/examples/cms-drupal/components/avatar.js
@@ -1,11 +1,11 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Avatar({ author }) {
   const name = author
     ? author.firstName && author.lastName
       ? `${author.firstName} ${author.lastName}`
       : author.name
-    : null
+    : null;
 
   return (
     <>
@@ -23,5 +23,5 @@ export default function Avatar({ author }) {
         </div>
       )}
     </>
-  )
+  );
 }
diff --git a/examples/cms-drupal/components/categories.js b/examples/cms-drupal/components/categories.js
index 0beb1ff533..eed2be1392 100644
--- a/examples/cms-drupal/components/categories.js
+++ b/examples/cms-drupal/components/categories.js
@@ -12,5 +12,5 @@ export default function Categories({ categories }) {
         <span className="ml-1">{categories.edges.node.name}</span>
       )}
     </span>
-  )
+  );
 }
diff --git a/examples/cms-drupal/components/container.js b/examples/cms-drupal/components/container.js
index fc1c29dfb0..92e559ece3 100644
--- a/examples/cms-drupal/components/container.js
+++ b/examples/cms-drupal/components/container.js
@@ -1,3 +1,3 @@
 export default function Container({ children }) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }
diff --git a/examples/cms-drupal/components/cover-image.js b/examples/cms-drupal/components/cover-image.js
index a4b3b7cdab..c7b56b7af4 100644
--- a/examples/cms-drupal/components/cover-image.js
+++ b/examples/cms-drupal/components/cover-image.js
@@ -1,6 +1,6 @@
-import cn from 'classnames'
-import Image from 'next/image'
-import Link from 'next/link'
+import cn from "classnames";
+import Image from "next/image";
+import Link from "next/link";
 
 export default function CoverImage({ title, coverImage, slug }) {
   const image = (
@@ -9,11 +9,11 @@ export default function CoverImage({ title, coverImage, slug }) {
       height={1000}
       alt={`Cover Image for ${title}`}
       src={coverImage?.sourceUrl}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": slug,
       })}
     />
-  )
+  );
   return (
     <div className="sm:mx-0">
       {slug ? (
@@ -24,5 +24,5 @@ export default function CoverImage({ title, coverImage, slug }) {
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-drupal/components/date.js b/examples/cms-drupal/components/date.js
index eac5681378..5be2fe25ba 100644
--- a/examples/cms-drupal/components/date.js
+++ b/examples/cms-drupal/components/date.js
@@ -1,6 +1,6 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
 export default function Date({ dateString }) {
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "LLLL	d, yyyy")}</time>;
 }
diff --git a/examples/cms-drupal/components/footer.js b/examples/cms-drupal/components/footer.js
index da9eed88ec..81422c7c6b 100644
--- a/examples/cms-drupal/components/footer.js
+++ b/examples/cms-drupal/components/footer.js
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Footer() {
   return (
@@ -26,5 +26,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-drupal/components/header.js b/examples/cms-drupal/components/header.js
index 05cb9af247..e6dea52099 100644
--- a/examples/cms-drupal/components/header.js
+++ b/examples/cms-drupal/components/header.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-drupal/components/hero-post.js b/examples/cms-drupal/components/hero-post.js
index 6bbf23f3b1..7505470dc8 100644
--- a/examples/cms-drupal/components/hero-post.js
+++ b/examples/cms-drupal/components/hero-post.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
-import Link from 'next/link'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "../components/cover-image";
+import Link from "next/link";
 
 export default function HeroPost({
   title,
@@ -40,5 +40,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-drupal/components/intro.js b/examples/cms-drupal/components/intro.js
index 5931b3c596..e8578bef66 100644
--- a/examples/cms-drupal/components/intro.js
+++ b/examples/cms-drupal/components/intro.js
@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '../lib/constants'
+import { CMS_NAME, CMS_URL } from "../lib/constants";
 
 export default function Intro() {
   return (
@@ -7,14 +7,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -24,5 +24,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-drupal/components/layout.js b/examples/cms-drupal/components/layout.js
index 99d9535313..a2e161c793 100644
--- a/examples/cms-drupal/components/layout.js
+++ b/examples/cms-drupal/components/layout.js
@@ -1,6 +1,6 @@
-import Alert from '../components/alert'
-import Footer from '../components/footer'
-import Meta from '../components/meta'
+import Alert from "../components/alert";
+import Footer from "../components/footer";
+import Meta from "../components/meta";
 
 export default function Layout({ preview, children }) {
   return (
@@ -12,5 +12,5 @@ export default function Layout({ preview, children }) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-drupal/components/meta.js b/examples/cms-drupal/components/meta.js
index d9c48d5831..a95395d8b9 100644
--- a/examples/cms-drupal/components/meta.js
+++ b/examples/cms-drupal/components/meta.js
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "../lib/constants";
 
 export default function Meta() {
   return (
@@ -38,5 +38,5 @@ export default function Meta() {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-drupal/components/more-stories.js b/examples/cms-drupal/components/more-stories.js
index 5ef60e09a1..d0632585ad 100644
--- a/examples/cms-drupal/components/more-stories.js
+++ b/examples/cms-drupal/components/more-stories.js
@@ -1,5 +1,5 @@
-import { absoluteURL } from '../lib/api'
-import PostPreview from './post-preview'
+import { absoluteURL } from "../lib/api";
+import PostPreview from "./post-preview";
 
 export default function MoreStories({ posts }) {
   return (
@@ -28,5 +28,5 @@ export default function MoreStories({ posts }) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-drupal/components/post-body.js b/examples/cms-drupal/components/post-body.js
index cc3a92b881..c7e94b6fe3 100644
--- a/examples/cms-drupal/components/post-body.js
+++ b/examples/cms-drupal/components/post-body.js
@@ -1,4 +1,4 @@
-import styles from './post-body.module.css'
+import styles from "./post-body.module.css";
 
 export default function PostBody({ content }) {
   return (
@@ -8,5 +8,5 @@ export default function PostBody({ content }) {
         dangerouslySetInnerHTML={{ __html: content }}
       />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-drupal/components/post-header.js b/examples/cms-drupal/components/post-header.js
index df099adb37..d74a941407 100644
--- a/examples/cms-drupal/components/post-header.js
+++ b/examples/cms-drupal/components/post-header.js
@@ -1,8 +1,8 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
-import PostTitle from '../components/post-title'
-import Categories from '../components/categories'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "../components/cover-image";
+import PostTitle from "../components/post-title";
+import Categories from "../components/categories";
 
 export default function PostHeader({
   title,
@@ -30,5 +30,5 @@ export default function PostHeader({
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-drupal/components/post-preview.js b/examples/cms-drupal/components/post-preview.js
index 768c8df733..dbc94f89ce 100644
--- a/examples/cms-drupal/components/post-preview.js
+++ b/examples/cms-drupal/components/post-preview.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function PostPreview({
   title,
@@ -32,5 +32,5 @@ export default function PostPreview({
       />
       <Avatar author={author} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-drupal/components/post-title.js b/examples/cms-drupal/components/post-title.js
index 25893a3dd9..4be3275e54 100644
--- a/examples/cms-drupal/components/post-title.js
+++ b/examples/cms-drupal/components/post-title.js
@@ -4,5 +4,5 @@ export default function PostTitle({ children }) {
       className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left"
       dangerouslySetInnerHTML={{ __html: children }}
     />
-  )
+  );
 }
diff --git a/examples/cms-drupal/components/section-separator.js b/examples/cms-drupal/components/section-separator.js
index 4ca5c65fdc..b86fb50b7d 100644
--- a/examples/cms-drupal/components/section-separator.js
+++ b/examples/cms-drupal/components/section-separator.js
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }
diff --git a/examples/cms-drupal/components/tags.js b/examples/cms-drupal/components/tags.js
index 4f5f35ccac..b3a1004b78 100644
--- a/examples/cms-drupal/components/tags.js
+++ b/examples/cms-drupal/components/tags.js
@@ -10,5 +10,5 @@ export default function Tags({ tags }) {
         ))}
       </p>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-drupal/lib/api.js b/examples/cms-drupal/lib/api.js
index 4b736b1b65..2e07380331 100644
--- a/examples/cms-drupal/lib/api.js
+++ b/examples/cms-drupal/lib/api.js
@@ -1,3 +1,3 @@
 export function absoluteURL(url) {
-  return `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}${url}`
+  return `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}${url}`;
 }
diff --git a/examples/cms-drupal/lib/constants.js b/examples/cms-drupal/lib/constants.js
index c10bd3fa4f..13bfbe79b4 100644
--- a/examples/cms-drupal/lib/constants.js
+++ b/examples/cms-drupal/lib/constants.js
@@ -1,5 +1,5 @@
-export const EXAMPLE_PATH = 'cms-drupal'
-export const CMS_NAME = 'Drupal'
-export const CMS_URL = 'https://drupal.org/project/next'
+export const EXAMPLE_PATH = "cms-drupal";
+export const CMS_NAME = "Drupal";
+export const CMS_URL = "https://drupal.org/project/next";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Example%20Blog%20with%20**Drupal**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fwww.drupal.org%2Ffiles%2FEL_blue_RGB%25281%2529.png'
+  "https://og-image.vercel.app/Next.js%20Example%20Blog%20with%20**Drupal**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fwww.drupal.org%2Ffiles%2FEL_blue_RGB%25281%2529.png";
diff --git a/examples/cms-drupal/pages/[...slug].js b/examples/cms-drupal/pages/[...slug].js
index 8e52fb87bf..8cd78e2a6f 100644
--- a/examples/cms-drupal/pages/[...slug].js
+++ b/examples/cms-drupal/pages/[...slug].js
@@ -1,28 +1,28 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import Head from 'next/head'
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Head from "next/head";
 import {
   getPathsFromContext,
   getResourceCollectionFromContext,
   getResourceFromContext,
-} from 'next-drupal'
+} from "next-drupal";
 
-import Container from '../components/container'
-import PostBody from '../components/post-body'
-import MoreStories from '../components/more-stories'
-import Header from '../components/header'
-import PostHeader from '../components/post-header'
-import SectionSeparator from '../components/section-separator'
-import Layout from '../components/layout'
-import PostTitle from '../components/post-title'
+import Container from "../components/container";
+import PostBody from "../components/post-body";
+import MoreStories from "../components/more-stories";
+import Header from "../components/header";
+import PostHeader from "../components/post-header";
+import SectionSeparator from "../components/section-separator";
+import Layout from "../components/layout";
+import PostTitle from "../components/post-title";
 
-import { CMS_NAME } from '../lib/constants'
-import { absoluteURL } from '../lib/api'
+import { CMS_NAME } from "../lib/constants";
+import { absoluteURL } from "../lib/api";
 
 export default function Post({ post, morePosts, preview }) {
-  const router = useRouter()
+  const router = useRouter();
   if (!router.isFallback && !post?.id) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
   return (
     <Layout preview={preview}>
@@ -63,31 +63,31 @@ export default function Post({ post, morePosts, preview }) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const post = await getResourceFromContext('node--article', context, {
+  const post = await getResourceFromContext("node--article", context, {
     params: {
-      include: 'field_image,uid,uid.user_picture',
+      include: "field_image,uid,uid.user_picture",
     },
-  })
+  });
 
-  let morePosts = []
+  let morePosts = [];
   if (post) {
     morePosts = await getResourceCollectionFromContext(
-      'node--article',
+      "node--article",
       context,
       {
         params: {
-          include: 'field_image,uid,uid.user_picture',
-          sort: '-created',
-          'filter[id][condition][path]': 'id',
-          'filter[id][condition][operator]': '<>',
-          'filter[id][condition][value]': post.id,
+          include: "field_image,uid,uid.user_picture",
+          sort: "-created",
+          "filter[id][condition][path]": "id",
+          "filter[id][condition][operator]": "<>",
+          "filter[id][condition][value]": post.id,
         },
-      }
-    )
+      },
+    );
   }
 
   return {
@@ -96,12 +96,12 @@ export async function getStaticProps(context) {
       post,
       morePosts,
     },
-  }
+  };
 }
 
 export async function getStaticPaths(context) {
   return {
-    paths: await getPathsFromContext('node--article', context),
+    paths: await getPathsFromContext("node--article", context),
     fallback: true,
-  }
+  };
 }
diff --git a/examples/cms-drupal/pages/_app.js b/examples/cms-drupal/pages/_app.js
index d56d9bf601..aa7931ca32 100644
--- a/examples/cms-drupal/pages/_app.js
+++ b/examples/cms-drupal/pages/_app.js
@@ -1,7 +1,7 @@
-import '../styles/index.css'
+import "../styles/index.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-drupal/pages/_document.js b/examples/cms-drupal/pages/_document.js
index 54e8bf3e2a..b2fff8b426 100644
--- a/examples/cms-drupal/pages/_document.js
+++ b/examples/cms-drupal/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/cms-drupal/pages/api/exit-preview.js b/examples/cms-drupal/pages/api/exit-preview.js
index a63a171ba4..16b744e88e 100644
--- a/examples/cms-drupal/pages/api/exit-preview.js
+++ b/examples/cms-drupal/pages/api/exit-preview.js
@@ -1,8 +1,8 @@
 export default async function exit(_, res) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-drupal/pages/api/preview.js b/examples/cms-drupal/pages/api/preview.js
index 39fa2fca4d..a327b4ac1a 100644
--- a/examples/cms-drupal/pages/api/preview.js
+++ b/examples/cms-drupal/pages/api/preview.js
@@ -1,3 +1,3 @@
-import { DrupalPreview } from 'next-drupal'
+import { DrupalPreview } from "next-drupal";
 
-export default DrupalPreview()
+export default DrupalPreview();
diff --git a/examples/cms-drupal/pages/index.js b/examples/cms-drupal/pages/index.js
index 6836048ddf..28c77b41e4 100644
--- a/examples/cms-drupal/pages/index.js
+++ b/examples/cms-drupal/pages/index.js
@@ -1,17 +1,17 @@
-import Head from 'next/head'
-import { getResourceCollectionFromContext } from 'next-drupal'
+import Head from "next/head";
+import { getResourceCollectionFromContext } from "next-drupal";
 
-import Container from '../components/container'
-import MoreStories from '../components/more-stories'
-import HeroPost from '../components/hero-post'
-import Intro from '../components/intro'
-import Layout from '../components/layout'
-import { CMS_NAME } from '../lib/constants'
-import { absoluteURL } from '../lib/api'
+import Container from "../components/container";
+import MoreStories from "../components/more-stories";
+import HeroPost from "../components/hero-post";
+import Intro from "../components/intro";
+import Layout from "../components/layout";
+import { CMS_NAME } from "../lib/constants";
+import { absoluteURL } from "../lib/api";
 
 export default function Index({ posts }) {
-  const heroPost = posts[0]
-  const morePosts = posts.slice(1)
+  const heroPost = posts[0];
+  const morePosts = posts.slice(1);
   return (
     <Layout>
       <Head>
@@ -39,22 +39,22 @@ export default function Index({ posts }) {
         {morePosts.length > 0 && <MoreStories posts={morePosts} />}
       </Container>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
   const posts = await getResourceCollectionFromContext(
-    'node--article',
+    "node--article",
     context,
     {
       params: {
-        include: 'field_image,uid,uid.user_picture',
-        sort: '-created',
+        include: "field_image,uid,uid.user_picture",
+        sort: "-created",
       },
-    }
-  )
+    },
+  );
 
   return {
     props: { posts },
-  }
+  };
 }
diff --git a/examples/cms-drupal/postcss.config.js b/examples/cms-drupal/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-drupal/postcss.config.js
+++ b/examples/cms-drupal/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-drupal/tailwind.config.js b/examples/cms-drupal/tailwind.config.js
index ea0efae6d7..a8f65a525d 100644
--- a/examples/cms-drupal/tailwind.config.js
+++ b/examples/cms-drupal/tailwind.config.js
@@ -1,38 +1,38 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/cms-enterspeed/components/alert.tsx b/examples/cms-enterspeed/components/alert.tsx
index b5fae17fb5..145611ec97 100644
--- a/examples/cms-enterspeed/components/alert.tsx
+++ b/examples/cms-enterspeed/components/alert.tsx
@@ -1,35 +1,35 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 type Props = {
-  preview?: boolean
-}
+  preview?: boolean;
+};
 
 export default function Alert({ preview }: Props) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This is a page preview.{' '}
+              This is a page preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -42,5 +42,5 @@ export default function Alert({ preview }: Props) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-enterspeed/components/avatar.tsx b/examples/cms-enterspeed/components/avatar.tsx
index 48fd7da290..5c05adadcc 100644
--- a/examples/cms-enterspeed/components/avatar.tsx
+++ b/examples/cms-enterspeed/components/avatar.tsx
@@ -1,16 +1,16 @@
-import Image from 'next/image'
-import AuthorType from '../types/authorType'
+import Image from "next/image";
+import AuthorType from "../types/authorType";
 
 type Props = {
-  author: AuthorType
-}
+  author: AuthorType;
+};
 
 export default function Avatar({ author }: Props) {
   const name: string = author
     ? author.firstName && author.lastName
       ? `${author.firstName} ${author.lastName}`
       : author.name
-    : null
+    : null;
 
   return (
     <div className="flex items-center">
@@ -24,5 +24,5 @@ export default function Avatar({ author }: Props) {
       </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-enterspeed/components/categories.tsx b/examples/cms-enterspeed/components/categories.tsx
index 25a9aed37b..f611b6cded 100644
--- a/examples/cms-enterspeed/components/categories.tsx
+++ b/examples/cms-enterspeed/components/categories.tsx
@@ -1,6 +1,6 @@
 type Props = {
-  categories: string[]
-}
+  categories: string[];
+};
 
 export default function Categories({ categories }: Props) {
   return (
@@ -16,5 +16,5 @@ export default function Categories({ categories }: Props) {
         <span className="ml-1">{categories}</span>
       )}
     </span>
-  )
+  );
 }
diff --git a/examples/cms-enterspeed/components/container.tsx b/examples/cms-enterspeed/components/container.tsx
index 5aecc4c08d..4c72cdaf5e 100644
--- a/examples/cms-enterspeed/components/container.tsx
+++ b/examples/cms-enterspeed/components/container.tsx
@@ -1,7 +1,7 @@
 type Props = {
-  children: React.ReactNode
-}
+  children: React.ReactNode;
+};
 
 export default function Container({ children }: Props) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }
diff --git a/examples/cms-enterspeed/components/cover-image.tsx b/examples/cms-enterspeed/components/cover-image.tsx
index 540e1b277f..fe709ca4eb 100644
--- a/examples/cms-enterspeed/components/cover-image.tsx
+++ b/examples/cms-enterspeed/components/cover-image.tsx
@@ -1,12 +1,12 @@
-import cn from 'classnames'
-import Image from 'next/image'
-import Link from 'next/link'
+import cn from "classnames";
+import Image from "next/image";
+import Link from "next/link";
 
 type Props = {
-  title: string
-  coverImage: string
-  slug?: string
-}
+  title: string;
+  coverImage: string;
+  slug?: string;
+};
 
 export default function CoverImage({ title, coverImage, slug }: Props) {
   const image = (
@@ -15,11 +15,11 @@ export default function CoverImage({ title, coverImage, slug }: Props) {
       height={1000}
       alt={`Cover Image for ${title}`}
       src={coverImage}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": slug,
       })}
     />
-  )
+  );
   return (
     <div className="sm:mx-0">
       {slug ? (
@@ -30,5 +30,5 @@ export default function CoverImage({ title, coverImage, slug }: Props) {
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-enterspeed/components/date.tsx b/examples/cms-enterspeed/components/date.tsx
index a71da8c966..bd25f18b40 100644
--- a/examples/cms-enterspeed/components/date.tsx
+++ b/examples/cms-enterspeed/components/date.tsx
@@ -1,10 +1,10 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
 type Props = {
-  dateString: string
-}
+  dateString: string;
+};
 
 export default function Date({ dateString }: Props) {
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "LLLL	d, yyyy")}</time>;
 }
diff --git a/examples/cms-enterspeed/components/footer.tsx b/examples/cms-enterspeed/components/footer.tsx
index da9eed88ec..81422c7c6b 100644
--- a/examples/cms-enterspeed/components/footer.tsx
+++ b/examples/cms-enterspeed/components/footer.tsx
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Footer() {
   return (
@@ -26,5 +26,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-enterspeed/components/header.tsx b/examples/cms-enterspeed/components/header.tsx
index 05cb9af247..e6dea52099 100644
--- a/examples/cms-enterspeed/components/header.tsx
+++ b/examples/cms-enterspeed/components/header.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-enterspeed/components/hero-post.tsx b/examples/cms-enterspeed/components/hero-post.tsx
index 9fd1d76781..9097898cb3 100644
--- a/examples/cms-enterspeed/components/hero-post.tsx
+++ b/examples/cms-enterspeed/components/hero-post.tsx
@@ -1,17 +1,17 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
-import AuthorType from '../types/authorType'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
+import AuthorType from "../types/authorType";
 
 type Props = {
-  title: string
-  coverImage: string
-  date: string
-  excerpt: string
-  author: AuthorType
-  slug: string
-}
+  title: string;
+  coverImage: string;
+  date: string;
+  excerpt: string;
+  author: AuthorType;
+  slug: string;
+};
 
 export default function HeroPost({
   title,
@@ -50,5 +50,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-enterspeed/components/intro.tsx b/examples/cms-enterspeed/components/intro.tsx
index bed0aea4fc..c86fbf04e2 100644
--- a/examples/cms-enterspeed/components/intro.tsx
+++ b/examples/cms-enterspeed/components/intro.tsx
@@ -1,4 +1,4 @@
-import { EXAMPLE_TOOL_NAME, EXAMPLE_TOOL_URL } from '../lib/constants'
+import { EXAMPLE_TOOL_NAME, EXAMPLE_TOOL_URL } from "../lib/constants";
 
 export default function Intro() {
   return (
@@ -7,14 +7,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={EXAMPLE_TOOL_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -24,5 +24,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-enterspeed/components/layout.tsx b/examples/cms-enterspeed/components/layout.tsx
index 99fd47e2e9..3d43fb971c 100644
--- a/examples/cms-enterspeed/components/layout.tsx
+++ b/examples/cms-enterspeed/components/layout.tsx
@@ -1,11 +1,11 @@
-import Alert from './alert'
-import Footer from './footer'
-import Meta from './meta'
+import Alert from "./alert";
+import Footer from "./footer";
+import Meta from "./meta";
 
 type Props = {
-  preview?: boolean
-  children: React.ReactNode
-}
+  preview?: boolean;
+  children: React.ReactNode;
+};
 
 export default function Layout({ preview, children }: Props) {
   return (
@@ -17,5 +17,5 @@ export default function Layout({ preview, children }: Props) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-enterspeed/components/meta.tsx b/examples/cms-enterspeed/components/meta.tsx
index 6465b9bc43..90a9e79fa9 100644
--- a/examples/cms-enterspeed/components/meta.tsx
+++ b/examples/cms-enterspeed/components/meta.tsx
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { EXAMPLE_TOOL_NAME } from '../lib/constants'
+import Head from "next/head";
+import { EXAMPLE_TOOL_NAME } from "../lib/constants";
 
 export default function Meta() {
   return (
@@ -37,5 +37,5 @@ export default function Meta() {
         content={`A statically generated blog example using Next.js and ${EXAMPLE_TOOL_NAME}.`}
       />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-enterspeed/components/more-stories.tsx b/examples/cms-enterspeed/components/more-stories.tsx
index f22ba0d829..4441689736 100644
--- a/examples/cms-enterspeed/components/more-stories.tsx
+++ b/examples/cms-enterspeed/components/more-stories.tsx
@@ -1,9 +1,9 @@
-import PostPreview from './post-preview'
-import PostType from '../types/postType'
+import PostPreview from "./post-preview";
+import PostType from "../types/postType";
 
 type Props = {
-  posts: PostType[]
-}
+  posts: PostType[];
+};
 
 export default function MoreStories({ posts }: Props) {
   return (
@@ -25,5 +25,5 @@ export default function MoreStories({ posts }: Props) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-enterspeed/components/post-body.tsx b/examples/cms-enterspeed/components/post-body.tsx
index d77f81e94f..bae690dc99 100644
--- a/examples/cms-enterspeed/components/post-body.tsx
+++ b/examples/cms-enterspeed/components/post-body.tsx
@@ -1,8 +1,8 @@
-import styles from './post-body.module.css'
+import styles from "./post-body.module.css";
 
 type Props = {
-  content: string
-}
+  content: string;
+};
 
 export default function PostBody({ content }: Props) {
   return (
@@ -12,5 +12,5 @@ export default function PostBody({ content }: Props) {
         dangerouslySetInnerHTML={{ __html: content }}
       />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-enterspeed/components/post-header.tsx b/examples/cms-enterspeed/components/post-header.tsx
index f332cf6c16..97432bb81d 100644
--- a/examples/cms-enterspeed/components/post-header.tsx
+++ b/examples/cms-enterspeed/components/post-header.tsx
@@ -1,17 +1,17 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import PostTitle from './post-title'
-import Categories from './categories'
-import AuthorType from '../types/authorType'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import PostTitle from "./post-title";
+import Categories from "./categories";
+import AuthorType from "../types/authorType";
 
 type Props = {
-  title: string
-  coverImage: string
-  date: string
-  author: AuthorType
-  categories: string[]
-}
+  title: string;
+  coverImage: string;
+  date: string;
+  author: AuthorType;
+  categories: string[];
+};
 
 export default function PostHeader({
   title,
@@ -39,5 +39,5 @@ export default function PostHeader({
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-enterspeed/components/post-preview.tsx b/examples/cms-enterspeed/components/post-preview.tsx
index e06c089527..a46f07109c 100644
--- a/examples/cms-enterspeed/components/post-preview.tsx
+++ b/examples/cms-enterspeed/components/post-preview.tsx
@@ -1,17 +1,17 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
-import AuthorType from '../types/authorType'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
+import AuthorType from "../types/authorType";
 
 type Props = {
-  title: string
-  coverImage: string
-  date: string
-  excerpt: string
-  author: AuthorType
-  slug: string
-}
+  title: string;
+  coverImage: string;
+  date: string;
+  excerpt: string;
+  author: AuthorType;
+  slug: string;
+};
 
 export default function PostPreview({
   title,
@@ -42,5 +42,5 @@ export default function PostPreview({
       />
       <Avatar author={author} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-enterspeed/components/post-title.tsx b/examples/cms-enterspeed/components/post-title.tsx
index d9a95ba69f..0cd91acba1 100644
--- a/examples/cms-enterspeed/components/post-title.tsx
+++ b/examples/cms-enterspeed/components/post-title.tsx
@@ -1,6 +1,6 @@
 type Props = {
-  children: string
-}
+  children: string;
+};
 
 export default function PostTitle({ children }: Props) {
   return (
@@ -8,5 +8,5 @@ export default function PostTitle({ children }: Props) {
       className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left"
       dangerouslySetInnerHTML={{ __html: children }}
     />
-  )
+  );
 }
diff --git a/examples/cms-enterspeed/components/section-separator.tsx b/examples/cms-enterspeed/components/section-separator.tsx
index 4ca5c65fdc..b86fb50b7d 100644
--- a/examples/cms-enterspeed/components/section-separator.tsx
+++ b/examples/cms-enterspeed/components/section-separator.tsx
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }
diff --git a/examples/cms-enterspeed/components/tags.tsx b/examples/cms-enterspeed/components/tags.tsx
index 32767f2bef..603a171dbe 100644
--- a/examples/cms-enterspeed/components/tags.tsx
+++ b/examples/cms-enterspeed/components/tags.tsx
@@ -1,6 +1,6 @@
 type Props = {
-  tags: string[]
-}
+  tags: string[];
+};
 
 export default function Tags({ tags }: Props) {
   return (
@@ -14,5 +14,5 @@ export default function Tags({ tags }: Props) {
         ))}
       </p>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-enterspeed/lib/api.ts b/examples/cms-enterspeed/lib/api.ts
index ec20255b98..a7b694bdb4 100644
--- a/examples/cms-enterspeed/lib/api.ts
+++ b/examples/cms-enterspeed/lib/api.ts
@@ -1,24 +1,25 @@
-const PRODUCTION_API_KEY = process.env.ENTERSPEED_PRODUCTION_ENVIRONMENT_API_KEY
-const PREVIEW_API_KEY = process.env.ENTERSPEED_PREVIEW_ENVIRONMENT_API_KEY
+const PRODUCTION_API_KEY =
+  process.env.ENTERSPEED_PRODUCTION_ENVIRONMENT_API_KEY;
+const PREVIEW_API_KEY = process.env.ENTERSPEED_PREVIEW_ENVIRONMENT_API_KEY;
 
 const call = async (query: string, preview: boolean) => {
-  const url = `https://delivery.enterspeed.com/v1?${query}`
+  const url = `https://delivery.enterspeed.com/v1?${query}`;
   const response = await fetch(new Request(url), {
     headers: {
-      'Content-Type': 'application/json',
-      'X-Api-Key': preview ? PREVIEW_API_KEY : PRODUCTION_API_KEY,
+      "Content-Type": "application/json",
+      "X-Api-Key": preview ? PREVIEW_API_KEY : PRODUCTION_API_KEY,
     },
-  })
+  });
 
-  return response.json()
-}
+  return response.json();
+};
 
 export const getByHandle = async (handle: string, preview: boolean) => {
-  const response = await call(`handle=${handle}`, preview)
-  return response.views[handle]
-}
+  const response = await call(`handle=${handle}`, preview);
+  return response.views[handle];
+};
 
 export const getByUrl = async (url: string, preview: boolean) => {
-  const response = await call(`url=${url}`, preview)
-  return response.route
-}
+  const response = await call(`url=${url}`, preview);
+  return response.route;
+};
diff --git a/examples/cms-enterspeed/lib/constants.ts b/examples/cms-enterspeed/lib/constants.ts
index 167e33f8b7..e5bc14c201 100644
--- a/examples/cms-enterspeed/lib/constants.ts
+++ b/examples/cms-enterspeed/lib/constants.ts
@@ -1,3 +1,3 @@
-export const EXAMPLE_PATH = 'cms-enterspeed'
-export const EXAMPLE_TOOL_NAME = 'Enterspeed'
-export const EXAMPLE_TOOL_URL = 'https://www.enterspeed.com/'
+export const EXAMPLE_PATH = "cms-enterspeed";
+export const EXAMPLE_TOOL_NAME = "Enterspeed";
+export const EXAMPLE_TOOL_URL = "https://www.enterspeed.com/";
diff --git a/examples/cms-enterspeed/next.config.js b/examples/cms-enterspeed/next.config.js
index de4b2fcd72..e6ee49f8e5 100644
--- a/examples/cms-enterspeed/next.config.js
+++ b/examples/cms-enterspeed/next.config.js
@@ -2,11 +2,11 @@ module.exports = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'res.cloudinary.com',
-        port: '',
-        pathname: '/my-account/**',
+        protocol: "https",
+        hostname: "res.cloudinary.com",
+        port: "",
+        pathname: "/my-account/**",
       },
     ],
   },
-}
+};
diff --git a/examples/cms-enterspeed/pages/_app.tsx b/examples/cms-enterspeed/pages/_app.tsx
index 0c585d4bb4..73ee234c2b 100644
--- a/examples/cms-enterspeed/pages/_app.tsx
+++ b/examples/cms-enterspeed/pages/_app.tsx
@@ -1,8 +1,8 @@
-import { AppProps } from 'next/app'
-import '../styles/index.css'
+import { AppProps } from "next/app";
+import "../styles/index.css";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-enterspeed/pages/api/exit-preview.js b/examples/cms-enterspeed/pages/api/exit-preview.js
index a63a171ba4..16b744e88e 100644
--- a/examples/cms-enterspeed/pages/api/exit-preview.js
+++ b/examples/cms-enterspeed/pages/api/exit-preview.js
@@ -1,8 +1,8 @@
 export default async function exit(_, res) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-enterspeed/pages/api/preview.js b/examples/cms-enterspeed/pages/api/preview.js
index 177539f2e6..96219f71fd 100644
--- a/examples/cms-enterspeed/pages/api/preview.js
+++ b/examples/cms-enterspeed/pages/api/preview.js
@@ -2,14 +2,14 @@ export default async function preview(req, res) {
   // Check the secret and next parameters
   // This secret should only be known by this API route
   if (req.query.secret === undefined || null) {
-    return res.status(401).json({ message: 'No token provided' })
+    return res.status(401).json({ message: "No token provided" });
   }
 
   if (req.query.secret !== process.env.ENTERSPEED_PREVIEW_SECRET) {
-    return res.status(401).json({ message: 'Invalid token' })
+    return res.status(401).json({ message: "Invalid token" });
   }
 
-  res.setDraftMode({ enable: true })
+  res.setDraftMode({ enable: true });
 
-  res.redirect('/')
+  res.redirect("/");
 }
diff --git a/examples/cms-enterspeed/pages/index.tsx b/examples/cms-enterspeed/pages/index.tsx
index 4eea03781d..c996dd0f80 100644
--- a/examples/cms-enterspeed/pages/index.tsx
+++ b/examples/cms-enterspeed/pages/index.tsx
@@ -1,21 +1,21 @@
-import Head from 'next/head'
-import Container from '../components/container'
-import MoreStories from '../components/more-stories'
-import HeroPost from '../components/hero-post'
-import Intro from '../components/intro'
-import Layout from '../components/layout'
-import { EXAMPLE_TOOL_NAME } from '../lib/constants'
-import { getByHandle } from '../lib/api'
-import PostType from '../types/postType'
+import Head from "next/head";
+import Container from "../components/container";
+import MoreStories from "../components/more-stories";
+import HeroPost from "../components/hero-post";
+import Intro from "../components/intro";
+import Layout from "../components/layout";
+import { EXAMPLE_TOOL_NAME } from "../lib/constants";
+import { getByHandle } from "../lib/api";
+import PostType from "../types/postType";
 
 type Props = {
-  posts: PostType[]
-  preview: boolean
-}
+  posts: PostType[];
+  preview: boolean;
+};
 
 export default function Index({ posts, preview }: Props) {
-  const heroPost = posts[0]
-  const morePosts = posts.slice(1)
+  const heroPost = posts[0];
+  const morePosts = posts.slice(1);
 
   return (
     <>
@@ -39,16 +39,16 @@ export default function Index({ posts, preview }: Props) {
         </Container>
       </Layout>
     </>
-  )
+  );
 }
 
 export async function getStaticProps({ preview }: { preview: boolean }) {
-  const data = await getByHandle('blogList', preview)
+  const data = await getByHandle("blogList", preview);
 
   return {
     props: {
       posts: data.blogListItems,
       preview: preview || null,
     },
-  }
+  };
 }
diff --git a/examples/cms-enterspeed/pages/posts/[slug].tsx b/examples/cms-enterspeed/pages/posts/[slug].tsx
index 5dbe9695ac..6e4bc6533d 100644
--- a/examples/cms-enterspeed/pages/posts/[slug].tsx
+++ b/examples/cms-enterspeed/pages/posts/[slug].tsx
@@ -1,28 +1,28 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import Container from '../../components/container'
-import PostBody from '../../components/post-body'
-import Header from '../../components/header'
-import PostHeader from '../../components/post-header'
-import SectionSeparator from '../../components/section-separator'
-import Layout from '../../components/layout'
-import { getByUrl, getByHandle } from '../../lib/api'
-import PostTitle from '../../components/post-title'
-import Head from 'next/head'
-import { EXAMPLE_TOOL_NAME } from '../../lib/constants'
-import Tags from '../../components/tags'
-import PostType from '../../types/postType'
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Container from "../../components/container";
+import PostBody from "../../components/post-body";
+import Header from "../../components/header";
+import PostHeader from "../../components/post-header";
+import SectionSeparator from "../../components/section-separator";
+import Layout from "../../components/layout";
+import { getByUrl, getByHandle } from "../../lib/api";
+import PostTitle from "../../components/post-title";
+import Head from "next/head";
+import { EXAMPLE_TOOL_NAME } from "../../lib/constants";
+import Tags from "../../components/tags";
+import PostType from "../../types/postType";
 
 type Props = {
-  post: PostType
-  preview: boolean
-}
+  post: PostType;
+  preview: boolean;
+};
 
 export default function Post({ post, preview }: Props) {
-  const router = useRouter()
+  const router = useRouter();
 
   if (!router.isFallback && !post?.url) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
 
   return (
@@ -58,39 +58,39 @@ export default function Post({ post, preview }: Props) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticPaths({ preview }: { preview: boolean }) {
-  const data = await getByHandle('blogList', preview)
+  const data = await getByHandle("blogList", preview);
 
   return {
     paths: data.blogListItems.map((post) => ({
       // Remove starting and ending slash from url
-      params: { slug: post.url.replace(/^\/|\/$/g, '') },
+      params: { slug: post.url.replace(/^\/|\/$/g, "") },
     })),
     fallback: false,
-  }
+  };
 }
 
 type Params = {
-  slug: string
-}
+  slug: string;
+};
 
 export async function getStaticProps({
   params,
   preview,
 }: {
-  params: Params
-  preview: boolean
+  params: Params;
+  preview: boolean;
 }) {
   // Adding starting slash to the URL again
-  const data = await getByUrl(encodeURIComponent(`/${params.slug}`), preview)
+  const data = await getByUrl(encodeURIComponent(`/${params.slug}`), preview);
 
   return {
     props: {
       post: data,
       preview: preview || null,
     },
-  }
+  };
 }
diff --git a/examples/cms-enterspeed/postcss.config.js b/examples/cms-enterspeed/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-enterspeed/postcss.config.js
+++ b/examples/cms-enterspeed/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-enterspeed/tailwind.config.js b/examples/cms-enterspeed/tailwind.config.js
index 21253ff379..2befea3243 100644
--- a/examples/cms-enterspeed/tailwind.config.js
+++ b/examples/cms-enterspeed/tailwind.config.js
@@ -1,37 +1,37 @@
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/cms-enterspeed/types/authorType.ts b/examples/cms-enterspeed/types/authorType.ts
index 07e2303a40..387dd9f8a8 100644
--- a/examples/cms-enterspeed/types/authorType.ts
+++ b/examples/cms-enterspeed/types/authorType.ts
@@ -1,10 +1,10 @@
 type AuthorType = {
-  firstName: string
-  lastName: string
-  name: string
+  firstName: string;
+  lastName: string;
+  name: string;
   avatar: {
-    url: string
-  }
-}
+    url: string;
+  };
+};
 
-export default AuthorType
+export default AuthorType;
diff --git a/examples/cms-enterspeed/types/postType.ts b/examples/cms-enterspeed/types/postType.ts
index d8370e3a47..ef70265917 100644
--- a/examples/cms-enterspeed/types/postType.ts
+++ b/examples/cms-enterspeed/types/postType.ts
@@ -1,15 +1,15 @@
-import AuthorType from './authorType'
+import AuthorType from "./authorType";
 
 type PostType = {
-  url: string
-  title: string
-  featuredImage: string
-  date: string
-  author: AuthorType
-  excerpt: string
-  categories: string[]
-  content: string
-  tags: string[]
-}
+  url: string;
+  title: string;
+  featuredImage: string;
+  date: string;
+  author: AuthorType;
+  excerpt: string;
+  categories: string[];
+  content: string;
+  tags: string[];
+};
 
-export default PostType
+export default PostType;
diff --git a/examples/cms-ghost/components/alert.js b/examples/cms-ghost/components/alert.js
index 051f331964..98355c9031 100644
--- a/examples/cms-ghost/components/alert.js
+++ b/examples/cms-ghost/components/alert.js
@@ -1,31 +1,31 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '@/lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "@/lib/constants";
 
 export default function Alert({ preview }) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This is page is a preview.{' '}
+              This is page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -38,5 +38,5 @@ export default function Alert({ preview }) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-ghost/components/avatar.js b/examples/cms-ghost/components/avatar.js
index d7f7ec3871..7866167d21 100644
--- a/examples/cms-ghost/components/avatar.js
+++ b/examples/cms-ghost/components/avatar.js
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Avatar({ name, picture }) {
   return (
@@ -15,5 +15,5 @@ export default function Avatar({ name, picture }) {
       </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-ghost/components/container.js b/examples/cms-ghost/components/container.js
index fc1c29dfb0..92e559ece3 100644
--- a/examples/cms-ghost/components/container.js
+++ b/examples/cms-ghost/components/container.js
@@ -1,3 +1,3 @@
 export default function Container({ children }) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }
diff --git a/examples/cms-ghost/components/cover-image.js b/examples/cms-ghost/components/cover-image.js
index 25663497bc..def1ec6a9e 100644
--- a/examples/cms-ghost/components/cover-image.js
+++ b/examples/cms-ghost/components/cover-image.js
@@ -1,20 +1,20 @@
-import cn from 'classnames'
-import Link from 'next/link'
-import Image from 'next/image'
+import cn from "classnames";
+import Link from "next/link";
+import Image from "next/image";
 
 export default function CoverImage({ title, url, slug, width, height }) {
   const image = (
     <Image
       src={url}
       alt={`Cover Image for ${title}`}
-      className={cn('shadow-sm', {
-        'hover:shadow-md transition-shadow duration-200': slug,
+      className={cn("shadow-sm", {
+        "hover:shadow-md transition-shadow duration-200": slug,
       })}
       layout="responsive"
       width={width}
       height={height}
     />
-  )
+  );
   return (
     <div className="sm:mx-0">
       {slug ? (
@@ -25,5 +25,5 @@ export default function CoverImage({ title, url, slug, width, height }) {
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-ghost/components/date.js b/examples/cms-ghost/components/date.js
index eac5681378..5be2fe25ba 100644
--- a/examples/cms-ghost/components/date.js
+++ b/examples/cms-ghost/components/date.js
@@ -1,6 +1,6 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
 export default function Date({ dateString }) {
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "LLLL	d, yyyy")}</time>;
 }
diff --git a/examples/cms-ghost/components/footer.js b/examples/cms-ghost/components/footer.js
index b305c3eb40..d4213d236e 100644
--- a/examples/cms-ghost/components/footer.js
+++ b/examples/cms-ghost/components/footer.js
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '@/lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "@/lib/constants";
 
 export default function Footer() {
   return (
@@ -26,5 +26,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-ghost/components/header.js b/examples/cms-ghost/components/header.js
index 05cb9af247..e6dea52099 100644
--- a/examples/cms-ghost/components/header.js
+++ b/examples/cms-ghost/components/header.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-ghost/components/hero-post.js b/examples/cms-ghost/components/hero-post.js
index 7f849fc8f6..334523dd85 100644
--- a/examples/cms-ghost/components/hero-post.js
+++ b/examples/cms-ghost/components/hero-post.js
@@ -1,7 +1,7 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function HeroPost({
   title,
@@ -39,5 +39,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-ghost/components/intro.js b/examples/cms-ghost/components/intro.js
index c3003c6196..b751ac199e 100644
--- a/examples/cms-ghost/components/intro.js
+++ b/examples/cms-ghost/components/intro.js
@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '@/lib/constants'
+import { CMS_NAME, CMS_URL } from "@/lib/constants";
 
 export default function Intro() {
   return (
@@ -7,14 +7,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -24,5 +24,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-ghost/components/layout.js b/examples/cms-ghost/components/layout.js
index ff54d53992..99bbbcf753 100644
--- a/examples/cms-ghost/components/layout.js
+++ b/examples/cms-ghost/components/layout.js
@@ -1,8 +1,8 @@
-import Alert from './alert'
-import Footer from './footer'
-import Meta from './meta'
-import 'lazysizes'
-import 'lazysizes/plugins/parent-fit/ls.parent-fit'
+import Alert from "./alert";
+import Footer from "./footer";
+import Meta from "./meta";
+import "lazysizes";
+import "lazysizes/plugins/parent-fit/ls.parent-fit";
 
 export default function Layout({ preview, children }) {
   return (
@@ -14,5 +14,5 @@ export default function Layout({ preview, children }) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-ghost/components/meta.js b/examples/cms-ghost/components/meta.js
index cec6227420..88aac65487 100644
--- a/examples/cms-ghost/components/meta.js
+++ b/examples/cms-ghost/components/meta.js
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '@/lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "@/lib/constants";
 
 export default function Meta() {
   return (
@@ -38,5 +38,5 @@ export default function Meta() {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-ghost/components/more-stories.js b/examples/cms-ghost/components/more-stories.js
index 07c12287d7..df5d5079ce 100644
--- a/examples/cms-ghost/components/more-stories.js
+++ b/examples/cms-ghost/components/more-stories.js
@@ -1,4 +1,4 @@
-import PostPreview from './post-preview'
+import PostPreview from "./post-preview";
 
 export default function MoreStories({ posts }) {
   return (
@@ -20,5 +20,5 @@ export default function MoreStories({ posts }) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-ghost/components/post-body.js b/examples/cms-ghost/components/post-body.js
index 4cc2bb52bc..45b5a1fb95 100644
--- a/examples/cms-ghost/components/post-body.js
+++ b/examples/cms-ghost/components/post-body.js
@@ -1,12 +1,12 @@
-import markdownStyles from './markdown-styles.module.css'
+import markdownStyles from "./markdown-styles.module.css";
 
 export default function PostBody({ content }) {
   return (
     <div className="max-w-2xl mx-auto">
       <div
-        className={markdownStyles['markdown']}
+        className={markdownStyles["markdown"]}
         dangerouslySetInnerHTML={{ __html: content }}
       />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-ghost/components/post-header.js b/examples/cms-ghost/components/post-header.js
index 3678201c15..8710f9c39e 100644
--- a/examples/cms-ghost/components/post-header.js
+++ b/examples/cms-ghost/components/post-header.js
@@ -1,7 +1,7 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import PostTitle from './post-title'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import PostTitle from "./post-title";
 
 export default function PostHeader({ title, coverImage, date, author }) {
   return (
@@ -22,5 +22,5 @@ export default function PostHeader({ title, coverImage, date, author }) {
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-ghost/components/post-preview.js b/examples/cms-ghost/components/post-preview.js
index 274451855c..786f28062b 100644
--- a/examples/cms-ghost/components/post-preview.js
+++ b/examples/cms-ghost/components/post-preview.js
@@ -1,7 +1,7 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function PostPreview({
   title,
@@ -33,5 +33,5 @@ export default function PostPreview({
       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
       <Avatar name={author.name} picture={author.profile_image} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-ghost/components/post-title.js b/examples/cms-ghost/components/post-title.js
index edd8cba65c..a15f06616f 100644
--- a/examples/cms-ghost/components/post-title.js
+++ b/examples/cms-ghost/components/post-title.js
@@ -3,5 +3,5 @@ export default function PostTitle({ children }) {
     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
-  )
+  );
 }
diff --git a/examples/cms-ghost/components/section-separator.js b/examples/cms-ghost/components/section-separator.js
index 4ca5c65fdc..b86fb50b7d 100644
--- a/examples/cms-ghost/components/section-separator.js
+++ b/examples/cms-ghost/components/section-separator.js
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }
diff --git a/examples/cms-ghost/lib/api.js b/examples/cms-ghost/lib/api.js
index d870198f6b..7e7035a70a 100644
--- a/examples/cms-ghost/lib/api.js
+++ b/examples/cms-ghost/lib/api.js
@@ -1,76 +1,76 @@
-import GhostContentAPI from '@tryghost/content-api'
-import { GHOST_API_URL_DEFAULT, GHOST_API_KEY_DEFAULT } from './defaults.js'
+import GhostContentAPI from "@tryghost/content-api";
+import { GHOST_API_URL_DEFAULT, GHOST_API_KEY_DEFAULT } from "./defaults.js";
 
-const GHOST_API_URL = process.env.GHOST_API_URL || GHOST_API_URL_DEFAULT
-const GHOST_API_KEY = process.env.GHOST_API_KEY || GHOST_API_KEY_DEFAULT
+const GHOST_API_URL = process.env.GHOST_API_URL || GHOST_API_URL_DEFAULT;
+const GHOST_API_KEY = process.env.GHOST_API_KEY || GHOST_API_KEY_DEFAULT;
 
 const api = new GhostContentAPI({
   url: GHOST_API_URL,
   key: GHOST_API_KEY,
-  version: 'v3.0',
-})
+  version: "v3.0",
+});
 
-const is404 = (error) => /not found/i.test(error.message)
+const is404 = (error) => /not found/i.test(error.message);
 
 export async function getPreviewPostBySlug(slug) {
   const params = {
     slug,
-    fields: 'slug',
-    limit: 'all',
-  }
+    fields: "slug",
+    limit: "all",
+  };
 
   try {
-    const post = await api.posts.read(params)
-    return post
+    const post = await api.posts.read(params);
+    return post;
   } catch (error) {
     // Don't throw if an slug doesn't exist
-    if (is404(error)) return
-    throw error
+    if (is404(error)) return;
+    throw error;
   }
 }
 
 export async function getAllPostsWithSlug() {
   const params = {
-    fields: 'slug',
-    limit: 'all',
-  }
-  const posts = await api.posts.browse(params)
-  return posts
+    fields: "slug",
+    limit: "all",
+  };
+  const posts = await api.posts.browse(params);
+  return posts;
 }
 
 export async function getAllPostsForHome(preview) {
   const params = {
-    limit: 'all',
-    include: 'authors',
-    order: 'published_at DESC',
-    ...(preview && { status: 'all' }),
-  }
-  const posts = await api.posts.browse(params)
-  return posts
+    limit: "all",
+    include: "authors",
+    order: "published_at DESC",
+    ...(preview && { status: "all" }),
+  };
+  const posts = await api.posts.browse(params);
+  return posts;
 }
 
 export async function getPostAndMorePosts(slug, preview) {
   const singleObjectParams = {
     slug,
-    include: 'authors',
-    ...(preview && { status: 'all' }),
-  }
+    include: "authors",
+    ...(preview && { status: "all" }),
+  };
   const moreObjectParams = {
     limit: 3,
-    include: 'authors',
-    ...(preview && { status: 'all' }),
-  }
+    include: "authors",
+    ...(preview && { status: "all" }),
+  };
   const post = await api.posts.read(singleObjectParams).catch((error) => {
     // Don't throw if an slug doesn't exist
-    if (is404(error)) return
-    throw error
-  })
+    if (is404(error)) return;
+    throw error;
+  });
   const morePosts = (await api.posts.browse(moreObjectParams))
     ?.filter(({ slug }) => post.slug !== slug)
-    .slice(0, 2)
+    .slice(0, 2);
 
   return {
     post,
     morePosts,
-  }
+  };
 }
diff --git a/examples/cms-ghost/lib/constants.js b/examples/cms-ghost/lib/constants.js
index c79a939bd1..4d82464335 100644
--- a/examples/cms-ghost/lib/constants.js
+++ b/examples/cms-ghost/lib/constants.js
@@ -1,5 +1,5 @@
-export const EXAMPLE_PATH = 'cms-ghost'
-export const CMS_NAME = 'Ghost'
-export const CMS_URL = 'https://ghost.org/'
+export const EXAMPLE_PATH = "cms-ghost";
+export const CMS_NAME = "Ghost";
+export const CMS_URL = "https://ghost.org/";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Example%20Blog%20with%20**Ghost**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fghost.org%2Fimages%2Flogo.svg'
+  "https://og-image.vercel.app/Next.js%20Example%20Blog%20with%20**Ghost**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fghost.org%2Fimages%2Flogo.svg";
diff --git a/examples/cms-ghost/lib/defaults.js b/examples/cms-ghost/lib/defaults.js
index fd8ea59fac..91f7a833c0 100644
--- a/examples/cms-ghost/lib/defaults.js
+++ b/examples/cms-ghost/lib/defaults.js
@@ -1,9 +1,9 @@
 export const GHOST_API_URL_DEFAULT = Buffer.from(
-  'aHR0cHM6Ly9jbXMuZ290c2J5Lm9yZw==',
-  'base64'
-).toString('utf-8')
+  "aHR0cHM6Ly9jbXMuZ290c2J5Lm9yZw==",
+  "base64",
+).toString("utf-8");
 
 export const GHOST_API_KEY_DEFAULT = Buffer.from(
-  'Mzg3Zjk1NmVhYTk1MzQ1ZjdiYjQ4NGQwYjg=',
-  'base64'
-).toString('utf-8')
+  "Mzg3Zjk1NmVhYTk1MzQ1ZjdiYjQ4NGQwYjg=",
+  "base64",
+).toString("utf-8");
diff --git a/examples/cms-ghost/next.config.js b/examples/cms-ghost/next.config.js
index 5401ac6aca..87ecebf6c2 100644
--- a/examples/cms-ghost/next.config.js
+++ b/examples/cms-ghost/next.config.js
@@ -3,11 +3,11 @@ module.exports = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'static.ghost.org',
-        port: '',
-        pathname: '/my-account/**',
+        protocol: "https",
+        hostname: "static.ghost.org",
+        port: "",
+        pathname: "/my-account/**",
       },
     ],
   },
-}
+};
diff --git a/examples/cms-ghost/pages/_app.js b/examples/cms-ghost/pages/_app.js
index f18e112c7c..a82d9dd7b0 100644
--- a/examples/cms-ghost/pages/_app.js
+++ b/examples/cms-ghost/pages/_app.js
@@ -1,7 +1,7 @@
-import '@/styles/index.css'
+import "@/styles/index.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-ghost/pages/_document.js b/examples/cms-ghost/pages/_document.js
index 54e8bf3e2a..b2fff8b426 100644
--- a/examples/cms-ghost/pages/_document.js
+++ b/examples/cms-ghost/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/cms-ghost/pages/api/exit-preview.js b/examples/cms-ghost/pages/api/exit-preview.js
index a63a171ba4..16b744e88e 100644
--- a/examples/cms-ghost/pages/api/exit-preview.js
+++ b/examples/cms-ghost/pages/api/exit-preview.js
@@ -1,8 +1,8 @@
 export default async function exit(_, res) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-ghost/pages/api/preview.js b/examples/cms-ghost/pages/api/preview.js
index 50f47dc274..39a53808ff 100644
--- a/examples/cms-ghost/pages/api/preview.js
+++ b/examples/cms-ghost/pages/api/preview.js
@@ -1,4 +1,4 @@
-import { getPreviewPostBySlug } from '@/lib/api'
+import { getPreviewPostBySlug } from "@/lib/api";
 
 export default async function preview(req, res) {
   // Check the secret and next parameters
@@ -7,22 +7,22 @@ export default async function preview(req, res) {
     req.query.secret !== process.env.GHOST_PREVIEW_SECRET ||
     !req.query.slug
   ) {
-    return res.status(401).json({ message: 'Invalid token' })
+    return res.status(401).json({ message: "Invalid token" });
   }
 
   // Fetch the headless CMS to check if the provided `slug` exists
-  const post = await getPreviewPostBySlug(req.query.slug)
+  const post = await getPreviewPostBySlug(req.query.slug);
 
   // If the slug doesn't exist prevent preview mode from being enabled
   if (!post) {
-    return res.status(401).json({ message: 'Invalid slug' })
+    return res.status(401).json({ message: "Invalid slug" });
   }
 
   // Enable Draft Mode by setting the cookie
-  res.setDraftMode({ enable: true })
+  res.setDraftMode({ enable: true });
 
   // Redirect to the path from the fetched post
   // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
-  res.writeHead(307, { Location: `/posts/${post.slug}` })
-  res.end()
+  res.writeHead(307, { Location: `/posts/${post.slug}` });
+  res.end();
 }
diff --git a/examples/cms-ghost/pages/index.js b/examples/cms-ghost/pages/index.js
index 7554c969c6..0216edd15a 100644
--- a/examples/cms-ghost/pages/index.js
+++ b/examples/cms-ghost/pages/index.js
@@ -1,15 +1,15 @@
-import Container from '@/components/container'
-import MoreStories from '@/components/more-stories'
-import HeroPost from '@/components/hero-post'
-import Intro from '@/components/intro'
-import Layout from '@/components/layout'
-import { getAllPostsForHome } from '@/lib/api'
-import Head from 'next/head'
-import { CMS_NAME } from '@/lib/constants'
+import Container from "@/components/container";
+import MoreStories from "@/components/more-stories";
+import HeroPost from "@/components/hero-post";
+import Intro from "@/components/intro";
+import Layout from "@/components/layout";
+import { getAllPostsForHome } from "@/lib/api";
+import Head from "next/head";
+import { CMS_NAME } from "@/lib/constants";
 
 export default function Index({ allPosts }) {
-  const heroPost = allPosts[0]
-  const morePosts = allPosts.slice(1)
+  const heroPost = allPosts[0];
+  const morePosts = allPosts.slice(1);
   return (
     <>
       <Layout>
@@ -32,12 +32,12 @@ export default function Index({ allPosts }) {
         </Container>
       </Layout>
     </>
-  )
+  );
 }
 
 export async function getStaticProps({ preview }) {
-  const allPosts = (await getAllPostsForHome(preview)) || []
+  const allPosts = (await getAllPostsForHome(preview)) || [];
   return {
     props: { allPosts },
-  }
+  };
 }
diff --git a/examples/cms-ghost/pages/posts/[slug].js b/examples/cms-ghost/pages/posts/[slug].js
index d40af4408b..508f5d42f6 100644
--- a/examples/cms-ghost/pages/posts/[slug].js
+++ b/examples/cms-ghost/pages/posts/[slug].js
@@ -1,21 +1,21 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import Container from '@/components/container'
-import PostBody from '@/components/post-body'
-import MoreStories from '@/components/more-stories'
-import Header from '@/components/header'
-import PostHeader from '@/components/post-header'
-import SectionSeparator from '@/components/section-separator'
-import Layout from '@/components/layout'
-import { getAllPostsWithSlug, getPostAndMorePosts } from '@/lib/api'
-import PostTitle from '@/components/post-title'
-import Head from 'next/head'
-import { CMS_NAME } from '@/lib/constants'
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Container from "@/components/container";
+import PostBody from "@/components/post-body";
+import MoreStories from "@/components/more-stories";
+import Header from "@/components/header";
+import PostHeader from "@/components/post-header";
+import SectionSeparator from "@/components/section-separator";
+import Layout from "@/components/layout";
+import { getAllPostsWithSlug, getPostAndMorePosts } from "@/lib/api";
+import PostTitle from "@/components/post-title";
+import Head from "next/head";
+import { CMS_NAME } from "@/lib/constants";
 
 export default function Post({ post, morePosts, preview }) {
-  const router = useRouter()
+  const router = useRouter();
   if (!router.isFallback && !post?.slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
   return (
     <Layout preview={preview}>
@@ -46,24 +46,24 @@ export default function Post({ post, morePosts, preview }) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps({ params, preview = null }) {
-  const { post, morePosts } = await getPostAndMorePosts(params.slug, preview)
+  const { post, morePosts } = await getPostAndMorePosts(params.slug, preview);
   return {
     props: {
       preview,
       post,
       morePosts: morePosts || [],
     },
-  }
+  };
 }
 
 export async function getStaticPaths() {
-  const allPosts = (await getAllPostsWithSlug()) || []
+  const allPosts = (await getAllPostsWithSlug()) || [];
   return {
     paths: allPosts.map((post) => `/posts/${post.slug}`),
     fallback: true,
-  }
+  };
 }
diff --git a/examples/cms-ghost/postcss.config.js b/examples/cms-ghost/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-ghost/postcss.config.js
+++ b/examples/cms-ghost/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-ghost/tailwind.config.js b/examples/cms-ghost/tailwind.config.js
index ea0efae6d7..a8f65a525d 100644
--- a/examples/cms-ghost/tailwind.config.js
+++ b/examples/cms-ghost/tailwind.config.js
@@ -1,38 +1,38 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/cms-graphcms/components/alert.js b/examples/cms-graphcms/components/alert.js
index b924cb097f..8e8729368f 100644
--- a/examples/cms-graphcms/components/alert.js
+++ b/examples/cms-graphcms/components/alert.js
@@ -1,31 +1,31 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Alert({ preview }) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This page is a preview.{' '}
+              This page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -38,5 +38,5 @@ export default function Alert({ preview }) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-graphcms/components/avatar.js b/examples/cms-graphcms/components/avatar.js
index 6777f50313..edd075a80b 100644
--- a/examples/cms-graphcms/components/avatar.js
+++ b/examples/cms-graphcms/components/avatar.js
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Avatar({ name, picture }) {
   return (
@@ -13,5 +13,5 @@ export default function Avatar({ name, picture }) {
       </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-graphcms/components/container.js b/examples/cms-graphcms/components/container.js
index fc1c29dfb0..92e559ece3 100644
--- a/examples/cms-graphcms/components/container.js
+++ b/examples/cms-graphcms/components/container.js
@@ -1,3 +1,3 @@
 export default function Container({ children }) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }
diff --git a/examples/cms-graphcms/components/cover-image.js b/examples/cms-graphcms/components/cover-image.js
index bcd3076469..060f2641b5 100644
--- a/examples/cms-graphcms/components/cover-image.js
+++ b/examples/cms-graphcms/components/cover-image.js
@@ -1,6 +1,6 @@
-import Image from 'next/image'
-import Link from 'next/link'
-import cn from 'classnames'
+import Image from "next/image";
+import Link from "next/link";
+import cn from "classnames";
 
 export default function CoverImage({ title, url, slug }) {
   const image = (
@@ -8,12 +8,12 @@ export default function CoverImage({ title, url, slug }) {
       width={2000}
       height={1000}
       alt={`Cover Image for ${title}`}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": slug,
       })}
       src={url}
     />
-  )
+  );
 
   return (
     <div className="sm:mx-0">
@@ -25,5 +25,5 @@ export default function CoverImage({ title, url, slug }) {
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-graphcms/components/date.js b/examples/cms-graphcms/components/date.js
index eac5681378..5be2fe25ba 100644
--- a/examples/cms-graphcms/components/date.js
+++ b/examples/cms-graphcms/components/date.js
@@ -1,6 +1,6 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
 export default function Date({ dateString }) {
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "LLLL	d, yyyy")}</time>;
 }
diff --git a/examples/cms-graphcms/components/footer.js b/examples/cms-graphcms/components/footer.js
index da9eed88ec..81422c7c6b 100644
--- a/examples/cms-graphcms/components/footer.js
+++ b/examples/cms-graphcms/components/footer.js
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Footer() {
   return (
@@ -26,5 +26,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-graphcms/components/header.js b/examples/cms-graphcms/components/header.js
index 05cb9af247..e6dea52099 100644
--- a/examples/cms-graphcms/components/header.js
+++ b/examples/cms-graphcms/components/header.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-graphcms/components/hero-post.js b/examples/cms-graphcms/components/hero-post.js
index f035b493cd..db33e87716 100644
--- a/examples/cms-graphcms/components/hero-post.js
+++ b/examples/cms-graphcms/components/hero-post.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
-import Link from 'next/link'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "../components/cover-image";
+import Link from "next/link";
 
 export default function HeroPost({
   title,
@@ -33,5 +33,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-graphcms/components/intro.js b/examples/cms-graphcms/components/intro.js
index 5931b3c596..e8578bef66 100644
--- a/examples/cms-graphcms/components/intro.js
+++ b/examples/cms-graphcms/components/intro.js
@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '../lib/constants'
+import { CMS_NAME, CMS_URL } from "../lib/constants";
 
 export default function Intro() {
   return (
@@ -7,14 +7,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -24,5 +24,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-graphcms/components/layout.js b/examples/cms-graphcms/components/layout.js
index 99d9535313..a2e161c793 100644
--- a/examples/cms-graphcms/components/layout.js
+++ b/examples/cms-graphcms/components/layout.js
@@ -1,6 +1,6 @@
-import Alert from '../components/alert'
-import Footer from '../components/footer'
-import Meta from '../components/meta'
+import Alert from "../components/alert";
+import Footer from "../components/footer";
+import Meta from "../components/meta";
 
 export default function Layout({ preview, children }) {
   return (
@@ -12,5 +12,5 @@ export default function Layout({ preview, children }) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-graphcms/components/meta.js b/examples/cms-graphcms/components/meta.js
index d9c48d5831..a95395d8b9 100644
--- a/examples/cms-graphcms/components/meta.js
+++ b/examples/cms-graphcms/components/meta.js
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "../lib/constants";
 
 export default function Meta() {
   return (
@@ -38,5 +38,5 @@ export default function Meta() {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-graphcms/components/more-stories.js b/examples/cms-graphcms/components/more-stories.js
index 57fdbb6c46..87b94578e3 100644
--- a/examples/cms-graphcms/components/more-stories.js
+++ b/examples/cms-graphcms/components/more-stories.js
@@ -1,4 +1,4 @@
-import PostPreview from '../components/post-preview'
+import PostPreview from "../components/post-preview";
 
 export default function MoreStories({ posts }) {
   return (
@@ -20,5 +20,5 @@ export default function MoreStories({ posts }) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-graphcms/components/post-body.js b/examples/cms-graphcms/components/post-body.js
index 87d22e7cf5..ad4e3fb583 100644
--- a/examples/cms-graphcms/components/post-body.js
+++ b/examples/cms-graphcms/components/post-body.js
@@ -1,4 +1,4 @@
-import postStyles from './post-styles.module.css'
+import postStyles from "./post-styles.module.css";
 
 export default function PostBody({ content }) {
   return (
@@ -6,5 +6,5 @@ export default function PostBody({ content }) {
       className={`max-w-2xl mx-auto post ${postStyles.post}`}
       dangerouslySetInnerHTML={{ __html: content?.html }}
     />
-  )
+  );
 }
diff --git a/examples/cms-graphcms/components/post-header.js b/examples/cms-graphcms/components/post-header.js
index 1b8b1b91f6..9ed89a86c7 100644
--- a/examples/cms-graphcms/components/post-header.js
+++ b/examples/cms-graphcms/components/post-header.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
-import PostTitle from '../components/post-title'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "../components/cover-image";
+import PostTitle from "../components/post-title";
 
 export default function PostHeader({ title, coverImage, date, author }) {
   return (
@@ -22,5 +22,5 @@ export default function PostHeader({ title, coverImage, date, author }) {
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-graphcms/components/post-preview.js b/examples/cms-graphcms/components/post-preview.js
index a0691ff555..f618efee10 100644
--- a/examples/cms-graphcms/components/post-preview.js
+++ b/examples/cms-graphcms/components/post-preview.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function PostPreview({
   title,
@@ -27,5 +27,5 @@ export default function PostPreview({
       <p className="mb-4 text-lg leading-relaxed">{excerpt}</p>
       <Avatar name={author.name} picture={author.picture.url} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-graphcms/components/post-title.js b/examples/cms-graphcms/components/post-title.js
index edd8cba65c..a15f06616f 100644
--- a/examples/cms-graphcms/components/post-title.js
+++ b/examples/cms-graphcms/components/post-title.js
@@ -3,5 +3,5 @@ export default function PostTitle({ children }) {
     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
-  )
+  );
 }
diff --git a/examples/cms-graphcms/components/section-separator.js b/examples/cms-graphcms/components/section-separator.js
index 4ca5c65fdc..b86fb50b7d 100644
--- a/examples/cms-graphcms/components/section-separator.js
+++ b/examples/cms-graphcms/components/section-separator.js
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }
diff --git a/examples/cms-graphcms/lib/constants.js b/examples/cms-graphcms/lib/constants.js
index 42fe17aa19..e43e9f96ea 100644
--- a/examples/cms-graphcms/lib/constants.js
+++ b/examples/cms-graphcms/lib/constants.js
@@ -1,5 +1,5 @@
-export const EXAMPLE_PATH = 'cms-graphcms'
-export const CMS_NAME = 'GraphCMS'
-export const CMS_URL = 'https://graphcms.com/'
+export const EXAMPLE_PATH = "cms-graphcms";
+export const CMS_NAME = "GraphCMS";
+export const CMS_URL = "https://graphcms.com/";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**GraphCMS**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9ImN1cnJlbnRDb2xvciIgdmlld0JveD0iMCAwIDMzMCA3NSIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBkPSJNMzUuMjcgMTBMOS4wOCAyNXYzMGwxNy40Ni0xMFYzNWwtOC43MyA1VjMwbDE3LjQ2LTEwdjMwTC4zNSA3MGw4LjczIDVMNDQgNTVWNWwtOC43My01eiIvPjxwYXRoIGQ9Ik04OC40NSAyMC45MUg5NnYzMC4wNmMwIDQuODgtMS41MyA4LjYtNC41OCAxMS4xN0ExNi42IDE2LjYgMCAwMTgwLjM3IDY2Yy0yLjk0LjA3LTUuODYtLjYtOC41MS0xLjk1YTEzLjMgMTMuMyAwIDAxLTUuNjUtNS43NWw2LjU2LTRjMS41MiAyLjk2IDQuMTMgNC40NCA3Ljg0IDQuNDQgMi40NCAwIDQuMzUtLjY3IDUuNzUtMi4wMiAxLjQtMS4zNSAyLjEtMy4yNyAyLjEtNS43NnYtMy40MmMtMi4yOCAzLjItNS40NyA0LjgtOS41OCA0LjgtNC4wMS4xLTcuODctMS42Mi0xMC42LTQuN0ExNi40NCAxNi40NCAwIDAxNjQgMzYuMTVhMTYuMzkgMTYuMzkgMCAwMTQuMy0xMS40MkExMy43MyAxMy43MyAwIDAxNzguODggMjBjNC4xIDAgNy4zIDEuNiA5LjU3IDQuOHYtMy44OXptLTE0LjQgMjEuNDdhOC42NiA4LjY2IDAgMDAxMi4wNCAwIDguNTYgOC41NiAwIDAwMi4zNi02LjIyQTguNDggOC40OCAwIDAwODYuMSAzMGE4LjY2IDguNjYgMCAwMC0xMi4wMyAwIDguNDggOC40OCAwIDAwLTIuMzcgNi4xNiA4LjU2IDguNTYgMCAwMDIuMzcgNi4yMnoiLz48cGF0aCBkPSJNMTA4LjggMjUuODNhOC4xNyA4LjE3IDAgMDEzLjYtNC4zN2MxLjctLjk4IDMuNjQtMS40OCA1LjYtMS40NnY4LjczYTkuMTggOS4xOCAwIDAwLTYuMzkgMS40N2MtMS44OCAxLjI1LTIuODIgMy4zNC0yLjgyIDYuMjZWNTFIMTAxVjIwLjYzaDcuOHY1LjJ6Ii8%2BPHBhdGggZD0iTTE0NC4zIDIwLjg3aDcuN3YzMC4yNmgtNy43di0zLjU2Yy0yLjMyIDIuOTUtNS41NyA0LjQzLTkuNzcgNC40M2ExMy40NyAxMy40NyAwIDAxLTEwLjI1LTQuNjNBMTYuMTQgMTYuMTQgMCAwMTEyMC4wMSAzNmMtLjExLTQuMiAxLjQyLTguMyA0LjI3LTExLjM3QTEzLjQ3IDEzLjQ3IDAgMDExMzQuNTMgMjBjNC4yIDAgNy40NSAxLjQ4IDkuNzcgNC40M3YtMy41NnptLTE0LjI2IDIxLjI5YTcuOTMgNy45MyAwIDAwNS45MyAyLjRjMi4yMy4wNiA0LjM5LS44IDUuOTYtMi40QTguNCA4LjQgMCAwMDE0NC4zIDM2YTguNCA4LjQgMCAwMC0yLjM3LTYuMTYgOC4wMyA4LjAzIDAgMDAtNS45Ni0yLjQgNy45MyA3LjkzIDAgMDAtNS45MyAyLjRBOC40NSA4LjQ1IDAgMDAxMjcuNyAzNmE4LjQ1IDguNDUgMCAwMDIuMzQgNi4xNnoiLz48cGF0aCBkPSJNMTc0LjQgMjBjMy45NC0uMDQgNy43IDEuNjggMTAuMzIgNC43MmExNi42IDE2LjYgMCAwMTQuMjcgMTEuNTcgMTYuNiAxNi42IDAgMDEtNC4yNyAxMS41OCAxMy40MyAxMy40MyAwIDAxLTEwLjMxIDQuNzFjLTQuMiAwLTcuNDMtMS41LTkuNzEtNC41VjY0SDE1N1YyMC44OWg3Ljd2My42MmMyLjI4LTMgNS41MS00LjUgOS43LTQuNXptLTcuMzYgMjIuNTZhNy44NSA3Ljg1IDAgMDA1LjkzIDIuNDQgNy45NSA3Ljk1IDAgMDA1Ljk2LTIuNDQgOC42NCA4LjY0IDAgMDAyLjM3LTYuMjcgOC42NCA4LjY0IDAgMDAtMi4zNy02LjI3IDcuOTUgNy45NSAwIDAwLTUuOTYtMi40NCA3Ljg2IDcuODYgMCAwMC01LjkzIDIuNDQgOC43IDguNyAwIDAwLTIuMzQgNi4yNyA4LjcgOC43IDAgMDAyLjM0IDYuMjd6Ii8%2BPHBhdGggZD0iTTIxMS4yNyAxOS42NWMzLjE2LS4xIDYuMjEgMS4xNiA4LjQgMy40NiAyLjIyIDIuMzEgMy4zMyA1LjUgMy4zMyA5LjU3VjUyaC04VjMzLjY3YzAtMi4xLS41Ni0zLjctMS42OC00LjgxYTYuMDggNi4wOCAwIDAwLTQuNDgtMS42NyA2LjU3IDYuNTcgMCAwMC00Ljk4IDEuOTVjLTEuMjQgMS4zLTEuODcgMy4yNS0xLjg3IDUuODZ2MTdIMTk0VjhoOHYxNi4wNWMxLjk1LTIuOTMgNS4wNC00LjQgOS4yNy00LjR6Ii8%2BPHBhdGggZD0iTTI0My43NSA1MmMtNC40Ni4xLTguNzctMS41Ni0xMS45My00LjU4QTE1LjM4IDE1LjM4IDAgMDEyMjcgMzZhMTYuMDEgMTYuMDEgMCAwMTguNDYtMTMuODcgMTcuNDIgMTcuNDIgMCAwMTE2Ljc1LjA0IDEzLjA2IDEzLjA2IDAgMDE1LjQ3IDUuODNsLTMuNDMgMS44OWE5LjY0IDkuNjQgMCAwMC00LjEtNC4zNyAxMi42NSAxMi42NSAwIDAwLTYuNC0xLjYyIDEyLjMgMTIuMyAwIDAwLTguOSAzLjUyIDExLjUgMTEuNSAwIDAwLTMuNjMgOC41OCAxMS41IDExLjUgMCAwMDMuNjMgOC41OGMyLjcxIDIuNyA2LjYgNCAxMC40NyAzLjUgMy44OC0uNDggNy4yOC0yLjcgOS4xOC01Ljk3bDMuNSAxLjk1YTE0LjM4IDE0LjM4IDAgMDEtNS43OSA1LjggMTcuMDMgMTcuMDMgMCAwMS04LjQ2IDIuMTR6Ii8%2BPHBhdGggZD0iTTI5My41NyAyMGMzLjEtLjEyIDYuMTEgMS4wNyA4LjI4IDMuMjggMi4xIDIuMTggMy4xNSA1LjEyIDMuMTUgOC44M1Y1MWgtNC4wNVYzMi4xMWMwLTIuNjItLjY4LTQuNjUtMi4wNS02LjA4YTcuMSA3LjEgMCAwMC01LjQtMi4xNSA4IDggMCAwMC02LjEzIDIuNTFjLTEuNTYgMS42OC0yLjM0IDQuMjktMi4zNCA3Ljg0VjUxaC00LjA2VjMyLjExYzAtMi42Ni0uNjQtNC43LTEuOTItNi4xMWE2LjY5IDYuNjkgMCAwMC01LjIxLTIuMTIgOC41IDguNSAwIDAwLTYuMjMgMi41NGMtMS43IDEuNy0yLjU2IDQuMy0yLjU2IDcuOFY1MUgyNjFWMjAuNzNoNC4wNXY0LjQyQTEwLjQ3IDEwLjQ3IDAgMDEyNzQuNCAyMGM0LjQgMCA3LjUgMS44MyA5LjI5IDUuNSAyLjItMy42NyA1LjQ5LTUuNSA5Ljg5LTUuNXoiLz48cGF0aCBkPSJNMzExLjMgMjguNjVhMy42NyAzLjY3IDAgMDAxLjkzIDMuMjVjMS40NS44OCAzLjA0IDEuNTQgNC43IDEuOTZsNS41MSAxLjVjMS43OS40OCAzLjQgMS40MiA0LjY2IDIuNzJhNy4wNiA3LjA2IDAgMDExLjkgNS4xNCA3LjYgNy42IDAgMDEtMy4yNiA2LjM0Yy0yLjE2IDEuNjMtNC45NSAyLjQ0LTguMzggMi40My0yLjc2LjA4LTUuNDgtLjYtNy44NS0xLjk2YTEwLjYgMTAuNiAwIDAxLTQuNTEtNS4wN2wzLjYtMmE3LjI0IDcuMjQgMCAwMDMuMjMgMy43NWMxLjY3Ljk1IDMuNiAxLjQzIDUuNTQgMS4zOCAxLjgzLjA3IDMuNjQtLjM0IDUuMjUtMS4xOGEzLjk1IDMuOTUgMCAwMDIuMTEtMy42OWMuMDMtMS4zNC0uNy0yLjYtMS45LTMuMjlhMTcgMTcgMCAwMC00LjY4LTEuOTdsLTUuNTItMS41Yy0xLjc4LS40OC0zLjQtMS40LTQuNjgtMi42OWE2LjgyIDYuODIgMCAwMS0xLjkyLTUuMDUgNy42OSA3LjY5IDAgMDEzLjEzLTYuMjIgMTIuMTYgMTIuMTYgMCAwMTcuODYtMi41YzIuNC0uMDQgNC43OC41NCA2Ljg2IDEuN2ExMC41IDEwLjUgMCAwMTQuMzYgNC41NGwtMy41NSAxLjk1Yy0xLjIzLTIuODUtMy44LTQuMjgtNy42Ny00LjI4YTguOCA4LjggMCAwMC00Ljc0IDEuMjMgMy45MiAzLjkyIDAgMDAtMS45OSAzLjUxeiIvPjwvc3ZnPg%3D%3D'
+  "https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**GraphCMS**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9ImN1cnJlbnRDb2xvciIgdmlld0JveD0iMCAwIDMzMCA3NSIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBkPSJNMzUuMjcgMTBMOS4wOCAyNXYzMGwxNy40Ni0xMFYzNWwtOC43MyA1VjMwbDE3LjQ2LTEwdjMwTC4zNSA3MGw4LjczIDVMNDQgNTVWNWwtOC43My01eiIvPjxwYXRoIGQ9Ik04OC40NSAyMC45MUg5NnYzMC4wNmMwIDQuODgtMS41MyA4LjYtNC41OCAxMS4xN0ExNi42IDE2LjYgMCAwMTgwLjM3IDY2Yy0yLjk0LjA3LTUuODYtLjYtOC41MS0xLjk1YTEzLjMgMTMuMyAwIDAxLTUuNjUtNS43NWw2LjU2LTRjMS41MiAyLjk2IDQuMTMgNC40NCA3Ljg0IDQuNDQgMi40NCAwIDQuMzUtLjY3IDUuNzUtMi4wMiAxLjQtMS4zNSAyLjEtMy4yNyAyLjEtNS43NnYtMy40MmMtMi4yOCAzLjItNS40NyA0LjgtOS41OCA0LjgtNC4wMS4xLTcuODctMS42Mi0xMC42LTQuN0ExNi40NCAxNi40NCAwIDAxNjQgMzYuMTVhMTYuMzkgMTYuMzkgMCAwMTQuMy0xMS40MkExMy43MyAxMy43MyAwIDAxNzguODggMjBjNC4xIDAgNy4zIDEuNiA5LjU3IDQuOHYtMy44OXptLTE0LjQgMjEuNDdhOC42NiA4LjY2IDAgMDAxMi4wNCAwIDguNTYgOC41NiAwIDAwMi4zNi02LjIyQTguNDggOC40OCAwIDAwODYuMSAzMGE4LjY2IDguNjYgMCAwMC0xMi4wMyAwIDguNDggOC40OCAwIDAwLTIuMzcgNi4xNiA4LjU2IDguNTYgMCAwMDIuMzcgNi4yMnoiLz48cGF0aCBkPSJNMTA4LjggMjUuODNhOC4xNyA4LjE3IDAgMDEzLjYtNC4zN2MxLjctLjk4IDMuNjQtMS40OCA1LjYtMS40NnY4LjczYTkuMTggOS4xOCAwIDAwLTYuMzkgMS40N2MtMS44OCAxLjI1LTIuODIgMy4zNC0yLjgyIDYuMjZWNTFIMTAxVjIwLjYzaDcuOHY1LjJ6Ii8%2BPHBhdGggZD0iTTE0NC4zIDIwLjg3aDcuN3YzMC4yNmgtNy43di0zLjU2Yy0yLjMyIDIuOTUtNS41NyA0LjQzLTkuNzcgNC40M2ExMy40NyAxMy40NyAwIDAxLTEwLjI1LTQuNjNBMTYuMTQgMTYuMTQgMCAwMTEyMC4wMSAzNmMtLjExLTQuMiAxLjQyLTguMyA0LjI3LTExLjM3QTEzLjQ3IDEzLjQ3IDAgMDExMzQuNTMgMjBjNC4yIDAgNy40NSAxLjQ4IDkuNzcgNC40M3YtMy41NnptLTE0LjI2IDIxLjI5YTcuOTMgNy45MyAwIDAwNS45MyAyLjRjMi4yMy4wNiA0LjM5LS44IDUuOTYtMi40QTguNCA4LjQgMCAwMDE0NC4zIDM2YTguNCA4LjQgMCAwMC0yLjM3LTYuMTYgOC4wMyA4LjAzIDAgMDAtNS45Ni0yLjQgNy45MyA3LjkzIDAgMDAtNS45MyAyLjRBOC40NSA4LjQ1IDAgMDAxMjcuNyAzNmE4LjQ1IDguNDUgMCAwMDIuMzQgNi4xNnoiLz48cGF0aCBkPSJNMTc0LjQgMjBjMy45NC0uMDQgNy43IDEuNjggMTAuMzIgNC43MmExNi42IDE2LjYgMCAwMTQuMjcgMTEuNTcgMTYuNiAxNi42IDAgMDEtNC4yNyAxMS41OCAxMy40MyAxMy40MyAwIDAxLTEwLjMxIDQuNzFjLTQuMiAwLTcuNDMtMS41LTkuNzEtNC41VjY0SDE1N1YyMC44OWg3Ljd2My42MmMyLjI4LTMgNS41MS00LjUgOS43LTQuNXptLTcuMzYgMjIuNTZhNy44NSA3Ljg1IDAgMDA1LjkzIDIuNDQgNy45NSA3Ljk1IDAgMDA1Ljk2LTIuNDQgOC42NCA4LjY0IDAgMDAyLjM3LTYuMjcgOC42NCA4LjY0IDAgMDAtMi4zNy02LjI3IDcuOTUgNy45NSAwIDAwLTUuOTYtMi40NCA3Ljg2IDcuODYgMCAwMC01LjkzIDIuNDQgOC43IDguNyAwIDAwLTIuMzQgNi4yNyA4LjcgOC43IDAgMDAyLjM0IDYuMjd6Ii8%2BPHBhdGggZD0iTTIxMS4yNyAxOS42NWMzLjE2LS4xIDYuMjEgMS4xNiA4LjQgMy40NiAyLjIyIDIuMzEgMy4zMyA1LjUgMy4zMyA5LjU3VjUyaC04VjMzLjY3YzAtMi4xLS41Ni0zLjctMS42OC00LjgxYTYuMDggNi4wOCAwIDAwLTQuNDgtMS42NyA2LjU3IDYuNTcgMCAwMC00Ljk4IDEuOTVjLTEuMjQgMS4zLTEuODcgMy4yNS0xLjg3IDUuODZ2MTdIMTk0VjhoOHYxNi4wNWMxLjk1LTIuOTMgNS4wNC00LjQgOS4yNy00LjR6Ii8%2BPHBhdGggZD0iTTI0My43NSA1MmMtNC40Ni4xLTguNzctMS41Ni0xMS45My00LjU4QTE1LjM4IDE1LjM4IDAgMDEyMjcgMzZhMTYuMDEgMTYuMDEgMCAwMTguNDYtMTMuODcgMTcuNDIgMTcuNDIgMCAwMTE2Ljc1LjA0IDEzLjA2IDEzLjA2IDAgMDE1LjQ3IDUuODNsLTMuNDMgMS44OWE5LjY0IDkuNjQgMCAwMC00LjEtNC4zNyAxMi42NSAxMi42NSAwIDAwLTYuNC0xLjYyIDEyLjMgMTIuMyAwIDAwLTguOSAzLjUyIDExLjUgMTEuNSAwIDAwLTMuNjMgOC41OCAxMS41IDExLjUgMCAwMDMuNjMgOC41OGMyLjcxIDIuNyA2LjYgNCAxMC40NyAzLjUgMy44OC0uNDggNy4yOC0yLjcgOS4xOC01Ljk3bDMuNSAxLjk1YTE0LjM4IDE0LjM4IDAgMDEtNS43OSA1LjggMTcuMDMgMTcuMDMgMCAwMS04LjQ2IDIuMTR6Ii8%2BPHBhdGggZD0iTTI5My41NyAyMGMzLjEtLjEyIDYuMTEgMS4wNyA4LjI4IDMuMjggMi4xIDIuMTggMy4xNSA1LjEyIDMuMTUgOC44M1Y1MWgtNC4wNVYzMi4xMWMwLTIuNjItLjY4LTQuNjUtMi4wNS02LjA4YTcuMSA3LjEgMCAwMC01LjQtMi4xNSA4IDggMCAwMC02LjEzIDIuNTFjLTEuNTYgMS42OC0yLjM0IDQuMjktMi4zNCA3Ljg0VjUxaC00LjA2VjMyLjExYzAtMi42Ni0uNjQtNC43LTEuOTItNi4xMWE2LjY5IDYuNjkgMCAwMC01LjIxLTIuMTIgOC41IDguNSAwIDAwLTYuMjMgMi41NGMtMS43IDEuNy0yLjU2IDQuMy0yLjU2IDcuOFY1MUgyNjFWMjAuNzNoNC4wNXY0LjQyQTEwLjQ3IDEwLjQ3IDAgMDEyNzQuNCAyMGM0LjQgMCA3LjUgMS44MyA5LjI5IDUuNSAyLjItMy42NyA1LjQ5LTUuNSA5Ljg5LTUuNXoiLz48cGF0aCBkPSJNMzExLjMgMjguNjVhMy42NyAzLjY3IDAgMDAxLjkzIDMuMjVjMS40NS44OCAzLjA0IDEuNTQgNC43IDEuOTZsNS41MSAxLjVjMS43OS40OCAzLjQgMS40MiA0LjY2IDIuNzJhNy4wNiA3LjA2IDAgMDExLjkgNS4xNCA3LjYgNy42IDAgMDEtMy4yNiA2LjM0Yy0yLjE2IDEuNjMtNC45NSAyLjQ0LTguMzggMi40My0yLjc2LjA4LTUuNDgtLjYtNy44NS0xLjk2YTEwLjYgMTAuNiAwIDAxLTQuNTEtNS4wN2wzLjYtMmE3LjI0IDcuMjQgMCAwMDMuMjMgMy43NWMxLjY3Ljk1IDMuNiAxLjQzIDUuNTQgMS4zOCAxLjgzLjA3IDMuNjQtLjM0IDUuMjUtMS4xOGEzLjk1IDMuOTUgMCAwMDIuMTEtMy42OWMuMDMtMS4zNC0uNy0yLjYtMS45LTMuMjlhMTcgMTcgMCAwMC00LjY4LTEuOTdsLTUuNTItMS41Yy0xLjc4LS40OC0zLjQtMS40LTQuNjgtMi42OWE2LjgyIDYuODIgMCAwMS0xLjkyLTUuMDUgNy42OSA3LjY5IDAgMDEzLjEzLTYuMjIgMTIuMTYgMTIuMTYgMCAwMTcuODYtMi41YzIuNC0uMDQgNC43OC41NCA2Ljg2IDEuN2ExMC41IDEwLjUgMCAwMTQuMzYgNC41NGwtMy41NSAxLjk1Yy0xLjIzLTIuODUtMy44LTQuMjgtNy42Ny00LjI4YTguOCA4LjggMCAwMC00Ljc0IDEuMjMgMy45MiAzLjkyIDAgMDAtMS45OSAzLjUxeiIvPjwvc3ZnPg%3D%3D";
diff --git a/examples/cms-graphcms/lib/graphcms.js b/examples/cms-graphcms/lib/graphcms.js
index d29300f7a2..9c2d7f490f 100644
--- a/examples/cms-graphcms/lib/graphcms.js
+++ b/examples/cms-graphcms/lib/graphcms.js
@@ -1,8 +1,8 @@
 async function fetchAPI(query, { variables, preview } = {}) {
   const res = await fetch(process.env.GRAPHCMS_PROJECT_API, {
-    method: 'POST',
+    method: "POST",
     headers: {
-      'Content-Type': 'application/json',
+      "Content-Type": "application/json",
       Authorization: `Bearer ${
         preview
           ? process.env.GRAPHCMS_DEV_AUTH_TOKEN
@@ -13,16 +13,16 @@ async function fetchAPI(query, { variables, preview } = {}) {
       query,
       variables,
     }),
-  })
-  const json = await res.json()
+  });
+  const json = await res.json();
 
   if (json.errors) {
-    console.log(process.env.NEXT_EXAMPLE_CMS_GCMS_PROJECT_ID)
-    console.error(json.errors)
-    throw new Error('Failed to fetch API')
+    console.log(process.env.NEXT_EXAMPLE_CMS_GCMS_PROJECT_ID);
+    console.error(json.errors);
+    throw new Error("Failed to fetch API");
   }
 
-  return json.data
+  return json.data;
 }
 
 export async function getPreviewPostBySlug(slug) {
@@ -36,12 +36,12 @@ export async function getPreviewPostBySlug(slug) {
     {
       preview: true,
       variables: {
-        stage: 'DRAFT',
+        stage: "DRAFT",
         slug,
       },
-    }
-  )
-  return data.post
+    },
+  );
+  return data.post;
 }
 
 export async function getAllPostsWithSlug() {
@@ -51,8 +51,8 @@ export async function getAllPostsWithSlug() {
         slug
       }
     }
-  `)
-  return data.posts
+  `);
+  return data.posts;
 }
 
 export async function getAllPostsForHome(preview) {
@@ -92,9 +92,9 @@ export async function getAllPostsForHome(preview) {
       }
     }
   `,
-    { preview }
-  )
-  return data.posts
+    { preview },
+  );
+  return data.posts;
 }
 
 export async function getPostAndMorePosts(slug, preview) {
@@ -141,10 +141,10 @@ export async function getPostAndMorePosts(slug, preview) {
     {
       preview,
       variables: {
-        stage: preview ? 'DRAFT' : 'PUBLISHED',
+        stage: preview ? "DRAFT" : "PUBLISHED",
         slug,
       },
-    }
-  )
-  return data
+    },
+  );
+  return data;
 }
diff --git a/examples/cms-graphcms/next.config.js b/examples/cms-graphcms/next.config.js
index 38e8ed659e..5baa9ae4ae 100644
--- a/examples/cms-graphcms/next.config.js
+++ b/examples/cms-graphcms/next.config.js
@@ -3,11 +3,11 @@ module.exports = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'media.graphcms.com',
-        port: '',
-        pathname: '/my-account/**',
+        protocol: "https",
+        hostname: "media.graphcms.com",
+        port: "",
+        pathname: "/my-account/**",
       },
     ],
   },
-}
+};
diff --git a/examples/cms-graphcms/pages/_app.js b/examples/cms-graphcms/pages/_app.js
index d56d9bf601..aa7931ca32 100644
--- a/examples/cms-graphcms/pages/_app.js
+++ b/examples/cms-graphcms/pages/_app.js
@@ -1,7 +1,7 @@
-import '../styles/index.css'
+import "../styles/index.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-graphcms/pages/_document.js b/examples/cms-graphcms/pages/_document.js
index 54e8bf3e2a..b2fff8b426 100644
--- a/examples/cms-graphcms/pages/_document.js
+++ b/examples/cms-graphcms/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/cms-graphcms/pages/api/exit-preview.js b/examples/cms-graphcms/pages/api/exit-preview.js
index fccc016b69..ba4a2bdf59 100644
--- a/examples/cms-graphcms/pages/api/exit-preview.js
+++ b/examples/cms-graphcms/pages/api/exit-preview.js
@@ -1,8 +1,8 @@
 export default async function handler(_, res) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-graphcms/pages/api/preview.js b/examples/cms-graphcms/pages/api/preview.js
index f5f2159227..381b0a451b 100644
--- a/examples/cms-graphcms/pages/api/preview.js
+++ b/examples/cms-graphcms/pages/api/preview.js
@@ -1,4 +1,4 @@
-import { getPreviewPostBySlug } from '../../lib/graphcms'
+import { getPreviewPostBySlug } from "../../lib/graphcms";
 
 export default async function handler(req, res) {
   // Check the secret and next parameters
@@ -7,22 +7,22 @@ export default async function handler(req, res) {
     req.query.secret !== process.env.GRAPHCMS_PREVIEW_SECRET ||
     !req.query.slug
   ) {
-    return res.status(401).json({ message: 'Invalid token' })
+    return res.status(401).json({ message: "Invalid token" });
   }
 
   // Fetch the headless CMS to check if the provided `slug` exists
-  const post = await getPreviewPostBySlug(req.query.slug)
+  const post = await getPreviewPostBySlug(req.query.slug);
 
   // If the slug doesn't exist prevent preview mode from being enabled
   if (!post) {
-    return res.status(401).json({ message: 'Invalid slug' })
+    return res.status(401).json({ message: "Invalid slug" });
   }
 
   // Enable Draft Mode by setting the cookie
-  res.setDraftMode({ enable: true })
+  res.setDraftMode({ enable: true });
 
   // Redirect to the path from the fetched post
   // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
-  res.writeHead(307, { Location: `/posts/${post.slug}` })
-  res.end()
+  res.writeHead(307, { Location: `/posts/${post.slug}` });
+  res.end();
 }
diff --git a/examples/cms-graphcms/pages/index.js b/examples/cms-graphcms/pages/index.js
index 0e0639fbb5..6efd62f025 100644
--- a/examples/cms-graphcms/pages/index.js
+++ b/examples/cms-graphcms/pages/index.js
@@ -1,15 +1,15 @@
-import Container from '../components/container'
-import MoreStories from '../components/more-stories'
-import HeroPost from '../components/hero-post'
-import Intro from '../components/intro'
-import Layout from '../components/layout'
-import { getAllPostsForHome } from '../lib/graphcms'
-import Head from 'next/head'
-import { CMS_NAME } from '../lib/constants'
+import Container from "../components/container";
+import MoreStories from "../components/more-stories";
+import HeroPost from "../components/hero-post";
+import Intro from "../components/intro";
+import Layout from "../components/layout";
+import { getAllPostsForHome } from "../lib/graphcms";
+import Head from "next/head";
+import { CMS_NAME } from "../lib/constants";
 
 export default function Index({ posts, preview }) {
-  const heroPost = posts[0]
-  const morePosts = posts.slice(1)
+  const heroPost = posts[0];
+  const morePosts = posts.slice(1);
   return (
     <>
       <Layout preview={preview}>
@@ -32,12 +32,12 @@ export default function Index({ posts, preview }) {
         </Container>
       </Layout>
     </>
-  )
+  );
 }
 
 export async function getStaticProps({ preview = false }) {
-  const posts = (await getAllPostsForHome(preview)) || []
+  const posts = (await getAllPostsForHome(preview)) || [];
   return {
     props: { posts, preview },
-  }
+  };
 }
diff --git a/examples/cms-graphcms/pages/posts/[slug].js b/examples/cms-graphcms/pages/posts/[slug].js
index d4b76d503e..203827829d 100644
--- a/examples/cms-graphcms/pages/posts/[slug].js
+++ b/examples/cms-graphcms/pages/posts/[slug].js
@@ -1,22 +1,22 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import Container from 'components/container'
-import PostBody from 'components/post-body'
-import MoreStories from 'components/more-stories'
-import Header from 'components/header'
-import PostHeader from 'components/post-header'
-import SectionSeparator from 'components/section-separator'
-import Layout from 'components/layout'
-import { getAllPostsWithSlug, getPostAndMorePosts } from 'lib/graphcms'
-import PostTitle from 'components/post-title'
-import Head from 'next/head'
-import { CMS_NAME } from 'lib/constants'
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Container from "components/container";
+import PostBody from "components/post-body";
+import MoreStories from "components/more-stories";
+import Header from "components/header";
+import PostHeader from "components/post-header";
+import SectionSeparator from "components/section-separator";
+import Layout from "components/layout";
+import { getAllPostsWithSlug, getPostAndMorePosts } from "lib/graphcms";
+import PostTitle from "components/post-title";
+import Head from "next/head";
+import { CMS_NAME } from "lib/constants";
 
 export default function Post({ post, morePosts, preview }) {
-  const router = useRouter()
+  const router = useRouter();
 
   if (!router.isFallback && !post?.slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
 
   return (
@@ -48,26 +48,26 @@ export default function Post({ post, morePosts, preview }) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps({ params, preview = false }) {
-  const data = await getPostAndMorePosts(params.slug, preview)
+  const data = await getPostAndMorePosts(params.slug, preview);
   return {
     props: {
       preview,
       post: data.post,
       morePosts: data.morePosts || [],
     },
-  }
+  };
 }
 
 export async function getStaticPaths() {
-  const posts = await getAllPostsWithSlug()
+  const posts = await getAllPostsWithSlug();
   return {
     paths: posts.map(({ slug }) => ({
       params: { slug },
     })),
     fallback: true,
-  }
+  };
 }
diff --git a/examples/cms-graphcms/postcss.config.js b/examples/cms-graphcms/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-graphcms/postcss.config.js
+++ b/examples/cms-graphcms/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-graphcms/tailwind.config.js b/examples/cms-graphcms/tailwind.config.js
index ea0efae6d7..a8f65a525d 100644
--- a/examples/cms-graphcms/tailwind.config.js
+++ b/examples/cms-graphcms/tailwind.config.js
@@ -1,38 +1,38 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/cms-keystonejs-embedded/keystone.ts b/examples/cms-keystonejs-embedded/keystone.ts
index d0fb312cae..bc42ddf198 100644
--- a/examples/cms-keystonejs-embedded/keystone.ts
+++ b/examples/cms-keystonejs-embedded/keystone.ts
@@ -1,5 +1,5 @@
-import { config, list } from '@keystone-next/keystone/schema'
-import { text } from '@keystone-next/fields'
+import { config, list } from "@keystone-next/keystone/schema";
+import { text } from "@keystone-next/fields";
 
 const Post = list({
   fields: {
@@ -7,13 +7,13 @@ const Post = list({
     slug: text(),
     content: text(),
   },
-})
+});
 
 export default config({
-  db: { provider: 'sqlite', url: 'file:./app.db' },
+  db: { provider: "sqlite", url: "file:./app.db" },
   experimental: {
     generateNextGraphqlAPI: true,
     generateNodeAPI: true,
   },
   lists: { Post },
-})
+});
diff --git a/examples/cms-keystonejs-embedded/next.config.js b/examples/cms-keystonejs-embedded/next.config.js
index 1964b0a162..def317a811 100644
--- a/examples/cms-keystonejs-embedded/next.config.js
+++ b/examples/cms-keystonejs-embedded/next.config.js
@@ -1,3 +1,3 @@
-const { withKeystone } = require('@keystone-next/keystone/next')
+const { withKeystone } = require("@keystone-next/keystone/next");
 
-module.exports = withKeystone()
+module.exports = withKeystone();
diff --git a/examples/cms-keystonejs-embedded/pages/_app.tsx b/examples/cms-keystonejs-embedded/pages/_app.tsx
index 1e1cec9242..2fc3e07009 100644
--- a/examples/cms-keystonejs-embedded/pages/_app.tsx
+++ b/examples/cms-keystonejs-embedded/pages/_app.tsx
@@ -1,7 +1,7 @@
-import '../styles/globals.css'
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-keystonejs-embedded/pages/api/graphql.tsx b/examples/cms-keystonejs-embedded/pages/api/graphql.tsx
index e49fd96f0f..3679d9c91d 100644
--- a/examples/cms-keystonejs-embedded/pages/api/graphql.tsx
+++ b/examples/cms-keystonejs-embedded/pages/api/graphql.tsx
@@ -1 +1 @@
-export { default, config } from '.keystone/next/graphql-api'
+export { default, config } from ".keystone/next/graphql-api";
diff --git a/examples/cms-keystonejs-embedded/pages/index.tsx b/examples/cms-keystonejs-embedded/pages/index.tsx
index f0442b04c3..933f795512 100644
--- a/examples/cms-keystonejs-embedded/pages/index.tsx
+++ b/examples/cms-keystonejs-embedded/pages/index.tsx
@@ -1,9 +1,9 @@
-import Head from 'next/head'
-import Link from 'next/link'
-import styles from '../styles/Home.module.css'
+import Head from "next/head";
+import Link from "next/link";
+import styles from "../styles/Home.module.css";
 
 // Import the generated Lists API from Keystone
-import { lists } from '.keystone/api'
+import { lists } from ".keystone/api";
 
 // Home receives a `posts` prop from `getStaticProps` below
 export default function Home({ posts }) {
@@ -41,7 +41,7 @@ export default function Home({ posts }) {
             </li>
           )}
         </ul>
-        {process.env.NODE_ENV !== 'production' && (
+        {process.env.NODE_ENV !== "production" && (
           <Link
             href="/api/graphql?query=%7BallPosts%7Btitle%2Cslug%2Ccontent%7D%7D"
             className={styles.playground}
@@ -51,12 +51,12 @@ export default function Home({ posts }) {
         )}
       </main>
     </div>
-  )
+  );
 }
 
 // Here we use the Lists API to load all the posts we want to display
 // The return of this function is provided to the `Home` component
 export async function getStaticProps() {
-  const posts = await lists.Post.findMany({ query: 'id title slug' })
-  return { props: { posts } }
+  const posts = await lists.Post.findMany({ query: "id title slug" });
+  return { props: { posts } };
 }
diff --git a/examples/cms-keystonejs-embedded/pages/post/[slug].tsx b/examples/cms-keystonejs-embedded/pages/post/[slug].tsx
index 2c34f0c0c3..242431f657 100644
--- a/examples/cms-keystonejs-embedded/pages/post/[slug].tsx
+++ b/examples/cms-keystonejs-embedded/pages/post/[slug].tsx
@@ -1,10 +1,10 @@
-import Link from 'next/link'
-import { lists } from '.keystone/api'
+import Link from "next/link";
+import { lists } from ".keystone/api";
 
 export default function Home({ post }) {
   return (
     <div>
-      <main style={{ margin: '3rem' }}>
+      <main style={{ margin: "3rem" }}>
         <div>
           <Link href="/">&larr; back home</Link>
         </div>
@@ -12,29 +12,29 @@ export default function Home({ post }) {
         <p>{post.content}</p>
       </main>
     </div>
-  )
+  );
 }
 
 export async function getStaticPaths() {
   const posts = await lists.Post.findMany({
     query: `slug`,
-  })
+  });
 
   const paths = posts
     .map((post) => post.slug)
     .filter((slug): slug is string => !!slug)
-    .map((slug) => `/post/${slug}`)
+    .map((slug) => `/post/${slug}`);
 
   return {
     paths,
     fallback: false,
-  }
+  };
 }
 
 export async function getStaticProps({ params: { slug } }) {
   const [post] = await lists.Post.findMany({
     where: { slug },
-    query: 'id title content',
-  })
-  return { props: { post } }
+    query: "id title content",
+  });
+  return { props: { post } };
 }
diff --git a/examples/cms-kontent-ai/components/alert.tsx b/examples/cms-kontent-ai/components/alert.tsx
index 1ed62758cc..942088e3e7 100644
--- a/examples/cms-kontent-ai/components/alert.tsx
+++ b/examples/cms-kontent-ai/components/alert.tsx
@@ -1,33 +1,33 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "../lib/constants";
 
-type AlertProps = { preview: boolean }
+type AlertProps = { preview: boolean };
 
 export default function Alert({ preview }: AlertProps) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This page is a preview.{' '}
+              This page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -40,5 +40,5 @@ export default function Alert({ preview }: AlertProps) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-kontent-ai/components/avatar.tsx b/examples/cms-kontent-ai/components/avatar.tsx
index 54e9475106..2d07bd2ae2 100644
--- a/examples/cms-kontent-ai/components/avatar.tsx
+++ b/examples/cms-kontent-ai/components/avatar.tsx
@@ -1,9 +1,9 @@
-import Image from './image'
+import Image from "./image";
 
 type AvatarProps = {
-  name: string
-  picture: string
-}
+  name: string;
+  picture: string;
+};
 
 export default function Avatar({ name, picture }: AvatarProps) {
   return (
@@ -18,5 +18,5 @@ export default function Avatar({ name, picture }: AvatarProps) {
       </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-kontent-ai/components/container.tsx b/examples/cms-kontent-ai/components/container.tsx
index 2228958042..ba1aa96d11 100644
--- a/examples/cms-kontent-ai/components/container.tsx
+++ b/examples/cms-kontent-ai/components/container.tsx
@@ -1,7 +1,7 @@
 type ContainerProps = {
-  children: JSX.Element[] | JSX.Element
-}
+  children: JSX.Element[] | JSX.Element;
+};
 
 export default function Container({ children }: ContainerProps) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }
diff --git a/examples/cms-kontent-ai/components/cover-image.tsx b/examples/cms-kontent-ai/components/cover-image.tsx
index 40eb201047..7a2e0f1a56 100644
--- a/examples/cms-kontent-ai/components/cover-image.tsx
+++ b/examples/cms-kontent-ai/components/cover-image.tsx
@@ -1,12 +1,12 @@
-import cn from 'classnames'
-import Image from './image'
-import Link from 'next/link'
+import cn from "classnames";
+import Image from "./image";
+import Link from "next/link";
 
 type CoverImageProps = {
-  title: string
-  src: string
-  slug?: string
-}
+  title: string;
+  src: string;
+  slug?: string;
+};
 
 export default function CoverImage({ title, src, slug }: CoverImageProps) {
   const image = (
@@ -15,11 +15,11 @@ export default function CoverImage({ title, src, slug }: CoverImageProps) {
       height={1000}
       alt={`Cover Image for ${title}`}
       src={src}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": slug,
       })}
     />
-  )
+  );
   return (
     <div className="sm:mx-0">
       {slug ? (
@@ -30,5 +30,5 @@ export default function CoverImage({ title, src, slug }: CoverImageProps) {
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-kontent-ai/components/date-formatter.tsx b/examples/cms-kontent-ai/components/date-formatter.tsx
index 1cce190ee5..f5fc85020d 100644
--- a/examples/cms-kontent-ai/components/date-formatter.tsx
+++ b/examples/cms-kontent-ai/components/date-formatter.tsx
@@ -1,12 +1,12 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
-type DateFormatterProps = { dateString: string | null }
+type DateFormatterProps = { dateString: string | null };
 
 export default function DateFormatter({ dateString }: DateFormatterProps) {
   if (dateString === null) {
-    return <></>
+    return <></>;
   }
 
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "LLLL	d, yyyy")}</time>;
 }
diff --git a/examples/cms-kontent-ai/components/footer.tsx b/examples/cms-kontent-ai/components/footer.tsx
index da9eed88ec..81422c7c6b 100644
--- a/examples/cms-kontent-ai/components/footer.tsx
+++ b/examples/cms-kontent-ai/components/footer.tsx
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Footer() {
   return (
@@ -26,5 +26,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-kontent-ai/components/header.tsx b/examples/cms-kontent-ai/components/header.tsx
index 05cb9af247..e6dea52099 100644
--- a/examples/cms-kontent-ai/components/header.tsx
+++ b/examples/cms-kontent-ai/components/header.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-kontent-ai/components/hero-post.tsx b/examples/cms-kontent-ai/components/hero-post.tsx
index 8f4b0d76c7..59245fb41c 100644
--- a/examples/cms-kontent-ai/components/hero-post.tsx
+++ b/examples/cms-kontent-ai/components/hero-post.tsx
@@ -1,19 +1,19 @@
-import Avatar from '../components/avatar'
-import DateFormatter from '../components/date-formatter'
-import CoverImage from '../components/cover-image'
-import Link from 'next/link'
+import Avatar from "../components/avatar";
+import DateFormatter from "../components/date-formatter";
+import CoverImage from "../components/cover-image";
+import Link from "next/link";
 
 type HeroPostProps = {
-  title: string
-  coverImage: string
-  date: string | null
-  excerpt: string
+  title: string;
+  coverImage: string;
+  date: string | null;
+  excerpt: string;
   author: {
-    name: string
-    picture: string
-  }
-  slug: string
-}
+    name: string;
+    picture: string;
+  };
+  slug: string;
+};
 
 export default function HeroPost({
   title,
@@ -45,5 +45,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-kontent-ai/components/image.tsx b/examples/cms-kontent-ai/components/image.tsx
index c95cc53ecd..432143622e 100644
--- a/examples/cms-kontent-ai/components/image.tsx
+++ b/examples/cms-kontent-ai/components/image.tsx
@@ -1,14 +1,14 @@
-import NextImage, { ImageLoaderProps } from 'next/image'
-import { transformImageUrl } from '@kontent-ai/delivery-sdk'
+import NextImage, { ImageLoaderProps } from "next/image";
+import { transformImageUrl } from "@kontent-ai/delivery-sdk";
 
 const srcIsKontentAsset = (src: string) => {
   try {
-    const { hostname } = new URL(src)
-    return hostname.endsWith('.kc-usercontent.com')
+    const { hostname } = new URL(src);
+    return hostname.endsWith(".kc-usercontent.com");
   } catch {
-    return false
+    return false;
   }
-}
+};
 
 const kontentImageLoader = ({
   src,
@@ -18,26 +18,26 @@ const kontentImageLoader = ({
   return transformImageUrl(src)
     .withWidth(width)
     .withQuality(quality)
-    .withCompression('lossless')
+    .withCompression("lossless")
     .withAutomaticFormat()
-    .getUrl()
-}
+    .getUrl();
+};
 
 const getLoader = (src: string) => {
-  return srcIsKontentAsset(src) ? kontentImageLoader : undefined
-}
+  return srcIsKontentAsset(src) ? kontentImageLoader : undefined;
+};
 
 type ImageType = {
-  width?: number
-  height?: number
-  src: string
-  layout?: string
-  className: string
-  alt: string
-}
+  width?: number;
+  height?: number;
+  src: string;
+  layout?: string;
+  className: string;
+  alt: string;
+};
 
 export default function Image(props: ImageType) {
-  const loader = getLoader(props.src)
+  const loader = getLoader(props.src);
 
-  return <NextImage {...props} loader={loader} />
+  return <NextImage {...props} loader={loader} />;
 }
diff --git a/examples/cms-kontent-ai/components/intro.tsx b/examples/cms-kontent-ai/components/intro.tsx
index 5931b3c596..e8578bef66 100644
--- a/examples/cms-kontent-ai/components/intro.tsx
+++ b/examples/cms-kontent-ai/components/intro.tsx
@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '../lib/constants'
+import { CMS_NAME, CMS_URL } from "../lib/constants";
 
 export default function Intro() {
   return (
@@ -7,14 +7,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -24,5 +24,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-kontent-ai/components/layout.tsx b/examples/cms-kontent-ai/components/layout.tsx
index eaeb46ea42..c6b7cb4368 100644
--- a/examples/cms-kontent-ai/components/layout.tsx
+++ b/examples/cms-kontent-ai/components/layout.tsx
@@ -1,11 +1,11 @@
-import Alert from './alert'
-import Footer from './footer'
-import Meta from './meta'
+import Alert from "./alert";
+import Footer from "./footer";
+import Meta from "./meta";
 
 type LayoutProps = {
-  preview: boolean
-  children: JSX.Element | JSX.Element[]
-}
+  preview: boolean;
+  children: JSX.Element | JSX.Element[];
+};
 
 export default function Layout({ preview, children }: LayoutProps) {
   return (
@@ -17,5 +17,5 @@ export default function Layout({ preview, children }: LayoutProps) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-kontent-ai/components/meta.tsx b/examples/cms-kontent-ai/components/meta.tsx
index d9c48d5831..a95395d8b9 100644
--- a/examples/cms-kontent-ai/components/meta.tsx
+++ b/examples/cms-kontent-ai/components/meta.tsx
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "../lib/constants";
 
 export default function Meta() {
   return (
@@ -38,5 +38,5 @@ export default function Meta() {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-kontent-ai/components/more-stories.tsx b/examples/cms-kontent-ai/components/more-stories.tsx
index 8ac5e92527..2ece29ddeb 100644
--- a/examples/cms-kontent-ai/components/more-stories.tsx
+++ b/examples/cms-kontent-ai/components/more-stories.tsx
@@ -1,7 +1,7 @@
-import { Post } from '@/viewmodels/post'
-import PostPreview from './post-preview'
+import { Post } from "@/viewmodels/post";
+import PostPreview from "./post-preview";
 
-type MoreStoriesProps = { posts: Array<Post> }
+type MoreStoriesProps = { posts: Array<Post> };
 
 export default function MoreStories({ posts }: MoreStoriesProps) {
   return (
@@ -15,5 +15,5 @@ export default function MoreStories({ posts }: MoreStoriesProps) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-kontent-ai/components/post-body.tsx b/examples/cms-kontent-ai/components/post-body.tsx
index c2e1a0294f..03c408bbca 100644
--- a/examples/cms-kontent-ai/components/post-body.tsx
+++ b/examples/cms-kontent-ai/components/post-body.tsx
@@ -1,16 +1,16 @@
-import markdownStyles from './markdown-styles.module.css'
+import markdownStyles from "./markdown-styles.module.css";
 
 type PostBodyProps = {
-  content: string
-}
+  content: string;
+};
 
 export default function PostBody({ content }: PostBodyProps) {
   return (
     <div className="max-w-2xl mx-auto">
       <div
-        className={markdownStyles['markdown']}
+        className={markdownStyles["markdown"]}
         dangerouslySetInnerHTML={{ __html: content }}
       />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-kontent-ai/components/post-header.tsx b/examples/cms-kontent-ai/components/post-header.tsx
index 57161f9e47..8d606ee04b 100644
--- a/examples/cms-kontent-ai/components/post-header.tsx
+++ b/examples/cms-kontent-ai/components/post-header.tsx
@@ -1,15 +1,15 @@
-import Avatar from './avatar'
-import DateFormatter from './date-formatter'
-import CoverImage from './cover-image'
-import PostTitle from './post-title'
-import { Author } from '@/viewmodels/author'
+import Avatar from "./avatar";
+import DateFormatter from "./date-formatter";
+import CoverImage from "./cover-image";
+import PostTitle from "./post-title";
+import { Author } from "@/viewmodels/author";
 
 type PostHeaderType = {
-  title: string
-  coverImage: string
-  date: string | null
-  author: Author
-}
+  title: string;
+  coverImage: string;
+  date: string | null;
+  author: Author;
+};
 
 export default function PostHeader({
   title,
@@ -35,5 +35,5 @@ export default function PostHeader({
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-kontent-ai/components/post-preview.tsx b/examples/cms-kontent-ai/components/post-preview.tsx
index 6d19d64aa6..a72ec0d6f5 100644
--- a/examples/cms-kontent-ai/components/post-preview.tsx
+++ b/examples/cms-kontent-ai/components/post-preview.tsx
@@ -1,12 +1,12 @@
-import Avatar from './avatar'
-import DateFormatter from './date-formatter'
-import CoverImage from './cover-image'
-import Link from 'next/link'
-import { Post } from '@/viewmodels/post'
+import Avatar from "./avatar";
+import DateFormatter from "./date-formatter";
+import CoverImage from "./cover-image";
+import Link from "next/link";
+import { Post } from "@/viewmodels/post";
 
 type PostPreviewProps = {
-  post: Post
-}
+  post: Post;
+};
 
 export default function PostPreview({ post }: PostPreviewProps) {
   return (
@@ -25,5 +25,5 @@ export default function PostPreview({ post }: PostPreviewProps) {
       <p className="text-lg leading-relaxed mb-4">{post.excerpt}</p>
       <Avatar name={post.author.name} picture={post.author.picture} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-kontent-ai/components/post-title.tsx b/examples/cms-kontent-ai/components/post-title.tsx
index 5b2b3f03ce..49578c2bb9 100644
--- a/examples/cms-kontent-ai/components/post-title.tsx
+++ b/examples/cms-kontent-ai/components/post-title.tsx
@@ -1,11 +1,11 @@
 export type PostTitleProps = {
-  title: string
-}
+  title: string;
+};
 
 export default function PostTitle({ title }: PostTitleProps) {
   return (
     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {title}
     </h1>
-  )
+  );
 }
diff --git a/examples/cms-kontent-ai/components/section-separator.tsx b/examples/cms-kontent-ai/components/section-separator.tsx
index 4ca5c65fdc..b86fb50b7d 100644
--- a/examples/cms-kontent-ai/components/section-separator.tsx
+++ b/examples/cms-kontent-ai/components/section-separator.tsx
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }
diff --git a/examples/cms-kontent-ai/lib/api.ts b/examples/cms-kontent-ai/lib/api.ts
index 3c2a09cac4..40e455b78a 100644
--- a/examples/cms-kontent-ai/lib/api.ts
+++ b/examples/cms-kontent-ai/lib/api.ts
@@ -1,13 +1,13 @@
-import { Author, contentTypes, Post } from '@/models'
-import { Author as ViewModelAuthor } from '@/viewmodels/author'
-import { Post as ViewModelPost } from '@/viewmodels/post'
-import { DeliveryClient } from '@kontent-ai/delivery-sdk'
-import pkg from '../package.json'
+import { Author, contentTypes, Post } from "@/models";
+import { Author as ViewModelAuthor } from "@/viewmodels/author";
+import { Post as ViewModelPost } from "@/viewmodels/post";
+import { DeliveryClient } from "@kontent-ai/delivery-sdk";
+import pkg from "../package.json";
 
-const sourceTrackingHeaderName = 'X-KC-SOURCE'
+const sourceTrackingHeaderName = "X-KC-SOURCE";
 
 const client = new DeliveryClient({
-  projectId: process.env.KONTENT_PROJECT_ID ?? '',
+  projectId: process.env.KONTENT_PROJECT_ID ?? "",
   previewApiKey: process.env.KONTENT_PREVIEW_API_KEY,
   globalHeaders: (_queryConfig) => [
     {
@@ -15,13 +15,13 @@ const client = new DeliveryClient({
       value: `@vercel/next.js/example/${pkg.name};${pkg.version}`,
     },
   ],
-})
+});
 
 function parseAuthor(author: Author): ViewModelAuthor {
   return {
     name: author.elements.name.value,
     picture: author.elements.picture.value[0].url,
-  }
+  };
 }
 
 function parsePost(post: Post): ViewModelPost {
@@ -33,18 +33,18 @@ function parsePost(post: Post): ViewModelPost {
     excerpt: post.elements.excerpt.value,
     coverImage: post.elements.cover_image.value[0].url,
     author: parseAuthor(post.elements.author.linkedItems[0]),
-  }
+  };
 }
 
 export async function getAllPostSlugs() {
   return await client
     .items<Post>()
     .type(contentTypes.post.codename)
-    .elementsParameter(['slug'])
+    .elementsParameter(["slug"])
     .toPromise()
     .then((response) =>
-      response.data.items.map((post) => post.elements.slug.value)
-    )
+      response.data.items.map((post) => post.elements.slug.value),
+    );
 }
 
 export async function getMorePostsForSlug(slug: string, preview: boolean) {
@@ -54,11 +54,11 @@ export async function getMorePostsForSlug(slug: string, preview: boolean) {
     .queryConfig({
       usePreviewMode: !!preview,
     })
-    .orderByDescending('elements.date')
-    .notEqualsFilter('elements.slug', slug)
+    .orderByDescending("elements.date")
+    .notEqualsFilter("elements.slug", slug)
     .limitParameter(2)
     .toPromise()
-    .then((response) => response.data.items.map((post) => parsePost(post)))
+    .then((response) => response.data.items.map((post) => parsePost(post)));
 }
 
 export async function getPostBySlug(slug: string, preview: boolean) {
@@ -68,9 +68,9 @@ export async function getPostBySlug(slug: string, preview: boolean) {
     .queryConfig({
       usePreviewMode: !!preview,
     })
-    .equalsFilter('elements.slug', slug)
+    .equalsFilter("elements.slug", slug)
     .toPromise()
-    .then((response) => parsePost(response.data.items[0]))
+    .then((response) => parsePost(response.data.items[0]));
 }
 
 export async function getAllPosts(preview: boolean) {
@@ -80,7 +80,7 @@ export async function getAllPosts(preview: boolean) {
     .queryConfig({
       usePreviewMode: preview,
     })
-    .orderByDescending('elements.date')
+    .orderByDescending("elements.date")
     .toPromise()
-    .then((response) => response.data.items.map((post) => parsePost(post)))
+    .then((response) => response.data.items.map((post) => parsePost(post)));
 }
diff --git a/examples/cms-kontent-ai/lib/constants.ts b/examples/cms-kontent-ai/lib/constants.ts
index 0dc76c1588..b590f42581 100644
--- a/examples/cms-kontent-ai/lib/constants.ts
+++ b/examples/cms-kontent-ai/lib/constants.ts
@@ -1,5 +1,5 @@
-export const EXAMPLE_PATH = 'cms-kontent-ai'
-export const CMS_NAME = 'Kontent.ai'
-export const CMS_URL = 'https://kontent.ai'
+export const EXAMPLE_PATH = "cms-kontent-ai";
+export const CMS_NAME = "Kontent.ai";
+export const CMS_URL = "https://kontent.ai";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**Kontent.ai**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fraw.githubusercontent.com%2Fkontent-ai%2F.github%2Fmain%2Flogos%2Fkai-logo-symbol-color-rgb.png'
+  "https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**Kontent.ai**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fraw.githubusercontent.com%2Fkontent-ai%2F.github%2Fmain%2Flogos%2Fkai-logo-symbol-color-rgb.png";
diff --git a/examples/cms-kontent-ai/lib/markdownToHtml.ts b/examples/cms-kontent-ai/lib/markdownToHtml.ts
index 9b486c82f8..51e31694be 100644
--- a/examples/cms-kontent-ai/lib/markdownToHtml.ts
+++ b/examples/cms-kontent-ai/lib/markdownToHtml.ts
@@ -1,7 +1,7 @@
-import { remark } from 'remark'
-import html from 'remark-html'
+import { remark } from "remark";
+import html from "remark-html";
 
 export default async function markdownToHtml(markdown: string) {
-  const result = await remark().use(html).process(markdown)
-  return result.toString()
+  const result = await remark().use(html).process(markdown);
+  return result.toString();
 }
diff --git a/examples/cms-kontent-ai/models/content-type-snippets/index.ts b/examples/cms-kontent-ai/models/content-type-snippets/index.ts
index 336ce12bb9..cb0ff5c3b5 100644
--- a/examples/cms-kontent-ai/models/content-type-snippets/index.ts
+++ b/examples/cms-kontent-ai/models/content-type-snippets/index.ts
@@ -1 +1 @@
-export {}
+export {};
diff --git a/examples/cms-kontent-ai/models/content-types/author.ts b/examples/cms-kontent-ai/models/content-types/author.ts
index 291087bf21..26f6516b25 100644
--- a/examples/cms-kontent-ai/models/content-types/author.ts
+++ b/examples/cms-kontent-ai/models/content-types/author.ts
@@ -1,4 +1,4 @@
-import { type IContentItem, type Elements } from '@kontent-ai/delivery-sdk'
+import { type IContentItem, type Elements } from "@kontent-ai/delivery-sdk";
 /**
  * Generated by '@kontent-ai/model-generator@5.9.0'
  *
@@ -13,7 +13,7 @@ export type Author = IContentItem<{
    * Id: fab7d833-5672-5271-ac00-49e6fcf34754
    * Codename: name
    */
-  name: Elements.TextElement
+  name: Elements.TextElement;
 
   /**
    * Picture (asset)
@@ -21,5 +21,5 @@ export type Author = IContentItem<{
    * Id: 78b67780-55e4-5b29-903c-de37d3aa263b
    * Codename: picture
    */
-  picture: Elements.AssetsElement
-}>
+  picture: Elements.AssetsElement;
+}>;
diff --git a/examples/cms-kontent-ai/models/content-types/index.ts b/examples/cms-kontent-ai/models/content-types/index.ts
index bbec79a269..2c10a0cbd1 100644
--- a/examples/cms-kontent-ai/models/content-types/index.ts
+++ b/examples/cms-kontent-ai/models/content-types/index.ts
@@ -1,2 +1,2 @@
-export * from './author'
-export * from './post'
+export * from "./author";
+export * from "./post";
diff --git a/examples/cms-kontent-ai/models/content-types/post.ts b/examples/cms-kontent-ai/models/content-types/post.ts
index 3cff212541..21360b028b 100644
--- a/examples/cms-kontent-ai/models/content-types/post.ts
+++ b/examples/cms-kontent-ai/models/content-types/post.ts
@@ -1,5 +1,5 @@
-import { type IContentItem, type Elements } from '@kontent-ai/delivery-sdk'
-import { type Author } from './author'
+import { type IContentItem, type Elements } from "@kontent-ai/delivery-sdk";
+import { type Author } from "./author";
 
 /**
  * Generated by '@kontent-ai/model-generator@5.9.0'
@@ -15,7 +15,7 @@ export type Post = IContentItem<{
    * Id: aa68b9d2-e807-54be-ac82-543ff122b6b2
    * Codename: author
    */
-  author: Elements.LinkedItemsElement<Author>
+  author: Elements.LinkedItemsElement<Author>;
 
   /**
    * Content (rich_text)
@@ -23,7 +23,7 @@ export type Post = IContentItem<{
    * Id: f8b91d9f-0a7d-557e-9fe8-ca1203ae4a67
    * Codename: content
    */
-  content: Elements.RichTextElement
+  content: Elements.RichTextElement;
 
   /**
    * Cover Image (asset)
@@ -31,7 +31,7 @@ export type Post = IContentItem<{
    * Id: 8f1bd2ae-b15a-5100-b8ee-b279a87862fb
    * Codename: cover_image
    */
-  cover_image: Elements.AssetsElement
+  cover_image: Elements.AssetsElement;
 
   /**
    * Date (date_time)
@@ -39,7 +39,7 @@ export type Post = IContentItem<{
    * Id: 1739ed56-ccd8-55a3-9cd3-67f09a8073db
    * Codename: date
    */
-  date: Elements.DateTimeElement
+  date: Elements.DateTimeElement;
 
   /**
    * Excerpt (text)
@@ -47,7 +47,7 @@ export type Post = IContentItem<{
    * Id: e1461965-9004-500e-9441-39a51aa3088b
    * Codename: excerpt
    */
-  excerpt: Elements.TextElement
+  excerpt: Elements.TextElement;
 
   /**
    * Slug (url_slug)
@@ -55,7 +55,7 @@ export type Post = IContentItem<{
    * Id: f12efb12-764a-512c-82f8-4423d978b62b
    * Codename: slug
    */
-  slug: Elements.UrlSlugElement
+  slug: Elements.UrlSlugElement;
 
   /**
    * Title (text)
@@ -63,5 +63,5 @@ export type Post = IContentItem<{
    * Id: 933469d0-fe2b-51fa-8f62-600f103aee8b
    * Codename: title
    */
-  title: Elements.TextElement
-}>
+  title: Elements.TextElement;
+}>;
diff --git a/examples/cms-kontent-ai/models/index.ts b/examples/cms-kontent-ai/models/index.ts
index ad70db5b44..e17becbeac 100644
--- a/examples/cms-kontent-ai/models/index.ts
+++ b/examples/cms-kontent-ai/models/index.ts
@@ -1,4 +1,4 @@
-export * from './project'
-export * from './content-types'
-export * from './content-type-snippets'
-export * from './taxonomies'
+export * from "./project";
+export * from "./content-types";
+export * from "./content-type-snippets";
+export * from "./taxonomies";
diff --git a/examples/cms-kontent-ai/models/project/assetFolders.ts b/examples/cms-kontent-ai/models/project/assetFolders.ts
index 06a7aa8441..d82572fe23 100644
--- a/examples/cms-kontent-ai/models/project/assetFolders.ts
+++ b/examples/cms-kontent-ai/models/project/assetFolders.ts
@@ -10,9 +10,9 @@ export const assetFolders = {
    * Authors
    */
   authors: {
-    id: 'eaf64b25-4cd1-5d71-ba2f-e02e6556213b',
-    name: 'Authors',
-    externalId: '82274911-5ab9-4881-853e-4f7a97b2caf2',
+    id: "eaf64b25-4cd1-5d71-ba2f-e02e6556213b",
+    name: "Authors",
+    externalId: "82274911-5ab9-4881-853e-4f7a97b2caf2",
     folders: {},
   },
 
@@ -20,9 +20,9 @@ export const assetFolders = {
    * Post images
    */
   postImages: {
-    id: '290176f9-bb83-5d6a-ad07-2843a1dd2208',
-    name: 'Post images',
-    externalId: '499af581-d817-49cc-a548-5b34ba7b2fc6',
+    id: "290176f9-bb83-5d6a-ad07-2843a1dd2208",
+    name: "Post images",
+    externalId: "499af581-d817-49cc-a548-5b34ba7b2fc6",
     folders: {},
   },
-} as const
+} as const;
diff --git a/examples/cms-kontent-ai/models/project/collections.ts b/examples/cms-kontent-ai/models/project/collections.ts
index 66315bff8c..c5201f02c3 100644
--- a/examples/cms-kontent-ai/models/project/collections.ts
+++ b/examples/cms-kontent-ai/models/project/collections.ts
@@ -10,8 +10,8 @@ export const collections = {
    * Default
    */
   default: {
-    codename: 'default',
-    id: '00000000-0000-0000-0000-000000000000',
-    name: 'Default',
+    codename: "default",
+    id: "00000000-0000-0000-0000-000000000000",
+    name: "Default",
   },
-} as const
+} as const;
diff --git a/examples/cms-kontent-ai/models/project/contentTypeSnippets.ts b/examples/cms-kontent-ai/models/project/contentTypeSnippets.ts
index 6bc90e291f..b2777dcfec 100644
--- a/examples/cms-kontent-ai/models/project/contentTypeSnippets.ts
+++ b/examples/cms-kontent-ai/models/project/contentTypeSnippets.ts
@@ -5,4 +5,4 @@
  * Environment: Production
  * Project Id: a7844231-064c-016c-1dad-38228cbc505d
  */
-export const contentTypeSnippets = {} as const
+export const contentTypeSnippets = {} as const;
diff --git a/examples/cms-kontent-ai/models/project/contentTypes.ts b/examples/cms-kontent-ai/models/project/contentTypes.ts
index 53c7dc7b36..c6fd0cff2e 100644
--- a/examples/cms-kontent-ai/models/project/contentTypes.ts
+++ b/examples/cms-kontent-ai/models/project/contentTypes.ts
@@ -10,21 +10,21 @@ export const contentTypes = {
    * Author
    */
   author: {
-    codename: 'author',
-    id: 'c204b17f-d320-5755-b913-7b4caa8902b6',
-    externalId: 'ba75f751-d649-4fad-a643-bd58c660bb86',
-    name: 'Author',
+    codename: "author",
+    id: "c204b17f-d320-5755-b913-7b4caa8902b6",
+    externalId: "ba75f751-d649-4fad-a643-bd58c660bb86",
+    name: "Author",
     elements: {
       /**
        * Name (text)
        */
       name: {
-        codename: 'name',
-        id: 'fab7d833-5672-5271-ac00-49e6fcf34754',
-        externalId: '27cd83d2-9bb6-4c3c-9e0e-08abd3c604dc',
-        name: 'Name',
+        codename: "name",
+        id: "fab7d833-5672-5271-ac00-49e6fcf34754",
+        externalId: "27cd83d2-9bb6-4c3c-9e0e-08abd3c604dc",
+        name: "Name",
         required: false,
-        type: 'text',
+        type: "text",
         snippetCodename: undefined,
       },
 
@@ -32,12 +32,12 @@ export const contentTypes = {
        * Picture (asset)
        */
       picture: {
-        codename: 'picture',
-        id: '78b67780-55e4-5b29-903c-de37d3aa263b',
-        externalId: '7a94a17f-fbe6-4415-a0fd-a99d150d74e3',
-        name: 'Picture',
+        codename: "picture",
+        id: "78b67780-55e4-5b29-903c-de37d3aa263b",
+        externalId: "7a94a17f-fbe6-4415-a0fd-a99d150d74e3",
+        name: "Picture",
         required: false,
-        type: 'asset',
+        type: "asset",
         snippetCodename: undefined,
       },
     },
@@ -47,21 +47,21 @@ export const contentTypes = {
    * Post
    */
   post: {
-    codename: 'post',
-    id: 'b1efdda5-18a3-5445-8ca2-51c252a9ee2d',
-    externalId: '5126584e-b734-457a-8a9f-f954fd597fa6',
-    name: 'Post',
+    codename: "post",
+    id: "b1efdda5-18a3-5445-8ca2-51c252a9ee2d",
+    externalId: "5126584e-b734-457a-8a9f-f954fd597fa6",
+    name: "Post",
     elements: {
       /**
        * Author (modular_content)
        */
       author: {
-        codename: 'author',
-        id: 'aa68b9d2-e807-54be-ac82-543ff122b6b2',
-        externalId: 'bc8e9421-f4d0-4c05-a607-572ac635aaa9',
-        name: 'Author',
+        codename: "author",
+        id: "aa68b9d2-e807-54be-ac82-543ff122b6b2",
+        externalId: "bc8e9421-f4d0-4c05-a607-572ac635aaa9",
+        name: "Author",
         required: false,
-        type: 'modular_content',
+        type: "modular_content",
         snippetCodename: undefined,
       },
 
@@ -69,12 +69,12 @@ export const contentTypes = {
        * Content (rich_text)
        */
       content: {
-        codename: 'content',
-        id: 'f8b91d9f-0a7d-557e-9fe8-ca1203ae4a67',
-        externalId: 'b496e813-c1ad-4468-aee4-e0fcbfc2f075',
-        name: 'Content',
+        codename: "content",
+        id: "f8b91d9f-0a7d-557e-9fe8-ca1203ae4a67",
+        externalId: "b496e813-c1ad-4468-aee4-e0fcbfc2f075",
+        name: "Content",
         required: false,
-        type: 'rich_text',
+        type: "rich_text",
         snippetCodename: undefined,
       },
 
@@ -82,12 +82,12 @@ export const contentTypes = {
        * Cover Image (asset)
        */
       cover_image: {
-        codename: 'cover_image',
-        id: '8f1bd2ae-b15a-5100-b8ee-b279a87862fb',
-        externalId: '072504ad-20d9-4918-a2db-bac37c7ac3d2',
-        name: 'Cover Image',
+        codename: "cover_image",
+        id: "8f1bd2ae-b15a-5100-b8ee-b279a87862fb",
+        externalId: "072504ad-20d9-4918-a2db-bac37c7ac3d2",
+        name: "Cover Image",
         required: false,
-        type: 'asset',
+        type: "asset",
         snippetCodename: undefined,
       },
 
@@ -95,12 +95,12 @@ export const contentTypes = {
        * Date (date_time)
        */
       date: {
-        codename: 'date',
-        id: '1739ed56-ccd8-55a3-9cd3-67f09a8073db',
-        externalId: 'c0510c50-1f74-47f1-85de-4780138651a0',
-        name: 'Date',
+        codename: "date",
+        id: "1739ed56-ccd8-55a3-9cd3-67f09a8073db",
+        externalId: "c0510c50-1f74-47f1-85de-4780138651a0",
+        name: "Date",
         required: false,
-        type: 'date_time',
+        type: "date_time",
         snippetCodename: undefined,
       },
 
@@ -108,12 +108,12 @@ export const contentTypes = {
        * Excerpt (text)
        */
       excerpt: {
-        codename: 'excerpt',
-        id: 'e1461965-9004-500e-9441-39a51aa3088b',
-        externalId: '58f63166-ecb7-4c87-a644-6f616c6b2028',
-        name: 'Excerpt',
+        codename: "excerpt",
+        id: "e1461965-9004-500e-9441-39a51aa3088b",
+        externalId: "58f63166-ecb7-4c87-a644-6f616c6b2028",
+        name: "Excerpt",
         required: false,
-        type: 'text',
+        type: "text",
         snippetCodename: undefined,
       },
 
@@ -121,12 +121,12 @@ export const contentTypes = {
        * Slug (url_slug)
        */
       slug: {
-        codename: 'slug',
-        id: 'f12efb12-764a-512c-82f8-4423d978b62b',
-        externalId: 'b1bb5d5b-68b8-4fdc-91d9-1c9ad9efc84f',
-        name: 'Slug',
+        codename: "slug",
+        id: "f12efb12-764a-512c-82f8-4423d978b62b",
+        externalId: "b1bb5d5b-68b8-4fdc-91d9-1c9ad9efc84f",
+        name: "Slug",
         required: false,
-        type: 'url_slug',
+        type: "url_slug",
         snippetCodename: undefined,
       },
 
@@ -134,14 +134,14 @@ export const contentTypes = {
        * Title (text)
        */
       title: {
-        codename: 'title',
-        id: '933469d0-fe2b-51fa-8f62-600f103aee8b',
-        externalId: '63664f0c-3d1d-4a89-adbe-5f502b227f9d',
-        name: 'Title',
+        codename: "title",
+        id: "933469d0-fe2b-51fa-8f62-600f103aee8b",
+        externalId: "63664f0c-3d1d-4a89-adbe-5f502b227f9d",
+        name: "Title",
         required: true,
-        type: 'text',
+        type: "text",
         snippetCodename: undefined,
       },
     },
   },
-} as const
+} as const;
diff --git a/examples/cms-kontent-ai/models/project/index.ts b/examples/cms-kontent-ai/models/project/index.ts
index 550102330f..670fba1a6c 100644
--- a/examples/cms-kontent-ai/models/project/index.ts
+++ b/examples/cms-kontent-ai/models/project/index.ts
@@ -1,9 +1,9 @@
-export * from './languages'
-export * from './collections'
-export * from './contentTypes'
-export * from './contentTypeSnippets'
-export * from './taxonomies'
-export * from './workflows'
-export * from './roles'
-export * from './assetFolders'
-export * from './webhooks'
+export * from "./languages";
+export * from "./collections";
+export * from "./contentTypes";
+export * from "./contentTypeSnippets";
+export * from "./taxonomies";
+export * from "./workflows";
+export * from "./roles";
+export * from "./assetFolders";
+export * from "./webhooks";
diff --git a/examples/cms-kontent-ai/models/project/languages.ts b/examples/cms-kontent-ai/models/project/languages.ts
index ad79662bc0..683490a1d7 100644
--- a/examples/cms-kontent-ai/models/project/languages.ts
+++ b/examples/cms-kontent-ai/models/project/languages.ts
@@ -10,12 +10,12 @@ export const languages = {
    * Default project language
    */
   default: {
-    codename: 'default',
-    id: '00000000-0000-0000-0000-000000000000',
+    codename: "default",
+    id: "00000000-0000-0000-0000-000000000000",
     isActive: true,
     isDefault: true,
-    fallbackLanguageId: '00000000-0000-0000-0000-000000000000',
+    fallbackLanguageId: "00000000-0000-0000-0000-000000000000",
     externalId: undefined,
-    name: 'Default project language',
+    name: "Default project language",
   },
-} as const
+} as const;
diff --git a/examples/cms-kontent-ai/models/project/roles.ts b/examples/cms-kontent-ai/models/project/roles.ts
index 4c2008f596..abe38b63fc 100644
--- a/examples/cms-kontent-ai/models/project/roles.ts
+++ b/examples/cms-kontent-ai/models/project/roles.ts
@@ -5,4 +5,4 @@
  * Environment: Production
  * Project Id: a7844231-064c-016c-1dad-38228cbc505d
  */
-export const roles = {} as const
+export const roles = {} as const;
diff --git a/examples/cms-kontent-ai/models/project/taxonomies.ts b/examples/cms-kontent-ai/models/project/taxonomies.ts
index 427569eb05..67d2614dfd 100644
--- a/examples/cms-kontent-ai/models/project/taxonomies.ts
+++ b/examples/cms-kontent-ai/models/project/taxonomies.ts
@@ -5,4 +5,4 @@
  * Environment: Production
  * Project Id: a7844231-064c-016c-1dad-38228cbc505d
  */
-export const taxonomies = {} as const
+export const taxonomies = {} as const;
diff --git a/examples/cms-kontent-ai/models/project/webhooks.ts b/examples/cms-kontent-ai/models/project/webhooks.ts
index 40396b5fac..72ca667042 100644
--- a/examples/cms-kontent-ai/models/project/webhooks.ts
+++ b/examples/cms-kontent-ai/models/project/webhooks.ts
@@ -5,4 +5,4 @@
  * Environment: Production
  * Project Id: a7844231-064c-016c-1dad-38228cbc505d
  */
-export const webhooks = {} as const
+export const webhooks = {} as const;
diff --git a/examples/cms-kontent-ai/models/project/workflows.ts b/examples/cms-kontent-ai/models/project/workflows.ts
index f9109e8b44..91a8c27599 100644
--- a/examples/cms-kontent-ai/models/project/workflows.ts
+++ b/examples/cms-kontent-ai/models/project/workflows.ts
@@ -12,8 +12,8 @@ export const workflows = {
    * Published step Id: c199950d-99f0-4983-b711-6c4c91624b22
    */
   default: {
-    codename: 'default',
-    id: '00000000-0000-0000-0000-000000000000',
-    name: 'Default',
+    codename: "default",
+    id: "00000000-0000-0000-0000-000000000000",
+    name: "Default",
   },
-} as const
+} as const;
diff --git a/examples/cms-kontent-ai/models/taxonomies/index.ts b/examples/cms-kontent-ai/models/taxonomies/index.ts
index 336ce12bb9..cb0ff5c3b5 100644
--- a/examples/cms-kontent-ai/models/taxonomies/index.ts
+++ b/examples/cms-kontent-ai/models/taxonomies/index.ts
@@ -1 +1 @@
-export {}
+export {};
diff --git a/examples/cms-kontent-ai/pages/_app.tsx b/examples/cms-kontent-ai/pages/_app.tsx
index 6ac887c043..0ee799e016 100644
--- a/examples/cms-kontent-ai/pages/_app.tsx
+++ b/examples/cms-kontent-ai/pages/_app.tsx
@@ -1,6 +1,6 @@
-import { AppProps } from 'next/app'
-import '../styles/index.css'
+import { AppProps } from "next/app";
+import "../styles/index.css";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/cms-kontent-ai/pages/_document.tsx b/examples/cms-kontent-ai/pages/_document.tsx
index 54e8bf3e2a..b2fff8b426 100644
--- a/examples/cms-kontent-ai/pages/_document.tsx
+++ b/examples/cms-kontent-ai/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/cms-kontent-ai/pages/api/exit-preview.ts b/examples/cms-kontent-ai/pages/api/exit-preview.ts
index bd6d796c17..6e209f924c 100644
--- a/examples/cms-kontent-ai/pages/api/exit-preview.ts
+++ b/examples/cms-kontent-ai/pages/api/exit-preview.ts
@@ -1,10 +1,10 @@
-import { NextApiResponse } from 'next'
+import { NextApiResponse } from "next";
 
 export default async function exit(_: any, res: NextApiResponse) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-kontent-ai/pages/api/preview.ts b/examples/cms-kontent-ai/pages/api/preview.ts
index de888ba72a..07238d62fe 100644
--- a/examples/cms-kontent-ai/pages/api/preview.ts
+++ b/examples/cms-kontent-ai/pages/api/preview.ts
@@ -1,9 +1,9 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import { getPostBySlug } from '../../lib/api'
+import { NextApiRequest, NextApiResponse } from "next";
+import { getPostBySlug } from "../../lib/api";
 
 export default async function preview(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
   // Check the secret and next parameters
   // This secret should only be known to this API route and the CMS
@@ -13,22 +13,22 @@ export default async function preview(
   ) {
     return res
       .status(401)
-      .json({ message: 'Invalid token or slug not specified' })
+      .json({ message: "Invalid token or slug not specified" });
   }
 
   // Fetch the headless CMS to check if the provided `slug` exists
-  const post = await getPostBySlug(req.query.slug as string, true)
+  const post = await getPostBySlug(req.query.slug as string, true);
 
   // If the slug doesn't exist prevent preview mode from being enabled
   if (!post) {
-    return res.status(401).json({ message: 'Invalid slug' })
+    return res.status(401).json({ message: "Invalid slug" });
   }
 
   // Enable Preview Mode by setting the cookie
-  res.setDraftMode({ enable: true })
+  res.setDraftMode({ enable: true });
 
   // Redirect to the path from the fetched post
   // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
-  res.writeHead(307, { Location: `/posts/${post.slug}` })
-  res.end()
+  res.writeHead(307, { Location: `/posts/${post.slug}` });
+  res.end();
 }
diff --git a/examples/cms-kontent-ai/pages/index.tsx b/examples/cms-kontent-ai/pages/index.tsx
index 7e3a75449b..e7dbbb245e 100644
--- a/examples/cms-kontent-ai/pages/index.tsx
+++ b/examples/cms-kontent-ai/pages/index.tsx
@@ -1,21 +1,21 @@
-import Container from '../components/container'
-import MoreStories from '../components/more-stories'
-import HeroPost from '../components/hero-post'
-import Intro from '../components/intro'
-import Layout from '../components/layout'
-import { getAllPosts } from '../lib/api'
-import Head from 'next/head'
-import { CMS_NAME } from '../lib/constants'
-import { Post } from '@/viewmodels/post'
+import Container from "../components/container";
+import MoreStories from "../components/more-stories";
+import HeroPost from "../components/hero-post";
+import Intro from "../components/intro";
+import Layout from "../components/layout";
+import { getAllPosts } from "../lib/api";
+import Head from "next/head";
+import { CMS_NAME } from "../lib/constants";
+import { Post } from "@/viewmodels/post";
 
 type IndexProps = {
-  allPosts: Array<Post>
-  preview: boolean
-}
+  allPosts: Array<Post>;
+  preview: boolean;
+};
 
 export default function Index({ allPosts, preview }: IndexProps) {
-  const heroPost = allPosts[0]
-  const morePosts = allPosts.slice(1)
+  const heroPost = allPosts[0];
+  const morePosts = allPosts.slice(1);
   return (
     <>
       <Layout preview={preview}>
@@ -38,12 +38,12 @@ export default function Index({ allPosts, preview }: IndexProps) {
         </Container>
       </Layout>
     </>
-  )
+  );
 }
 
 export async function getStaticProps({ preview = false }) {
-  const allPosts = await getAllPosts(preview)
+  const allPosts = await getAllPosts(preview);
   return {
     props: { allPosts, preview },
-  }
+  };
 }
diff --git a/examples/cms-kontent-ai/pages/posts/[slug].tsx b/examples/cms-kontent-ai/pages/posts/[slug].tsx
index a132efd02c..81f100b4ad 100644
--- a/examples/cms-kontent-ai/pages/posts/[slug].tsx
+++ b/examples/cms-kontent-ai/pages/posts/[slug].tsx
@@ -1,32 +1,32 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import Container from '../../components/container'
-import PostBody from '../../components/post-body'
-import MoreStories from '../../components/more-stories'
-import Header from '../../components/header'
-import PostHeader from '../../components/post-header'
-import SectionSeparator from '../../components/section-separator'
-import Layout from '../../components/layout'
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Container from "../../components/container";
+import PostBody from "../../components/post-body";
+import MoreStories from "../../components/more-stories";
+import Header from "../../components/header";
+import PostHeader from "../../components/post-header";
+import SectionSeparator from "../../components/section-separator";
+import Layout from "../../components/layout";
 import {
   getAllPostSlugs,
   getPostBySlug,
   getMorePostsForSlug,
-} from '../../lib/api'
-import PostTitle from '../../components/post-title'
-import Head from 'next/head'
-import { CMS_NAME } from '../../lib/constants'
-import { Post as PostModel } from '@/viewmodels/post'
+} from "../../lib/api";
+import PostTitle from "../../components/post-title";
+import Head from "next/head";
+import { CMS_NAME } from "../../lib/constants";
+import { Post as PostModel } from "@/viewmodels/post";
 
 type PostProps = {
-  post: PostModel
-  morePosts: Array<PostModel>
-  preview: boolean
-}
+  post: PostModel;
+  morePosts: Array<PostModel>;
+  preview: boolean;
+};
 
 export default function Post({ post, morePosts = [], preview }: PostProps) {
-  const router = useRouter()
+  const router = useRouter();
   if (!router.isFallback && !post?.slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
   return (
     <Layout preview={preview}>
@@ -57,15 +57,15 @@ export default function Post({ post, morePosts = [], preview }: PostProps) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 type StaticProps = {
   params: {
-    slug: string
-  }
-  preview: boolean | null
-}
+    slug: string;
+  };
+  preview: boolean | null;
+};
 
 export async function getStaticProps({ params, preview = null }: StaticProps) {
   return await Promise.all([
@@ -77,11 +77,11 @@ export async function getStaticProps({ params, preview = null }: StaticProps) {
       morePosts: values[1],
       preview,
     },
-  }))
+  }));
 }
 
 export async function getStaticPaths() {
-  const slugs = await getAllPostSlugs()
+  const slugs = await getAllPostSlugs();
   return {
     paths: slugs.map(
       (slug) =>
@@ -89,8 +89,8 @@ export async function getStaticPaths() {
           params: {
             slug,
           },
-        } || [])
+        } || []),
     ),
     fallback: false,
-  }
+  };
 }
diff --git a/examples/cms-kontent-ai/postcss.config.js b/examples/cms-kontent-ai/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-kontent-ai/postcss.config.js
+++ b/examples/cms-kontent-ai/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-kontent-ai/tailwind.config.js b/examples/cms-kontent-ai/tailwind.config.js
index ea0efae6d7..a8f65a525d 100644
--- a/examples/cms-kontent-ai/tailwind.config.js
+++ b/examples/cms-kontent-ai/tailwind.config.js
@@ -1,38 +1,38 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/cms-kontent-ai/viewmodels/author.ts b/examples/cms-kontent-ai/viewmodels/author.ts
index e5fc8a74a3..352ff4cc38 100644
--- a/examples/cms-kontent-ai/viewmodels/author.ts
+++ b/examples/cms-kontent-ai/viewmodels/author.ts
@@ -1,4 +1,4 @@
 export type Author = {
-  name: string
-  picture: string
-}
+  name: string;
+  picture: string;
+};
diff --git a/examples/cms-kontent-ai/viewmodels/post.ts b/examples/cms-kontent-ai/viewmodels/post.ts
index 24e8f5254d..d712f8c019 100644
--- a/examples/cms-kontent-ai/viewmodels/post.ts
+++ b/examples/cms-kontent-ai/viewmodels/post.ts
@@ -1,11 +1,11 @@
-import { Author } from './author'
+import { Author } from "./author";
 
 export type Post = {
-  title: string
-  slug: string
-  date: string | null
-  content: string
-  excerpt: string
-  coverImage: string
-  author: Author
-}
+  title: string;
+  slug: string;
+  date: string | null;
+  content: string;
+  excerpt: string;
+  coverImage: string;
+  author: Author;
+};
diff --git a/examples/cms-makeswift/lib/makeswift/register-components.tsx b/examples/cms-makeswift/lib/makeswift/register-components.tsx
index 265a9f7cfd..33076b5122 100644
--- a/examples/cms-makeswift/lib/makeswift/register-components.tsx
+++ b/examples/cms-makeswift/lib/makeswift/register-components.tsx
@@ -1,16 +1,16 @@
-import { Style } from '@makeswift/runtime/controls'
-import { ReactRuntime } from '@makeswift/runtime/react'
+import { Style } from "@makeswift/runtime/controls";
+import { ReactRuntime } from "@makeswift/runtime/react";
 
 // Register your components here!
 
 function HelloWorld(props: { className?: string }) {
-  return <p {...props}>Hello, world!</p>
+  return <p {...props}>Hello, world!</p>;
 }
 
 ReactRuntime.registerComponent(HelloWorld, {
-  type: 'hello-world',
-  label: 'Hello, world!',
+  type: "hello-world",
+  label: "Hello, world!",
   props: {
     className: Style({ properties: Style.All }),
   },
-})
+});
diff --git a/examples/cms-makeswift/next.config.js b/examples/cms-makeswift/next.config.js
index 31c157001e..118a8619aa 100644
--- a/examples/cms-makeswift/next.config.js
+++ b/examples/cms-makeswift/next.config.js
@@ -1,8 +1,8 @@
-const withMakeswift = require('@makeswift/runtime/next/plugin')()
+const withMakeswift = require("@makeswift/runtime/next/plugin")();
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-module.exports = withMakeswift(nextConfig)
+module.exports = withMakeswift(nextConfig);
diff --git a/examples/cms-makeswift/pages/[[...path]].tsx b/examples/cms-makeswift/pages/[[...path]].tsx
index f8edbde7e8..1733d3dded 100644
--- a/examples/cms-makeswift/pages/[[...path]].tsx
+++ b/examples/cms-makeswift/pages/[[...path]].tsx
@@ -1,51 +1,51 @@
-import '../lib/makeswift/register-components'
+import "../lib/makeswift/register-components";
 
-import { Makeswift } from '@makeswift/runtime/next'
+import { Makeswift } from "@makeswift/runtime/next";
 import {
   GetStaticPathsResult,
   GetStaticPropsContext,
   GetStaticPropsResult,
-} from 'next'
+} from "next";
 
 import {
   Page as MakeswiftPage,
   PageProps as MakeswiftPageProps,
-} from '@makeswift/runtime/next'
+} from "@makeswift/runtime/next";
 
-type ParsedUrlQuery = { path?: string[] }
+type ParsedUrlQuery = { path?: string[] };
 
 export async function getStaticPaths(): Promise<
   GetStaticPathsResult<ParsedUrlQuery>
 > {
-  const makeswift = new Makeswift(process.env.MAKESWIFT_SITE_API_KEY!)
-  const pages = await makeswift.getPages()
+  const makeswift = new Makeswift(process.env.MAKESWIFT_SITE_API_KEY!);
+  const pages = await makeswift.getPages();
 
   return {
     paths: pages.map((page) => ({
       params: {
-        path: page.path.split('/').filter((segment) => segment !== ''),
+        path: page.path.split("/").filter((segment) => segment !== ""),
       },
     })),
-    fallback: 'blocking',
-  }
+    fallback: "blocking",
+  };
 }
 
-type Props = MakeswiftPageProps
+type Props = MakeswiftPageProps;
 
 export async function getStaticProps(
-  ctx: GetStaticPropsContext<ParsedUrlQuery>
+  ctx: GetStaticPropsContext<ParsedUrlQuery>,
 ): Promise<GetStaticPropsResult<Props>> {
-  const makeswift = new Makeswift(process.env.MAKESWIFT_SITE_API_KEY!)
-  const path = '/' + (ctx.params?.path ?? []).join('/')
+  const makeswift = new Makeswift(process.env.MAKESWIFT_SITE_API_KEY!);
+  const path = "/" + (ctx.params?.path ?? []).join("/");
   const snapshot = await makeswift.getPageSnapshot(path, {
     preview: ctx.preview,
-  })
+  });
 
-  if (snapshot == null) return { notFound: true }
+  if (snapshot == null) return { notFound: true };
 
-  return { props: { snapshot } }
+  return { props: { snapshot } };
 }
 
 export default function Page({ snapshot }: Props) {
-  return <MakeswiftPage snapshot={snapshot} />
+  return <MakeswiftPage snapshot={snapshot} />;
 }
diff --git a/examples/cms-makeswift/pages/_document.ts b/examples/cms-makeswift/pages/_document.ts
index f1ad26a0ec..2d82f80747 100644
--- a/examples/cms-makeswift/pages/_document.ts
+++ b/examples/cms-makeswift/pages/_document.ts
@@ -1 +1 @@
-export { Document as default } from '@makeswift/runtime/next'
+export { Document as default } from "@makeswift/runtime/next";
diff --git a/examples/cms-makeswift/pages/api/makeswift/[...makeswift].ts b/examples/cms-makeswift/pages/api/makeswift/[...makeswift].ts
index edf4ad5cca..40160bbea6 100644
--- a/examples/cms-makeswift/pages/api/makeswift/[...makeswift].ts
+++ b/examples/cms-makeswift/pages/api/makeswift/[...makeswift].ts
@@ -1,3 +1,3 @@
-import { MakeswiftApiHandler } from '@makeswift/runtime/next'
+import { MakeswiftApiHandler } from "@makeswift/runtime/next";
 
-export default MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY!)
+export default MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY!);
diff --git a/examples/cms-payload/app/(payload)/admin/[...slug]/page.tsx b/examples/cms-payload/app/(payload)/admin/[...slug]/page.tsx
index 0e200ea339..56fcc1f69c 100644
--- a/examples/cms-payload/app/(payload)/admin/[...slug]/page.tsx
+++ b/examples/cms-payload/app/(payload)/admin/[...slug]/page.tsx
@@ -1,2 +1,2 @@
 // Need to render the same component for anything within /admin
-export { default } from '../page'
+export { default } from "../page";
diff --git a/examples/cms-payload/app/(payload)/admin/page.tsx b/examples/cms-payload/app/(payload)/admin/page.tsx
index bd95269965..db023c9894 100644
--- a/examples/cms-payload/app/(payload)/admin/page.tsx
+++ b/examples/cms-payload/app/(payload)/admin/page.tsx
@@ -1,18 +1,18 @@
-'use client'
+"use client";
 
-import React from 'react'
-import Root from 'payload/dist/admin/Root'
+import React from "react";
+import Root from "payload/dist/admin/Root";
 
 const PayloadAdmin = () => {
-  const [mounted, setMounted] = React.useState(false)
+  const [mounted, setMounted] = React.useState(false);
 
   React.useEffect(() => {
-    setMounted(true)
-  }, [])
+    setMounted(true);
+  }, []);
 
-  if (!mounted) return null
+  if (!mounted) return null;
 
-  return <Root />
-}
+  return <Root />;
+};
 
-export default PayloadAdmin
+export default PayloadAdmin;
diff --git a/examples/cms-payload/app/(site)/[slug]/page.tsx b/examples/cms-payload/app/(site)/[slug]/page.tsx
index d980b583a8..869170598e 100644
--- a/examples/cms-payload/app/(site)/[slug]/page.tsx
+++ b/examples/cms-payload/app/(site)/[slug]/page.tsx
@@ -1,52 +1,52 @@
-import { notFound } from 'next/navigation'
-import { getPayloadClient } from '../../../payload/payloadClient'
-import Blocks from '../../../components/Blocks'
-import { Hero } from '../../../components/Hero'
-import { AdminBar } from '../../../components/AdminBar'
-import { Metadata } from 'next'
+import { notFound } from "next/navigation";
+import { getPayloadClient } from "../../../payload/payloadClient";
+import Blocks from "../../../components/Blocks";
+import { Hero } from "../../../components/Hero";
+import { AdminBar } from "../../../components/AdminBar";
+import { Metadata } from "next";
 
 export async function generateMetadata({
   params: { slug },
 }): Promise<Metadata> {
   return {
     title: slug,
-  }
+  };
 }
 
 const Page = async ({ params: { slug } }) => {
-  const payload = await getPayloadClient()
+  const payload = await getPayloadClient();
 
   const pages = await payload.find({
-    collection: 'pages',
+    collection: "pages",
     where: {
       slug: {
-        equals: slug || 'home',
+        equals: slug || "home",
       },
     },
-  })
+  });
 
-  const page = pages.docs[0]
+  const page = pages.docs[0];
 
-  if (!page) return notFound()
+  if (!page) return notFound();
 
   return (
     <>
-      <AdminBar adminBarProps={{ collection: 'pages', id: page.id }} />
+      <AdminBar adminBarProps={{ collection: "pages", id: page.id }} />
       <Hero {...page.hero} />
       <Blocks blocks={page.layout} />
     </>
-  )
-}
+  );
+};
 
 export async function generateStaticParams() {
-  const payload = await getPayloadClient()
+  const payload = await getPayloadClient();
 
   const pages = await payload.find({
-    collection: 'pages',
+    collection: "pages",
     limit: 0,
-  })
+  });
 
-  return pages.docs.map(({ slug }) => ({ slug }))
+  return pages.docs.map(({ slug }) => ({ slug }));
 }
 
-export default Page
+export default Page;
diff --git a/examples/cms-payload/app/(site)/layout.tsx b/examples/cms-payload/app/(site)/layout.tsx
index 1e8bfc5140..179003a3c1 100644
--- a/examples/cms-payload/app/(site)/layout.tsx
+++ b/examples/cms-payload/app/(site)/layout.tsx
@@ -1,14 +1,14 @@
-import Layout from '../../components/Layout'
-import { getPayloadClient } from '../../payload/payloadClient'
+import Layout from "../../components/Layout";
+import { getPayloadClient } from "../../payload/payloadClient";
 
 const SiteLayout = async ({ children }: { children: React.ReactNode }) => {
-  const payload = await getPayloadClient()
+  const payload = await getPayloadClient();
 
   const mainMenu = await payload.findGlobal({
-    slug: 'main-menu',
-  })
+    slug: "main-menu",
+  });
 
-  return <Layout mainMenu={mainMenu}>{children}</Layout>
-}
+  return <Layout mainMenu={mainMenu}>{children}</Layout>;
+};
 
-export default SiteLayout
+export default SiteLayout;
diff --git a/examples/cms-payload/app/(site)/page.tsx b/examples/cms-payload/app/(site)/page.tsx
index 21a55ae54c..37d1d7f30a 100644
--- a/examples/cms-payload/app/(site)/page.tsx
+++ b/examples/cms-payload/app/(site)/page.tsx
@@ -1,3 +1,3 @@
-import Page from './[slug]/page'
+import Page from "./[slug]/page";
 
-export default Page
+export default Page;
diff --git a/examples/cms-payload/app/layout.tsx b/examples/cms-payload/app/layout.tsx
index 08eaa94fdc..15cf06610f 100644
--- a/examples/cms-payload/app/layout.tsx
+++ b/examples/cms-payload/app/layout.tsx
@@ -1,11 +1,11 @@
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html>
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/cms-payload/components/AdminBar/index.tsx b/examples/cms-payload/components/AdminBar/index.tsx
index 71e2472062..ced53aa179 100644
--- a/examples/cms-payload/components/AdminBar/index.tsx
+++ b/examples/cms-payload/components/AdminBar/index.tsx
@@ -1,28 +1,28 @@
-'use client'
+"use client";
 
-import React, { useState } from 'react'
+import React, { useState } from "react";
 import {
   PayloadMeUser,
   PayloadAdminBarProps,
   PayloadAdminBar,
-} from 'payload-admin-bar'
-import { Gutter } from '../Gutter'
-import classes from './index.module.scss'
+} from "payload-admin-bar";
+import { Gutter } from "../Gutter";
+import classes from "./index.module.scss";
 
-const Title: React.FC = () => <span>Payload + Vercel</span>
+const Title: React.FC = () => <span>Payload + Vercel</span>;
 
 export const AdminBar: React.FC<{
-  adminBarProps: PayloadAdminBarProps
+  adminBarProps: PayloadAdminBarProps;
 }> = (props) => {
-  const { adminBarProps } = props
+  const { adminBarProps } = props;
 
-  const [user, setUser] = useState<PayloadMeUser>()
+  const [user, setUser] = useState<PayloadMeUser>();
 
   return (
     <div
       className={[classes.adminBar, user && classes.show]
         .filter(Boolean)
-        .join(' ')}
+        .join(" ")}
     >
       <Gutter className={classes.blockContainer}>
         <PayloadAdminBar
@@ -37,13 +37,13 @@ export const AdminBar: React.FC<{
           }}
           logo={<Title />}
           style={{
-            position: 'relative',
-            zIndex: 'unset',
+            position: "relative",
+            zIndex: "unset",
             padding: 0,
-            backgroundColor: 'transparent',
+            backgroundColor: "transparent",
           }}
         />
       </Gutter>
     </div>
-  )
-}
+  );
+};
diff --git a/examples/cms-payload/components/BackgroundColor/index.tsx b/examples/cms-payload/components/BackgroundColor/index.tsx
index a3b318e3bc..c2485c7b6c 100644
--- a/examples/cms-payload/components/BackgroundColor/index.tsx
+++ b/examples/cms-payload/components/BackgroundColor/index.tsx
@@ -1,25 +1,25 @@
-'use client'
+"use client";
 
-import React, { useContext, createContext } from 'react'
-import { VerticalPadding, VerticalPaddingOptions } from '../VerticalPadding'
-import classes from './index.module.scss'
+import React, { useContext, createContext } from "react";
+import { VerticalPadding, VerticalPaddingOptions } from "../VerticalPadding";
+import classes from "./index.module.scss";
 
-type BackgroundColorField = 'white' | 'black'
+type BackgroundColorField = "white" | "black";
 
 export const BackgroundColorContext =
-  createContext<BackgroundColorField>('white')
+  createContext<BackgroundColorField>("white");
 
 export const useBackgroundColor = (): BackgroundColorField =>
-  useContext(BackgroundColorContext)
+  useContext(BackgroundColorContext);
 
 type Props = {
-  color?: BackgroundColorField
-  paddingTop?: VerticalPaddingOptions
-  paddingBottom?: VerticalPaddingOptions
-  className?: string
-  children?: React.ReactNode
-  id?: string
-}
+  color?: BackgroundColorField;
+  paddingTop?: VerticalPaddingOptions;
+  paddingBottom?: VerticalPaddingOptions;
+  className?: string;
+  children?: React.ReactNode;
+  id?: string;
+};
 
 export const BackgroundColor: React.FC<Props> = (props) => {
   const {
@@ -28,13 +28,13 @@ export const BackgroundColor: React.FC<Props> = (props) => {
     children,
     paddingTop,
     paddingBottom,
-    color = 'white',
-  } = props
+    color = "white",
+  } = props;
 
   return (
     <div
       id={id}
-      className={[classes[color], className].filter(Boolean).join(' ')}
+      className={[classes[color], className].filter(Boolean).join(" ")}
     >
       <BackgroundColorContext.Provider value={color}>
         <VerticalPadding top={paddingTop} bottom={paddingBottom}>
@@ -42,5 +42,5 @@ export const BackgroundColor: React.FC<Props> = (props) => {
         </VerticalPadding>
       </BackgroundColorContext.Provider>
     </div>
-  )
-}
+  );
+};
diff --git a/examples/cms-payload/components/Blocks/CallToAction/index.module.scss b/examples/cms-payload/components/Blocks/CallToAction/index.module.scss
index 266e3ead3a..f4704f66c1 100644
--- a/examples/cms-payload/components/Blocks/CallToAction/index.module.scss
+++ b/examples/cms-payload/components/Blocks/CallToAction/index.module.scss
@@ -1,4 +1,4 @@
-@use '../.../../../../css/queries.scss' as *;
+@use "../.../../../../css/queries.scss" as *;
 
 $spacer-h: calc(var(--block-padding) / 2);
 
diff --git a/examples/cms-payload/components/Blocks/CallToAction/index.tsx b/examples/cms-payload/components/Blocks/CallToAction/index.tsx
index 4c9eb5da8b..015e152dab 100644
--- a/examples/cms-payload/components/Blocks/CallToAction/index.tsx
+++ b/examples/cms-payload/components/Blocks/CallToAction/index.tsx
@@ -1,42 +1,42 @@
-import React from 'react'
-import { Cell, Grid } from '@faceless-ui/css-grid'
-import { Page } from '../../../payload-types'
-import { BackgroundColor } from '../../BackgroundColor'
-import { Gutter } from '../../Gutter'
-import { CMSLink } from '../../Link'
-import RichText from '../../RichText'
+import React from "react";
+import { Cell, Grid } from "@faceless-ui/css-grid";
+import { Page } from "../../../payload-types";
+import { BackgroundColor } from "../../BackgroundColor";
+import { Gutter } from "../../Gutter";
+import { CMSLink } from "../../Link";
+import RichText from "../../RichText";
 
-import classes from './index.module.scss'
+import classes from "./index.module.scss";
 
 type Props = {
-  ctaBackgroundColor?: 'white' | 'black'
+  ctaBackgroundColor?: "white" | "black";
   richText: {
-    [k: string]: unknown
-  }[]
+    [k: string]: unknown;
+  }[];
   links: {
     link: {
-      type?: 'reference' | 'custom'
-      newTab?: boolean
+      type?: "reference" | "custom";
+      newTab?: boolean;
       reference: {
-        value: string | Page
-        relationTo: 'pages'
-      }
-      url: string
-      label: string
-    }
-    id?: string
-  }[]
-  id?: string
-  blockName?: string
-  blockType: 'cta'
-}
+        value: string | Page;
+        relationTo: "pages";
+      };
+      url: string;
+      label: string;
+    };
+    id?: string;
+  }[];
+  id?: string;
+  blockName?: string;
+  blockType: "cta";
+};
 export const CallToActionBlock: React.FC<Props> = ({
   ctaBackgroundColor,
   links,
   richText,
 }) => {
   const oppositeBackgroundColor =
-    ctaBackgroundColor === 'white' ? 'black' : 'white'
+    ctaBackgroundColor === "white" ? "black" : "white";
 
   return (
     <Gutter>
@@ -59,7 +59,7 @@ export const CallToActionBlock: React.FC<Props> = ({
             >
               <div className={classes.linkGroup}>
                 {(links || []).map(({ link }, i) => {
-                  return <CMSLink key={i} {...link} />
+                  return <CMSLink key={i} {...link} />;
                 })}
               </div>
             </Cell>
@@ -67,5 +67,5 @@ export const CallToActionBlock: React.FC<Props> = ({
         </div>
       </BackgroundColor>
     </Gutter>
-  )
-}
+  );
+};
diff --git a/examples/cms-payload/components/Blocks/Content/index.tsx b/examples/cms-payload/components/Blocks/Content/index.tsx
index 1aa88b834e..7315e947f3 100644
--- a/examples/cms-payload/components/Blocks/Content/index.tsx
+++ b/examples/cms-payload/components/Blocks/Content/index.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
-import { Grid, Cell } from '@faceless-ui/css-grid'
-import { Page } from '../../../payload-types'
-import RichText from '../../RichText'
-import { Gutter } from '../../Gutter'
-import { CMSLink } from '../../Link'
-import classes from './index.module.scss'
+import React from "react";
+import { Grid, Cell } from "@faceless-ui/css-grid";
+import { Page } from "../../../payload-types";
+import RichText from "../../RichText";
+import { Gutter } from "../../Gutter";
+import { CMSLink } from "../../Link";
+import classes from "./index.module.scss";
 
-type Props = Extract<Page['layout'][0], { blockType: 'content' }>
+type Props = Extract<Page["layout"][0], { blockType: "content" }>;
 
 const Columns: React.FC<Props> = ({
   layout,
@@ -15,7 +15,7 @@ const Columns: React.FC<Props> = ({
   columnThree,
 }) => {
   switch (layout) {
-    case 'oneColumn': {
+    case "oneColumn": {
       return (
         <Cell cols={9} colsM={4}>
           <RichText content={columnOne.richText} />
@@ -23,17 +23,17 @@ const Columns: React.FC<Props> = ({
             <CMSLink className={classes.link} {...columnOne.link} />
           )}
         </Cell>
-      )
+      );
     }
 
-    case 'halfAndHalf':
-    case 'twoThirdsOneThird': {
-      let col1Cols = 6
-      let col2Cols = 6
+    case "halfAndHalf":
+    case "twoThirdsOneThird": {
+      let col1Cols = 6;
+      let col2Cols = 6;
 
-      if (layout === 'twoThirdsOneThird') {
-        col1Cols = 8
-        col2Cols = 4
+      if (layout === "twoThirdsOneThird") {
+        col1Cols = 8;
+        col2Cols = 4;
       }
 
       return (
@@ -51,10 +51,10 @@ const Columns: React.FC<Props> = ({
             )}
           </Cell>
         </React.Fragment>
-      )
+      );
     }
 
-    case 'threeColumns': {
+    case "threeColumns": {
       return (
         <React.Fragment>
           <Cell cols={4} colsM={4}>
@@ -76,14 +76,14 @@ const Columns: React.FC<Props> = ({
             )}
           </Cell>
         </React.Fragment>
-      )
+      );
     }
     default:
-      break
+      break;
   }
 
-  return null
-}
+  return null;
+};
 
 export const ContentBlock: React.FC<Props> = (props) => {
   return (
@@ -92,5 +92,5 @@ export const ContentBlock: React.FC<Props> = (props) => {
         <Columns {...props} />
       </Grid>
     </Gutter>
-  )
-}
+  );
+};
diff --git a/examples/cms-payload/components/Blocks/MediaBlock/index.tsx b/examples/cms-payload/components/Blocks/MediaBlock/index.tsx
index cd194198d0..d46f738859 100644
--- a/examples/cms-payload/components/Blocks/MediaBlock/index.tsx
+++ b/examples/cms-payload/components/Blocks/MediaBlock/index.tsx
@@ -1,26 +1,26 @@
-import React from 'react'
-import { Gutter } from '../../Gutter'
-import { Media } from '../../Media'
-import { Media as MediaType } from '../../../payload-types'
-import RichText from '../../RichText'
-import classes from './index.module.scss'
+import React from "react";
+import { Gutter } from "../../Gutter";
+import { Media } from "../../Media";
+import { Media as MediaType } from "../../../payload-types";
+import RichText from "../../RichText";
+import classes from "./index.module.scss";
 
 export const MediaBlock: React.FC<{
-  media?: MediaType
-  caption?: string
-  position?: 'default' | 'fullscreen'
-  mediaBackgroundColor?: string
+  media?: MediaType;
+  caption?: string;
+  position?: "default" | "fullscreen";
+  mediaBackgroundColor?: string;
 }> = (props) => {
-  const { media, caption, position = 'default' } = props
+  const { media, caption, position = "default" } = props;
 
   return (
     <div className={classes.mediaBlock}>
-      {position === 'fullscreen' && (
+      {position === "fullscreen" && (
         <div>
           <Media resource={media} />
         </div>
       )}
-      {position === 'default' && (
+      {position === "default" && (
         <Gutter>
           <div>
             <Media resource={media} />
@@ -33,5 +33,5 @@ export const MediaBlock: React.FC<{
         </Gutter>
       )}
     </div>
-  )
-}
+  );
+};
diff --git a/examples/cms-payload/components/Blocks/index.tsx b/examples/cms-payload/components/Blocks/index.tsx
index 7ac6f1ebc5..c5d2ce4cdb 100644
--- a/examples/cms-payload/components/Blocks/index.tsx
+++ b/examples/cms-payload/components/Blocks/index.tsx
@@ -1,53 +1,53 @@
-'use client'
+"use client";
 
-import React, { Fragment } from 'react'
-import { Page } from '../../payload-types'
-import { toKebabCase } from '../../utilities/toKebabCase'
-import { BackgroundColor } from '../BackgroundColor'
-import { VerticalPaddingOptions } from '../VerticalPadding'
-import { CallToActionBlock } from './CallToAction'
-import { ContentBlock } from './Content'
-import { MediaBlock } from './MediaBlock'
+import React, { Fragment } from "react";
+import { Page } from "../../payload-types";
+import { toKebabCase } from "../../utilities/toKebabCase";
+import { BackgroundColor } from "../BackgroundColor";
+import { VerticalPaddingOptions } from "../VerticalPadding";
+import { CallToActionBlock } from "./CallToAction";
+import { ContentBlock } from "./Content";
+import { MediaBlock } from "./MediaBlock";
 
 const blockComponents = {
   cta: CallToActionBlock,
   content: ContentBlock,
   mediaBlock: MediaBlock,
-}
+};
 
 const Blocks: React.FC<{
-  blocks: Page['layout']
+  blocks: Page["layout"];
 }> = (props) => {
-  const { blocks } = props
+  const { blocks } = props;
 
-  const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0
+  const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0;
 
   if (hasBlocks) {
     return (
       <Fragment>
         {blocks.map((block, index) => {
-          const { blockName, blockType } = block
+          const { blockName, blockType } = block;
 
           if (blockType && blockType in blockComponents) {
-            const Block = blockComponents[blockType]
-            const backgroundColor = block[`${blockType}BackgroundColor`]
-            const prevBlock = blocks[index - 1]
-            const nextBlock = blocks[index + 1]
+            const Block = blockComponents[blockType];
+            const backgroundColor = block[`${blockType}BackgroundColor`];
+            const prevBlock = blocks[index - 1];
+            const nextBlock = blocks[index + 1];
 
             const prevBlockBackground =
-              prevBlock?.[`${prevBlock.blockType}BackgroundColor`]
+              prevBlock?.[`${prevBlock.blockType}BackgroundColor`];
             const nextBlockBackground =
-              nextBlock?.[`${nextBlock.blockType}BackgroundColor`]
+              nextBlock?.[`${nextBlock.blockType}BackgroundColor`];
 
-            let paddingTop: VerticalPaddingOptions = 'large'
-            let paddingBottom: VerticalPaddingOptions = 'large'
+            let paddingTop: VerticalPaddingOptions = "large";
+            let paddingBottom: VerticalPaddingOptions = "large";
 
             if (backgroundColor === prevBlockBackground) {
-              paddingTop = 'medium'
+              paddingTop = "medium";
             }
 
             if (backgroundColor === nextBlockBackground) {
-              paddingBottom = 'medium'
+              paddingBottom = "medium";
             }
 
             if (Block) {
@@ -64,16 +64,16 @@ const Blocks: React.FC<{
                     {...block}
                   />
                 </BackgroundColor>
-              )
+              );
             }
           }
-          return null
+          return null;
         })}
       </Fragment>
-    )
+    );
   }
 
-  return null
-}
+  return null;
+};
 
-export default Blocks
+export default Blocks;
diff --git a/examples/cms-payload/components/Button/index.module.scss b/examples/cms-payload/components/Button/index.module.scss
index 56a0141bd3..335bf095e0 100644
--- a/examples/cms-payload/components/Button/index.module.scss
+++ b/examples/cms-payload/components/Button/index.module.scss
@@ -1,4 +1,4 @@
-@import '../../css/type.scss';
+@import "../../css/type.scss";
 
 .content {
   display: flex;
diff --git a/examples/cms-payload/components/Button/index.tsx b/examples/cms-payload/components/Button/index.tsx
index a60f7ae57b..c9b253f553 100644
--- a/examples/cms-payload/components/Button/index.tsx
+++ b/examples/cms-payload/components/Button/index.tsx
@@ -1,31 +1,31 @@
-import Link from 'next/link'
-import React, { ElementType } from 'react'
-import { useBackgroundColor } from '../BackgroundColor'
-import { Chevron } from '../icons/Chevron'
-import classes from './index.module.scss'
+import Link from "next/link";
+import React, { ElementType } from "react";
+import { useBackgroundColor } from "../BackgroundColor";
+import { Chevron } from "../icons/Chevron";
+import classes from "./index.module.scss";
 
 export type Props = {
-  label?: string
-  appearance?: 'default' | 'primary' | 'secondary'
-  el?: 'button' | 'link' | 'a'
-  onClick?: () => void
-  href?: string
-  newTab?: boolean
-  className?: string
-}
+  label?: string;
+  appearance?: "default" | "primary" | "secondary";
+  el?: "button" | "link" | "a";
+  onClick?: () => void;
+  href?: string;
+  newTab?: boolean;
+  className?: string;
+};
 
 export const Button: React.FC<Props> = ({
-  el = 'button',
+  el = "button",
   label,
   newTab,
   href,
   appearance,
   className: classNameFromProps,
 }) => {
-  const backgroundColor = useBackgroundColor()
+  const backgroundColor = useBackgroundColor();
   const newTabProps = newTab
-    ? { target: '_blank', rel: 'noopener noreferrer' }
-    : {}
+    ? { target: "_blank", rel: "noopener noreferrer" }
+    : {};
   const className = [
     classNameFromProps,
     classes[`appearance--${appearance}`],
@@ -33,28 +33,28 @@ export const Button: React.FC<Props> = ({
     classes.button,
   ]
     .filter(Boolean)
-    .join(' ')
+    .join(" ");
 
   const content = (
     <div className={classes.content}>
       <Chevron />
       <span className={classes.label}>{label}</span>
     </div>
-  )
+  );
 
-  if (el === 'link') {
+  if (el === "link") {
     return (
-      <Link {...newTabProps} href={href || ''} className={className}>
+      <Link {...newTabProps} href={href || ""} className={className}>
         {content}
       </Link>
-    )
+    );
   }
 
-  const Element: ElementType = el
+  const Element: ElementType = el;
 
   return (
     <Element href={href} className={className} {...newTabProps}>
       {content}
     </Element>
-  )
-}
+  );
+};
diff --git a/examples/cms-payload/components/Gutter/index.tsx b/examples/cms-payload/components/Gutter/index.tsx
index fe66a5d9c9..f6539b6938 100644
--- a/examples/cms-payload/components/Gutter/index.tsx
+++ b/examples/cms-payload/components/Gutter/index.tsx
@@ -1,17 +1,17 @@
-import React, { forwardRef, Ref } from 'react'
-import classes from './index.module.scss'
+import React, { forwardRef, Ref } from "react";
+import classes from "./index.module.scss";
 
 type Props = {
-  left?: boolean
-  right?: boolean
-  className?: string
-  children: React.ReactNode
-  ref?: Ref<HTMLDivElement>
-}
+  left?: boolean;
+  right?: boolean;
+  className?: string;
+  children: React.ReactNode;
+  ref?: Ref<HTMLDivElement>;
+};
 
 export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>(
   (props, ref) => {
-    const { left = true, right = true, className, children } = props
+    const { left = true, right = true, className, children } = props;
 
     return (
       <div
@@ -22,12 +22,12 @@ export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>(
           className,
         ]
           .filter(Boolean)
-          .join(' ')}
+          .join(" ")}
       >
         {children}
       </div>
-    )
-  }
-)
+    );
+  },
+);
 
-Gutter.displayName = 'Gutter'
+Gutter.displayName = "Gutter";
diff --git a/examples/cms-payload/components/Header/MobileMenuModal.tsx b/examples/cms-payload/components/Header/MobileMenuModal.tsx
index ffa0085ee4..05de38302c 100644
--- a/examples/cms-payload/components/Header/MobileMenuModal.tsx
+++ b/examples/cms-payload/components/Header/MobileMenuModal.tsx
@@ -1,17 +1,17 @@
-import React from 'react'
-import { Modal } from '@faceless-ui/modal'
-import { HeaderBar } from '.'
-import { MainMenu } from '../../payload-types'
-import { Gutter } from '../Gutter'
-import { CMSLink } from '../Link'
+import React from "react";
+import { Modal } from "@faceless-ui/modal";
+import { HeaderBar } from ".";
+import { MainMenu } from "../../payload-types";
+import { Gutter } from "../Gutter";
+import { CMSLink } from "../Link";
 
-import classes from './mobileMenuModal.module.scss'
+import classes from "./mobileMenuModal.module.scss";
 
 type Props = {
-  navItems: MainMenu['navItems']
-}
+  navItems: MainMenu["navItems"];
+};
 
-export const slug = 'menu-modal'
+export const slug = "menu-modal";
 
 export const MobileMenuModal: React.FC<Props> = ({ navItems }) => {
   return (
@@ -21,10 +21,10 @@ export const MobileMenuModal: React.FC<Props> = ({ navItems }) => {
       <Gutter>
         <div className={classes.mobileMenuItems}>
           {navItems.map(({ link }, i) => {
-            return <CMSLink className={classes.menuItem} key={i} {...link} />
+            return <CMSLink className={classes.menuItem} key={i} {...link} />;
           })}
         </div>
       </Gutter>
     </Modal>
-  )
-}
+  );
+};
diff --git a/examples/cms-payload/components/Header/index.module.scss b/examples/cms-payload/components/Header/index.module.scss
index 167963d422..dda2b2feb2 100644
--- a/examples/cms-payload/components/Header/index.module.scss
+++ b/examples/cms-payload/components/Header/index.module.scss
@@ -1,4 +1,4 @@
-@use '../../css/queries.scss' as *;
+@use "../../css/queries.scss" as *;
 
 .header {
   padding: var(--base) 0;
@@ -26,7 +26,7 @@
   cursor: pointer;
   display: none;
 
-  &[aria-expanded='true'] {
+  &[aria-expanded="true"] {
     transform: rotate(-25deg);
   }
 
diff --git a/examples/cms-payload/components/Header/index.tsx b/examples/cms-payload/components/Header/index.tsx
index 80c98ff8c3..0a1bd678b3 100644
--- a/examples/cms-payload/components/Header/index.tsx
+++ b/examples/cms-payload/components/Header/index.tsx
@@ -1,18 +1,18 @@
-import { ModalToggler } from '@faceless-ui/modal'
-import Link from 'next/link'
-import React from 'react'
-import { MainMenu } from '../../payload-types'
-import { Gutter } from '../Gutter'
-import { MenuIcon } from '../icons/Menu'
-import { CMSLink } from '../Link'
-import { Logo } from '../Logo'
-import { MobileMenuModal, slug as menuModalSlug } from './MobileMenuModal'
+import { ModalToggler } from "@faceless-ui/modal";
+import Link from "next/link";
+import React from "react";
+import { MainMenu } from "../../payload-types";
+import { Gutter } from "../Gutter";
+import { MenuIcon } from "../icons/Menu";
+import { CMSLink } from "../Link";
+import { Logo } from "../Logo";
+import { MobileMenuModal, slug as menuModalSlug } from "./MobileMenuModal";
 
-import classes from './index.module.scss'
+import classes from "./index.module.scss";
 
 type HeaderBarProps = {
-  children?: React.ReactNode
-}
+  children?: React.ReactNode;
+};
 export const HeaderBar: React.FC<HeaderBarProps> = ({ children }) => {
   return (
     <header className={classes.header}>
@@ -31,23 +31,23 @@ export const HeaderBar: React.FC<HeaderBarProps> = ({ children }) => {
         </ModalToggler>
       </Gutter>
     </header>
-  )
-}
+  );
+};
 
 export const Header: React.FC<{ mainMenu: MainMenu }> = ({ mainMenu }) => {
-  const navItems = mainMenu?.navItems || []
+  const navItems = mainMenu?.navItems || [];
 
   return (
     <>
       <HeaderBar>
         <nav className={classes.nav}>
           {navItems.map(({ link }, i) => {
-            return <CMSLink key={i} {...link} />
+            return <CMSLink key={i} {...link} />;
           })}
         </nav>
       </HeaderBar>
 
       <MobileMenuModal navItems={navItems} />
     </>
-  )
-}
+  );
+};
diff --git a/examples/cms-payload/components/Header/mobileMenuModal.module.scss b/examples/cms-payload/components/Header/mobileMenuModal.module.scss
index c79e25740d..50874c71b0 100644
--- a/examples/cms-payload/components/Header/mobileMenuModal.module.scss
+++ b/examples/cms-payload/components/Header/mobileMenuModal.module.scss
@@ -1,4 +1,4 @@
-@use '../../css/common.scss' as *;
+@use "../../css/common.scss" as *;
 
 .mobileMenuModal {
   position: relative;
diff --git a/examples/cms-payload/components/Hero/HighImpact/index.module.scss b/examples/cms-payload/components/Hero/HighImpact/index.module.scss
index 02731f33d4..1c6283a7e9 100644
--- a/examples/cms-payload/components/Hero/HighImpact/index.module.scss
+++ b/examples/cms-payload/components/Hero/HighImpact/index.module.scss
@@ -1,4 +1,4 @@
-@import '../../../css/queries';
+@import "../../../css/queries";
 
 .hero {
   padding-top: calc(var(--base) * 3);
diff --git a/examples/cms-payload/components/Hero/HighImpact/index.tsx b/examples/cms-payload/components/Hero/HighImpact/index.tsx
index 591e954273..1de6c34136 100644
--- a/examples/cms-payload/components/Hero/HighImpact/index.tsx
+++ b/examples/cms-payload/components/Hero/HighImpact/index.tsx
@@ -1,14 +1,14 @@
-import { Cell, Grid } from '@faceless-ui/css-grid'
-import React from 'react'
-import { Page } from '../../../payload-types'
-import { Gutter } from '../../Gutter'
-import { CMSLink } from '../../Link'
-import { Media } from '../../Media'
-import RichText from '../../RichText'
+import { Cell, Grid } from "@faceless-ui/css-grid";
+import React from "react";
+import { Page } from "../../../payload-types";
+import { Gutter } from "../../Gutter";
+import { CMSLink } from "../../Link";
+import { Media } from "../../Media";
+import RichText from "../../RichText";
 
-import classes from './index.module.scss'
+import classes from "./index.module.scss";
 
-export const HighImpactHero: React.FC<Page['hero']> = ({
+export const HighImpactHero: React.FC<Page["hero"]> = ({
   richText,
   media,
   links,
@@ -28,12 +28,12 @@ export const HighImpactHero: React.FC<Page['hero']> = ({
                 <li key={i}>
                   <CMSLink {...link} />
                 </li>
-              )
+              );
             })}
           </ul>
         )}
-        {typeof media === 'object' && <Media resource={media} />}
+        {typeof media === "object" && <Media resource={media} />}
       </div>
     </Gutter>
-  )
-}
+  );
+};
diff --git a/examples/cms-payload/components/Hero/LowImpact/index.module.scss b/examples/cms-payload/components/Hero/LowImpact/index.module.scss
index 89e0885da2..4cd2f1475c 100644
--- a/examples/cms-payload/components/Hero/LowImpact/index.module.scss
+++ b/examples/cms-payload/components/Hero/LowImpact/index.module.scss
@@ -1,4 +1,4 @@
-@use '../../../css/type.scss' as *;
+@use "../../../css/type.scss" as *;
 
 .richText {
   h1 {
diff --git a/examples/cms-payload/components/Hero/LowImpact/index.tsx b/examples/cms-payload/components/Hero/LowImpact/index.tsx
index be2340dd2e..f45c0b65d6 100644
--- a/examples/cms-payload/components/Hero/LowImpact/index.tsx
+++ b/examples/cms-payload/components/Hero/LowImpact/index.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
-import { Cell, Grid } from '@faceless-ui/css-grid'
-import { Page } from '../../../payload-types'
-import { Gutter } from '../../Gutter'
-import RichText from '../../RichText'
-import { VerticalPadding } from '../../VerticalPadding'
+import React from "react";
+import { Cell, Grid } from "@faceless-ui/css-grid";
+import { Page } from "../../../payload-types";
+import { Gutter } from "../../Gutter";
+import RichText from "../../RichText";
+import { VerticalPadding } from "../../VerticalPadding";
 
-import classes from './index.module.scss'
+import classes from "./index.module.scss";
 
-export const LowImpactHero: React.FC<Page['hero']> = ({ richText }) => {
+export const LowImpactHero: React.FC<Page["hero"]> = ({ richText }) => {
   return (
     <Gutter>
       <Grid>
@@ -18,5 +18,5 @@ export const LowImpactHero: React.FC<Page['hero']> = ({ richText }) => {
         </Cell>
       </Grid>
     </Gutter>
-  )
-}
+  );
+};
diff --git a/examples/cms-payload/components/Hero/MediumImpact/index.module.scss b/examples/cms-payload/components/Hero/MediumImpact/index.module.scss
index ad7b2b09d3..33edc7ab25 100644
--- a/examples/cms-payload/components/Hero/MediumImpact/index.module.scss
+++ b/examples/cms-payload/components/Hero/MediumImpact/index.module.scss
@@ -1,4 +1,4 @@
-@use '../../../css/common.scss' as *;
+@use "../../../css/common.scss" as *;
 
 .hero {
   padding-top: calc(var(--base) * 3);
@@ -16,7 +16,7 @@
   }
 
   &::after {
-    content: '';
+    content: "";
     display: block;
     position: absolute;
     width: 100vw;
diff --git a/examples/cms-payload/components/Hero/MediumImpact/index.tsx b/examples/cms-payload/components/Hero/MediumImpact/index.tsx
index bb5b66643f..e568bf2065 100644
--- a/examples/cms-payload/components/Hero/MediumImpact/index.tsx
+++ b/examples/cms-payload/components/Hero/MediumImpact/index.tsx
@@ -1,15 +1,15 @@
-import { Cell, Grid } from '@faceless-ui/css-grid'
-import React from 'react'
-import { Page } from '../../../payload-types'
-import { Gutter } from '../../Gutter'
-import { CMSLink } from '../../Link'
-import { Media } from '../../Media'
-import RichText from '../../RichText'
+import { Cell, Grid } from "@faceless-ui/css-grid";
+import React from "react";
+import { Page } from "../../../payload-types";
+import { Gutter } from "../../Gutter";
+import { CMSLink } from "../../Link";
+import { Media } from "../../Media";
+import RichText from "../../RichText";
 
-import classes from './index.module.scss'
+import classes from "./index.module.scss";
 
-export const MediumImpactHero: React.FC<Page['hero']> = (props) => {
-  const { richText, media, links } = props
+export const MediumImpactHero: React.FC<Page["hero"]> = (props) => {
+  const { richText, media, links } = props;
 
   return (
     <Gutter className={classes.hero}>
@@ -23,17 +23,17 @@ export const MediumImpactHero: React.FC<Page['hero']> = (props) => {
                   <li key={i}>
                     <CMSLink className={classes.link} {...link} />
                   </li>
-                )
+                );
               })}
             </ul>
           )}
         </Cell>
         <Cell cols={7} colsM={4}>
-          {typeof media === 'object' && (
+          {typeof media === "object" && (
             <Media className={classes.media} resource={media} />
           )}
         </Cell>
       </Grid>
     </Gutter>
-  )
-}
+  );
+};
diff --git a/examples/cms-payload/components/Hero/index.tsx b/examples/cms-payload/components/Hero/index.tsx
index 9db47889c9..4e885d79ee 100644
--- a/examples/cms-payload/components/Hero/index.tsx
+++ b/examples/cms-payload/components/Hero/index.tsx
@@ -1,21 +1,21 @@
-'use client'
+"use client";
 
-import React from 'react'
-import { Page } from '../../payload-types'
-import { HighImpactHero } from './HighImpact'
-import { MediumImpactHero } from './MediumImpact'
-import { LowImpactHero } from './LowImpact'
+import React from "react";
+import { Page } from "../../payload-types";
+import { HighImpactHero } from "./HighImpact";
+import { MediumImpactHero } from "./MediumImpact";
+import { LowImpactHero } from "./LowImpact";
 
 const heroes = {
   highImpact: HighImpactHero,
   mediumImpact: MediumImpactHero,
   lowImpact: LowImpactHero,
-}
+};
 
-export const Hero: React.FC<Page['hero']> = (props) => {
-  const { type } = props
-  const HeroToRender = heroes[type]
+export const Hero: React.FC<Page["hero"]> = (props) => {
+  const { type } = props;
+  const HeroToRender = heroes[type];
 
-  if (!HeroToRender) return null
-  return <HeroToRender {...props} />
-}
+  if (!HeroToRender) return null;
+  return <HeroToRender {...props} />;
+};
diff --git a/examples/cms-payload/components/Label/index.module.scss b/examples/cms-payload/components/Label/index.module.scss
index bf78e79c4d..4144aeb523 100644
--- a/examples/cms-payload/components/Label/index.module.scss
+++ b/examples/cms-payload/components/Label/index.module.scss
@@ -1,4 +1,4 @@
-@import '../../css/type.scss';
+@import "../../css/type.scss";
 
 .label {
   @extend %label;
diff --git a/examples/cms-payload/components/Label/index.tsx b/examples/cms-payload/components/Label/index.tsx
index e401184f91..6c4f3a4be4 100644
--- a/examples/cms-payload/components/Label/index.tsx
+++ b/examples/cms-payload/components/Label/index.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
-import classes from './index.module.scss'
+import React from "react";
+import classes from "./index.module.scss";
 
 export const Label: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  return <p className={classes.label}>{children}</p>
-}
+  return <p className={classes.label}>{children}</p>;
+};
diff --git a/examples/cms-payload/components/LargeBody/index.module.scss b/examples/cms-payload/components/LargeBody/index.module.scss
index 46543d854f..788b11eadc 100644
--- a/examples/cms-payload/components/LargeBody/index.module.scss
+++ b/examples/cms-payload/components/LargeBody/index.module.scss
@@ -1,4 +1,4 @@
-@import '../../css/type.scss';
+@import "../../css/type.scss";
 
 .largeBody {
   @extend %large-body;
diff --git a/examples/cms-payload/components/LargeBody/index.tsx b/examples/cms-payload/components/LargeBody/index.tsx
index 5656b6556d..5316ca954a 100644
--- a/examples/cms-payload/components/LargeBody/index.tsx
+++ b/examples/cms-payload/components/LargeBody/index.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
-import classes from './index.module.scss'
+import React from "react";
+import classes from "./index.module.scss";
 
 export const LargeBody: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  return <p className={classes.largeBody}>{children}</p>
-}
+  return <p className={classes.largeBody}>{children}</p>;
+};
diff --git a/examples/cms-payload/components/Layout/index.tsx b/examples/cms-payload/components/Layout/index.tsx
index 8bbcae3069..4f67ed7b30 100644
--- a/examples/cms-payload/components/Layout/index.tsx
+++ b/examples/cms-payload/components/Layout/index.tsx
@@ -1,17 +1,17 @@
-'use client'
+"use client";
 
-import { GridProvider } from '@faceless-ui/css-grid'
-import { ModalContainer, ModalProvider } from '@faceless-ui/modal'
-import React from 'react'
-import { Header } from '../Header'
-import { MainMenu } from '../../payload-types'
-import cssVariables from '../../cssVariables'
-import '../../css/app.scss'
+import { GridProvider } from "@faceless-ui/css-grid";
+import { ModalContainer, ModalProvider } from "@faceless-ui/modal";
+import React from "react";
+import { Header } from "../Header";
+import { MainMenu } from "../../payload-types";
+import cssVariables from "../../cssVariables";
+import "../../css/app.scss";
 
 type Props = {
-  mainMenu: MainMenu
-  children: React.ReactNode
-}
+  mainMenu: MainMenu;
+  children: React.ReactNode;
+};
 
 const Layout = ({ mainMenu, children }: Props): React.ReactElement => {
   return (
@@ -23,10 +23,10 @@ const Layout = ({ mainMenu, children }: Props): React.ReactElement => {
           l: cssVariables.breakpoints.l,
         }}
         colGap={{
-          s: '24px',
-          m: '48px',
-          l: '48px',
-          xl: '72px',
+          s: "24px",
+          m: "48px",
+          l: "48px",
+          xl: "72px",
         }}
         cols={{
           s: 4,
@@ -42,7 +42,7 @@ const Layout = ({ mainMenu, children }: Props): React.ReactElement => {
         </ModalProvider>
       </GridProvider>
     </React.Fragment>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;
diff --git a/examples/cms-payload/components/Link/index.tsx b/examples/cms-payload/components/Link/index.tsx
index 8b67e46cd4..281e634057 100644
--- a/examples/cms-payload/components/Link/index.tsx
+++ b/examples/cms-payload/components/Link/index.tsx
@@ -1,21 +1,21 @@
-import Link from 'next/link'
-import React from 'react'
-import { Page } from '../../payload-types'
-import { Button } from '../Button'
+import Link from "next/link";
+import React from "react";
+import { Page } from "../../payload-types";
+import { Button } from "../Button";
 
 type CMSLinkType = {
-  type?: 'custom' | 'reference'
-  url?: string
-  newTab?: boolean
+  type?: "custom" | "reference";
+  url?: string;
+  newTab?: boolean;
   reference?: {
-    value: string | Page
-    relationTo: 'pages'
-  }
-  label?: string
-  appearance?: 'default' | 'primary' | 'secondary'
-  children?: React.ReactNode
-  className?: string
-}
+    value: string | Page;
+    relationTo: "pages";
+  };
+  label?: string;
+  appearance?: "default" | "primary" | "secondary";
+  children?: React.ReactNode;
+  className?: string;
+};
 
 export const CMSLink: React.FC<CMSLinkType> = ({
   type,
@@ -28,24 +28,24 @@ export const CMSLink: React.FC<CMSLinkType> = ({
   className,
 }) => {
   const href =
-    type === 'reference' &&
-    typeof reference?.value === 'object' &&
+    type === "reference" &&
+    typeof reference?.value === "object" &&
     reference.value.slug
       ? `/${reference.value.slug}`
-      : url
+      : url;
 
   if (!appearance) {
     const newTabProps = newTab
-      ? { target: '_blank', rel: 'noopener noreferrer' }
-      : {}
+      ? { target: "_blank", rel: "noopener noreferrer" }
+      : {};
 
-    if (type === 'custom') {
+    if (type === "custom") {
       return (
         <a href={url} {...newTabProps} className={className}>
           {label && label}
           {children && children}
         </a>
-      )
+      );
     }
 
     if (href) {
@@ -54,7 +54,7 @@ export const CMSLink: React.FC<CMSLinkType> = ({
           {label && label}
           {children && children}
         </Link>
-      )
+      );
     }
   }
 
@@ -63,7 +63,7 @@ export const CMSLink: React.FC<CMSLinkType> = ({
     href,
     appearance,
     label,
-  }
+  };
 
-  return <Button className={className} {...buttonProps} el="link" />
-}
+  return <Button className={className} {...buttonProps} el="link" />;
+};
diff --git a/examples/cms-payload/components/Logo/index.tsx b/examples/cms-payload/components/Logo/index.tsx
index 77791d9d16..09d063a3e1 100644
--- a/examples/cms-payload/components/Logo/index.tsx
+++ b/examples/cms-payload/components/Logo/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 
 export const Logo: React.FC = () => {
   return (
@@ -50,5 +50,5 @@ export const Logo: React.FC = () => {
         fill="black"
       />
     </svg>
-  )
-}
+  );
+};
diff --git a/examples/cms-payload/components/Media/Image/index.tsx b/examples/cms-payload/components/Media/Image/index.tsx
index 7833d08bc6..43ebbbac3c 100644
--- a/examples/cms-payload/components/Media/Image/index.tsx
+++ b/examples/cms-payload/components/Media/Image/index.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import NextImage, { StaticImageData } from 'next/image'
-import classes from './index.module.scss'
-import cssVariables from '../../../cssVariables'
-import { Props } from '..'
+import React from "react";
+import NextImage, { StaticImageData } from "next/image";
+import classes from "./index.module.scss";
+import cssVariables from "../../../cssVariables";
+import { Props } from "..";
 
-const { breakpoints } = cssVariables
+const { breakpoints } = cssVariables;
 
 export const Image: React.FC<Props> = (props) => {
   const {
@@ -16,49 +16,49 @@ export const Image: React.FC<Props> = (props) => {
     fill,
     src: srcFromProps,
     alt: altFromProps,
-  } = props
+  } = props;
 
-  const [isLoading, setIsLoading] = React.useState(true)
+  const [isLoading, setIsLoading] = React.useState(true);
 
-  let width: number | undefined
-  let height: number | undefined
-  let alt = altFromProps
-  let src: StaticImageData | string = srcFromProps || ''
+  let width: number | undefined;
+  let height: number | undefined;
+  let alt = altFromProps;
+  let src: StaticImageData | string = srcFromProps || "";
 
-  if (!src && resource && typeof resource !== 'string') {
+  if (!src && resource && typeof resource !== "string") {
     const {
       width: fullWidth,
       height: fullHeight,
       filename: fullFilename,
       alt: altFromResource,
-    } = resource
+    } = resource;
 
-    width = fullWidth
-    height = fullHeight
-    alt = altFromResource
+    width = fullWidth;
+    height = fullHeight;
+    alt = altFromResource;
 
-    let filename = fullFilename
+    let filename = fullFilename;
 
-    src = `https://${process.env.NEXT_PUBLIC_S3_HOSTNAME}/${process.env.NEXT_PUBLIC_S3_BUCKET}/${filename}`
+    src = `https://${process.env.NEXT_PUBLIC_S3_HOSTNAME}/${process.env.NEXT_PUBLIC_S3_BUCKET}/${filename}`;
   }
 
   // NOTE: this is used by the browser to determine which image to download at different screen sizes
   const sizes = Object.entries(breakpoints)
     .map(([, value]) => `(max-width: ${value}px) ${value}px`)
-    .join(', ')
+    .join(", ");
 
   return (
     <NextImage
       className={[isLoading && classes.placeholder, classes.image, imgClassName]
         .filter(Boolean)
-        .join(' ')}
+        .join(" ")}
       src={src}
-      alt={alt || ''}
+      alt={alt || ""}
       onClick={onClick}
       onLoad={() => {
-        setIsLoading(false)
-        if (typeof onLoadFromProps === 'function') {
-          onLoadFromProps()
+        setIsLoading(false);
+        if (typeof onLoadFromProps === "function") {
+          onLoadFromProps();
         }
       }}
       fill={fill}
@@ -67,5 +67,5 @@ export const Image: React.FC<Props> = (props) => {
       sizes={sizes}
       priority={priority}
     />
-  )
-}
+  );
+};
diff --git a/examples/cms-payload/components/Media/Video/index.tsx b/examples/cms-payload/components/Media/Video/index.tsx
index c1815073a4..0118bff039 100644
--- a/examples/cms-payload/components/Media/Video/index.tsx
+++ b/examples/cms-payload/components/Media/Video/index.tsx
@@ -1,24 +1,24 @@
-import React, { useEffect, useRef } from 'react'
-import classes from './index.module.scss'
-import { Props } from '..'
+import React, { useEffect, useRef } from "react";
+import classes from "./index.module.scss";
+import { Props } from "..";
 
 export const Video: React.FC<Props> = (props) => {
-  const { videoClassName, resource, onClick } = props
+  const { videoClassName, resource, onClick } = props;
 
-  const videoRef = useRef<HTMLVideoElement>(null)
+  const videoRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
-    const { current: video } = videoRef
+    const { current: video } = videoRef;
     if (video) {
-      video.addEventListener('suspend', () => {
+      video.addEventListener("suspend", () => {
         // setShowFallback(true);
         // console.warn('Video was suspended, rendering fallback image.')
-      })
+      });
     }
-  }, [])
+  }, []);
 
-  if (resource && typeof resource !== 'string') {
-    const { filename } = resource
+  if (resource && typeof resource !== "string") {
+    const { filename } = resource;
 
     return (
       <video
@@ -27,14 +27,14 @@ export const Video: React.FC<Props> = (props) => {
         muted
         loop
         controls={false}
-        className={[classes.video, videoClassName].filter(Boolean).join(' ')}
+        className={[classes.video, videoClassName].filter(Boolean).join(" ")}
         onClick={onClick}
         ref={videoRef}
       >
         <source src={`${process.env.NEXT_PUBLIC_API_URL}/media/${filename}`} />
       </video>
-    )
+    );
   }
 
-  return null
-}
+  return null;
+};
diff --git a/examples/cms-payload/components/Media/index.tsx b/examples/cms-payload/components/Media/index.tsx
index 6a704cd81a..96549aed5d 100644
--- a/examples/cms-payload/components/Media/index.tsx
+++ b/examples/cms-payload/components/Media/index.tsx
@@ -1,31 +1,31 @@
-import React, { ElementType, Fragment, Ref } from 'react'
-import { Video } from './Video'
-import { Image } from './Image'
-import { StaticImageData } from 'next/image'
-import { Media as MediaType } from '../../payload-types'
+import React, { ElementType, Fragment, Ref } from "react";
+import { Video } from "./Video";
+import { Image } from "./Image";
+import { StaticImageData } from "next/image";
+import { Media as MediaType } from "../../payload-types";
 
 export type Props = {
-  src?: StaticImageData // for static media
-  alt?: string
-  resource?: MediaType // for Payload media
-  size?: string // for NextImage only
-  priority?: boolean // for NextImage only
-  fill?: boolean // for NextImage only
-  className?: string
-  imgClassName?: string
-  videoClassName?: string
-  htmlElement?: ElementType | null
-  onClick?: () => void
-  onLoad?: () => void
-  ref?: Ref<null | HTMLImageElement | HTMLVideoElement>
-}
+  src?: StaticImageData; // for static media
+  alt?: string;
+  resource?: MediaType; // for Payload media
+  size?: string; // for NextImage only
+  priority?: boolean; // for NextImage only
+  fill?: boolean; // for NextImage only
+  className?: string;
+  imgClassName?: string;
+  videoClassName?: string;
+  htmlElement?: ElementType | null;
+  onClick?: () => void;
+  onLoad?: () => void;
+  ref?: Ref<null | HTMLImageElement | HTMLVideoElement>;
+};
 
 export const Media: React.FC<Props> = (props) => {
-  const { className, resource, htmlElement = 'div' } = props
+  const { className, resource, htmlElement = "div" } = props;
 
   const isVideo =
-    typeof resource !== 'string' && resource?.mimeType?.includes('video')
-  const Tag = (htmlElement as ElementType) || Fragment
+    typeof resource !== "string" && resource?.mimeType?.includes("video");
+  const Tag = (htmlElement as ElementType) || Fragment;
 
   return (
     <Tag
@@ -41,5 +41,5 @@ export const Media: React.FC<Props> = (props) => {
         <Image {...props} /> // eslint-disable-line
       )}
     </Tag>
-  )
-}
+  );
+};
diff --git a/examples/cms-payload/components/RichText/index.tsx b/examples/cms-payload/components/RichText/index.tsx
index 743d93e2ef..845442fa67 100644
--- a/examples/cms-payload/components/RichText/index.tsx
+++ b/examples/cms-payload/components/RichText/index.tsx
@@ -1,21 +1,21 @@
-import React from 'react'
-import serialize from './serialize'
+import React from "react";
+import serialize from "./serialize";
 
-import classes from './index.module.scss'
+import classes from "./index.module.scss";
 
 const RichText: React.FC<{ className?: string; content: any }> = ({
   className,
   content,
 }) => {
   if (!content) {
-    return null
+    return null;
   }
 
   return (
-    <div className={[classes.richText, className].filter(Boolean).join(' ')}>
+    <div className={[classes.richText, className].filter(Boolean).join(" ")}>
       {serialize(content)}
     </div>
-  )
-}
+  );
+};
 
-export default RichText
+export default RichText;
diff --git a/examples/cms-payload/components/RichText/serialize.tsx b/examples/cms-payload/components/RichText/serialize.tsx
index 1b864bd031..af70428e90 100644
--- a/examples/cms-payload/components/RichText/serialize.tsx
+++ b/examples/cms-payload/components/RichText/serialize.tsx
@@ -1,103 +1,103 @@
-import React, { Fragment } from 'react'
-import escapeHTML from 'escape-html'
-import { Text } from 'slate'
-import { Label } from '../Label'
-import { LargeBody } from '../LargeBody'
+import React, { Fragment } from "react";
+import escapeHTML from "escape-html";
+import { Text } from "slate";
+import { Label } from "../Label";
+import { LargeBody } from "../LargeBody";
 
 // eslint-disable-next-line no-use-before-define
-type Children = Leaf[]
+type Children = Leaf[];
 
 type Leaf = {
-  type: string
+  type: string;
   value?: {
-    url: string
-    alt: string
-  }
-  children: Children
-  url?: string
-  [key: string]: unknown
-}
+    url: string;
+    alt: string;
+  };
+  children: Children;
+  url?: string;
+  [key: string]: unknown;
+};
 
 const serialize = (children: Children): React.ReactNode[] =>
   children.map((node, i) => {
     if (Text.isText(node)) {
       let text = (
         <span dangerouslySetInnerHTML={{ __html: escapeHTML(node.text) }} />
-      )
+      );
 
       if (node.bold) {
-        text = <strong key={i}>{text}</strong>
+        text = <strong key={i}>{text}</strong>;
       }
 
       if (node.code) {
-        text = <code key={i}>{text}</code>
+        text = <code key={i}>{text}</code>;
       }
 
       if (node.italic) {
-        text = <em key={i}>{text}</em>
+        text = <em key={i}>{text}</em>;
       }
 
       if (node.underline) {
         text = (
-          <span style={{ textDecoration: 'underline' }} key={i}>
+          <span style={{ textDecoration: "underline" }} key={i}>
             {text}
           </span>
-        )
+        );
       }
 
       if (node.strikethrough) {
         text = (
-          <span style={{ textDecoration: 'line-through' }} key={i}>
+          <span style={{ textDecoration: "line-through" }} key={i}>
             {text}
           </span>
-        )
+        );
       }
 
-      return <Fragment key={i}>{text}</Fragment>
+      return <Fragment key={i}>{text}</Fragment>;
     }
 
     if (!node) {
-      return null
+      return null;
     }
 
     switch (node.type) {
-      case 'h1':
-        return <h1 key={i}>{serialize(node.children)}</h1>
-      case 'h2':
-        return <h2 key={i}>{serialize(node.children)}</h2>
-      case 'h3':
-        return <h3 key={i}>{serialize(node.children)}</h3>
-      case 'h4':
-        return <h4 key={i}>{serialize(node.children)}</h4>
-      case 'h5':
-        return <h5 key={i}>{serialize(node.children)}</h5>
-      case 'h6':
-        return <h6 key={i}>{serialize(node.children)}</h6>
-      case 'quote':
-        return <blockquote key={i}>{serialize(node.children)}</blockquote>
-      case 'ul':
-        return <ul key={i}>{serialize(node.children)}</ul>
-      case 'ol':
-        return <ol key={i}>{serialize(node.children)}</ol>
-      case 'li':
-        return <li key={i}>{serialize(node.children)}</li>
-      case 'link':
+      case "h1":
+        return <h1 key={i}>{serialize(node.children)}</h1>;
+      case "h2":
+        return <h2 key={i}>{serialize(node.children)}</h2>;
+      case "h3":
+        return <h3 key={i}>{serialize(node.children)}</h3>;
+      case "h4":
+        return <h4 key={i}>{serialize(node.children)}</h4>;
+      case "h5":
+        return <h5 key={i}>{serialize(node.children)}</h5>;
+      case "h6":
+        return <h6 key={i}>{serialize(node.children)}</h6>;
+      case "quote":
+        return <blockquote key={i}>{serialize(node.children)}</blockquote>;
+      case "ul":
+        return <ul key={i}>{serialize(node.children)}</ul>;
+      case "ol":
+        return <ol key={i}>{serialize(node.children)}</ol>;
+      case "li":
+        return <li key={i}>{serialize(node.children)}</li>;
+      case "link":
         return (
           <a href={escapeHTML(node.url)} key={i}>
             {serialize(node.children)}
           </a>
-        )
+        );
 
-      case 'label':
-        return <Label key={i}>{serialize(node.children)}</Label>
+      case "label":
+        return <Label key={i}>{serialize(node.children)}</Label>;
 
-      case 'large-body': {
-        return <LargeBody key={i}>{serialize(node.children)}</LargeBody>
+      case "large-body": {
+        return <LargeBody key={i}>{serialize(node.children)}</LargeBody>;
       }
 
       default:
-        return <p key={i}>{serialize(node.children)}</p>
+        return <p key={i}>{serialize(node.children)}</p>;
     }
-  })
+  });
 
-export default serialize
+export default serialize;
diff --git a/examples/cms-payload/components/VerticalPadding/index.tsx b/examples/cms-payload/components/VerticalPadding/index.tsx
index 74f935a5c5..25012f9fe8 100644
--- a/examples/cms-payload/components/VerticalPadding/index.tsx
+++ b/examples/cms-payload/components/VerticalPadding/index.tsx
@@ -1,18 +1,18 @@
-import React from 'react'
-import classes from './index.module.scss'
+import React from "react";
+import classes from "./index.module.scss";
 
-export type VerticalPaddingOptions = 'large' | 'medium' | 'none'
+export type VerticalPaddingOptions = "large" | "medium" | "none";
 
 type Props = {
-  top?: VerticalPaddingOptions
-  bottom?: VerticalPaddingOptions
-  children: React.ReactNode
-  className?: string
-}
+  top?: VerticalPaddingOptions;
+  bottom?: VerticalPaddingOptions;
+  children: React.ReactNode;
+  className?: string;
+};
 
 export const VerticalPadding: React.FC<Props> = ({
-  top = 'medium',
-  bottom = 'medium',
+  top = "medium",
+  bottom = "medium",
   className,
   children,
 }) => {
@@ -20,9 +20,9 @@ export const VerticalPadding: React.FC<Props> = ({
     <div
       className={[className, classes[`top-${top}`], classes[`bottom-${bottom}`]]
         .filter(Boolean)
-        .join(' ')}
+        .join(" ")}
     >
       {children}
     </div>
-  )
-}
+  );
+};
diff --git a/examples/cms-payload/components/icons/Chevron/index.tsx b/examples/cms-payload/components/icons/Chevron/index.tsx
index c121c3dc3b..4dafabee6e 100644
--- a/examples/cms-payload/components/icons/Chevron/index.tsx
+++ b/examples/cms-payload/components/icons/Chevron/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 
 export const Chevron: React.FC = () => {
   return (
@@ -15,5 +15,5 @@ export const Chevron: React.FC = () => {
         strokeWidth="2"
       />
     </svg>
-  )
-}
+  );
+};
diff --git a/examples/cms-payload/components/icons/Menu/index.tsx b/examples/cms-payload/components/icons/Menu/index.tsx
index 65744ffdbd..a5da025bad 100644
--- a/examples/cms-payload/components/icons/Menu/index.tsx
+++ b/examples/cms-payload/components/icons/Menu/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 
 export const MenuIcon: React.FC = () => {
   return (
@@ -13,5 +13,5 @@ export const MenuIcon: React.FC = () => {
       <rect x="3.5" y="11.5" width="18" height="2" fill="currentColor" />
       <rect x="3.5" y="18.5" width="18" height="2" fill="currentColor" />
     </svg>
-  )
-}
+  );
+};
diff --git a/examples/cms-payload/css/app.scss b/examples/cms-payload/css/app.scss
index 21d3102b28..7b85399ade 100644
--- a/examples/cms-payload/css/app.scss
+++ b/examples/cms-payload/css/app.scss
@@ -1,6 +1,6 @@
-@use './queries.scss' as *;
-@use './colors.scss' as *;
-@use './type.scss' as *;
+@use "./queries.scss" as *;
+@use "./colors.scss" as *;
+@use "./type.scss" as *;
 
 :root {
   --breakpoint-xs-width: #{$breakpoint-xs-width};
@@ -11,7 +11,7 @@
 
   --base: 24px;
   --font-body: system-ui;
-  --font-mono: 'Roboto Mono', monospace;
+  --font-mono: "Roboto Mono", monospace;
 
   --gutter-h: 180px;
   --block-padding: 120px;
diff --git a/examples/cms-payload/css/common.scss b/examples/cms-payload/css/common.scss
index e66be0183d..5d13d71794 100644
--- a/examples/cms-payload/css/common.scss
+++ b/examples/cms-payload/css/common.scss
@@ -1,2 +1,2 @@
-@forward './queries.scss';
-@forward './type.scss';
+@forward "./queries.scss";
+@forward "./type.scss";
diff --git a/examples/cms-payload/css/type.scss b/examples/cms-payload/css/type.scss
index df525be798..448f5580eb 100644
--- a/examples/cms-payload/css/type.scss
+++ b/examples/cms-payload/css/type.scss
@@ -1,4 +1,4 @@
-@use 'queries' as *;
+@use "queries" as *;
 
 /////////////////////////////
 // HEADINGS
diff --git a/examples/cms-payload/cssVariables.js b/examples/cms-payload/cssVariables.js
index 3370777abd..9ef39d641a 100644
--- a/examples/cms-payload/cssVariables.js
+++ b/examples/cms-payload/cssVariables.js
@@ -4,4 +4,4 @@ module.exports = {
     m: 1024,
     l: 1679,
   },
-}
+};
diff --git a/examples/cms-payload/next-env.scss.d.ts b/examples/cms-payload/next-env.scss.d.ts
index 99508d5630..0292a33a0f 100644
--- a/examples/cms-payload/next-env.scss.d.ts
+++ b/examples/cms-payload/next-env.scss.d.ts
@@ -1 +1 @@
-declare module '*.scss'
+declare module "*.scss";
diff --git a/examples/cms-payload/next.config.js b/examples/cms-payload/next.config.js
index 1d5a0b1cea..0591606747 100644
--- a/examples/cms-payload/next.config.js
+++ b/examples/cms-payload/next.config.js
@@ -1,31 +1,31 @@
-const { withPayload } = require('@payloadcms/next-payload')
-const path = require('path')
+const { withPayload } = require("@payloadcms/next-payload");
+const path = require("path");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = withPayload(
   {
     reactStrictMode: true,
-    rewrites: [{ source: '/admin/(.*)', destination: '/admin/index.html' }],
+    rewrites: [{ source: "/admin/(.*)", destination: "/admin/index.html" }],
     images: {
       remotePatterns: [
         {
-          protocol: 'https',
-          hostname: 'nextjs-vercel.payloadcms.com',
-          port: '',
-          pathname: '/my-account/**',
+          protocol: "https",
+          hostname: "nextjs-vercel.payloadcms.com",
+          port: "",
+          pathname: "/my-account/**",
         },
         {
-          protocol: 'https',
+          protocol: "https",
           hostname: process.env.NEXT_PUBLIC_S3_HOSTNAME,
-          port: '',
+          port: "",
           pathname: `/${process.env.NEXT_PUBLIC_S3_BUCKET}/**`,
         },
       ],
     },
   },
   {
-    configPath: path.resolve(__dirname, './payload/payload.config.ts'),
-  }
-)
+    configPath: path.resolve(__dirname, "./payload/payload.config.ts"),
+  },
+);
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/cms-payload/pages/api/[collection]/[id].ts b/examples/cms-payload/pages/api/[collection]/[id].ts
index 731ac57777..cbc8a8cc1b 100644
--- a/examples/cms-payload/pages/api/[collection]/[id].ts
+++ b/examples/cms-payload/pages/api/[collection]/[id].ts
@@ -1,10 +1,10 @@
-import handler from '@payloadcms/next-payload/dist/handlers/[collection]/[id]'
+import handler from "@payloadcms/next-payload/dist/handlers/[collection]/[id]";
 
-export default handler
+export default handler;
 
 export const config = {
   api: {
     bodyParser: false,
     externalResolver: true,
   },
-}
+};
diff --git a/examples/cms-payload/pages/api/[collection]/access/[id].ts b/examples/cms-payload/pages/api/[collection]/access/[id].ts
index 1348b0dce2..d6d91b8f5b 100644
--- a/examples/cms-payload/pages/api/[collection]/access/[id].ts
+++ b/examples/cms-payload/pages/api/[collection]/access/[id].ts
@@ -1,9 +1,9 @@
-import handler from '@payloadcms/next-payload/dist/handlers/[collection]/access/[id]'
+import handler from "@payloadcms/next-payload/dist/handlers/[collection]/access/[id]";
 
-export default handler
+export default handler;
 
 export const config = {
   api: {
     externalResolver: true,
   },
-}
+};
diff --git a/examples/cms-payload/pages/api/[collection]/first-register.ts b/examples/cms-payload/pages/api/[collection]/first-register.ts
index 62fb9f6fe3..8f4f17c0c6 100644
--- a/examples/cms-payload/pages/api/[collection]/first-register.ts
+++ b/examples/cms-payload/pages/api/[collection]/first-register.ts
@@ -1,10 +1,10 @@
-import handler from '@payloadcms/next-payload/dist/handlers/[collection]/first-register'
+import handler from "@payloadcms/next-payload/dist/handlers/[collection]/first-register";
 
-export default handler
+export default handler;
 
 export const config = {
   api: {
     bodyParser: false,
     externalResolver: true,
   },
-}
+};
diff --git a/examples/cms-payload/pages/api/[collection]/forgot-password.ts b/examples/cms-payload/pages/api/[collection]/forgot-password.ts
index e22501b153..3cc499ac89 100644
--- a/examples/cms-payload/pages/api/[collection]/forgot-password.ts
+++ b/examples/cms-payload/pages/api/[collection]/forgot-password.ts
@@ -1,10 +1,10 @@
-import handler from '@payloadcms/next-payload/dist/handlers/[collection]/forgot-password'
+import handler from "@payloadcms/next-payload/dist/handlers/[collection]/forgot-password";
 
-export default handler
+export default handler;
 
 export const config = {
   api: {
     bodyParser: false,
     externalResolver: true,
   },
-}
+};
diff --git a/examples/cms-payload/pages/api/[collection]/index.ts b/examples/cms-payload/pages/api/[collection]/index.ts
index 5394ff33dd..42212e5dcb 100644
--- a/examples/cms-payload/pages/api/[collection]/index.ts
+++ b/examples/cms-payload/pages/api/[collection]/index.ts
@@ -1,10 +1,10 @@
-import handler from '@payloadcms/next-payload/dist/handlers/[collection]'
+import handler from "@payloadcms/next-payload/dist/handlers/[collection]";
 
-export default handler
+export default handler;
 
 export const config = {
   api: {
     bodyParser: false,
     externalResolver: true,
   },
-}
+};
diff --git a/examples/cms-payload/pages/api/[collection]/init.ts b/examples/cms-payload/pages/api/[collection]/init.ts
index b6e337edf7..fbb87b73dd 100644
--- a/examples/cms-payload/pages/api/[collection]/init.ts
+++ b/examples/cms-payload/pages/api/[collection]/init.ts
@@ -1,9 +1,9 @@
-import handler from '@payloadcms/next-payload/dist/handlers/[collection]/init'
+import handler from "@payloadcms/next-payload/dist/handlers/[collection]/init";
 
-export default handler
+export default handler;
 
 export const config = {
   api: {
     externalResolver: true,
   },
-}
+};
diff --git a/examples/cms-payload/pages/api/[collection]/login.ts b/examples/cms-payload/pages/api/[collection]/login.ts
index 4a63a7039c..e4d45af17d 100644
--- a/examples/cms-payload/pages/api/[collection]/login.ts
+++ b/examples/cms-payload/pages/api/[collection]/login.ts
@@ -1,10 +1,10 @@
-import handler from '@payloadcms/next-payload/dist/handlers/[collection]/login'
+import handler from "@payloadcms/next-payload/dist/handlers/[collection]/login";
 
-export default handler
+export default handler;
 
 export const config = {
   api: {
     bodyParser: false,
     externalResolver: true,
   },
-}
+};
diff --git a/examples/cms-payload/pages/api/[collection]/logout.ts b/examples/cms-payload/pages/api/[collection]/logout.ts
index d4ccfd8154..f58705c5e9 100644
--- a/examples/cms-payload/pages/api/[collection]/logout.ts
+++ b/examples/cms-payload/pages/api/[collection]/logout.ts
@@ -1,9 +1,9 @@
-import handler from '@payloadcms/next-payload/dist/handlers/[collection]/logout'
+import handler from "@payloadcms/next-payload/dist/handlers/[collection]/logout";
 
-export default handler
+export default handler;
 
 export const config = {
   api: {
     externalResolver: true,
   },
-}
+};
diff --git a/examples/cms-payload/pages/api/[collection]/me.ts b/examples/cms-payload/pages/api/[collection]/me.ts
index d96dc66986..ef711842ad 100644
--- a/examples/cms-payload/pages/api/[collection]/me.ts
+++ b/examples/cms-payload/pages/api/[collection]/me.ts
@@ -1,9 +1,9 @@
-import handler from '@payloadcms/next-payload/dist/handlers/[collection]/me'
+import handler from "@payloadcms/next-payload/dist/handlers/[collection]/me";
 
-export default handler
+export default handler;
 
 export const config = {
   api: {
     externalResolver: true,
   },
-}
+};
diff --git a/examples/cms-payload/pages/api/[collection]/refresh.ts b/examples/cms-payload/pages/api/[collection]/refresh.ts
index d3a5370937..7526e5364f 100644
--- a/examples/cms-payload/pages/api/[collection]/refresh.ts
+++ b/examples/cms-payload/pages/api/[collection]/refresh.ts
@@ -1,10 +1,10 @@
-import meHandler from '@payloadcms/next-payload/dist/handlers/[collection]/me'
+import meHandler from "@payloadcms/next-payload/dist/handlers/[collection]/me";
 
-export default meHandler
+export default meHandler;
 
 export const config = {
   api: {
     bodyParser: false,
     externalResolver: true,
   },
-}
+};
diff --git a/examples/cms-payload/pages/api/access.ts b/examples/cms-payload/pages/api/access.ts
index 0fede550fa..6979870b36 100644
--- a/examples/cms-payload/pages/api/access.ts
+++ b/examples/cms-payload/pages/api/access.ts
@@ -1,9 +1,9 @@
-import handler from '@payloadcms/next-payload/dist/handlers/access'
+import handler from "@payloadcms/next-payload/dist/handlers/access";
 
-export default handler
+export default handler;
 
 export const config = {
   api: {
     externalResolver: true,
   },
-}
+};
diff --git a/examples/cms-payload/pages/api/globals/[global]/access.ts b/examples/cms-payload/pages/api/globals/[global]/access.ts
index e5e867ade0..b666491471 100644
--- a/examples/cms-payload/pages/api/globals/[global]/access.ts
+++ b/examples/cms-payload/pages/api/globals/[global]/access.ts
@@ -1,9 +1,9 @@
-import handler from '@payloadcms/next-payload/dist/handlers/globals/[global]/access'
+import handler from "@payloadcms/next-payload/dist/handlers/globals/[global]/access";
 
-export default handler
+export default handler;
 
 export const config = {
   api: {
     externalResolver: true,
   },
-}
+};
diff --git a/examples/cms-payload/pages/api/globals/[global]/index.ts b/examples/cms-payload/pages/api/globals/[global]/index.ts
index 26f4a3e436..afbcad9533 100644
--- a/examples/cms-payload/pages/api/globals/[global]/index.ts
+++ b/examples/cms-payload/pages/api/globals/[global]/index.ts
@@ -1,10 +1,10 @@
-import handler from '@payloadcms/next-payload/dist/handlers/globals/[global]'
+import handler from "@payloadcms/next-payload/dist/handlers/globals/[global]";
 
-export default handler
+export default handler;
 
 export const config = {
   api: {
     bodyParser: false,
     externalResolver: true,
   },
-}
+};
diff --git a/examples/cms-payload/pages/api/graphql-playground.ts b/examples/cms-payload/pages/api/graphql-playground.ts
index a7e5fa38e1..ece1a87df5 100644
--- a/examples/cms-payload/pages/api/graphql-playground.ts
+++ b/examples/cms-payload/pages/api/graphql-playground.ts
@@ -1,9 +1,9 @@
-import handler from '@payloadcms/next-payload/dist/handlers/graphql-playground'
+import handler from "@payloadcms/next-payload/dist/handlers/graphql-playground";
 
-export default handler
+export default handler;
 
 export const config = {
   api: {
     externalResolver: true,
   },
-}
+};
diff --git a/examples/cms-payload/pages/api/graphql.ts b/examples/cms-payload/pages/api/graphql.ts
index f646664ece..7c35b7e795 100644
--- a/examples/cms-payload/pages/api/graphql.ts
+++ b/examples/cms-payload/pages/api/graphql.ts
@@ -1,9 +1,9 @@
-import handler from '@payloadcms/next-payload/dist/handlers/graphql'
+import handler from "@payloadcms/next-payload/dist/handlers/graphql";
 
-export default handler
+export default handler;
 
 export const config = {
   api: {
     externalResolver: true,
   },
-}
+};
diff --git a/examples/cms-payload/pages/api/regenerate.ts b/examples/cms-payload/pages/api/regenerate.ts
index 60459f49ed..432ee9fb0c 100644
--- a/examples/cms-payload/pages/api/regenerate.ts
+++ b/examples/cms-payload/pages/api/regenerate.ts
@@ -1,26 +1,26 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from "next";
 
 const regenerate = async (req: NextApiRequest, res: NextApiResponse) => {
   if (req.query.secret !== process.env.NEXT_PRIVATE_REGENERATION_SECRET) {
-    console.error('Error regenerating: Invalid Token.')
+    console.error("Error regenerating: Invalid Token.");
     return res
       .status(401)
-      .json({ message: 'Error regenerating:  Invalid token' })
+      .json({ message: "Error regenerating:  Invalid token" });
   }
 
-  if (typeof req.query.path === 'string') {
+  if (typeof req.query.path === "string") {
     try {
-      const url = new URL(req.query.path, process.env.NEXT_PUBLIC_APP_URL)
-      const { pathname: pathToRegenerate } = url
-      await res.revalidate(pathToRegenerate)
-      return res.json({ regenerated: true })
+      const url = new URL(req.query.path, process.env.NEXT_PUBLIC_APP_URL);
+      const { pathname: pathToRegenerate } = url;
+      await res.revalidate(pathToRegenerate);
+      return res.json({ regenerated: true });
     } catch (err) {
-      console.error('Error regenerating: Cannot parse url.')
-      return res.status(500).send('Error regenerating: Cannot parse url.')
+      console.error("Error regenerating: Cannot parse url.");
+      return res.status(500).send("Error regenerating: Cannot parse url.");
     }
   }
 
-  return res.status(400).send('No path to regenerate')
-}
+  return res.status(400).send("No path to regenerate");
+};
 
-export default regenerate
+export default regenerate;
diff --git a/examples/cms-payload/payload-types.ts b/examples/cms-payload/payload-types.ts
index a7648c73a1..9bcc6fc6b3 100644
--- a/examples/cms-payload/payload-types.ts
+++ b/examples/cms-payload/payload-types.ts
@@ -7,176 +7,176 @@
 
 export interface Config {
   collections: {
-    pages: Page
-    users: User
-    media: Media
-  }
+    pages: Page;
+    users: User;
+    media: Media;
+  };
   globals: {
-    'main-menu': MainMenu
-  }
+    "main-menu": MainMenu;
+  };
 }
 export interface Page {
-  id: string
-  title: string
+  id: string;
+  title: string;
   hero: {
-    type: 'highImpact' | 'mediumImpact' | 'lowImpact'
+    type: "highImpact" | "mediumImpact" | "lowImpact";
     richText: {
-      [k: string]: unknown
-    }[]
+      [k: string]: unknown;
+    }[];
     links: {
       link: {
-        type?: 'reference' | 'custom'
-        newTab?: boolean
+        type?: "reference" | "custom";
+        newTab?: boolean;
         reference: {
-          value: string | Page
-          relationTo: 'pages'
-        }
-        url: string
-        label: string
-        appearance?: 'default' | 'primary' | 'secondary'
-      }
-      id?: string
-    }[]
-    media: string | Media
-  }
+          value: string | Page;
+          relationTo: "pages";
+        };
+        url: string;
+        label: string;
+        appearance?: "default" | "primary" | "secondary";
+      };
+      id?: string;
+    }[];
+    media: string | Media;
+  };
   layout: (
     | {
-        ctaBackgroundColor?: 'white' | 'black'
+        ctaBackgroundColor?: "white" | "black";
         richText: {
-          [k: string]: unknown
-        }[]
+          [k: string]: unknown;
+        }[];
         links: {
           link: {
-            type?: 'reference' | 'custom'
-            newTab?: boolean
+            type?: "reference" | "custom";
+            newTab?: boolean;
             reference: {
-              value: string | Page
-              relationTo: 'pages'
-            }
-            url: string
-            label: string
-            appearance?: 'primary' | 'secondary'
-          }
-          id?: string
-        }[]
-        id?: string
-        blockName?: string
-        blockType: 'cta'
+              value: string | Page;
+              relationTo: "pages";
+            };
+            url: string;
+            label: string;
+            appearance?: "primary" | "secondary";
+          };
+          id?: string;
+        }[];
+        id?: string;
+        blockName?: string;
+        blockType: "cta";
       }
     | {
-        contentBackgroundColor?: 'white' | 'black'
+        contentBackgroundColor?: "white" | "black";
         layout?:
-          | 'oneColumn'
-          | 'twoThirdsOneThird'
-          | 'halfAndHalf'
-          | 'threeColumns'
+          | "oneColumn"
+          | "twoThirdsOneThird"
+          | "halfAndHalf"
+          | "threeColumns";
         columnOne: {
           richText: {
-            [k: string]: unknown
-          }[]
-          enableLink?: boolean
+            [k: string]: unknown;
+          }[];
+          enableLink?: boolean;
           link: {
-            type?: 'reference' | 'custom'
-            newTab?: boolean
+            type?: "reference" | "custom";
+            newTab?: boolean;
             reference: {
-              value: string | Page
-              relationTo: 'pages'
-            }
-            url: string
-            label: string
-            appearance?: 'default' | 'primary' | 'secondary'
-          }
-        }
+              value: string | Page;
+              relationTo: "pages";
+            };
+            url: string;
+            label: string;
+            appearance?: "default" | "primary" | "secondary";
+          };
+        };
         columnTwo: {
           richText: {
-            [k: string]: unknown
-          }[]
-          enableLink?: boolean
+            [k: string]: unknown;
+          }[];
+          enableLink?: boolean;
           link: {
-            type?: 'reference' | 'custom'
-            newTab?: boolean
+            type?: "reference" | "custom";
+            newTab?: boolean;
             reference: {
-              value: string | Page
-              relationTo: 'pages'
-            }
-            url: string
-            label: string
-            appearance?: 'default' | 'primary' | 'secondary'
-          }
-        }
+              value: string | Page;
+              relationTo: "pages";
+            };
+            url: string;
+            label: string;
+            appearance?: "default" | "primary" | "secondary";
+          };
+        };
         columnThree: {
           richText: {
-            [k: string]: unknown
-          }[]
-          enableLink?: boolean
+            [k: string]: unknown;
+          }[];
+          enableLink?: boolean;
           link: {
-            type?: 'reference' | 'custom'
-            newTab?: boolean
+            type?: "reference" | "custom";
+            newTab?: boolean;
             reference: {
-              value: string | Page
-              relationTo: 'pages'
-            }
-            url: string
-            label: string
-            appearance?: 'default' | 'primary' | 'secondary'
-          }
-        }
-        id?: string
-        blockName?: string
-        blockType: 'content'
+              value: string | Page;
+              relationTo: "pages";
+            };
+            url: string;
+            label: string;
+            appearance?: "default" | "primary" | "secondary";
+          };
+        };
+        id?: string;
+        blockName?: string;
+        blockType: "content";
       }
     | {
-        mediaBlockBackgroundColor?: 'white' | 'black'
-        position?: 'default' | 'fullscreen'
-        media: string | Media
+        mediaBlockBackgroundColor?: "white" | "black";
+        position?: "default" | "fullscreen";
+        media: string | Media;
         caption?: {
-          [k: string]: unknown
-        }[]
-        id?: string
-        blockName?: string
-        blockType: 'mediaBlock'
+          [k: string]: unknown;
+        }[];
+        id?: string;
+        blockName?: string;
+        blockType: "mediaBlock";
       }
-  )[]
-  slug?: string
-  createdAt: string
-  updatedAt: string
+  )[];
+  slug?: string;
+  createdAt: string;
+  updatedAt: string;
 }
 export interface Media {
-  id: string
-  alt: string
-  url?: string
-  filename?: string
-  mimeType?: string
-  filesize?: number
-  width?: number
-  height?: number
-  createdAt: string
-  updatedAt: string
+  id: string;
+  alt: string;
+  url?: string;
+  filename?: string;
+  mimeType?: string;
+  filesize?: number;
+  width?: number;
+  height?: number;
+  createdAt: string;
+  updatedAt: string;
 }
 export interface User {
-  id: string
-  email?: string
-  resetPasswordToken?: string
-  resetPasswordExpiration?: string
-  loginAttempts?: number
-  lockUntil?: string
-  createdAt: string
-  updatedAt: string
-  password?: string
+  id: string;
+  email?: string;
+  resetPasswordToken?: string;
+  resetPasswordExpiration?: string;
+  loginAttempts?: number;
+  lockUntil?: string;
+  createdAt: string;
+  updatedAt: string;
+  password?: string;
 }
 export interface MainMenu {
-  id: string
+  id: string;
   navItems: {
     link: {
-      type?: 'reference' | 'custom'
-      newTab?: boolean
+      type?: "reference" | "custom";
+      newTab?: boolean;
       reference: {
-        value: string | Page
-        relationTo: 'pages'
-      }
-      url: string
-      label: string
-    }
-    id?: string
-  }[]
+        value: string | Page;
+        relationTo: "pages";
+      };
+      url: string;
+      label: string;
+    };
+    id?: string;
+  }[];
 }
diff --git a/examples/cms-payload/payload/access/publishedOnly.ts b/examples/cms-payload/payload/access/publishedOnly.ts
index 441a0684b8..11b64fb3c4 100644
--- a/examples/cms-payload/payload/access/publishedOnly.ts
+++ b/examples/cms-payload/payload/access/publishedOnly.ts
@@ -1,11 +1,11 @@
-import { Access } from 'payload/config'
+import { Access } from "payload/config";
 
 export const publishedOnly: Access = ({ req: { user } }) => {
-  if (Boolean(user)) return true
+  if (Boolean(user)) return true;
 
   return {
     _status: {
-      equals: 'published',
+      equals: "published",
     },
-  }
-}
+  };
+};
diff --git a/examples/cms-payload/payload/blocks/CallToAction/index.ts b/examples/cms-payload/payload/blocks/CallToAction/index.ts
index bd7a17119c..f6b6b7b14b 100644
--- a/examples/cms-payload/payload/blocks/CallToAction/index.ts
+++ b/examples/cms-payload/payload/blocks/CallToAction/index.ts
@@ -1,22 +1,22 @@
-import { Block } from 'payload/types'
-import { backgroundColor } from '../../fields/backgroundColor'
-import linkGroup from '../../fields/linkGroup'
-import richText from '../../fields/richText'
+import { Block } from "payload/types";
+import { backgroundColor } from "../../fields/backgroundColor";
+import linkGroup from "../../fields/linkGroup";
+import richText from "../../fields/richText";
 
 export const CallToAction: Block = {
-  slug: 'cta',
+  slug: "cta",
   labels: {
-    singular: 'Call to Action',
-    plural: 'Calls to Action',
+    singular: "Call to Action",
+    plural: "Calls to Action",
   },
   fields: [
-    backgroundColor({ overrides: { name: 'ctaBackgroundColor' } }),
+    backgroundColor({ overrides: { name: "ctaBackgroundColor" } }),
     richText(),
     linkGroup({
-      appearances: ['primary', 'secondary'],
+      appearances: ["primary", "secondary"],
       overrides: {
         maxRows: 2,
       },
     }),
   ],
-}
+};
diff --git a/examples/cms-payload/payload/blocks/Content/index.ts b/examples/cms-payload/payload/blocks/Content/index.ts
index 8cdf4ad52b..4100d439b7 100644
--- a/examples/cms-payload/payload/blocks/Content/index.ts
+++ b/examples/cms-payload/payload/blocks/Content/index.ts
@@ -1,13 +1,13 @@
-import { Block, Field } from 'payload/types'
-import { backgroundColor } from '../../fields/backgroundColor'
-import link from '../../fields/link'
-import richText from '../../fields/richText'
+import { Block, Field } from "payload/types";
+import { backgroundColor } from "../../fields/backgroundColor";
+import link from "../../fields/link";
+import richText from "../../fields/richText";
 
 const columnFields: Field[] = [
   richText(),
   {
-    name: 'enableLink',
-    type: 'checkbox',
+    name: "enableLink",
+    type: "checkbox",
   },
   link({
     overrides: {
@@ -16,61 +16,61 @@ const columnFields: Field[] = [
       },
     },
   }),
-]
+];
 
 export const Content: Block = {
-  slug: 'content',
+  slug: "content",
   fields: [
     {
-      type: 'row',
+      type: "row",
       fields: [
-        backgroundColor({ overrides: { name: 'contentBackgroundColor' } }),
+        backgroundColor({ overrides: { name: "contentBackgroundColor" } }),
         {
-          name: 'layout',
-          type: 'select',
-          defaultValue: 'oneColumn',
+          name: "layout",
+          type: "select",
+          defaultValue: "oneColumn",
           options: [
             {
-              label: 'One Column',
-              value: 'oneColumn',
+              label: "One Column",
+              value: "oneColumn",
             },
             {
-              label: 'Two Thirds + One Third',
-              value: 'twoThirdsOneThird',
+              label: "Two Thirds + One Third",
+              value: "twoThirdsOneThird",
             },
             {
-              label: 'Half + Half',
-              value: 'halfAndHalf',
+              label: "Half + Half",
+              value: "halfAndHalf",
             },
             {
-              label: 'Three Columns',
-              value: 'threeColumns',
+              label: "Three Columns",
+              value: "threeColumns",
             },
           ],
         },
       ],
     },
     {
-      name: 'columnOne',
-      type: 'group',
+      name: "columnOne",
+      type: "group",
       fields: columnFields,
     },
     {
-      name: 'columnTwo',
-      type: 'group',
+      name: "columnTwo",
+      type: "group",
       fields: columnFields,
       admin: {
         condition: (_, { layout }) =>
-          ['twoThirdsOneThird', 'halfAndHalf', 'threeColumns'].includes(layout),
+          ["twoThirdsOneThird", "halfAndHalf", "threeColumns"].includes(layout),
       },
     },
     {
-      name: 'columnThree',
-      type: 'group',
+      name: "columnThree",
+      type: "group",
       fields: columnFields,
       admin: {
-        condition: (_, { layout }) => layout === 'threeColumns',
+        condition: (_, { layout }) => layout === "threeColumns",
       },
     },
   ],
-}
+};
diff --git a/examples/cms-payload/payload/blocks/Media/index.ts b/examples/cms-payload/payload/blocks/Media/index.ts
index 2fb06e4956..589dbd2916 100644
--- a/examples/cms-payload/payload/blocks/Media/index.ts
+++ b/examples/cms-payload/payload/blocks/Media/index.ts
@@ -1,42 +1,42 @@
-import { Block } from 'payload/types'
-import { backgroundColor } from '../../fields/backgroundColor'
+import { Block } from "payload/types";
+import { backgroundColor } from "../../fields/backgroundColor";
 
 export const MediaBlock: Block = {
-  slug: 'mediaBlock',
+  slug: "mediaBlock",
   fields: [
     {
-      type: 'row',
+      type: "row",
       fields: [
-        backgroundColor({ overrides: { name: 'mediaBlockBackgroundColor' } }),
+        backgroundColor({ overrides: { name: "mediaBlockBackgroundColor" } }),
         {
-          name: 'position',
-          type: 'select',
-          defaultValue: 'default',
+          name: "position",
+          type: "select",
+          defaultValue: "default",
           options: [
             {
-              label: 'Default',
-              value: 'default',
+              label: "Default",
+              value: "default",
             },
             {
-              label: 'Fullscreen',
-              value: 'fullscreen',
+              label: "Fullscreen",
+              value: "fullscreen",
             },
           ],
         },
       ],
     },
     {
-      name: 'media',
-      type: 'upload',
-      relationTo: 'media',
+      name: "media",
+      type: "upload",
+      relationTo: "media",
       required: true,
     },
     {
-      name: 'caption',
-      type: 'richText',
+      name: "caption",
+      type: "richText",
       admin: {
-        elements: ['link'],
+        elements: ["link"],
       },
     },
   ],
-}
+};
diff --git a/examples/cms-payload/payload/collections/Media.ts b/examples/cms-payload/payload/collections/Media.ts
index c8222b8317..a4405e7fed 100644
--- a/examples/cms-payload/payload/collections/Media.ts
+++ b/examples/cms-payload/payload/collections/Media.ts
@@ -1,19 +1,19 @@
-import { CollectionConfig } from 'payload/types'
-import path from 'path'
+import { CollectionConfig } from "payload/types";
+import path from "path";
 
 export const Media: CollectionConfig = {
-  slug: 'media',
+  slug: "media",
   upload: {
-    staticDir: path.resolve(__dirname, '../../media'),
+    staticDir: path.resolve(__dirname, "../../media"),
   },
   access: {
     read: () => true,
   },
   fields: [
     {
-      name: 'alt',
-      type: 'text',
+      name: "alt",
+      type: "text",
       required: true,
     },
   ],
-}
+};
diff --git a/examples/cms-payload/payload/collections/Pages.ts b/examples/cms-payload/payload/collections/Pages.ts
index 2bd622fc61..ca979bb472 100644
--- a/examples/cms-payload/payload/collections/Pages.ts
+++ b/examples/cms-payload/payload/collections/Pages.ts
@@ -1,23 +1,23 @@
-import { CollectionConfig } from 'payload/types'
-import { publishedOnly } from '../access/publishedOnly'
-import { CallToAction } from '../blocks/CallToAction'
-import { Content } from '../blocks/Content'
-import { MediaBlock } from '../blocks/Media'
-import { hero } from '../fields/hero'
-import { slugField } from '../fields/slug'
-import { regenerateStaticPage } from '../utilities/regenerateStaticPage'
+import { CollectionConfig } from "payload/types";
+import { publishedOnly } from "../access/publishedOnly";
+import { CallToAction } from "../blocks/CallToAction";
+import { Content } from "../blocks/Content";
+import { MediaBlock } from "../blocks/Media";
+import { hero } from "../fields/hero";
+import { slugField } from "../fields/slug";
+import { regenerateStaticPage } from "../utilities/regenerateStaticPage";
 
 export const Pages: CollectionConfig = {
-  slug: 'pages',
+  slug: "pages",
   admin: {
-    useAsTitle: 'title',
-    defaultColumns: ['title', 'slug', 'updatedAt'],
+    useAsTitle: "title",
+    defaultColumns: ["title", "slug", "updatedAt"],
     preview: (doc, { locale }) => {
       if (doc?.slug) {
-        return `/${doc.slug}${locale ? `?locale=${locale}` : ''}`
+        return `/${doc.slug}${locale ? `?locale=${locale}` : ""}`;
       }
 
-      return ''
+      return "";
     },
   },
   access: {
@@ -28,23 +28,23 @@ export const Pages: CollectionConfig = {
   },
   fields: [
     {
-      name: 'title',
-      type: 'text',
+      name: "title",
+      type: "text",
       required: true,
     },
     {
-      type: 'tabs',
+      type: "tabs",
       tabs: [
         {
-          label: 'Hero',
+          label: "Hero",
           fields: [hero],
         },
         {
-          label: 'Content',
+          label: "Content",
           fields: [
             {
-              name: 'layout',
-              type: 'blocks',
+              name: "layout",
+              type: "blocks",
               required: true,
               blocks: [CallToAction, Content, MediaBlock],
             },
@@ -54,4 +54,4 @@ export const Pages: CollectionConfig = {
     },
     slugField(),
   ],
-}
+};
diff --git a/examples/cms-payload/payload/collections/Users.ts b/examples/cms-payload/payload/collections/Users.ts
index c8dbecbe94..5aa2e995f8 100644
--- a/examples/cms-payload/payload/collections/Users.ts
+++ b/examples/cms-payload/payload/collections/Users.ts
@@ -1,12 +1,12 @@
-import { CollectionConfig } from 'payload/types'
+import { CollectionConfig } from "payload/types";
 
 export const Users: CollectionConfig = {
-  slug: 'users',
+  slug: "users",
   auth: true,
   admin: {
-    useAsTitle: 'email',
+    useAsTitle: "email",
   },
   fields: [
     // Don't need any user fields here
   ],
-}
+};
diff --git a/examples/cms-payload/payload/fields/backgroundColor.ts b/examples/cms-payload/payload/fields/backgroundColor.ts
index 522a433c11..a723f75706 100644
--- a/examples/cms-payload/payload/fields/backgroundColor.ts
+++ b/examples/cms-payload/payload/fields/backgroundColor.ts
@@ -1,26 +1,26 @@
-import { Field, SelectField } from 'payload/types'
-import deepMerge from '../utilities/deepMerge'
+import { Field, SelectField } from "payload/types";
+import deepMerge from "../utilities/deepMerge";
 
 type Args = {
-  overrides?: Partial<SelectField>
-}
+  overrides?: Partial<SelectField>;
+};
 
 export const backgroundColor = ({ overrides = {} }: Args): Field =>
   deepMerge(
     {
-      name: 'backgroundColor',
-      type: 'select',
-      defaultValue: 'white',
+      name: "backgroundColor",
+      type: "select",
+      defaultValue: "white",
       options: [
         {
-          label: 'White',
-          value: 'white',
+          label: "White",
+          value: "white",
         },
         {
-          label: 'Black',
-          value: 'black',
+          label: "Black",
+          value: "black",
         },
       ],
     },
-    overrides
-  )
+    overrides,
+  );
diff --git a/examples/cms-payload/payload/fields/hero.ts b/examples/cms-payload/payload/fields/hero.ts
index 387aae4f05..fe2324364b 100644
--- a/examples/cms-payload/payload/fields/hero.ts
+++ b/examples/cms-payload/payload/fields/hero.ts
@@ -1,38 +1,38 @@
-import { Field } from 'payload/types'
-import linkGroup from './linkGroup'
-import richText from './richText'
-import label from './richText/label'
-import largeBody from './richText/largeBody'
+import { Field } from "payload/types";
+import linkGroup from "./linkGroup";
+import richText from "./richText";
+import label from "./richText/label";
+import largeBody from "./richText/largeBody";
 
 export const hero: Field = {
-  name: 'hero',
+  name: "hero",
   label: false,
-  type: 'group',
+  type: "group",
   fields: [
     {
-      type: 'select',
-      name: 'type',
-      label: 'Type',
+      type: "select",
+      name: "type",
+      label: "Type",
       required: true,
-      defaultValue: 'lowImpact',
+      defaultValue: "lowImpact",
       options: [
         {
-          label: 'High Impact',
-          value: 'highImpact',
+          label: "High Impact",
+          value: "highImpact",
         },
         {
-          label: 'Medium Impact',
-          value: 'mediumImpact',
+          label: "Medium Impact",
+          value: "mediumImpact",
         },
         {
-          label: 'Low Impact',
-          value: 'lowImpact',
+          label: "Low Impact",
+          value: "lowImpact",
         },
       ],
     },
     richText({
       admin: {
-        elements: ['h1', largeBody, label, 'link'],
+        elements: ["h1", largeBody, label, "link"],
         leaves: [],
       },
     }),
@@ -42,14 +42,14 @@ export const hero: Field = {
       },
     }),
     {
-      name: 'media',
-      type: 'upload',
-      relationTo: 'media',
+      name: "media",
+      type: "upload",
+      relationTo: "media",
       required: true,
       admin: {
         condition: (_, { type } = {}) =>
-          ['highImpact', 'mediumImpact'].includes(type),
+          ["highImpact", "mediumImpact"].includes(type),
       },
     },
   ],
-}
+};
diff --git a/examples/cms-payload/payload/fields/link.ts b/examples/cms-payload/payload/fields/link.ts
index 9bc572374d..0db326b735 100644
--- a/examples/cms-payload/payload/fields/link.ts
+++ b/examples/cms-payload/payload/fields/link.ts
@@ -1,28 +1,28 @@
-import { Field } from 'payload/types'
-import deepMerge from '../utilities/deepMerge'
+import { Field } from "payload/types";
+import deepMerge from "../utilities/deepMerge";
 
 export const appearanceOptions = {
   primary: {
-    label: 'Primary Button',
-    value: 'primary',
+    label: "Primary Button",
+    value: "primary",
   },
   secondary: {
-    label: 'Secondary Button',
-    value: 'secondary',
+    label: "Secondary Button",
+    value: "secondary",
   },
   default: {
-    label: 'Default',
-    value: 'default',
+    label: "Default",
+    value: "default",
   },
-}
+};
 
-export type LinkAppearances = 'primary' | 'secondary' | 'default'
+export type LinkAppearances = "primary" | "secondary" | "default";
 
 type LinkType = (options?: {
-  appearances?: LinkAppearances[] | false
-  disableLabel?: boolean
-  overrides?: Record<string, unknown>
-}) => Field
+  appearances?: LinkAppearances[] | false;
+  disableLabel?: boolean;
+  overrides?: Record<string, unknown>;
+}) => Field;
 
 const link: LinkType = ({
   appearances,
@@ -30,94 +30,94 @@ const link: LinkType = ({
   overrides = {},
 } = {}) => {
   let linkResult: Field = {
-    name: 'link',
-    type: 'group',
+    name: "link",
+    type: "group",
     admin: {
       hideGutter: true,
     },
     fields: [
       {
-        type: 'row',
+        type: "row",
         fields: [
           {
-            name: 'type',
-            type: 'radio',
+            name: "type",
+            type: "radio",
             options: [
               {
-                label: 'Internal link',
-                value: 'reference',
+                label: "Internal link",
+                value: "reference",
               },
               {
-                label: 'Custom URL',
-                value: 'custom',
+                label: "Custom URL",
+                value: "custom",
               },
             ],
-            defaultValue: 'reference',
+            defaultValue: "reference",
             admin: {
-              layout: 'horizontal',
-              width: '50%',
+              layout: "horizontal",
+              width: "50%",
             },
           },
           {
-            name: 'newTab',
-            label: 'Open in new tab',
-            type: 'checkbox',
+            name: "newTab",
+            label: "Open in new tab",
+            type: "checkbox",
             admin: {
-              width: '50%',
+              width: "50%",
               style: {
-                alignSelf: 'flex-end',
+                alignSelf: "flex-end",
               },
             },
           },
         ],
       },
     ],
-  }
+  };
 
   let linkTypes: Field[] = [
     {
-      name: 'reference',
-      label: 'Document to link to',
-      type: 'relationship',
-      relationTo: ['pages'],
+      name: "reference",
+      label: "Document to link to",
+      type: "relationship",
+      relationTo: ["pages"],
       required: true,
       maxDepth: 1,
       admin: {
-        condition: (_, siblingData) => siblingData?.type === 'reference',
+        condition: (_, siblingData) => siblingData?.type === "reference",
       },
     },
     {
-      name: 'url',
-      label: 'Custom URL',
-      type: 'text',
+      name: "url",
+      label: "Custom URL",
+      type: "text",
       required: true,
       admin: {
-        condition: (_, siblingData) => siblingData?.type === 'custom',
+        condition: (_, siblingData) => siblingData?.type === "custom",
       },
     },
-  ]
+  ];
 
   if (!disableLabel && linkTypes[0]?.admin && linkTypes[1]?.admin) {
-    linkTypes[0].admin.width = '50%'
-    linkTypes[1].admin.width = '50%'
+    linkTypes[0].admin.width = "50%";
+    linkTypes[1].admin.width = "50%";
 
     linkResult.fields.push({
-      type: 'row',
+      type: "row",
       fields: [
         ...linkTypes,
         {
-          name: 'label',
-          label: 'Label',
-          type: 'text',
+          name: "label",
+          label: "Label",
+          type: "text",
           required: true,
           admin: {
-            width: '50%',
+            width: "50%",
           },
         },
       ],
-    })
+    });
   } else {
-    linkResult.fields = [...linkResult.fields, ...linkTypes]
+    linkResult.fields = [...linkResult.fields, ...linkTypes];
   }
 
   if (appearances !== false) {
@@ -125,26 +125,26 @@ const link: LinkType = ({
       appearanceOptions.default,
       appearanceOptions.primary,
       appearanceOptions.secondary,
-    ]
+    ];
 
     if (appearances) {
       appearanceOptionsToUse = appearances.map(
-        (appearance) => appearanceOptions[appearance]
-      )
+        (appearance) => appearanceOptions[appearance],
+      );
     }
 
     linkResult.fields.push({
-      name: 'appearance',
-      type: 'select',
-      defaultValue: 'default',
+      name: "appearance",
+      type: "select",
+      defaultValue: "default",
       options: appearanceOptionsToUse,
       admin: {
-        description: 'Choose how the link should be rendered.',
+        description: "Choose how the link should be rendered.",
       },
-    })
+    });
   }
 
-  return deepMerge(linkResult, overrides)
-}
+  return deepMerge(linkResult, overrides);
+};
 
-export default link
+export default link;
diff --git a/examples/cms-payload/payload/fields/linkGroup.ts b/examples/cms-payload/payload/fields/linkGroup.ts
index a34a525926..b114c34a1e 100644
--- a/examples/cms-payload/payload/fields/linkGroup.ts
+++ b/examples/cms-payload/payload/fields/linkGroup.ts
@@ -1,25 +1,25 @@
-import { Field } from 'payload/types'
-import { ArrayField } from 'payload/dist/fields/config/types'
-import deepMerge from '../utilities/deepMerge'
-import link, { LinkAppearances } from './link'
+import { Field } from "payload/types";
+import { ArrayField } from "payload/dist/fields/config/types";
+import deepMerge from "../utilities/deepMerge";
+import link, { LinkAppearances } from "./link";
 
 type LinkGroupType = (options?: {
-  overrides?: Partial<ArrayField>
-  appearances?: LinkAppearances[] | false
-}) => Field
+  overrides?: Partial<ArrayField>;
+  appearances?: LinkAppearances[] | false;
+}) => Field;
 
 const linkGroup: LinkGroupType = ({ overrides = {}, appearances } = {}) => {
   const generatedLinkGroup: Field = {
-    name: 'links',
-    type: 'array',
+    name: "links",
+    type: "array",
     fields: [
       link({
         appearances,
       }),
     ],
-  }
+  };
 
-  return deepMerge(generatedLinkGroup, overrides)
-}
+  return deepMerge(generatedLinkGroup, overrides);
+};
 
-export default linkGroup
+export default linkGroup;
diff --git a/examples/cms-payload/payload/fields/richText/elements.ts b/examples/cms-payload/payload/fields/richText/elements.ts
index 2c47ba1d16..148bcfedbc 100644
--- a/examples/cms-payload/payload/fields/richText/elements.ts
+++ b/examples/cms-payload/payload/fields/richText/elements.ts
@@ -1,17 +1,17 @@
-import { RichTextElement } from 'payload/dist/fields/config/types'
-import label from './label'
-import largeBody from './largeBody'
+import { RichTextElement } from "payload/dist/fields/config/types";
+import label from "./label";
+import largeBody from "./largeBody";
 
 const elements: RichTextElement[] = [
-  'blockquote',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'link',
+  "blockquote",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "link",
   largeBody,
   label,
-]
+];
 
-export default elements
+export default elements;
diff --git a/examples/cms-payload/payload/fields/richText/index.ts b/examples/cms-payload/payload/fields/richText/index.ts
index 9dd6e7f514..2973630810 100644
--- a/examples/cms-payload/payload/fields/richText/index.ts
+++ b/examples/cms-payload/payload/fields/richText/index.ts
@@ -2,37 +2,37 @@ import {
   RichTextElement,
   RichTextField,
   RichTextLeaf,
-} from 'payload/dist/fields/config/types'
-import deepMerge from '../../utilities/deepMerge'
-import elements from './elements'
-import leaves from './leaves'
+} from "payload/dist/fields/config/types";
+import deepMerge from "../../utilities/deepMerge";
+import elements from "./elements";
+import leaves from "./leaves";
 
 type RichText = (
   overrides?: Partial<RichTextField>,
   additions?: {
-    elements?: RichTextElement[]
-    leaves?: RichTextLeaf[]
-  }
-) => RichTextField
+    elements?: RichTextElement[];
+    leaves?: RichTextLeaf[];
+  },
+) => RichTextField;
 
 const richText: RichText = (
   overrides,
   additions = {
     elements: [],
     leaves: [],
-  }
+  },
 ) =>
   deepMerge<RichTextField, Partial<RichTextField>>(
     {
-      name: 'richText',
-      type: 'richText',
+      name: "richText",
+      type: "richText",
       required: true,
       admin: {
         elements: [...elements, ...(additions.elements || [])],
         leaves: [...leaves, ...(additions.leaves || [])],
       },
     },
-    overrides || {}
-  )
+    overrides || {},
+  );
 
-export default richText
+export default richText;
diff --git a/examples/cms-payload/payload/fields/richText/label/Button/index.tsx b/examples/cms-payload/payload/fields/richText/label/Button/index.tsx
index 7ee57b4915..4b5bb9f3cc 100644
--- a/examples/cms-payload/payload/fields/richText/label/Button/index.tsx
+++ b/examples/cms-payload/payload/fields/richText/label/Button/index.tsx
@@ -1,17 +1,17 @@
-'use client'
+"use client";
 
 /* eslint-disable import/no-extraneous-dependencies */
 // eslint-disable-next-line no-use-before-define
-import React from 'react'
-import { ElementButton } from 'payload/components/rich-text'
-import Icon from '../Icon'
+import React from "react";
+import { ElementButton } from "payload/components/rich-text";
+import Icon from "../Icon";
 
-const baseClass = 'rich-text-label-button'
+const baseClass = "rich-text-label-button";
 
 const ToolbarButton: React.FC<{ path: string }> = () => (
   <ElementButton className={baseClass} format="label">
     <Icon />
   </ElementButton>
-)
+);
 
-export default ToolbarButton
+export default ToolbarButton;
diff --git a/examples/cms-payload/payload/fields/richText/label/Element/index.scss b/examples/cms-payload/payload/fields/richText/label/Element/index.scss
index 3259acd66c..509d43bf00 100644
--- a/examples/cms-payload/payload/fields/richText/label/Element/index.scss
+++ b/examples/cms-payload/payload/fields/richText/label/Element/index.scss
@@ -1,8 +1,8 @@
-@import '~payload/scss';
+@import "~payload/scss";
 
 .rich-text-label {
   text-transform: uppercase;
-  font-family: 'Roboto Mono', monospace;
+  font-family: "Roboto Mono", monospace;
   letter-spacing: 2px;
   font-size: base(0.5);
   margin: 0 0 base(1);
diff --git a/examples/cms-payload/payload/fields/richText/label/Element/index.tsx b/examples/cms-payload/payload/fields/richText/label/Element/index.tsx
index be59ad9504..9eb8d1c6eb 100644
--- a/examples/cms-payload/payload/fields/richText/label/Element/index.tsx
+++ b/examples/cms-payload/payload/fields/richText/label/Element/index.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
+import React from "react";
 
-import './index.scss'
+import "./index.scss";
 
-const baseClass = 'rich-text-label'
+const baseClass = "rich-text-label";
 
 const LabelElement: React.FC<{
-  attributes: any
-  element: any
-  children: React.ReactNode
+  attributes: any;
+  element: any;
+  children: React.ReactNode;
 }> = ({ attributes, children }) => (
   <div {...attributes}>
     <span className={baseClass}>{children}</span>
   </div>
-)
-export default LabelElement
+);
+export default LabelElement;
diff --git a/examples/cms-payload/payload/fields/richText/label/Icon/index.tsx b/examples/cms-payload/payload/fields/richText/label/Icon/index.tsx
index 58de464a72..441c791e44 100644
--- a/examples/cms-payload/payload/fields/richText/label/Icon/index.tsx
+++ b/examples/cms-payload/payload/fields/richText/label/Icon/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 // eslint-disable-next-line import/no-extraneous-dependencies
-import React from 'react'
+import React from "react";
 
 const Icon = () => (
   <svg
@@ -19,6 +19,6 @@ const Icon = () => (
       fill="currentColor"
     />
   </svg>
-)
+);
 
-export default Icon
+export default Icon;
diff --git a/examples/cms-payload/payload/fields/richText/label/index.ts b/examples/cms-payload/payload/fields/richText/label/index.ts
index cf967d8fce..a241244f32 100644
--- a/examples/cms-payload/payload/fields/richText/label/index.ts
+++ b/examples/cms-payload/payload/fields/richText/label/index.ts
@@ -1,11 +1,11 @@
-import { RichTextCustomElement } from 'payload/types'
-import Button from './Button'
-import Element from './Element'
-import withLabel from './plugin'
+import { RichTextCustomElement } from "payload/types";
+import Button from "./Button";
+import Element from "./Element";
+import withLabel from "./plugin";
 
 export default {
-  name: 'label',
+  name: "label",
   Button,
   Element,
   plugins: [withLabel],
-} as RichTextCustomElement
+} as RichTextCustomElement;
diff --git a/examples/cms-payload/payload/fields/richText/label/plugin.ts b/examples/cms-payload/payload/fields/richText/label/plugin.ts
index 2305c7a6bb..3fdb6eaddc 100644
--- a/examples/cms-payload/payload/fields/richText/label/plugin.ts
+++ b/examples/cms-payload/payload/fields/richText/label/plugin.ts
@@ -1,11 +1,11 @@
 const withLabel = (incomingEditor) => {
-  const editor = incomingEditor
-  const { shouldBreakOutOnEnter } = editor
+  const editor = incomingEditor;
+  const { shouldBreakOutOnEnter } = editor;
 
   editor.shouldBreakOutOnEnter = (element) =>
-    element.type === 'label' ? true : shouldBreakOutOnEnter(element)
+    element.type === "label" ? true : shouldBreakOutOnEnter(element);
 
-  return editor
-}
+  return editor;
+};
 
-export default withLabel
+export default withLabel;
diff --git a/examples/cms-payload/payload/fields/richText/largeBody/Button/index.tsx b/examples/cms-payload/payload/fields/richText/largeBody/Button/index.tsx
index 3405a97125..b01927f12b 100644
--- a/examples/cms-payload/payload/fields/richText/largeBody/Button/index.tsx
+++ b/examples/cms-payload/payload/fields/richText/largeBody/Button/index.tsx
@@ -1,17 +1,17 @@
-'use client'
+"use client";
 
 /* eslint-disable import/no-extraneous-dependencies */
 // eslint-disable-next-line no-use-before-define
-import React from 'react'
-import { ElementButton } from 'payload/components/rich-text'
-import Icon from '../Icon'
+import React from "react";
+import { ElementButton } from "payload/components/rich-text";
+import Icon from "../Icon";
 
-const baseClass = 'rich-text-large-body-button'
+const baseClass = "rich-text-large-body-button";
 
 const ToolbarButton: React.FC<{ path: string }> = () => (
   <ElementButton className={baseClass} format="large-body">
     <Icon />
   </ElementButton>
-)
+);
 
-export default ToolbarButton
+export default ToolbarButton;
diff --git a/examples/cms-payload/payload/fields/richText/largeBody/Element/index.scss b/examples/cms-payload/payload/fields/richText/largeBody/Element/index.scss
index e81e0d4ca9..bf5e671785 100644
--- a/examples/cms-payload/payload/fields/richText/largeBody/Element/index.scss
+++ b/examples/cms-payload/payload/fields/richText/largeBody/Element/index.scss
@@ -1,4 +1,4 @@
-@import '~payload/scss';
+@import "~payload/scss";
 
 .rich-text-large-body {
   font-size: base(0.8);
diff --git a/examples/cms-payload/payload/fields/richText/largeBody/Element/index.tsx b/examples/cms-payload/payload/fields/richText/largeBody/Element/index.tsx
index 3d6a3ae504..0332334b3c 100644
--- a/examples/cms-payload/payload/fields/richText/largeBody/Element/index.tsx
+++ b/examples/cms-payload/payload/fields/richText/largeBody/Element/index.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
+import React from "react";
 
-import './index.scss'
+import "./index.scss";
 
-const baseClass = 'rich-text-large-body'
+const baseClass = "rich-text-large-body";
 
 const LargeBodyElement: React.FC<{
-  attributes: any
-  element: any
-  children: React.ReactNode
+  attributes: any;
+  element: any;
+  children: React.ReactNode;
 }> = ({ attributes, children }) => (
   <div {...attributes}>
     <span className={baseClass}>{children}</span>
   </div>
-)
-export default LargeBodyElement
+);
+export default LargeBodyElement;
diff --git a/examples/cms-payload/payload/fields/richText/largeBody/Icon/index.tsx b/examples/cms-payload/payload/fields/richText/largeBody/Icon/index.tsx
index ef94fe44a0..a8bd1d77b8 100644
--- a/examples/cms-payload/payload/fields/richText/largeBody/Icon/index.tsx
+++ b/examples/cms-payload/payload/fields/richText/largeBody/Icon/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 // eslint-disable-next-line import/no-extraneous-dependencies
-import React from 'react'
+import React from "react";
 
 const Icon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
@@ -13,6 +13,6 @@ const Icon = () => (
       fill="currentColor"
     />
   </svg>
-)
+);
 
-export default Icon
+export default Icon;
diff --git a/examples/cms-payload/payload/fields/richText/largeBody/index.ts b/examples/cms-payload/payload/fields/richText/largeBody/index.ts
index 6002c95f2d..70606bedbc 100644
--- a/examples/cms-payload/payload/fields/richText/largeBody/index.ts
+++ b/examples/cms-payload/payload/fields/richText/largeBody/index.ts
@@ -1,11 +1,11 @@
-import { RichTextCustomElement } from 'payload/types'
-import Button from './Button'
-import Element from './Element'
-import withLargeBody from './plugin'
+import { RichTextCustomElement } from "payload/types";
+import Button from "./Button";
+import Element from "./Element";
+import withLargeBody from "./plugin";
 
 export default {
-  name: 'large-body',
+  name: "large-body",
   Button,
   Element,
   plugins: [withLargeBody],
-} as RichTextCustomElement
+} as RichTextCustomElement;
diff --git a/examples/cms-payload/payload/fields/richText/largeBody/plugin.ts b/examples/cms-payload/payload/fields/richText/largeBody/plugin.ts
index 1739a3ddf0..7ea177b3e7 100644
--- a/examples/cms-payload/payload/fields/richText/largeBody/plugin.ts
+++ b/examples/cms-payload/payload/fields/richText/largeBody/plugin.ts
@@ -1,11 +1,11 @@
 const withLargeBody = (incomingEditor) => {
-  const editor = incomingEditor
-  const { shouldBreakOutOnEnter } = editor
+  const editor = incomingEditor;
+  const { shouldBreakOutOnEnter } = editor;
 
   editor.shouldBreakOutOnEnter = (element) =>
-    element.type === 'large-body' ? true : shouldBreakOutOnEnter(element)
+    element.type === "large-body" ? true : shouldBreakOutOnEnter(element);
 
-  return editor
-}
+  return editor;
+};
 
-export default withLargeBody
+export default withLargeBody;
diff --git a/examples/cms-payload/payload/fields/richText/leaves.ts b/examples/cms-payload/payload/fields/richText/leaves.ts
index 3aa1d1135f..9b88922c69 100644
--- a/examples/cms-payload/payload/fields/richText/leaves.ts
+++ b/examples/cms-payload/payload/fields/richText/leaves.ts
@@ -1,5 +1,5 @@
-import { RichTextLeaf } from 'payload/dist/fields/config/types'
+import { RichTextLeaf } from "payload/dist/fields/config/types";
 
-const defaultLeaves: RichTextLeaf[] = ['bold', 'italic', 'underline']
+const defaultLeaves: RichTextLeaf[] = ["bold", "italic", "underline"];
 
-export default defaultLeaves
+export default defaultLeaves;
diff --git a/examples/cms-payload/payload/fields/slug.ts b/examples/cms-payload/payload/fields/slug.ts
index 3e4405e0c3..083c6a1fa6 100644
--- a/examples/cms-payload/payload/fields/slug.ts
+++ b/examples/cms-payload/payload/fields/slug.ts
@@ -1,22 +1,22 @@
-import { Field } from 'payload/types'
-import formatSlug from '../utilities/formatSlug'
-import deepMerge from '../utilities/deepMerge'
+import { Field } from "payload/types";
+import formatSlug from "../utilities/formatSlug";
+import deepMerge from "../utilities/deepMerge";
 
-type Slug = (fieldToUse?: string, overrides?: Partial<Field>) => Field
+type Slug = (fieldToUse?: string, overrides?: Partial<Field>) => Field;
 
-export const slugField: Slug = (fieldToUse = 'title', overrides) =>
+export const slugField: Slug = (fieldToUse = "title", overrides) =>
   deepMerge<Field, Partial<Field>>(
     {
-      name: 'slug',
-      label: 'Slug',
-      type: 'text',
+      name: "slug",
+      label: "Slug",
+      type: "text",
       index: true,
       admin: {
-        position: 'sidebar',
+        position: "sidebar",
       },
       hooks: {
         beforeValidate: [formatSlug(fieldToUse)],
       },
     },
-    overrides || {}
-  )
+    overrides || {},
+  );
diff --git a/examples/cms-payload/payload/globals/MainMenu.ts b/examples/cms-payload/payload/globals/MainMenu.ts
index 2596b81e12..38091dd712 100644
--- a/examples/cms-payload/payload/globals/MainMenu.ts
+++ b/examples/cms-payload/payload/globals/MainMenu.ts
@@ -1,18 +1,18 @@
-import { GlobalConfig } from 'payload/types'
-import link from '../fields/link'
+import { GlobalConfig } from "payload/types";
+import link from "../fields/link";
 
 export const MainMenu: GlobalConfig = {
-  slug: 'main-menu',
+  slug: "main-menu",
   graphQL: {
-    name: 'MainMenu',
+    name: "MainMenu",
   },
   access: {
     read: () => true,
   },
   fields: [
     {
-      name: 'navItems',
-      type: 'array',
+      name: "navItems",
+      type: "array",
       maxRows: 6,
       fields: [
         link({
@@ -21,4 +21,4 @@ export const MainMenu: GlobalConfig = {
       ],
     },
   ],
-}
+};
diff --git a/examples/cms-payload/payload/payload.config.ts b/examples/cms-payload/payload/payload.config.ts
index ed5b325d12..2229b5f151 100644
--- a/examples/cms-payload/payload/payload.config.ts
+++ b/examples/cms-payload/payload/payload.config.ts
@@ -1,11 +1,11 @@
-import { buildConfig } from 'payload/config'
-import path from 'path'
-import { Users } from './collections/Users'
-import { Pages } from './collections/Pages'
-import { MainMenu } from './globals/MainMenu'
-import { cloudStorage } from '@payloadcms/plugin-cloud-storage'
-import { s3Adapter } from '@payloadcms/plugin-cloud-storage/s3'
-import { Media } from './collections/Media'
+import { buildConfig } from "payload/config";
+import path from "path";
+import { Users } from "./collections/Users";
+import { Pages } from "./collections/Pages";
+import { MainMenu } from "./globals/MainMenu";
+import { cloudStorage } from "@payloadcms/plugin-cloud-storage";
+import { s3Adapter } from "@payloadcms/plugin-cloud-storage/s3";
+import { Media } from "./collections/Media";
 
 const adapter = s3Adapter({
   config: {
@@ -18,16 +18,16 @@ const adapter = s3Adapter({
     },
   },
   bucket: process.env.NEXT_PUBLIC_S3_BUCKET as string,
-})
+});
 
 export default buildConfig({
   collections: [Pages, Users, Media],
   globals: [MainMenu],
   typescript: {
-    outputFile: path.resolve(__dirname, '../payload-types.ts'),
+    outputFile: path.resolve(__dirname, "../payload-types.ts"),
   },
   graphQL: {
-    schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
+    schemaOutputFile: path.resolve(__dirname, "generated-schema.graphql"),
   },
   plugins: [
     cloudStorage({
@@ -39,4 +39,4 @@ export default buildConfig({
       },
     }),
   ],
-})
+});
diff --git a/examples/cms-payload/payload/payloadClient.ts b/examples/cms-payload/payload/payloadClient.ts
index 25dcf8e75f..62a6d03318 100644
--- a/examples/cms-payload/payload/payloadClient.ts
+++ b/examples/cms-payload/payload/payloadClient.ts
@@ -1,12 +1,12 @@
-import { getPayload } from 'payload/dist/payload'
-import config from './payload.config'
+import { getPayload } from "payload/dist/payload";
+import config from "./payload.config";
 
 if (!process.env.MONGODB_URI) {
-  throw new Error('MONGODB_URI environment variable is missing')
+  throw new Error("MONGODB_URI environment variable is missing");
 }
 
 if (!process.env.PAYLOAD_SECRET) {
-  throw new Error('PAYLOAD_SECRET environment variable is missing')
+  throw new Error("PAYLOAD_SECRET environment variable is missing");
 }
 
 /**
@@ -16,15 +16,15 @@ if (!process.env.PAYLOAD_SECRET) {
  *
  * Source: https://github.com/vercel/next.js/blob/canary/examples/with-mongodb-mongoose/lib/dbConnect.js
  */
-let cached = (global as any).payload
+let cached = (global as any).payload;
 
 if (!cached) {
-  cached = (global as any).payload = { client: null, promise: null }
+  cached = (global as any).payload = { client: null, promise: null };
 }
 
 export const getPayloadClient = async () => {
   if (cached.client) {
-    return cached.client
+    return cached.client;
   }
 
   if (!cached.promise) {
@@ -33,17 +33,17 @@ export const getPayloadClient = async () => {
       mongoURL: process.env.MONGODB_URI as string,
       secret: process.env.PAYLOAD_SECRET as string,
       config: config,
-    })
+    });
   }
 
   try {
-    cached.client = await cached.promise
+    cached.client = await cached.promise;
   } catch (e) {
-    cached.promise = null
-    throw e
+    cached.promise = null;
+    throw e;
   }
 
-  return cached.client
-}
+  return cached.client;
+};
 
-export default getPayloadClient
+export default getPayloadClient;
diff --git a/examples/cms-payload/payload/utilities/deepMerge.ts b/examples/cms-payload/payload/utilities/deepMerge.ts
index cefdf193cd..755d5278ac 100644
--- a/examples/cms-payload/payload/utilities/deepMerge.ts
+++ b/examples/cms-payload/payload/utilities/deepMerge.ts
@@ -4,7 +4,7 @@
  * @returns {boolean}
  */
 export function isObject(item: unknown): boolean {
-  return Boolean(item && typeof item === 'object' && !Array.isArray(item))
+  return Boolean(item && typeof item === "object" && !Array.isArray(item));
 }
 
 /**
@@ -14,23 +14,23 @@ export function isObject(item: unknown): boolean {
  */
 export default function deepMerge<T extends object, R extends object>(
   target: T,
-  source: R
+  source: R,
 ): T {
-  const output = { ...target }
+  const output = { ...target };
   if (isObject(target) && isObject(source)) {
     Object.keys(source).forEach((key) => {
       if (isObject(source[key])) {
         // @ts-ignore
         if (!(key in target)) {
-          Object.assign(output, { [key]: source[key] })
+          Object.assign(output, { [key]: source[key] });
         } else {
-          output[key] = deepMerge(target[key], source[key])
+          output[key] = deepMerge(target[key], source[key]);
         }
       } else {
-        Object.assign(output, { [key]: source[key] })
+        Object.assign(output, { [key]: source[key] });
       }
-    })
+    });
   }
 
-  return output
+  return output;
 }
diff --git a/examples/cms-payload/payload/utilities/formatSlug.ts b/examples/cms-payload/payload/utilities/formatSlug.ts
index 89f9911eb6..56cacaaff4 100644
--- a/examples/cms-payload/payload/utilities/formatSlug.ts
+++ b/examples/cms-payload/payload/utilities/formatSlug.ts
@@ -1,28 +1,28 @@
-import { FieldHook } from 'payload/types'
+import { FieldHook } from "payload/types";
 
 const format = (val: string): string =>
   val
-    .replace(/ /g, '-')
-    .replace(/[^\w-]+/g, '')
-    .toLowerCase()
+    .replace(/ /g, "-")
+    .replace(/[^\w-]+/g, "")
+    .toLowerCase();
 
 const formatSlug =
   (fallback: string): FieldHook =>
   ({ operation, value, originalDoc, data }) => {
-    if (typeof value === 'string') {
-      return format(value)
+    if (typeof value === "string") {
+      return format(value);
     }
 
-    if (operation === 'create') {
+    if (operation === "create") {
       const fallbackData =
-        (data && data[fallback]) || (originalDoc && originalDoc[fallback])
+        (data && data[fallback]) || (originalDoc && originalDoc[fallback]);
 
-      if (fallbackData && typeof fallbackData === 'string') {
-        return format(fallbackData)
+      if (fallbackData && typeof fallbackData === "string") {
+        return format(fallbackData);
       }
     }
 
-    return value
-  }
+    return value;
+  };
 
-export default formatSlug
+export default formatSlug;
diff --git a/examples/cms-payload/payload/utilities/regenerateStaticPage.ts b/examples/cms-payload/payload/utilities/regenerateStaticPage.ts
index 02e0c00151..f92e57772a 100644
--- a/examples/cms-payload/payload/utilities/regenerateStaticPage.ts
+++ b/examples/cms-payload/payload/utilities/regenerateStaticPage.ts
@@ -1,25 +1,25 @@
-import { AfterChangeHook } from 'payload/dist/collections/config/types'
+import { AfterChangeHook } from "payload/dist/collections/config/types";
 
 export const regenerateStaticPage: AfterChangeHook<any> = async ({
   req: { payload },
   doc,
 }) => {
-  let path = `/${doc.slug}`
+  let path = `/${doc.slug}`;
 
-  if (path === '/home') {
-    path = '/'
+  if (path === "/home") {
+    path = "/";
   }
 
   try {
     const res = await fetch(
-      `${process.env.PAYLOAD_PUBLIC_CMS_URL}/api/regenerate?secret=${process.env.PAYLOAD_PRIVATE_REGENERATION_SECRET}&path=${path}`
-    )
+      `${process.env.PAYLOAD_PUBLIC_CMS_URL}/api/regenerate?secret=${process.env.PAYLOAD_PRIVATE_REGENERATION_SECRET}&path=${path}`,
+    );
     if (res.ok) {
-      payload.logger.info(`Now regenerating path '${path}'`)
+      payload.logger.info(`Now regenerating path '${path}'`);
     } else {
-      payload.logger.info(`Error regenerating path '${path}'`)
+      payload.logger.info(`Error regenerating path '${path}'`);
     }
   } catch (err) {
-    payload.logger.info(`Error hitting regeneration route for '${path}'`)
+    payload.logger.info(`Error hitting regeneration route for '${path}'`);
   }
-}
+};
diff --git a/examples/cms-payload/utilities/timestamp.ts b/examples/cms-payload/utilities/timestamp.ts
index f10035433f..5af4a8337e 100644
--- a/examples/cms-payload/utilities/timestamp.ts
+++ b/examples/cms-payload/utilities/timestamp.ts
@@ -1,8 +1,8 @@
 export const timestamp = (label) => {
   if (!process.env.PAYLOAD_TIME)
-    process.env.PAYLOAD_TIME = String(new Date().getTime())
-  const now = new Date()
+    process.env.PAYLOAD_TIME = String(new Date().getTime());
+  const now = new Date();
   console.log(
-    `[${now.getTime() - Number(process.env.PAYLOAD_TIME)}ms] ${label}`
-  )
-}
+    `[${now.getTime() - Number(process.env.PAYLOAD_TIME)}ms] ${label}`,
+  );
+};
diff --git a/examples/cms-payload/utilities/toKebabCase.ts b/examples/cms-payload/utilities/toKebabCase.ts
index 048df6bf4a..a0adcda4f9 100644
--- a/examples/cms-payload/utilities/toKebabCase.ts
+++ b/examples/cms-payload/utilities/toKebabCase.ts
@@ -1,5 +1,5 @@
 export const toKebabCase = (string): string =>
   string
-    ?.replace(/([a-z])([A-Z])/g, '$1-$2')
-    .replace(/\s+/g, '-')
-    .toLowerCase()
+    ?.replace(/([a-z])([A-Z])/g, "$1-$2")
+    .replace(/\s+/g, "-")
+    .toLowerCase();
diff --git a/examples/cms-plasmic/next.config.js b/examples/cms-plasmic/next.config.js
index a843cbee09..91ef62f0db 100644
--- a/examples/cms-plasmic/next.config.js
+++ b/examples/cms-plasmic/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/cms-plasmic/pages/[[...catchall]].tsx b/examples/cms-plasmic/pages/[[...catchall]].tsx
index f62b768a64..081359a7a8 100644
--- a/examples/cms-plasmic/pages/[[...catchall]].tsx
+++ b/examples/cms-plasmic/pages/[[...catchall]].tsx
@@ -3,43 +3,43 @@ import {
   ComponentRenderData,
   PlasmicRootProvider,
   extractPlasmicQueryData,
-} from '@plasmicapp/loader-nextjs'
-import type { GetStaticPaths, GetStaticProps } from 'next'
-import Error from 'next/error'
-import { PLASMIC, PREVIEW_PLASMIC } from '../plasmic-init'
+} from "@plasmicapp/loader-nextjs";
+import type { GetStaticPaths, GetStaticProps } from "next";
+import Error from "next/error";
+import { PLASMIC, PREVIEW_PLASMIC } from "../plasmic-init";
 
 /**
  * Use fetchPages() to fetch list of pages that have been created in Plasmic
  */
 export const getStaticPaths: GetStaticPaths = async () => {
-  const pages = await PLASMIC.fetchPages()
+  const pages = await PLASMIC.fetchPages();
   return {
     paths: pages.map((page) => ({
-      params: { catchall: page.path.substring(1).split('/') },
+      params: { catchall: page.path.substring(1).split("/") },
     })),
-    fallback: 'blocking',
-  }
-}
+    fallback: "blocking",
+  };
+};
 
 /**
  * For each page, pre-fetch the data we need to render it
  */
 export const getStaticProps: GetStaticProps = async (context) => {
-  const { catchall } = context.params ?? {}
+  const { catchall } = context.params ?? {};
 
   // Convert the catchall param into a path string
   const plasmicPath =
-    typeof catchall === 'string'
+    typeof catchall === "string"
       ? catchall
       : Array.isArray(catchall)
-      ? `/${catchall.join('/')}`
-      : '/'
-  const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath)
+      ? `/${catchall.join("/")}`
+      : "/";
+  const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
   if (!plasmicData) {
     // This is some non-Plasmic catch-all page
     return {
       props: {},
-    }
+    };
   }
 
   // This is a path that Plasmic knows about.
@@ -47,8 +47,8 @@ export const getStaticProps: GetStaticProps = async (context) => {
   const queryCache = await extractPlasmicQueryData(
     <PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData}>
       <PlasmicComponent component={plasmicData.entryCompMetas[0].displayName} />
-    </PlasmicRootProvider>
-  )
+    </PlasmicRootProvider>,
+  );
 
   // Pass the data in as props.
   return {
@@ -57,22 +57,22 @@ export const getStaticProps: GetStaticProps = async (context) => {
     // Using incremental static regeneration, will invalidate this page
     // after 300s (no deploy webhooks needed)
     revalidate: 300,
-  }
-}
+  };
+};
 
 /**
  * Actually render the page!
  */
 export default function CatchallPage(props: {
-  plasmicData?: ComponentRenderData
-  queryCache?: Record<string, any>
-  preview?: boolean
+  plasmicData?: ComponentRenderData;
+  queryCache?: Record<string, any>;
+  preview?: boolean;
 }) {
-  const { plasmicData, queryCache, preview } = props
+  const { plasmicData, queryCache, preview } = props;
   if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
-    return <Error statusCode={404} />
+    return <Error statusCode={404} />;
   }
-  const pageMeta = plasmicData.entryCompMetas[0]
+  const pageMeta = plasmicData.entryCompMetas[0];
   return (
     // Pass in the data fetched in getStaticProps as prefetchedData
     <PlasmicRootProvider
@@ -86,5 +86,5 @@ export default function CatchallPage(props: {
       }
       <PlasmicComponent component={pageMeta.displayName} />
     </PlasmicRootProvider>
-  )
+  );
 }
diff --git a/examples/cms-plasmic/pages/_app.js b/examples/cms-plasmic/pages/_app.js
index 1e1cec9242..2fc3e07009 100644
--- a/examples/cms-plasmic/pages/_app.js
+++ b/examples/cms-plasmic/pages/_app.js
@@ -1,7 +1,7 @@
-import '../styles/globals.css'
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-plasmic/pages/api/exit-preview.ts b/examples/cms-plasmic/pages/api/exit-preview.ts
index a63a171ba4..16b744e88e 100644
--- a/examples/cms-plasmic/pages/api/exit-preview.ts
+++ b/examples/cms-plasmic/pages/api/exit-preview.ts
@@ -1,8 +1,8 @@
 export default async function exit(_, res) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-plasmic/pages/api/preview.ts b/examples/cms-plasmic/pages/api/preview.ts
index fd1fc33336..1e53059737 100644
--- a/examples/cms-plasmic/pages/api/preview.ts
+++ b/examples/cms-plasmic/pages/api/preview.ts
@@ -1,4 +1,4 @@
-import { PREVIEW_PLASMIC } from '../../plasmic-init'
+import { PREVIEW_PLASMIC } from "../../plasmic-init";
 
 export default async function preview(req, res) {
   // Check the secret and next parameters
@@ -7,22 +7,22 @@ export default async function preview(req, res) {
     req.query.secret !== process.env.PLASMIC_PREVIEW_SECRET ||
     !req.query.slug
   ) {
-    return res.status(401).json({ message: 'Invalid token' })
+    return res.status(401).json({ message: "Invalid token" });
   }
 
   // Check if the page with the given `slug` exists
-  const pages = await PREVIEW_PLASMIC.fetchPages()
-  const pageMeta = pages.find((p) => p.path === req.query.slug)
+  const pages = await PREVIEW_PLASMIC.fetchPages();
+  const pageMeta = pages.find((p) => p.path === req.query.slug);
 
   // If the slug doesn't exist prevent preview mode from being enabled
   if (!pageMeta) {
-    return res.status(401).json({ message: 'Invalid slug' })
+    return res.status(401).json({ message: "Invalid slug" });
   }
 
   // Enable Draft Mode by setting the cookie
-  res.setDraftMode({ enable: true })
+  res.setDraftMode({ enable: true });
 
   // Redirect to the path from the fetched post
   // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
-  res.redirect(pageMeta.path)
+  res.redirect(pageMeta.path);
 }
diff --git a/examples/cms-plasmic/plasmic-init.ts b/examples/cms-plasmic/plasmic-init.ts
index 70cf6e6955..6f305de224 100644
--- a/examples/cms-plasmic/plasmic-init.ts
+++ b/examples/cms-plasmic/plasmic-init.ts
@@ -1,8 +1,8 @@
-import { initPlasmicLoader } from '@plasmicapp/loader-nextjs'
+import { initPlasmicLoader } from "@plasmicapp/loader-nextjs";
 
-const PLASMIC_PROJECT_ID = process.env['NEXT_PUBLIC_PLASMIC_PROJECT_ID']
+const PLASMIC_PROJECT_ID = process.env["NEXT_PUBLIC_PLASMIC_PROJECT_ID"];
 const PLASMIC_PROJECT_API_TOKEN =
-  process.env['NEXT_PUBLIC_PLASMIC_PROJECT_API_TOKEN']
+  process.env["NEXT_PUBLIC_PLASMIC_PROJECT_API_TOKEN"];
 
 const PLASMIC_CONFIG = {
   projects: [
@@ -11,16 +11,16 @@ const PLASMIC_CONFIG = {
       token: PLASMIC_PROJECT_API_TOKEN,
     },
   ],
-}
+};
 
 export const PLASMIC = initPlasmicLoader({
   ...PLASMIC_CONFIG,
   preview: false,
-})
+});
 
 export const PREVIEW_PLASMIC = initPlasmicLoader({
   ...PLASMIC_CONFIG,
   // Fetches the latest revisions, whether or not they were unpublished!
   // Disable for production to ensure you render only published changes.
   preview: true,
-})
+});
diff --git a/examples/cms-prepr/components/alert.js b/examples/cms-prepr/components/alert.js
index 051f331964..98355c9031 100644
--- a/examples/cms-prepr/components/alert.js
+++ b/examples/cms-prepr/components/alert.js
@@ -1,31 +1,31 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '@/lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "@/lib/constants";
 
 export default function Alert({ preview }) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This is page is a preview.{' '}
+              This is page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -38,5 +38,5 @@ export default function Alert({ preview }) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-prepr/components/avatar.js b/examples/cms-prepr/components/avatar.js
index 6777f50313..edd075a80b 100644
--- a/examples/cms-prepr/components/avatar.js
+++ b/examples/cms-prepr/components/avatar.js
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Avatar({ name, picture }) {
   return (
@@ -13,5 +13,5 @@ export default function Avatar({ name, picture }) {
       </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-prepr/components/container.js b/examples/cms-prepr/components/container.js
index fc1c29dfb0..92e559ece3 100644
--- a/examples/cms-prepr/components/container.js
+++ b/examples/cms-prepr/components/container.js
@@ -1,3 +1,3 @@
 export default function Container({ children }) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }
diff --git a/examples/cms-prepr/components/cover-image.js b/examples/cms-prepr/components/cover-image.js
index d5f55447e2..7be11980c0 100644
--- a/examples/cms-prepr/components/cover-image.js
+++ b/examples/cms-prepr/components/cover-image.js
@@ -1,6 +1,6 @@
-import cn from 'classnames'
-import Image from 'next/image'
-import Link from 'next/link'
+import cn from "classnames";
+import Image from "next/image";
+import Link from "next/link";
 
 export default function CoverImage({ title, url, slug }) {
   const image = (
@@ -9,11 +9,11 @@ export default function CoverImage({ title, url, slug }) {
       height={1000}
       alt={`Cover Image for ${title}`}
       src={url}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": slug,
       })}
     />
-  )
+  );
   return (
     <div className="sm:mx-0">
       {slug ? (
@@ -24,5 +24,5 @@ export default function CoverImage({ title, url, slug }) {
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-prepr/components/date.js b/examples/cms-prepr/components/date.js
index 9337878fdd..c04efcbfa7 100644
--- a/examples/cms-prepr/components/date.js
+++ b/examples/cms-prepr/components/date.js
@@ -1,5 +1,5 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 export default function Date({ dateString }) {
-  const date = parseISO(dateString)
-  return <time dateTime={date}>{format(date, 'LLLL d, yyyy')}</time>
+  const date = parseISO(dateString);
+  return <time dateTime={date}>{format(date, "LLLL d, yyyy")}</time>;
 }
diff --git a/examples/cms-prepr/components/footer.js b/examples/cms-prepr/components/footer.js
index b305c3eb40..d4213d236e 100644
--- a/examples/cms-prepr/components/footer.js
+++ b/examples/cms-prepr/components/footer.js
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '@/lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "@/lib/constants";
 
 export default function Footer() {
   return (
@@ -26,5 +26,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-prepr/components/header.js b/examples/cms-prepr/components/header.js
index 05cb9af247..e6dea52099 100644
--- a/examples/cms-prepr/components/header.js
+++ b/examples/cms-prepr/components/header.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-prepr/components/hero-post.js b/examples/cms-prepr/components/hero-post.js
index 6351c2414a..bc1956ef58 100644
--- a/examples/cms-prepr/components/hero-post.js
+++ b/examples/cms-prepr/components/hero-post.js
@@ -1,7 +1,7 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function HeroPost({
   title,
@@ -38,5 +38,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-prepr/components/intro.js b/examples/cms-prepr/components/intro.js
index c3003c6196..b751ac199e 100644
--- a/examples/cms-prepr/components/intro.js
+++ b/examples/cms-prepr/components/intro.js
@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '@/lib/constants'
+import { CMS_NAME, CMS_URL } from "@/lib/constants";
 
 export default function Intro() {
   return (
@@ -7,14 +7,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -24,5 +24,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-prepr/components/layout.js b/examples/cms-prepr/components/layout.js
index 399802b095..d9e7c4b074 100644
--- a/examples/cms-prepr/components/layout.js
+++ b/examples/cms-prepr/components/layout.js
@@ -1,6 +1,6 @@
-import Alert from './alert'
-import Footer from './footer'
-import Meta from './meta'
+import Alert from "./alert";
+import Footer from "./footer";
+import Meta from "./meta";
 
 export default function Layout({ preview, children }) {
   return (
@@ -12,5 +12,5 @@ export default function Layout({ preview, children }) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-prepr/components/meta.js b/examples/cms-prepr/components/meta.js
index cec6227420..88aac65487 100644
--- a/examples/cms-prepr/components/meta.js
+++ b/examples/cms-prepr/components/meta.js
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '@/lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "@/lib/constants";
 
 export default function Meta() {
   return (
@@ -38,5 +38,5 @@ export default function Meta() {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-prepr/components/more-stories.js b/examples/cms-prepr/components/more-stories.js
index eb884e2ced..449b9d3ed7 100644
--- a/examples/cms-prepr/components/more-stories.js
+++ b/examples/cms-prepr/components/more-stories.js
@@ -1,4 +1,4 @@
-import PostPreview from './post-preview'
+import PostPreview from "./post-preview";
 
 export default function MoreStories({ posts }) {
   return (
@@ -20,5 +20,5 @@ export default function MoreStories({ posts }) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-prepr/components/post-body.js b/examples/cms-prepr/components/post-body.js
index 3549fb4037..26ef5deee4 100644
--- a/examples/cms-prepr/components/post-body.js
+++ b/examples/cms-prepr/components/post-body.js
@@ -1,15 +1,15 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function PostBody({ content }) {
   const renderedContent = content.map((item) => {
-    if (item.__typename === 'Text') {
-      return <div dangerouslySetInnerHTML={{ __html: item.html }}></div>
-    } else if (item.__typename === 'Image') {
-      return <Image src={item.url} alt="image" width={1000} height={500} />
+    if (item.__typename === "Text") {
+      return <div dangerouslySetInnerHTML={{ __html: item.html }}></div>;
+    } else if (item.__typename === "Image") {
+      return <Image src={item.url} alt="image" width={1000} height={500} />;
     } else {
-      return null
+      return null;
     }
-  })
+  });
 
-  return <div className="max-w-2xl mx-auto article">{renderedContent}</div>
+  return <div className="max-w-2xl mx-auto article">{renderedContent}</div>;
 }
diff --git a/examples/cms-prepr/components/post-header.js b/examples/cms-prepr/components/post-header.js
index a136be0ab3..25acc0983d 100644
--- a/examples/cms-prepr/components/post-header.js
+++ b/examples/cms-prepr/components/post-header.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
-import PostTitle from '../components/post-title'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "../components/cover-image";
+import PostTitle from "../components/post-title";
 
 export default function PostHeader({ title, coverImage, date, author }) {
   return (
@@ -24,5 +24,5 @@ export default function PostHeader({ title, coverImage, date, author }) {
         )}
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-prepr/components/post-preview.js b/examples/cms-prepr/components/post-preview.js
index 32a307ed31..7774e1055e 100644
--- a/examples/cms-prepr/components/post-preview.js
+++ b/examples/cms-prepr/components/post-preview.js
@@ -1,7 +1,7 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function PostPreview({
   title,
@@ -32,5 +32,5 @@ export default function PostPreview({
       ></div>
       <Avatar name={author.full_name} picture={author.profile_pic[0].url} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-prepr/components/post-title.js b/examples/cms-prepr/components/post-title.js
index edd8cba65c..a15f06616f 100644
--- a/examples/cms-prepr/components/post-title.js
+++ b/examples/cms-prepr/components/post-title.js
@@ -3,5 +3,5 @@ export default function PostTitle({ children }) {
     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
-  )
+  );
 }
diff --git a/examples/cms-prepr/components/section-separator.js b/examples/cms-prepr/components/section-separator.js
index 4ca5c65fdc..b86fb50b7d 100644
--- a/examples/cms-prepr/components/section-separator.js
+++ b/examples/cms-prepr/components/section-separator.js
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }
diff --git a/examples/cms-prepr/lib/api.js b/examples/cms-prepr/lib/api.js
index f0d2de551a..b85fe99298 100644
--- a/examples/cms-prepr/lib/api.js
+++ b/examples/cms-prepr/lib/api.js
@@ -1,10 +1,10 @@
 async function fetchAPI(query, { variables, preview } = {}) {
   const response = await fetch(process.env.PREPRIO_API, {
-    method: 'POST',
+    method: "POST",
     headers: {
-      'Content-Type': 'application/json',
+      "Content-Type": "application/json",
       Authorization:
-        'Bearer ' +
+        "Bearer " +
         (preview
           ? process.env.PREPRIO_PREVIEW_TOKEN
           : process.env.PREPRIO_PRODUCTION_TOKEN),
@@ -13,11 +13,11 @@ async function fetchAPI(query, { variables, preview } = {}) {
       query,
       variables,
     }),
-  })
+  });
 
-  const result = await response.json()
+  const result = await response.json();
 
-  return result
+  return result;
 }
 
 export async function getPreviewPostBySlug(slug) {
@@ -34,9 +34,9 @@ export async function getPreviewPostBySlug(slug) {
       variables: {
         slug,
       },
-    }
-  )
-  return data.Article
+    },
+  );
+  return data.Article;
 }
 
 export async function getAllPostsWithSlug() {
@@ -50,9 +50,9 @@ export async function getAllPostsWithSlug() {
       }
     }
   `,
-    { preview: true }
-  )
-  return data?.Articles.items
+    { preview: true },
+  );
+  return data?.Articles.items;
 }
 
 export async function getAllPostsForHome(preview) {
@@ -85,10 +85,10 @@ export async function getAllPostsForHome(preview) {
       }
     }
   `,
-    { preview }
-  )
+    { preview },
+  );
 
-  return data?.Articles.items
+  return data?.Articles.items;
 }
 
 export async function getPostAndMorePosts(slug, preview) {
@@ -154,13 +154,13 @@ export async function getPostAndMorePosts(slug, preview) {
       variables: {
         slug,
       },
-    }
-  )
+    },
+  );
 
   return {
     post: data?.Article,
     morePosts: (data?.MoreArticles?.items || [])
       .filter((item) => item._slug !== slug)
       .slice(0, 2),
-  }
+  };
 }
diff --git a/examples/cms-prepr/lib/constants.js b/examples/cms-prepr/lib/constants.js
index a525b5b76b..0cbbca036f 100644
--- a/examples/cms-prepr/lib/constants.js
+++ b/examples/cms-prepr/lib/constants.js
@@ -1,4 +1,4 @@
-export const EXAMPLE_PATH = 'cms-prepr'
-export const CMS_NAME = 'Prepr'
-export const CMS_URL = 'https://prepr.io/'
-export const HOME_OG_IMAGE_URL = ''
+export const EXAMPLE_PATH = "cms-prepr";
+export const CMS_NAME = "Prepr";
+export const CMS_URL = "https://prepr.io/";
+export const HOME_OG_IMAGE_URL = "";
diff --git a/examples/cms-prepr/next.config.js b/examples/cms-prepr/next.config.js
index fe495f36b6..6e7ad355f6 100644
--- a/examples/cms-prepr/next.config.js
+++ b/examples/cms-prepr/next.config.js
@@ -3,17 +3,17 @@ module.exports = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'b-cdn.net',
-        port: '',
-        pathname: '/my-account/**',
+        protocol: "https",
+        hostname: "b-cdn.net",
+        port: "",
+        pathname: "/my-account/**",
       },
       {
-        protocol: 'https',
-        hostname: '*.stream.prepr.io',
-        port: '',
-        pathname: '/my-account/**',
+        protocol: "https",
+        hostname: "*.stream.prepr.io",
+        port: "",
+        pathname: "/my-account/**",
       },
     ],
   },
-}
+};
diff --git a/examples/cms-prepr/pages/_app.js b/examples/cms-prepr/pages/_app.js
index f18e112c7c..a82d9dd7b0 100644
--- a/examples/cms-prepr/pages/_app.js
+++ b/examples/cms-prepr/pages/_app.js
@@ -1,7 +1,7 @@
-import '@/styles/index.css'
+import "@/styles/index.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-prepr/pages/_document.js b/examples/cms-prepr/pages/_document.js
index 54e8bf3e2a..b2fff8b426 100644
--- a/examples/cms-prepr/pages/_document.js
+++ b/examples/cms-prepr/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/cms-prepr/pages/api/exit-preview.js b/examples/cms-prepr/pages/api/exit-preview.js
index fccc016b69..ba4a2bdf59 100644
--- a/examples/cms-prepr/pages/api/exit-preview.js
+++ b/examples/cms-prepr/pages/api/exit-preview.js
@@ -1,8 +1,8 @@
 export default async function handler(_, res) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-prepr/pages/api/preview.js b/examples/cms-prepr/pages/api/preview.js
index 91d118c117..5ab1042b4e 100644
--- a/examples/cms-prepr/pages/api/preview.js
+++ b/examples/cms-prepr/pages/api/preview.js
@@ -1,4 +1,4 @@
-import { getPreviewPostBySlug } from '../../lib/api'
+import { getPreviewPostBySlug } from "../../lib/api";
 
 export default async function handler(req, res) {
   // Check the secret and next parameters
@@ -8,22 +8,22 @@ export default async function handler(req, res) {
     req.query.secret !== process.env.PREPRIO_PREVIEW_SECRET ||
     !req.query.slug
   ) {
-    return res.status(401).json({ message: 'Invalid token' })
+    return res.status(401).json({ message: "Invalid token" });
   }
 
   // Fetch the headless CMS to check if the provided `slug` exists
-  const post = await getPreviewPostBySlug(req.query.slug)
+  const post = await getPreviewPostBySlug(req.query.slug);
 
   // If the slug doesn't exist prevent preview mode from being enabled
   if (!post) {
-    return res.status(401).json({ message: 'Invalid slug' })
+    return res.status(401).json({ message: "Invalid slug" });
   }
 
   // Enable Draft Mode by setting the cookie
-  res.setDraftMode({ enable: true })
+  res.setDraftMode({ enable: true });
 
   // Redirect to the path from the fetched post
   // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
-  res.writeHead(307, { Location: `/posts/${post._slug}` })
-  res.end()
+  res.writeHead(307, { Location: `/posts/${post._slug}` });
+  res.end();
 }
diff --git a/examples/cms-prepr/pages/index.js b/examples/cms-prepr/pages/index.js
index 7936879d59..c9072e9fb2 100644
--- a/examples/cms-prepr/pages/index.js
+++ b/examples/cms-prepr/pages/index.js
@@ -1,16 +1,16 @@
-import Container from '@/components/container'
-import MoreStories from '@/components/more-stories'
-import HeroPost from '@/components/hero-post'
-import Intro from '@/components/intro'
-import Layout from '@/components/layout'
-import { getAllPostsForHome } from '@/lib/api'
-import Head from 'next/head'
-import { CMS_NAME } from '@/lib/constants'
+import Container from "@/components/container";
+import MoreStories from "@/components/more-stories";
+import HeroPost from "@/components/hero-post";
+import Intro from "@/components/intro";
+import Layout from "@/components/layout";
+import { getAllPostsForHome } from "@/lib/api";
+import Head from "next/head";
+import { CMS_NAME } from "@/lib/constants";
 
 export default function Index({ allPosts, preview }) {
-  const heroPost = allPosts[0]
+  const heroPost = allPosts[0];
 
-  const morePosts = allPosts.slice(1)
+  const morePosts = allPosts.slice(1);
   return (
     <>
       <Layout preview={preview}>
@@ -33,12 +33,12 @@ export default function Index({ allPosts, preview }) {
         </Container>
       </Layout>
     </>
-  )
+  );
 }
 
 export async function getStaticProps({ preview = null }) {
-  const allPosts = (await getAllPostsForHome(preview)) || []
+  const allPosts = (await getAllPostsForHome(preview)) || [];
   return {
     props: { allPosts, preview },
-  }
+  };
 }
diff --git a/examples/cms-prepr/pages/posts/[slug].js b/examples/cms-prepr/pages/posts/[slug].js
index 8ab6c740c4..efc042bbc6 100644
--- a/examples/cms-prepr/pages/posts/[slug].js
+++ b/examples/cms-prepr/pages/posts/[slug].js
@@ -1,21 +1,21 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import Container from '@/components/container'
-import PostBody from '@/components/post-body'
-import MoreStories from '@/components/more-stories'
-import Header from '@/components/header'
-import PostHeader from '@/components/post-header'
-import SectionSeparator from '@/components/section-separator'
-import Layout from '@/components/layout'
-import { getAllPostsWithSlug, getPostAndMorePosts } from '@/lib/api'
-import PostTitle from '@/components/post-title'
-import Head from 'next/head'
-import { CMS_NAME } from '@/lib/constants'
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Container from "@/components/container";
+import PostBody from "@/components/post-body";
+import MoreStories from "@/components/more-stories";
+import Header from "@/components/header";
+import PostHeader from "@/components/post-header";
+import SectionSeparator from "@/components/section-separator";
+import Layout from "@/components/layout";
+import { getAllPostsWithSlug, getPostAndMorePosts } from "@/lib/api";
+import PostTitle from "@/components/post-title";
+import Head from "next/head";
+import { CMS_NAME } from "@/lib/constants";
 
 export default function Post({ post, morePosts, preview }) {
-  const router = useRouter()
+  const router = useRouter();
   if (!router.isFallback && !post?._slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
   return (
     <Layout preview={preview}>
@@ -46,11 +46,11 @@ export default function Post({ post, morePosts, preview }) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps({ params, preview = false }) {
-  const { post, morePosts } = await getPostAndMorePosts(params.slug, preview)
+  const { post, morePosts } = await getPostAndMorePosts(params.slug, preview);
 
   return {
     props: {
@@ -58,18 +58,18 @@ export async function getStaticProps({ params, preview = false }) {
       post,
       morePosts,
     },
-  }
+  };
 }
 
 export async function getStaticPaths() {
-  const allPosts = await getAllPostsWithSlug()
+  const allPosts = await getAllPostsWithSlug();
 
   const paths = allPosts.map((post) => ({
     params: { slug: post._slug },
-  }))
+  }));
 
   return {
     paths,
     fallback: true,
-  }
+  };
 }
diff --git a/examples/cms-prepr/postcss.config.js b/examples/cms-prepr/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-prepr/postcss.config.js
+++ b/examples/cms-prepr/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-prepr/tailwind.config.js b/examples/cms-prepr/tailwind.config.js
index ea0efae6d7..a8f65a525d 100644
--- a/examples/cms-prepr/tailwind.config.js
+++ b/examples/cms-prepr/tailwind.config.js
@@ -1,38 +1,38 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/cms-prismic/.slicemachine/assets/slices/Image/index.stories.js b/examples/cms-prismic/.slicemachine/assets/slices/Image/index.stories.js
index 3608f818e4..34320451e5 100644
--- a/examples/cms-prismic/.slicemachine/assets/slices/Image/index.stories.js
+++ b/examples/cms-prismic/.slicemachine/assets/slices/Image/index.stories.js
@@ -1,26 +1,26 @@
-import MyComponent from '../../../../slices/Image'
+import MyComponent from "../../../../slices/Image";
 
 export default {
-  title: 'slices/Image',
-}
+  title: "slices/Image",
+};
 
 export const _Default = () => (
   <MyComponent
     slice={{
-      variation: 'default',
-      version: 'sktwi1xtmkfgx8626',
+      variation: "default",
+      version: "sktwi1xtmkfgx8626",
       items: [{}],
       primary: {
         image: {
           dimensions: { width: 900, height: 500 },
           alt: null,
           copyright: null,
-          url: 'https://images.unsplash.com/photo-1493397212122-2b85dda8106b',
+          url: "https://images.unsplash.com/photo-1493397212122-2b85dda8106b",
         },
       },
-      slice_type: 'image',
-      id: '_Default',
+      slice_type: "image",
+      id: "_Default",
     }}
   />
-)
-_Default.storyName = ''
+);
+_Default.storyName = "";
diff --git a/examples/cms-prismic/.slicemachine/assets/slices/Text/index.stories.js b/examples/cms-prismic/.slicemachine/assets/slices/Text/index.stories.js
index 0450789b49..ac9457bbab 100644
--- a/examples/cms-prismic/.slicemachine/assets/slices/Text/index.stories.js
+++ b/examples/cms-prismic/.slicemachine/assets/slices/Text/index.stories.js
@@ -1,42 +1,42 @@
-import MyComponent from '../../../../slices/Text'
+import MyComponent from "../../../../slices/Text";
 
 export default {
-  title: 'slices/Text',
-}
+  title: "slices/Text",
+};
 
 export const _Default = () => (
   <MyComponent
     slice={{
-      variation: 'default',
-      version: 'sktwi1xtmkfgx8626',
+      variation: "default",
+      version: "sktwi1xtmkfgx8626",
       items: [{}],
       primary: {
         text: [
           {
-            type: 'paragraph',
-            text: 'Pariatur consequat eu eiusmod cillum velit excepteur ex sit sit dolore dolor labore ullamco.',
+            type: "paragraph",
+            text: "Pariatur consequat eu eiusmod cillum velit excepteur ex sit sit dolore dolor labore ullamco.",
             spans: [],
           },
           {
-            type: 'paragraph',
-            text: 'Et nisi elit dolor pariatur pariatur nisi non est cillum aute.',
+            type: "paragraph",
+            text: "Et nisi elit dolor pariatur pariatur nisi non est cillum aute.",
             spans: [],
           },
           {
-            type: 'paragraph',
-            text: 'Officia deserunt sunt ad ut anim quis.',
+            type: "paragraph",
+            text: "Officia deserunt sunt ad ut anim quis.",
             spans: [],
           },
           {
-            type: 'paragraph',
-            text: 'Est consequat enim id quis consectetur exercitation reprehenderit. Nulla ut ut consequat ipsum nulla duis consequat nostrud eiusmod eiusmod ex incididunt consequat consequat minim. Esse adipisicing ullamco officia incididunt excepteur dolor nisi magna incididunt adipisicing anim.',
+            type: "paragraph",
+            text: "Est consequat enim id quis consectetur exercitation reprehenderit. Nulla ut ut consequat ipsum nulla duis consequat nostrud eiusmod eiusmod ex incididunt consequat consequat minim. Esse adipisicing ullamco officia incididunt excepteur dolor nisi magna incididunt adipisicing anim.",
             spans: [],
           },
         ],
       },
-      slice_type: 'text',
-      id: '_Default',
+      slice_type: "text",
+      id: "_Default",
     }}
   />
-)
-_Default.storyName = ''
+);
+_Default.storyName = "";
diff --git a/examples/cms-prismic/components/alert.tsx b/examples/cms-prismic/components/alert.tsx
index a0fccebcf1..e5873a69c5 100644
--- a/examples/cms-prismic/components/alert.tsx
+++ b/examples/cms-prismic/components/alert.tsx
@@ -1,37 +1,37 @@
-import cn from 'classnames'
+import cn from "classnames";
 
-import { EXAMPLE_PATH } from '../lib/constants'
+import { EXAMPLE_PATH } from "../lib/constants";
 
-import Container from './container'
+import Container from "./container";
 
 type AlertProps = {
-  preview: boolean
-}
+  preview: boolean;
+};
 
 export default function Alert({ preview }: AlertProps) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This is page is a preview.{' '}
+              This is page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -44,5 +44,5 @@ export default function Alert({ preview }: AlertProps) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-prismic/components/avatar.tsx b/examples/cms-prismic/components/avatar.tsx
index 06071d81c7..6df440d9bb 100644
--- a/examples/cms-prismic/components/avatar.tsx
+++ b/examples/cms-prismic/components/avatar.tsx
@@ -1,10 +1,10 @@
-import { PrismicNextImage } from '@prismicio/next'
-import { ImageField } from '@prismicio/types'
+import { PrismicNextImage } from "@prismicio/next";
+import { ImageField } from "@prismicio/types";
 
 type AvatarProps = {
-  name: string
-  picture: ImageField
-}
+  name: string;
+  picture: ImageField;
+};
 
 export default function Avatar({ name, picture }: AvatarProps) {
   return (
@@ -18,5 +18,5 @@ export default function Avatar({ name, picture }: AvatarProps) {
       </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-prismic/components/container.tsx b/examples/cms-prismic/components/container.tsx
index bff89b5b99..dff7cfa9a6 100644
--- a/examples/cms-prismic/components/container.tsx
+++ b/examples/cms-prismic/components/container.tsx
@@ -1,7 +1,7 @@
 type ContainerProps = {
-  children: React.ReactNode
-}
+  children: React.ReactNode;
+};
 
 export default function Container({ children }: ContainerProps) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }
diff --git a/examples/cms-prismic/components/cover-image.tsx b/examples/cms-prismic/components/cover-image.tsx
index 5e4d7ea460..85e404e018 100644
--- a/examples/cms-prismic/components/cover-image.tsx
+++ b/examples/cms-prismic/components/cover-image.tsx
@@ -1,13 +1,13 @@
-import Link from 'next/link'
-import { PrismicNextImage } from '@prismicio/next'
-import { ImageField } from '@prismicio/types'
-import cn from 'classnames'
+import Link from "next/link";
+import { PrismicNextImage } from "@prismicio/next";
+import { ImageField } from "@prismicio/types";
+import cn from "classnames";
 
 type CoverImageProps = {
-  title: string
-  image: ImageField
-  href?: string
-}
+  title: string;
+  image: ImageField;
+  href?: string;
+};
 
 export default function CoverImage({
   title,
@@ -19,12 +19,12 @@ export default function CoverImage({
       field={imageField}
       width={2000}
       height={1000}
-      imgixParams={{ fit: 'crop', ar: '2:1' }}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': href,
+      imgixParams={{ fit: "crop", ar: "2:1" }}
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": href,
       })}
     />
-  )
+  );
 
   return (
     <div className="sm:mx-0">
@@ -36,5 +36,5 @@ export default function CoverImage({
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-prismic/components/date.tsx b/examples/cms-prismic/components/date.tsx
index 4bd8ed10d3..930d932453 100644
--- a/examples/cms-prismic/components/date.tsx
+++ b/examples/cms-prismic/components/date.tsx
@@ -1,18 +1,18 @@
-import { asDate } from '@prismicio/helpers'
-import { DateField } from '@prismicio/types'
+import { asDate } from "@prismicio/helpers";
+import { DateField } from "@prismicio/types";
 
-const formatter = new Intl.DateTimeFormat('en-US', {
-  month: 'long',
-  day: 'numeric',
-  year: 'numeric',
-})
+const formatter = new Intl.DateTimeFormat("en-US", {
+  month: "long",
+  day: "numeric",
+  year: "numeric",
+});
 
 type DateProps = {
-  dateField: DateField
-}
+  dateField: DateField;
+};
 
 export default function Date({ dateField }: DateProps) {
-  const date = asDate(dateField)
+  const date = asDate(dateField);
 
-  return <time dateTime={dateField}>{formatter.format(date)}</time>
+  return <time dateTime={dateField}>{formatter.format(date)}</time>;
 }
diff --git a/examples/cms-prismic/components/footer.tsx b/examples/cms-prismic/components/footer.tsx
index 2f4bd5a2fe..612322fe86 100644
--- a/examples/cms-prismic/components/footer.tsx
+++ b/examples/cms-prismic/components/footer.tsx
@@ -1,6 +1,6 @@
-import { EXAMPLE_PATH } from '../lib/constants'
+import { EXAMPLE_PATH } from "../lib/constants";
 
-import Container from './container'
+import Container from "./container";
 
 export default function Footer() {
   return (
@@ -27,5 +27,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-prismic/components/header.tsx b/examples/cms-prismic/components/header.tsx
index 05cb9af247..e6dea52099 100644
--- a/examples/cms-prismic/components/header.tsx
+++ b/examples/cms-prismic/components/header.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-prismic/components/hero-post.tsx b/examples/cms-prismic/components/hero-post.tsx
index f3499f7919..c01484b076 100644
--- a/examples/cms-prismic/components/hero-post.tsx
+++ b/examples/cms-prismic/components/hero-post.tsx
@@ -1,22 +1,22 @@
-import Link from 'next/link'
-import { DateField, ImageField, TitleField } from '@prismicio/types'
-import { PrismicText } from '@prismicio/react'
-import { asText, isFilled } from '@prismicio/helpers'
+import Link from "next/link";
+import { DateField, ImageField, TitleField } from "@prismicio/types";
+import { PrismicText } from "@prismicio/react";
+import { asText, isFilled } from "@prismicio/helpers";
 
-import { AuthorContentRelationshipField } from '../lib/types'
+import { AuthorContentRelationshipField } from "../lib/types";
 
-import Avatar from '../components/avatar'
-import CoverImage from '../components/cover-image'
-import Date from '../components/date'
+import Avatar from "../components/avatar";
+import CoverImage from "../components/cover-image";
+import Date from "../components/date";
 
 type HeroPostProps = {
-  title: TitleField
-  coverImage: ImageField
-  date: DateField
-  excerpt: string
-  author: AuthorContentRelationshipField
-  href: string
-}
+  title: TitleField;
+  coverImage: ImageField;
+  date: DateField;
+  excerpt: string;
+  author: AuthorContentRelationshipField;
+  href: string;
+};
 
 export default function HeroPost({
   title,
@@ -53,5 +53,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-prismic/components/intro.tsx b/examples/cms-prismic/components/intro.tsx
index 5931b3c596..e8578bef66 100644
--- a/examples/cms-prismic/components/intro.tsx
+++ b/examples/cms-prismic/components/intro.tsx
@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '../lib/constants'
+import { CMS_NAME, CMS_URL } from "../lib/constants";
 
 export default function Intro() {
   return (
@@ -7,14 +7,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -24,5 +24,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-prismic/components/layout.tsx b/examples/cms-prismic/components/layout.tsx
index 39538073c1..84c3db0c22 100644
--- a/examples/cms-prismic/components/layout.tsx
+++ b/examples/cms-prismic/components/layout.tsx
@@ -1,11 +1,11 @@
-import Alert from '../components/alert'
-import Footer from '../components/footer'
-import Meta from '../components/meta'
+import Alert from "../components/alert";
+import Footer from "../components/footer";
+import Meta from "../components/meta";
 
 type LayoutProps = {
-  preview: boolean
-  children: React.ReactNode
-}
+  preview: boolean;
+  children: React.ReactNode;
+};
 
 export default function Layout({ preview, children }: LayoutProps) {
   return (
@@ -17,5 +17,5 @@ export default function Layout({ preview, children }: LayoutProps) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-prismic/components/meta.tsx b/examples/cms-prismic/components/meta.tsx
index 172dbb746d..0414c684e0 100644
--- a/examples/cms-prismic/components/meta.tsx
+++ b/examples/cms-prismic/components/meta.tsx
@@ -1,6 +1,6 @@
-import Head from 'next/head'
+import Head from "next/head";
 
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "../lib/constants";
 
 export default function Meta() {
   return (
@@ -39,5 +39,5 @@ export default function Meta() {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-prismic/components/more-stories.tsx b/examples/cms-prismic/components/more-stories.tsx
index 2afacc8661..1c1abb3ca2 100644
--- a/examples/cms-prismic/components/more-stories.tsx
+++ b/examples/cms-prismic/components/more-stories.tsx
@@ -1,10 +1,10 @@
-import { Content } from '@prismicio/client'
+import { Content } from "@prismicio/client";
 
-import PostPreview from '../components/post-preview'
+import PostPreview from "../components/post-preview";
 
 type MoreStoriesProps = {
-  posts: Content.PostDocument[]
-}
+  posts: Content.PostDocument[];
+};
 
 export default function MoreStories({ posts }: MoreStoriesProps) {
   return (
@@ -26,5 +26,5 @@ export default function MoreStories({ posts }: MoreStoriesProps) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-prismic/components/post-body.tsx b/examples/cms-prismic/components/post-body.tsx
index 636026ada9..92ee4381eb 100644
--- a/examples/cms-prismic/components/post-body.tsx
+++ b/examples/cms-prismic/components/post-body.tsx
@@ -1,16 +1,16 @@
-import { SliceZone } from '@prismicio/react'
-import { Content } from '@prismicio/client'
+import { SliceZone } from "@prismicio/react";
+import { Content } from "@prismicio/client";
 
-import { components } from '../slices'
+import { components } from "../slices";
 
 type PostBodyProps = {
-  slices: Content.PostDocument['data']['slices']
-}
+  slices: Content.PostDocument["data"]["slices"];
+};
 
 export default function PostBody({ slices }: PostBodyProps) {
   return (
     <div className="max-w-2xl mx-auto">
       <SliceZone slices={slices} components={components} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-prismic/components/post-header.tsx b/examples/cms-prismic/components/post-header.tsx
index 930742eb36..366c933e70 100644
--- a/examples/cms-prismic/components/post-header.tsx
+++ b/examples/cms-prismic/components/post-header.tsx
@@ -1,20 +1,20 @@
-import { PrismicText } from '@prismicio/react'
-import { asText, isFilled } from '@prismicio/helpers'
-import { DateField, ImageField, TitleField } from '@prismicio/types'
+import { PrismicText } from "@prismicio/react";
+import { asText, isFilled } from "@prismicio/helpers";
+import { DateField, ImageField, TitleField } from "@prismicio/types";
 
-import { AuthorContentRelationshipField } from '../lib/types'
+import { AuthorContentRelationshipField } from "../lib/types";
 
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
-import PostTitle from '../components/post-title'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "../components/cover-image";
+import PostTitle from "../components/post-title";
 
 type PostHeaderProps = {
-  title: TitleField
-  coverImage: ImageField
-  date: DateField
-  author: AuthorContentRelationshipField
-}
+  title: TitleField;
+  coverImage: ImageField;
+  date: DateField;
+  author: AuthorContentRelationshipField;
+};
 
 export default function PostHeader({
   title,
@@ -52,5 +52,5 @@ export default function PostHeader({
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-prismic/components/post-preview.tsx b/examples/cms-prismic/components/post-preview.tsx
index fc305c4ca5..7a7e1166f7 100644
--- a/examples/cms-prismic/components/post-preview.tsx
+++ b/examples/cms-prismic/components/post-preview.tsx
@@ -1,23 +1,23 @@
-import Link from 'next/link'
-import { DateField, ImageField, TitleField } from '@prismicio/types'
-import { PrismicText } from '@prismicio/react'
-import { asText, isFilled } from '@prismicio/helpers'
+import Link from "next/link";
+import { DateField, ImageField, TitleField } from "@prismicio/types";
+import { PrismicText } from "@prismicio/react";
+import { asText, isFilled } from "@prismicio/helpers";
 
-import { AuthorContentRelationshipField } from '../lib/types'
+import { AuthorContentRelationshipField } from "../lib/types";
 
-import Avatar from '../components/avatar'
-import Date from '../components/date'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
 
-import CoverImage from './cover-image'
+import CoverImage from "./cover-image";
 
 type PostPreviewProps = {
-  title: TitleField
-  coverImage: ImageField
-  date: DateField
-  excerpt: string
-  author: AuthorContentRelationshipField
-  href: string
-}
+  title: TitleField;
+  coverImage: ImageField;
+  date: DateField;
+  excerpt: string;
+  author: AuthorContentRelationshipField;
+  href: string;
+};
 
 export default function PostPreview({
   title,
@@ -45,5 +45,5 @@ export default function PostPreview({
         <Avatar name={asText(author.data.name)} picture={author.data.picture} />
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-prismic/components/post-title.tsx b/examples/cms-prismic/components/post-title.tsx
index 41718dda67..a05913c900 100644
--- a/examples/cms-prismic/components/post-title.tsx
+++ b/examples/cms-prismic/components/post-title.tsx
@@ -1,11 +1,11 @@
 type PostTitleProps = {
-  children: React.ReactNode
-}
+  children: React.ReactNode;
+};
 
 export default function PostTitle({ children }: PostTitleProps) {
   return (
     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
-  )
+  );
 }
diff --git a/examples/cms-prismic/components/section-separator.tsx b/examples/cms-prismic/components/section-separator.tsx
index 4ca5c65fdc..b86fb50b7d 100644
--- a/examples/cms-prismic/components/section-separator.tsx
+++ b/examples/cms-prismic/components/section-separator.tsx
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }
diff --git a/examples/cms-prismic/lib/constants.ts b/examples/cms-prismic/lib/constants.ts
index c2d79badb7..1822c3ec3a 100644
--- a/examples/cms-prismic/lib/constants.ts
+++ b/examples/cms-prismic/lib/constants.ts
@@ -1,5 +1,5 @@
-export const EXAMPLE_PATH = 'cms-prismic'
-export const CMS_NAME = 'Prismic'
-export const CMS_URL = 'https://prismic.io/'
+export const EXAMPLE_PATH = "cms-prismic";
+export const CMS_NAME = "Prismic";
+export const CMS_URL = "https://prismic.io/";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**Prismic**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fi.imgur.com%2FGVmKYul.png&widths=undefined&widths=auto&heights=undefined&heights=100'
+  "https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**Prismic**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fi.imgur.com%2FGVmKYul.png&widths=undefined&widths=auto&heights=undefined&heights=100";
diff --git a/examples/cms-prismic/lib/prismic.ts b/examples/cms-prismic/lib/prismic.ts
index 036c2b8bc0..c4eba73ca7 100644
--- a/examples/cms-prismic/lib/prismic.ts
+++ b/examples/cms-prismic/lib/prismic.ts
@@ -1,22 +1,22 @@
-import * as prismic from '@prismicio/client'
-import * as prismicNext from '@prismicio/next'
+import * as prismic from "@prismicio/client";
+import * as prismicNext from "@prismicio/next";
 
-import sm from '../sm.json'
+import sm from "../sm.json";
 
 /**
  * The project's Prismic repository name.
  */
-export const repositoryName = prismic.getRepositoryName(sm.apiEndpoint)
+export const repositoryName = prismic.getRepositoryName(sm.apiEndpoint);
 
 /**
  * Route definitions for Prismic documents.
  */
 const routes: prismic.Route[] = [
   {
-    type: 'post',
-    path: '/posts/:uid',
+    type: "post",
+    path: "/posts/:uid",
   },
-]
+];
 
 /**
  * Creates a Prismic client for the project's repository. The client is used to
@@ -32,9 +32,9 @@ export const createClient = ({
   const client = prismic.createClient(sm.apiEndpoint, {
     routes,
     ...config,
-  })
+  });
 
-  prismicNext.enableAutoPreviews({ client, previewData, req })
+  prismicNext.enableAutoPreviews({ client, previewData, req });
 
-  return client
-}
+  return client;
+};
diff --git a/examples/cms-prismic/lib/types.ts b/examples/cms-prismic/lib/types.ts
index 28fa20ba43..0be7ad5ab5 100644
--- a/examples/cms-prismic/lib/types.ts
+++ b/examples/cms-prismic/lib/types.ts
@@ -1,17 +1,17 @@
-import { Content } from '@prismicio/client'
-import { ImageField, RelationField, TitleField } from '@prismicio/types'
+import { Content } from "@prismicio/client";
+import { ImageField, RelationField, TitleField } from "@prismicio/types";
 
 export type PostDocumentWithAuthor = Content.PostDocument & {
   data: {
-    author: AuthorContentRelationshipField
-  }
-}
+    author: AuthorContentRelationshipField;
+  };
+};
 
 export type AuthorContentRelationshipField = RelationField<
-  'author',
+  "author",
   string,
   {
-    name: TitleField
-    picture: ImageField
+    name: TitleField;
+    picture: ImageField;
   }
->
+>;
diff --git a/examples/cms-prismic/next.config.js b/examples/cms-prismic/next.config.js
index 0447ca9461..790e4f4627 100644
--- a/examples/cms-prismic/next.config.js
+++ b/examples/cms-prismic/next.config.js
@@ -3,11 +3,11 @@ module.exports = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'images.prismic.io',
-        port: '',
-        pathname: '/my-account/**',
+        protocol: "https",
+        hostname: "images.prismic.io",
+        port: "",
+        pathname: "/my-account/**",
       },
     ],
   },
-}
+};
diff --git a/examples/cms-prismic/pages/_app.tsx b/examples/cms-prismic/pages/_app.tsx
index 8aad7e505e..9fb3140ca2 100644
--- a/examples/cms-prismic/pages/_app.tsx
+++ b/examples/cms-prismic/pages/_app.tsx
@@ -1,13 +1,13 @@
-import { PrismicPreview } from '@prismicio/next'
-import { repositoryName } from '../lib/prismic'
-import '../styles/index.css'
+import { PrismicPreview } from "@prismicio/next";
+import { repositoryName } from "../lib/prismic";
+import "../styles/index.css";
 
 function MyApp({ Component, pageProps }) {
   return (
     <PrismicPreview repositoryName={repositoryName}>
       <Component {...pageProps} />
     </PrismicPreview>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-prismic/pages/_document.tsx b/examples/cms-prismic/pages/_document.tsx
index 54e8bf3e2a..b2fff8b426 100644
--- a/examples/cms-prismic/pages/_document.tsx
+++ b/examples/cms-prismic/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/cms-prismic/pages/api/exit-preview.ts b/examples/cms-prismic/pages/api/exit-preview.ts
index fdd2c5face..d79206bd47 100644
--- a/examples/cms-prismic/pages/api/exit-preview.ts
+++ b/examples/cms-prismic/pages/api/exit-preview.ts
@@ -1,6 +1,6 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import { exitPreview } from '@prismicio/next'
+import { NextApiRequest, NextApiResponse } from "next";
+import { exitPreview } from "@prismicio/next";
 
 export default async function exit(req: NextApiRequest, res: NextApiResponse) {
-  exitPreview({ res, req })
+  exitPreview({ res, req });
 }
diff --git a/examples/cms-prismic/pages/api/preview.ts b/examples/cms-prismic/pages/api/preview.ts
index 69650de44d..2908fab886 100644
--- a/examples/cms-prismic/pages/api/preview.ts
+++ b/examples/cms-prismic/pages/api/preview.ts
@@ -1,15 +1,15 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import { setPreviewData, redirectToPreviewURL } from '@prismicio/next'
+import { NextApiRequest, NextApiResponse } from "next";
+import { setPreviewData, redirectToPreviewURL } from "@prismicio/next";
 
-import { createClient } from '../../lib/prismic'
+import { createClient } from "../../lib/prismic";
 
 export default async function preview(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  const client = createClient({ req })
+  const client = createClient({ req });
 
-  setPreviewData({ req, res })
+  setPreviewData({ req, res });
 
-  await redirectToPreviewURL({ req, res, client })
+  await redirectToPreviewURL({ req, res, client });
 }
diff --git a/examples/cms-prismic/pages/index.tsx b/examples/cms-prismic/pages/index.tsx
index 76d5f2b7fe..99c7047370 100644
--- a/examples/cms-prismic/pages/index.tsx
+++ b/examples/cms-prismic/pages/index.tsx
@@ -1,21 +1,21 @@
-import Head from 'next/head'
-import Container from '../components/container'
-import MoreStories from '../components/more-stories'
-import HeroPost from '../components/hero-post'
-import Intro from '../components/intro'
-import Layout from '../components/layout'
-import { CMS_NAME } from '../lib/constants'
-import { createClient } from '../lib/prismic'
-import { PostDocumentWithAuthor } from '../lib/types'
-import { GetStaticPropsContext, GetStaticPropsResult } from 'next'
+import Head from "next/head";
+import Container from "../components/container";
+import MoreStories from "../components/more-stories";
+import HeroPost from "../components/hero-post";
+import Intro from "../components/intro";
+import Layout from "../components/layout";
+import { CMS_NAME } from "../lib/constants";
+import { createClient } from "../lib/prismic";
+import { PostDocumentWithAuthor } from "../lib/types";
+import { GetStaticPropsContext, GetStaticPropsResult } from "next";
 
 type IndexProps = {
-  preview: boolean
-  allPosts: PostDocumentWithAuthor[]
-}
+  preview: boolean;
+  allPosts: PostDocumentWithAuthor[];
+};
 
 export default function Index({ preview, allPosts }: IndexProps) {
-  const [heroPost, ...morePosts] = allPosts
+  const [heroPost, ...morePosts] = allPosts;
 
   return (
     <>
@@ -39,21 +39,21 @@ export default function Index({ preview, allPosts }: IndexProps) {
         </Container>
       </Layout>
     </>
-  )
+  );
 }
 
 export async function getStaticProps({
   preview = false,
   previewData,
 }: GetStaticPropsContext): Promise<GetStaticPropsResult<IndexProps>> {
-  const client = createClient({ previewData })
+  const client = createClient({ previewData });
 
-  const allPosts = await client.getAllByType('post', {
-    fetchLinks: ['author.name', 'author.picture'],
-    orderings: [{ field: 'my.post.date', direction: 'desc' }],
-  })
+  const allPosts = await client.getAllByType("post", {
+    fetchLinks: ["author.name", "author.picture"],
+    orderings: [{ field: "my.post.date", direction: "desc" }],
+  });
 
   return {
     props: { preview, allPosts },
-  }
+  };
 }
diff --git a/examples/cms-prismic/pages/posts/[slug].tsx b/examples/cms-prismic/pages/posts/[slug].tsx
index f460990dd3..b1759e6aae 100644
--- a/examples/cms-prismic/pages/posts/[slug].tsx
+++ b/examples/cms-prismic/pages/posts/[slug].tsx
@@ -1,30 +1,30 @@
-import { GetStaticPropsContext, GetStaticPropsResult } from 'next'
-import Head from 'next/head'
-import { useRouter } from 'next/router'
-import { predicate } from '@prismicio/client'
-import { asImageSrc, asText } from '@prismicio/helpers'
+import { GetStaticPropsContext, GetStaticPropsResult } from "next";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { predicate } from "@prismicio/client";
+import { asImageSrc, asText } from "@prismicio/helpers";
 
-import { CMS_NAME } from '../../lib/constants'
-import { PostDocumentWithAuthor } from '../../lib/types'
-import { createClient } from '../../lib/prismic'
+import { CMS_NAME } from "../../lib/constants";
+import { PostDocumentWithAuthor } from "../../lib/types";
+import { createClient } from "../../lib/prismic";
 
-import Container from '../../components/container'
-import Header from '../../components/header'
-import Layout from '../../components/layout'
-import MoreStories from '../../components/more-stories'
-import PostBody from '../../components/post-body'
-import PostHeader from '../../components/post-header'
-import PostTitle from '../../components/post-title'
-import SectionSeparator from '../../components/section-separator'
+import Container from "../../components/container";
+import Header from "../../components/header";
+import Layout from "../../components/layout";
+import MoreStories from "../../components/more-stories";
+import PostBody from "../../components/post-body";
+import PostHeader from "../../components/post-header";
+import PostTitle from "../../components/post-title";
+import SectionSeparator from "../../components/section-separator";
 
 type PostProps = {
-  preview: boolean
-  post: PostDocumentWithAuthor
-  morePosts: PostDocumentWithAuthor[]
-}
+  preview: boolean;
+  post: PostDocumentWithAuthor;
+  morePosts: PostDocumentWithAuthor[];
+};
 
 export default function Post({ post, morePosts, preview }: PostProps) {
-  const router = useRouter()
+  const router = useRouter();
 
   return (
     <Layout preview={preview}>
@@ -37,7 +37,7 @@ export default function Post({ post, morePosts, preview }: PostProps) {
             <article>
               <Head>
                 <title>
-                  {asText(post.data.title)} | Next.js Blog Example with{' '}
+                  {asText(post.data.title)} | Next.js Blog Example with{" "}
                   {CMS_NAME}
                 </title>
                 <meta
@@ -45,7 +45,7 @@ export default function Post({ post, morePosts, preview }: PostProps) {
                   content={asImageSrc(post.data.cover_image, {
                     width: 1200,
                     height: 600,
-                    fit: 'crop',
+                    fit: "crop",
                   })}
                 />
               </Head>
@@ -65,7 +65,7 @@ export default function Post({ post, morePosts, preview }: PostProps) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps({
@@ -75,38 +75,38 @@ export async function getStaticProps({
 }: GetStaticPropsContext<{ slug: string }>): Promise<
   GetStaticPropsResult<PostProps>
 > {
-  const client = createClient({ previewData })
+  const client = createClient({ previewData });
 
   const [post, morePosts] = await Promise.all([
-    client.getByUID<PostDocumentWithAuthor>('post', params.slug, {
-      fetchLinks: ['author.name', 'author.picture'],
+    client.getByUID<PostDocumentWithAuthor>("post", params.slug, {
+      fetchLinks: ["author.name", "author.picture"],
     }),
-    client.getAllByType<PostDocumentWithAuthor>('post', {
-      fetchLinks: ['author.name', 'author.picture'],
-      orderings: [{ field: 'my.post.date', direction: 'desc' }],
-      predicates: [predicate.not('my.post.uid', params.slug)],
+    client.getAllByType<PostDocumentWithAuthor>("post", {
+      fetchLinks: ["author.name", "author.picture"],
+      orderings: [{ field: "my.post.date", direction: "desc" }],
+      predicates: [predicate.not("my.post.uid", params.slug)],
       limit: 2,
     }),
-  ])
+  ]);
 
   if (!post) {
     return {
       notFound: true,
-    }
+    };
   } else {
     return {
       props: { preview, post, morePosts },
-    }
+    };
   }
 }
 
 export async function getStaticPaths() {
-  const client = createClient()
+  const client = createClient();
 
-  const allPosts = await client.getAllByType('post')
+  const allPosts = await client.getAllByType("post");
 
   return {
     paths: allPosts.map((post) => post.url),
     fallback: true,
-  }
+  };
 }
diff --git a/examples/cms-prismic/pages/slice-simulator.tsx b/examples/cms-prismic/pages/slice-simulator.tsx
index 3244f95684..49bf0999d1 100644
--- a/examples/cms-prismic/pages/slice-simulator.tsx
+++ b/examples/cms-prismic/pages/slice-simulator.tsx
@@ -1,8 +1,8 @@
-import { SliceSimulator } from '@prismicio/slice-simulator-react'
-import { SliceZone } from '@prismicio/react'
+import { SliceSimulator } from "@prismicio/slice-simulator-react";
+import { SliceZone } from "@prismicio/react";
 
-import { components } from '../slices'
-import state from '../.slicemachine/libraries-state.json'
+import { components } from "../slices";
+import state from "../.slicemachine/libraries-state.json";
 
 export default function SliceSimulatorPage() {
   return (
@@ -10,5 +10,5 @@ export default function SliceSimulatorPage() {
       sliceZone={(props) => <SliceZone {...props} components={components} />}
       state={state}
     />
-  )
+  );
 }
diff --git a/examples/cms-prismic/postcss.config.js b/examples/cms-prismic/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-prismic/postcss.config.js
+++ b/examples/cms-prismic/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-prismic/prismicCodegen.config.ts b/examples/cms-prismic/prismicCodegen.config.ts
index 3f4b4ee8e3..ed4932460a 100644
--- a/examples/cms-prismic/prismicCodegen.config.ts
+++ b/examples/cms-prismic/prismicCodegen.config.ts
@@ -1,8 +1,8 @@
-import type { Config } from 'prismic-ts-codegen'
+import type { Config } from "prismic-ts-codegen";
 
 const config: Config = {
-  output: './types.generated.ts',
-  models: ['./customtypes/**/index.json', './slices/**/model.json'],
-}
+  output: "./types.generated.ts",
+  models: ["./customtypes/**/index.json", "./slices/**/model.json"],
+};
 
-export default config
+export default config;
diff --git a/examples/cms-prismic/slices/Image/index.tsx b/examples/cms-prismic/slices/Image/index.tsx
index 61ab6e46a8..d51166c72e 100644
--- a/examples/cms-prismic/slices/Image/index.tsx
+++ b/examples/cms-prismic/slices/Image/index.tsx
@@ -1,15 +1,15 @@
-import { PrismicNextImage } from '@prismicio/next'
-import { SliceComponentProps } from '@prismicio/react'
-import { Content } from '@prismicio/client'
+import { PrismicNextImage } from "@prismicio/next";
+import { SliceComponentProps } from "@prismicio/react";
+import { Content } from "@prismicio/client";
 
-type ImageProps = SliceComponentProps<Content.ImageSlice>
+type ImageProps = SliceComponentProps<Content.ImageSlice>;
 
 const Image = ({ slice }: ImageProps) => {
   return (
     <section className="my-12">
       <PrismicNextImage field={slice.primary.image} layout="responsive" />
     </section>
-  )
-}
+  );
+};
 
-export default Image
+export default Image;
diff --git a/examples/cms-prismic/slices/Text/index.tsx b/examples/cms-prismic/slices/Text/index.tsx
index 31da22a447..2a6c315112 100644
--- a/examples/cms-prismic/slices/Text/index.tsx
+++ b/examples/cms-prismic/slices/Text/index.tsx
@@ -1,7 +1,7 @@
-import { PrismicRichText, SliceComponentProps } from '@prismicio/react'
-import { Content } from '@prismicio/client'
+import { PrismicRichText, SliceComponentProps } from "@prismicio/react";
+import { Content } from "@prismicio/client";
 
-type TextProps = SliceComponentProps<Content.TextSlice>
+type TextProps = SliceComponentProps<Content.TextSlice>;
 
 const Text = ({ slice }: TextProps) => {
   return (
@@ -21,7 +21,7 @@ const Text = ({ slice }: TextProps) => {
         }}
       />
     </section>
-  )
-}
+  );
+};
 
-export default Text
+export default Text;
diff --git a/examples/cms-prismic/slices/index.js b/examples/cms-prismic/slices/index.js
index d8e590081d..6304006ae5 100644
--- a/examples/cms-prismic/slices/index.js
+++ b/examples/cms-prismic/slices/index.js
@@ -1,11 +1,11 @@
 // This file is generated by Slice Machine. Update with care!
 
-import Image from './Image'
-import Text from './Text'
+import Image from "./Image";
+import Text from "./Text";
 
-export { Image, Text }
+export { Image, Text };
 
 export const components = {
   image: Image,
   text: Text,
-}
+};
diff --git a/examples/cms-prismic/tailwind.config.js b/examples/cms-prismic/tailwind.config.js
index cda7b5253b..fcc7bf53bc 100644
--- a/examples/cms-prismic/tailwind.config.js
+++ b/examples/cms-prismic/tailwind.config.js
@@ -1,39 +1,39 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './slices/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./slices/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/cms-prismic/types.generated.ts b/examples/cms-prismic/types.generated.ts
index 6c42b1450c..ad2526bbf3 100644
--- a/examples/cms-prismic/types.generated.ts
+++ b/examples/cms-prismic/types.generated.ts
@@ -1,11 +1,11 @@
 // Code generated by prismic-ts-codegen. DO NOT EDIT.
 
-import type * as prismicT from '@prismicio/types'
-import type * as prismic from '@prismicio/client'
+import type * as prismicT from "@prismicio/types";
+import type * as prismic from "@prismicio/client";
 
 type Simplify<T> = {
-  [KeyType in keyof T]: T[KeyType]
-}
+  [KeyType in keyof T]: T[KeyType];
+};
 /** Content for Author documents */
 interface AuthorDocumentData {
   /**
@@ -18,7 +18,7 @@ interface AuthorDocumentData {
    * - **Documentation**: https://prismic.io/docs/core-concepts/rich-text-title
    *
    */
-  name: prismicT.TitleField
+  name: prismicT.TitleField;
   /**
    * Picture field in *Author*
    *
@@ -29,7 +29,7 @@ interface AuthorDocumentData {
    * - **Documentation**: https://prismic.io/docs/core-concepts/image
    *
    */
-  picture: prismicT.ImageField<never>
+  picture: prismicT.ImageField<never>;
 }
 /**
  * Author document from Prismic
@@ -43,9 +43,9 @@ interface AuthorDocumentData {
 export type AuthorDocument<Lang extends string = string> =
   prismicT.PrismicDocumentWithoutUID<
     Simplify<AuthorDocumentData>,
-    'author',
+    "author",
     Lang
-  >
+  >;
 /** Content for Post documents */
 interface PostDocumentData {
   /**
@@ -58,7 +58,7 @@ interface PostDocumentData {
    * - **Documentation**: https://prismic.io/docs/core-concepts/rich-text-title
    *
    */
-  title: prismicT.TitleField
+  title: prismicT.TitleField;
   /**
    * Date field in *Post*
    *
@@ -69,7 +69,7 @@ interface PostDocumentData {
    * - **Documentation**: https://prismic.io/docs/core-concepts/date
    *
    */
-  date: prismicT.DateField
+  date: prismicT.DateField;
   /**
    * Author field in *Post*
    *
@@ -80,7 +80,7 @@ interface PostDocumentData {
    * - **Documentation**: https://prismic.io/docs/core-concepts/link-content-relationship
    *
    */
-  author: prismicT.RelationField<'author'>
+  author: prismicT.RelationField<"author">;
   /**
    * Excerpt field in *Post*
    *
@@ -91,7 +91,7 @@ interface PostDocumentData {
    * - **Documentation**: https://prismic.io/docs/core-concepts/key-text
    *
    */
-  excerpt: prismicT.KeyTextField
+  excerpt: prismicT.KeyTextField;
   /**
    * Cover Image field in *Post*
    *
@@ -102,7 +102,7 @@ interface PostDocumentData {
    * - **Documentation**: https://prismic.io/docs/core-concepts/image
    *
    */
-  cover_image: prismicT.ImageField<never>
+  cover_image: prismicT.ImageField<never>;
   /**
    * Slice Zone field in *Post*
    *
@@ -113,13 +113,13 @@ interface PostDocumentData {
    * - **Documentation**: https://prismic.io/docs/core-concepts/slices
    *
    */
-  slices: prismicT.SliceZone<PostDocumentDataSlicesSlice>
+  slices: prismicT.SliceZone<PostDocumentDataSlicesSlice>;
 }
 /**
  * Slice for *Post → Slice Zone*
  *
  */
-type PostDocumentDataSlicesSlice = TextSlice | ImageSlice
+type PostDocumentDataSlicesSlice = TextSlice | ImageSlice;
 /**
  * Post document from Prismic
  *
@@ -130,8 +130,8 @@ type PostDocumentDataSlicesSlice = TextSlice | ImageSlice
  * @typeParam Lang - Language API ID of the document.
  */
 export type PostDocument<Lang extends string = string> =
-  prismicT.PrismicDocumentWithUID<Simplify<PostDocumentData>, 'post', Lang>
-export type AllDocumentTypes = AuthorDocument | PostDocument
+  prismicT.PrismicDocumentWithUID<Simplify<PostDocumentData>, "post", Lang>;
+export type AllDocumentTypes = AuthorDocument | PostDocument;
 /**
  * Primary content in Image → Primary
  *
@@ -146,7 +146,7 @@ interface ImageSliceDefaultPrimary {
    * - **Documentation**: https://prismic.io/docs/core-concepts/image
    *
    */
-  image: prismicT.ImageField<never>
+  image: prismicT.ImageField<never>;
 }
 /**
  * Default variation for Image Slice
@@ -157,15 +157,15 @@ interface ImageSliceDefaultPrimary {
  *
  */
 export type ImageSliceDefault = prismicT.SharedSliceVariation<
-  'default',
+  "default",
   Simplify<ImageSliceDefaultPrimary>,
   never
->
+>;
 /**
  * Slice variation for *Image*
  *
  */
-type ImageSliceVariation = ImageSliceDefault
+type ImageSliceVariation = ImageSliceDefault;
 /**
  * Image Shared Slice
  *
@@ -174,7 +174,7 @@ type ImageSliceVariation = ImageSliceDefault
  * - **Documentation**: https://prismic.io/docs/core-concepts/reusing-slices
  *
  */
-export type ImageSlice = prismicT.SharedSlice<'image', ImageSliceVariation>
+export type ImageSlice = prismicT.SharedSlice<"image", ImageSliceVariation>;
 /**
  * Primary content in Text → Primary
  *
@@ -189,7 +189,7 @@ interface TextSliceDefaultPrimary {
    * - **Documentation**: https://prismic.io/docs/core-concepts/rich-text-title
    *
    */
-  text: prismicT.RichTextField
+  text: prismicT.RichTextField;
 }
 /**
  * Default variation for Text Slice
@@ -200,15 +200,15 @@ interface TextSliceDefaultPrimary {
  *
  */
 export type TextSliceDefault = prismicT.SharedSliceVariation<
-  'default',
+  "default",
   Simplify<TextSliceDefaultPrimary>,
   never
->
+>;
 /**
  * Slice variation for *Text*
  *
  */
-type TextSliceVariation = TextSliceDefault
+type TextSliceVariation = TextSliceDefault;
 /**
  * Text Shared Slice
  *
@@ -217,12 +217,12 @@ type TextSliceVariation = TextSliceDefault
  * - **Documentation**: https://prismic.io/docs/core-concepts/reusing-slices
  *
  */
-export type TextSlice = prismicT.SharedSlice<'text', TextSliceVariation>
-declare module '@prismicio/client' {
+export type TextSlice = prismicT.SharedSlice<"text", TextSliceVariation>;
+declare module "@prismicio/client" {
   interface CreateClient {
     (
       repositoryNameOrEndpoint: string,
-      options?: prismic.ClientConfig
-    ): prismic.Client<AllDocumentTypes>
+      options?: prismic.ClientConfig,
+    ): prismic.Client<AllDocumentTypes>;
   }
 }
diff --git a/examples/cms-sanity/components/alert.js b/examples/cms-sanity/components/alert.js
index b924cb097f..8e8729368f 100644
--- a/examples/cms-sanity/components/alert.js
+++ b/examples/cms-sanity/components/alert.js
@@ -1,31 +1,31 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Alert({ preview }) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This page is a preview.{' '}
+              This page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -38,5 +38,5 @@ export default function Alert({ preview }) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-sanity/components/avatar.js b/examples/cms-sanity/components/avatar.js
index a7be69edf9..2d21e70a53 100644
--- a/examples/cms-sanity/components/avatar.js
+++ b/examples/cms-sanity/components/avatar.js
@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import { urlForImage } from '../lib/sanity'
+import Image from "next/image";
+import { urlForImage } from "../lib/sanity";
 
 export default function Avatar({ name, picture }) {
   return (
@@ -8,8 +8,8 @@ export default function Avatar({ name, picture }) {
         <Image
           src={
             picture?.asset?._ref
-              ? urlForImage(picture).height(96).width(96).fit('crop').url()
-              : 'https://source.unsplash.com/96x96/?face'
+              ? urlForImage(picture).height(96).width(96).fit("crop").url()
+              : "https://source.unsplash.com/96x96/?face"
           }
           className="rounded-full"
           height={96}
@@ -19,5 +19,5 @@ export default function Avatar({ name, picture }) {
       </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-sanity/components/container.js b/examples/cms-sanity/components/container.js
index fc1c29dfb0..92e559ece3 100644
--- a/examples/cms-sanity/components/container.js
+++ b/examples/cms-sanity/components/container.js
@@ -1,3 +1,3 @@
 export default function Container({ children }) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }
diff --git a/examples/cms-sanity/components/cover-image.js b/examples/cms-sanity/components/cover-image.js
index fa004df1bf..f6a47154d5 100644
--- a/examples/cms-sanity/components/cover-image.js
+++ b/examples/cms-sanity/components/cover-image.js
@@ -1,13 +1,13 @@
-import cn from 'classnames'
-import Image from 'next/image'
-import Link from 'next/link'
-import { urlForImage } from '../lib/sanity'
+import cn from "classnames";
+import Image from "next/image";
+import Link from "next/link";
+import { urlForImage } from "../lib/sanity";
 
 export default function CoverImage({ title, slug, image: source, priority }) {
   const image = source?.asset?._ref ? (
     <div
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": slug,
       })}
     >
       <Image
@@ -21,8 +21,8 @@ export default function CoverImage({ title, slug, image: source, priority }) {
       />
     </div>
   ) : (
-    <div style={{ paddingTop: '50%', backgroundColor: '#ddd' }} />
-  )
+    <div style={{ paddingTop: "50%", backgroundColor: "#ddd" }} />
+  );
 
   return (
     <div className="sm:mx-0">
@@ -34,5 +34,5 @@ export default function CoverImage({ title, slug, image: source, priority }) {
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-sanity/components/date.js b/examples/cms-sanity/components/date.js
index 882b66e59e..21c2f0921b 100644
--- a/examples/cms-sanity/components/date.js
+++ b/examples/cms-sanity/components/date.js
@@ -1,8 +1,8 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
 export default function Date({ dateString }) {
-  if (!dateString) return null
+  if (!dateString) return null;
 
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "LLLL	d, yyyy")}</time>;
 }
diff --git a/examples/cms-sanity/components/footer.js b/examples/cms-sanity/components/footer.js
index da9eed88ec..81422c7c6b 100644
--- a/examples/cms-sanity/components/footer.js
+++ b/examples/cms-sanity/components/footer.js
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Footer() {
   return (
@@ -26,5 +26,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-sanity/components/header.js b/examples/cms-sanity/components/header.js
index 05cb9af247..e6dea52099 100644
--- a/examples/cms-sanity/components/header.js
+++ b/examples/cms-sanity/components/header.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-sanity/components/hero-post.js b/examples/cms-sanity/components/hero-post.js
index 68a3ec945e..cbbab8be35 100644
--- a/examples/cms-sanity/components/hero-post.js
+++ b/examples/cms-sanity/components/hero-post.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
-import Link from 'next/link'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "../components/cover-image";
+import Link from "next/link";
 
 export default function HeroPost({
   title,
@@ -33,5 +33,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-sanity/components/intro.js b/examples/cms-sanity/components/intro.js
index 5931b3c596..e8578bef66 100644
--- a/examples/cms-sanity/components/intro.js
+++ b/examples/cms-sanity/components/intro.js
@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '../lib/constants'
+import { CMS_NAME, CMS_URL } from "../lib/constants";
 
 export default function Intro() {
   return (
@@ -7,14 +7,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -24,5 +24,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-sanity/components/landing-preview.js b/examples/cms-sanity/components/landing-preview.js
index fcb6c70126..3ee78d059b 100644
--- a/examples/cms-sanity/components/landing-preview.js
+++ b/examples/cms-sanity/components/landing-preview.js
@@ -1,8 +1,8 @@
-import { usePreview } from '../lib/sanity'
-import { indexQuery } from '../lib/queries'
-import Landing from './landing'
+import { usePreview } from "../lib/sanity";
+import { indexQuery } from "../lib/queries";
+import Landing from "./landing";
 
 export default function LandingPreview({ allPosts }) {
-  const previewAllPosts = usePreview(null, indexQuery)
-  return <Landing data={previewAllPosts ?? allPosts} preview />
+  const previewAllPosts = usePreview(null, indexQuery);
+  return <Landing data={previewAllPosts ?? allPosts} preview />;
 }
diff --git a/examples/cms-sanity/components/landing.js b/examples/cms-sanity/components/landing.js
index f22b5a846c..fa2b91126b 100644
--- a/examples/cms-sanity/components/landing.js
+++ b/examples/cms-sanity/components/landing.js
@@ -1,13 +1,13 @@
-import Layout from './layout'
-import Head from 'next/head'
-import { CMS_NAME } from '../lib/constants'
-import Container from './container'
-import Intro from './intro'
-import HeroPost from './hero-post'
-import MoreStories from './more-stories'
+import Layout from "./layout";
+import Head from "next/head";
+import { CMS_NAME } from "../lib/constants";
+import Container from "./container";
+import Intro from "./intro";
+import HeroPost from "./hero-post";
+import MoreStories from "./more-stories";
 
 export default function Landing({ allPosts, preview }) {
-  const [heroPost, ...morePosts] = allPosts || []
+  const [heroPost, ...morePosts] = allPosts || [];
   return (
     <>
       <Layout preview={preview}>
@@ -30,5 +30,5 @@ export default function Landing({ allPosts, preview }) {
         </Container>
       </Layout>
     </>
-  )
+  );
 }
diff --git a/examples/cms-sanity/components/layout.js b/examples/cms-sanity/components/layout.js
index 99d9535313..a2e161c793 100644
--- a/examples/cms-sanity/components/layout.js
+++ b/examples/cms-sanity/components/layout.js
@@ -1,6 +1,6 @@
-import Alert from '../components/alert'
-import Footer from '../components/footer'
-import Meta from '../components/meta'
+import Alert from "../components/alert";
+import Footer from "../components/footer";
+import Meta from "../components/meta";
 
 export default function Layout({ preview, children }) {
   return (
@@ -12,5 +12,5 @@ export default function Layout({ preview, children }) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-sanity/components/meta.js b/examples/cms-sanity/components/meta.js
index c28925832d..b228ae821c 100644
--- a/examples/cms-sanity/components/meta.js
+++ b/examples/cms-sanity/components/meta.js
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "../lib/constants";
 
 export default function Meta() {
   return (
@@ -38,5 +38,5 @@ export default function Meta() {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} key="ogImage" />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-sanity/components/more-stories.js b/examples/cms-sanity/components/more-stories.js
index 0587dbece2..af68ac0f2c 100644
--- a/examples/cms-sanity/components/more-stories.js
+++ b/examples/cms-sanity/components/more-stories.js
@@ -1,4 +1,4 @@
-import PostPlug from './post-plug'
+import PostPlug from "./post-plug";
 
 export default function MoreStories({ posts }) {
   return (
@@ -20,5 +20,5 @@ export default function MoreStories({ posts }) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-sanity/components/post-body.js b/examples/cms-sanity/components/post-body.js
index 2e0cb68a48..9fd971ba60 100644
--- a/examples/cms-sanity/components/post-body.js
+++ b/examples/cms-sanity/components/post-body.js
@@ -1,10 +1,10 @@
-import markdownStyles from './markdown-styles.module.css'
-import { PortableText } from '@portabletext/react'
+import markdownStyles from "./markdown-styles.module.css";
+import { PortableText } from "@portabletext/react";
 
 export default function PostBody({ content }) {
   return (
     <div className={`max-w-2xl mx-auto ${markdownStyles.markdown}`}>
       <PortableText value={content} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-sanity/components/post-header.js b/examples/cms-sanity/components/post-header.js
index ebf92b2445..3c38dcac6c 100644
--- a/examples/cms-sanity/components/post-header.js
+++ b/examples/cms-sanity/components/post-header.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
-import PostTitle from '../components/post-title'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "../components/cover-image";
+import PostTitle from "../components/post-title";
 
 export default function PostHeader({ title, coverImage, date, author }) {
   return (
@@ -22,5 +22,5 @@ export default function PostHeader({ title, coverImage, date, author }) {
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-sanity/components/post-plug.js b/examples/cms-sanity/components/post-plug.js
index 68eaad8242..b49e286b0a 100644
--- a/examples/cms-sanity/components/post-plug.js
+++ b/examples/cms-sanity/components/post-plug.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function PostPlug({
   title,
@@ -27,5 +27,5 @@ export default function PostPlug({
       <p className="mb-4 text-lg leading-relaxed">{excerpt}</p>
       {author && <Avatar name={author.name} picture={author.picture} />}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-sanity/components/post-preview.js b/examples/cms-sanity/components/post-preview.js
index adaf284988..02691ef3ea 100644
--- a/examples/cms-sanity/components/post-preview.js
+++ b/examples/cms-sanity/components/post-preview.js
@@ -1,9 +1,9 @@
-import { usePreview } from '../lib/sanity'
-import { postQuery } from '../lib/queries'
-import Post from './post'
+import { usePreview } from "../lib/sanity";
+import { postQuery } from "../lib/queries";
+import Post from "./post";
 
 export default function PostPreview({ data }) {
-  const slug = data?.post?.slug
-  const previewData = usePreview(null, postQuery, { slug })
-  return <Post data={previewData ?? data} preview />
+  const slug = data?.post?.slug;
+  const previewData = usePreview(null, postQuery, { slug });
+  return <Post data={previewData ?? data} preview />;
 }
diff --git a/examples/cms-sanity/components/post-title.js b/examples/cms-sanity/components/post-title.js
index edd8cba65c..a15f06616f 100644
--- a/examples/cms-sanity/components/post-title.js
+++ b/examples/cms-sanity/components/post-title.js
@@ -3,5 +3,5 @@ export default function PostTitle({ children }) {
     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
-  )
+  );
 }
diff --git a/examples/cms-sanity/components/post.js b/examples/cms-sanity/components/post.js
index 85275eafcb..16f67e3498 100644
--- a/examples/cms-sanity/components/post.js
+++ b/examples/cms-sanity/components/post.js
@@ -1,25 +1,25 @@
-import { useRouter } from 'next/router'
-import { urlForImage } from '../lib/sanity'
-import ErrorPage from 'next/error'
-import Layout from './layout'
-import Container from './container'
-import Header from './header'
-import PostTitle from './post-title'
-import Head from 'next/head'
-import { CMS_NAME } from '../lib/constants'
-import PostHeader from './post-header'
-import PostBody from './post-body'
-import SectionSeparator from './section-separator'
-import MoreStories from './more-stories'
+import { useRouter } from "next/router";
+import { urlForImage } from "../lib/sanity";
+import ErrorPage from "next/error";
+import Layout from "./layout";
+import Container from "./container";
+import Header from "./header";
+import PostTitle from "./post-title";
+import Head from "next/head";
+import { CMS_NAME } from "../lib/constants";
+import PostHeader from "./post-header";
+import PostBody from "./post-body";
+import SectionSeparator from "./section-separator";
+import MoreStories from "./more-stories";
 
 export default function Post({ data = {}, preview = false }) {
-  const router = useRouter()
+  const router = useRouter();
 
-  const { post, morePosts } = data
-  const slug = post?.slug
+  const { post, morePosts } = data;
+  const slug = post?.slug;
 
   if (!router.isFallback && !slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
 
   return (
@@ -42,7 +42,7 @@ export default function Post({ data = {}, preview = false }) {
                     content={urlForImage(post.coverImage)
                       .width(1200)
                       .height(627)
-                      .fit('crop')
+                      .fit("crop")
                       .url()}
                   />
                 )}
@@ -61,5 +61,5 @@ export default function Post({ data = {}, preview = false }) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
diff --git a/examples/cms-sanity/components/section-separator.js b/examples/cms-sanity/components/section-separator.js
index 4ca5c65fdc..b86fb50b7d 100644
--- a/examples/cms-sanity/components/section-separator.js
+++ b/examples/cms-sanity/components/section-separator.js
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }
diff --git a/examples/cms-sanity/lib/config.js b/examples/cms-sanity/lib/config.js
index 8db086784d..c8e58e7850 100644
--- a/examples/cms-sanity/lib/config.js
+++ b/examples/cms-sanity/lib/config.js
@@ -1,15 +1,15 @@
 export const sanityConfig = {
   // Find your project ID and dataset in `sanity.json` in your studio project
-  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || 'production',
+  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || "production",
   projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
   useCdn:
-    typeof document !== 'undefined' && process.env.NODE_ENV === 'production',
+    typeof document !== "undefined" && process.env.NODE_ENV === "production",
   // useCdn == true gives fast, cheap responses using a globally distributed cache.
   // When in production the Sanity API is only queried on build-time, and on-demand when responding to webhooks.
   // Thus the data need to be fresh and API response time is less important.
   // When in development/working locally, it's more important to keep costs down as hot reloading can incurr a lot of API calls
   // And every page load calls getStaticProps.
   // To get the lowest latency, lowest cost, and latest data, use the Instant Preview mode
-  apiVersion: '2022-03-13',
+  apiVersion: "2022-03-13",
   // see https://www.sanity.io/docs/api-versioning for how versioning works
-}
+};
diff --git a/examples/cms-sanity/lib/constants.js b/examples/cms-sanity/lib/constants.js
index c9c9bcdb22..3db98b7134 100644
--- a/examples/cms-sanity/lib/constants.js
+++ b/examples/cms-sanity/lib/constants.js
@@ -1,5 +1,5 @@
-export const EXAMPLE_PATH = 'cms-sanity'
-export const CMS_NAME = 'Sanity'
-export const CMS_URL = 'https://sanity.io/'
+export const EXAMPLE_PATH = "cms-sanity";
+export const CMS_NAME = "Sanity";
+export const CMS_URL = "https://sanity.io/";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**Sanity**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB2aWV3Qm94PSIwIDAgMTA1IDIyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMWVtIj48dGl0bGU%2BU2FuaXR5PC90aXRsZT48cGF0aCBvcGFjaXR5PSIwLjciIGQ9Ik03OC4xNzkzIDcuOTkyNjFWMjEuMDAyOEg3My45MDMxVjEwLjIxMzhMNzguMTc5MyA3Ljk5MjYxWiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggb3BhY2l0eT0iMC43IiBkPSJNMjAuOTUxMSAyMS4zM0wzMC45NDQgMTYuMTA1MUwyOS43MTIxIDEyLjkxNDFMMjMuMTMzMiAxNS45ODIxTDIwLjk1MTEgMjEuMzNaIiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBvcGFjaXR5PSIwLjUiIGQ9Ik03My45MDMxIDEwLjIwMjdMODQuNzQ0MyA0LjY1NDc3TDgyLjkxMjYgMS41NTcxTDczLjkwMzEgNS45NTk5N1YxMC4yMDI3WiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggb3BhY2l0eT0iMC43IiBkPSJNNDMuMzcwNSA2Ljk2MjMzVjIxLjAwMjhIMzkuMjkyN1YxLjAwNzE0TDQzLjM3MDUgNi45NjIzM1oiIGZpbGw9ImN1cnJlbnRDb2xvciI%2BPC9wYXRoPjxwYXRoIG9wYWNpdHk9IjAuNSIgZD0iTTI3LjEyOTkgNi4xODYxN0wyMC45NTExIDIxLjMzTDE3Ljc3MzEgMTguNTk0M0wyNS4xMzUzIDEuMDA3MTRMMjcuMTI5OSA2LjE4NjE3WiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggZD0iTTI1LjEzNTMgMS4wMDcxNEgyOS4zNDc3TDM3LjEzODYgMjEuMDAyOEgzMi44MjY5TDI1LjEzNTMgMS4wMDcxNFoiIGZpbGw9ImN1cnJlbnRDb2xvciI%2BPC9wYXRoPjxwYXRoIGQ9Ik00NC4wMDEyIDEuMDA3MTRMNTIuOTgyNCAxNC42NjgyVjIxLjAwMjhMMzkuMjkyNyAxLjAwNzE0SDQ0LjAwMTJaIiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBkPSJNNjQuOTE4MyAxLjAwNzE0SDYwLjY3MzlWMjEuMDA2M0g2NC45MTgzVjEuMDA3MTRaIiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBkPSJNNzMuOTAzMSA0LjY1NDc0SDY3LjM3VjEuMDA3MTRIODIuNTg2N0w4NC43NDQzIDQuNjU0NzRINzguMTc5M0g3My45MDMxWiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggb3BhY2l0eT0iMC41IiBkPSJNOTcuMjc1NCAxMy40MTUzVjIxLjAwMjhIOTMuMDYyOVYxMy40MTUzIiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBkPSJNOTMuMDYyOSAxMy40MTUyTDEwMC4xOTEgMS4wMDcxNEgxMDQuNjY2TDk3LjI3NTQgMTMuNDE1Mkg5My4wNjI5WiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggb3BhY2l0eT0iMC43IiBkPSJNOTMuMDYzIDEzLjQxNTJMODUuNzM2MyAxLjAwNzE0SDkwLjM0NTZMOTUuMzA5MiA5LjUxMDA4TDkzLjA2MyAxMy40MTUyWiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggZD0iTTEuOTYxMjYgMy4zMTQ3OUMxLjk2MTI2IDYuMDk5MjEgMy43MTE0NSA3Ljc1NTk1IDcuMjE1MzYgOC42Mjk1NkwxMC45MjgzIDkuNDc1MzNDMTQuMjQ0NCAxMC4yMjM2IDE2LjI2MzkgMTIuMDgyMiAxNi4yNjM5IDE1LjExMDNDMTYuMjg5NyAxNi40Mjk1IDE1Ljg1MzEgMTcuNzE3MyAxNS4wMjc0IDE4Ljc1NzlDMTUuMDI3NCAxNS43MzY4IDEzLjQzNjcgMTQuMTA0NCA5LjU5OTcyIDEzLjEyMjlMNS45NTQwOSAxMi4zMDg1QzMuMDM0NzUgMTEuNjU0MSAwLjc4MTQ3OCAxMC4xMjYyIDAuNzgxNDc4IDYuODM3MDlDMC43NjYxMjMgNS41NjY5MyAxLjE4MTE2IDQuMzI3ODEgMS45NjEyNiAzLjMxNDc5IiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBvcGFjaXR5PSIwLjciIGQ9Ik01Mi45ODI0IDEzLjY0MTVWMS4wMDcxNEg1Ny4wNjAyVjIxLjAwMjhINTIuOTgyNFYxMy42NDE1WiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggb3BhY2l0eT0iMC43IiBkPSJNMTIuNzQ1OCAxNC4zNjg5QzE0LjMyOTQgMTUuMzY0MyAxNS4wMjM4IDE2Ljc1NjUgMTUuMDIzOCAxOC43NTQ0QzEzLjcxMyAyMC40MDQxIDExLjQxMDEgMjEuMzMgOC43MDMzMyAyMS4zM0M0LjE0NzE4IDIxLjMzIDAuOTU4NTc3IDE5LjEyNjggMC4yNSAxNS4yOTgySDQuNjI1NDdDNS4xODg3OCAxNy4wNTU5IDYuNjgwMzQgMTcuODcwMyA4LjY3MTQ0IDE3Ljg3MDNDMTEuMTAxOSAxNy44NzAzIDEyLjcxNzQgMTYuNTk2NCAxMi43NDkzIDE0LjM2MTkiIGZpbGw9ImN1cnJlbnRDb2xvciI%2BPC9wYXRoPjxwYXRoIG9wYWNpdHk9IjAuNyIgZD0iTTQuMjM1NjcgNy40NDI2N0MzLjUxMjUgNy4wMjA0NSAyLjkxOTIgNi40MTM3NSAyLjUxODczIDUuNjg2OTdDMi4xMTgyNyA0Ljk2MDE5IDEuOTI1NTggNC4xNDA0NSAxLjk2MTEzIDMuMzE0NzZDMy4yMjU5NCAxLjY3ODkxIDUuNDI2MDggMC42Nzk5OTMgOC4xMDgwNCAwLjY3OTk5M0MxMi43NDkyIDAuNjc5OTkzIDE1LjQzNDcgMy4wODg1MiAxNi4wOTcyIDYuNDc4NTZIMTEuODg4M0MxMS40MjQyIDUuMTQyMDMgMTAuMjYyMSA0LjEwMTM2IDguMTQzNDcgNC4xMDEzNkM1Ljg3OTU3IDQuMTAxMzYgNC4zMzQ4NyA1LjM5NjExIDQuMjQ2MjkgNy40NDI2NyIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPC9zdmc%2B&widths=undefined&widths=auto&heights=250&heights=150'
+  "https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**Sanity**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB2aWV3Qm94PSIwIDAgMTA1IDIyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMWVtIj48dGl0bGU%2BU2FuaXR5PC90aXRsZT48cGF0aCBvcGFjaXR5PSIwLjciIGQ9Ik03OC4xNzkzIDcuOTkyNjFWMjEuMDAyOEg3My45MDMxVjEwLjIxMzhMNzguMTc5MyA3Ljk5MjYxWiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggb3BhY2l0eT0iMC43IiBkPSJNMjAuOTUxMSAyMS4zM0wzMC45NDQgMTYuMTA1MUwyOS43MTIxIDEyLjkxNDFMMjMuMTMzMiAxNS45ODIxTDIwLjk1MTEgMjEuMzNaIiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBvcGFjaXR5PSIwLjUiIGQ9Ik03My45MDMxIDEwLjIwMjdMODQuNzQ0MyA0LjY1NDc3TDgyLjkxMjYgMS41NTcxTDczLjkwMzEgNS45NTk5N1YxMC4yMDI3WiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggb3BhY2l0eT0iMC43IiBkPSJNNDMuMzcwNSA2Ljk2MjMzVjIxLjAwMjhIMzkuMjkyN1YxLjAwNzE0TDQzLjM3MDUgNi45NjIzM1oiIGZpbGw9ImN1cnJlbnRDb2xvciI%2BPC9wYXRoPjxwYXRoIG9wYWNpdHk9IjAuNSIgZD0iTTI3LjEyOTkgNi4xODYxN0wyMC45NTExIDIxLjMzTDE3Ljc3MzEgMTguNTk0M0wyNS4xMzUzIDEuMDA3MTRMMjcuMTI5OSA2LjE4NjE3WiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggZD0iTTI1LjEzNTMgMS4wMDcxNEgyOS4zNDc3TDM3LjEzODYgMjEuMDAyOEgzMi44MjY5TDI1LjEzNTMgMS4wMDcxNFoiIGZpbGw9ImN1cnJlbnRDb2xvciI%2BPC9wYXRoPjxwYXRoIGQ9Ik00NC4wMDEyIDEuMDA3MTRMNTIuOTgyNCAxNC42NjgyVjIxLjAwMjhMMzkuMjkyNyAxLjAwNzE0SDQ0LjAwMTJaIiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBkPSJNNjQuOTE4MyAxLjAwNzE0SDYwLjY3MzlWMjEuMDA2M0g2NC45MTgzVjEuMDA3MTRaIiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBkPSJNNzMuOTAzMSA0LjY1NDc0SDY3LjM3VjEuMDA3MTRIODIuNTg2N0w4NC43NDQzIDQuNjU0NzRINzguMTc5M0g3My45MDMxWiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggb3BhY2l0eT0iMC41IiBkPSJNOTcuMjc1NCAxMy40MTUzVjIxLjAwMjhIOTMuMDYyOVYxMy40MTUzIiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBkPSJNOTMuMDYyOSAxMy40MTUyTDEwMC4xOTEgMS4wMDcxNEgxMDQuNjY2TDk3LjI3NTQgMTMuNDE1Mkg5My4wNjI5WiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggb3BhY2l0eT0iMC43IiBkPSJNOTMuMDYzIDEzLjQxNTJMODUuNzM2MyAxLjAwNzE0SDkwLjM0NTZMOTUuMzA5MiA5LjUxMDA4TDkzLjA2MyAxMy40MTUyWiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggZD0iTTEuOTYxMjYgMy4zMTQ3OUMxLjk2MTI2IDYuMDk5MjEgMy43MTE0NSA3Ljc1NTk1IDcuMjE1MzYgOC42Mjk1NkwxMC45MjgzIDkuNDc1MzNDMTQuMjQ0NCAxMC4yMjM2IDE2LjI2MzkgMTIuMDgyMiAxNi4yNjM5IDE1LjExMDNDMTYuMjg5NyAxNi40Mjk1IDE1Ljg1MzEgMTcuNzE3MyAxNS4wMjc0IDE4Ljc1NzlDMTUuMDI3NCAxNS43MzY4IDEzLjQzNjcgMTQuMTA0NCA5LjU5OTcyIDEzLjEyMjlMNS45NTQwOSAxMi4zMDg1QzMuMDM0NzUgMTEuNjU0MSAwLjc4MTQ3OCAxMC4xMjYyIDAuNzgxNDc4IDYuODM3MDlDMC43NjYxMjMgNS41NjY5MyAxLjE4MTE2IDQuMzI3ODEgMS45NjEyNiAzLjMxNDc5IiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBvcGFjaXR5PSIwLjciIGQ9Ik01Mi45ODI0IDEzLjY0MTVWMS4wMDcxNEg1Ny4wNjAyVjIxLjAwMjhINTIuOTgyNFYxMy42NDE1WiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggb3BhY2l0eT0iMC43IiBkPSJNMTIuNzQ1OCAxNC4zNjg5QzE0LjMyOTQgMTUuMzY0MyAxNS4wMjM4IDE2Ljc1NjUgMTUuMDIzOCAxOC43NTQ0QzEzLjcxMyAyMC40MDQxIDExLjQxMDEgMjEuMzMgOC43MDMzMyAyMS4zM0M0LjE0NzE4IDIxLjMzIDAuOTU4NTc3IDE5LjEyNjggMC4yNSAxNS4yOTgySDQuNjI1NDdDNS4xODg3OCAxNy4wNTU5IDYuNjgwMzQgMTcuODcwMyA4LjY3MTQ0IDE3Ljg3MDNDMTEuMTAxOSAxNy44NzAzIDEyLjcxNzQgMTYuNTk2NCAxMi43NDkzIDE0LjM2MTkiIGZpbGw9ImN1cnJlbnRDb2xvciI%2BPC9wYXRoPjxwYXRoIG9wYWNpdHk9IjAuNyIgZD0iTTQuMjM1NjcgNy40NDI2N0MzLjUxMjUgNy4wMjA0NSAyLjkxOTIgNi40MTM3NSAyLjUxODczIDUuNjg2OTdDMi4xMTgyNyA0Ljk2MDE5IDEuOTI1NTggNC4xNDA0NSAxLjk2MTEzIDMuMzE0NzZDMy4yMjU5NCAxLjY3ODkxIDUuNDI2MDggMC42Nzk5OTMgOC4xMDgwNCAwLjY3OTk5M0MxMi43NDkyIDAuNjc5OTkzIDE1LjQzNDcgMy4wODg1MiAxNi4wOTcyIDYuNDc4NTZIMTEuODg4M0MxMS40MjQyIDUuMTQyMDMgMTAuMjYyMSA0LjEwMTM2IDguMTQzNDcgNC4xMDEzNkM1Ljg3OTU3IDQuMTAxMzYgNC4zMzQ4NyA1LjM5NjExIDQuMjQ2MjkgNy40NDI2NyIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPC9zdmc%2B&widths=undefined&widths=auto&heights=250&heights=150";
diff --git a/examples/cms-sanity/lib/queries.js b/examples/cms-sanity/lib/queries.js
index aa634aff77..89330900c4 100644
--- a/examples/cms-sanity/lib/queries.js
+++ b/examples/cms-sanity/lib/queries.js
@@ -7,12 +7,12 @@ const postFields = `
   coverImage,
   "slug": slug.current,
   "author": author->{name, picture},
-`
+`;
 
 export const indexQuery = `
 *[_type == "post"] | order(date desc, _updatedAt desc) {
   ${postFields}
-}`
+}`;
 
 export const postQuery = `
 {
@@ -24,14 +24,14 @@ export const postQuery = `
     content,
     ${postFields}
   }
-}`
+}`;
 
 export const postSlugsQuery = `
 *[_type == "post" && defined(slug.current)][].slug.current
-`
+`;
 
 export const postBySlugQuery = `
 *[_type == "post" && slug.current == $slug][0] {
   ${postFields}
 }
-`
+`;
diff --git a/examples/cms-sanity/lib/sanity.js b/examples/cms-sanity/lib/sanity.js
index c63007ffba..2492667bea 100644
--- a/examples/cms-sanity/lib/sanity.js
+++ b/examples/cms-sanity/lib/sanity.js
@@ -1,13 +1,13 @@
-import createImageUrlBuilder from '@sanity/image-url'
-import { definePreview } from 'next-sanity/preview'
-import { sanityConfig } from './config'
+import createImageUrlBuilder from "@sanity/image-url";
+import { definePreview } from "next-sanity/preview";
+import { sanityConfig } from "./config";
 
-export const imageBuilder = createImageUrlBuilder(sanityConfig)
+export const imageBuilder = createImageUrlBuilder(sanityConfig);
 
 export const urlForImage = (source) =>
-  imageBuilder.image(source).auto('format').fit('max')
+  imageBuilder.image(source).auto("format").fit("max");
 
 export const usePreview = definePreview({
   projectId: sanityConfig.projectId,
   dataset: sanityConfig.dataset,
-})
+});
diff --git a/examples/cms-sanity/lib/sanity.server.js b/examples/cms-sanity/lib/sanity.server.js
index afa862ce52..4a0d7be3bf 100644
--- a/examples/cms-sanity/lib/sanity.server.js
+++ b/examples/cms-sanity/lib/sanity.server.js
@@ -3,10 +3,10 @@
  * utilities we use on the client side, we are able to tree-shake (remove)
  * code that is not used on the client side.
  */
-import { createClient } from 'next-sanity'
-import { sanityConfig } from './config'
+import { createClient } from "next-sanity";
+import { sanityConfig } from "./config";
 
-export const sanityClient = createClient(sanityConfig)
+export const sanityClient = createClient(sanityConfig);
 
 export const previewClient = createClient({
   ...sanityConfig,
@@ -15,21 +15,21 @@ export const previewClient = createClient({
   // As this client only exists on the server and the token is never shared with the browser, we don't risk escalating permissions to untrustworthy users
   token:
     process.env.SANITY_API_READ_TOKEN || process.env.SANITY_API_WRITE_TOKEN,
-})
+});
 
-export const getClient = (preview) => (preview ? previewClient : sanityClient)
+export const getClient = (preview) => (preview ? previewClient : sanityClient);
 
 export function overlayDrafts(docs) {
-  const documents = docs || []
+  const documents = docs || [];
   const overlayed = documents.reduce((map, doc) => {
     if (!doc._id) {
-      throw new Error('Ensure that `_id` is included in query projection')
+      throw new Error("Ensure that `_id` is included in query projection");
     }
 
-    const isDraft = doc._id.startsWith('drafts.')
-    const id = isDraft ? doc._id.slice(7) : doc._id
-    return isDraft || !map.has(id) ? map.set(id, doc) : map
-  }, new Map())
+    const isDraft = doc._id.startsWith("drafts.");
+    const id = isDraft ? doc._id.slice(7) : doc._id;
+    return isDraft || !map.has(id) ? map.set(id, doc) : map;
+  }, new Map());
 
-  return Array.from(overlayed.values())
+  return Array.from(overlayed.values());
 }
diff --git a/examples/cms-sanity/next.config.js b/examples/cms-sanity/next.config.js
index 34e46875ea..553cc9b836 100644
--- a/examples/cms-sanity/next.config.js
+++ b/examples/cms-sanity/next.config.js
@@ -2,8 +2,8 @@
 module.exports = {
   images: {
     remotePatterns: [
-      { hostname: 'cdn.sanity.io' },
-      { hostname: 'source.unsplash.com' },
+      { hostname: "cdn.sanity.io" },
+      { hostname: "source.unsplash.com" },
     ],
   },
-}
+};
diff --git a/examples/cms-sanity/pages/_app.js b/examples/cms-sanity/pages/_app.js
index d56d9bf601..aa7931ca32 100644
--- a/examples/cms-sanity/pages/_app.js
+++ b/examples/cms-sanity/pages/_app.js
@@ -1,7 +1,7 @@
-import '../styles/index.css'
+import "../styles/index.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-sanity/pages/_document.js b/examples/cms-sanity/pages/_document.js
index 54e8bf3e2a..b2fff8b426 100644
--- a/examples/cms-sanity/pages/_document.js
+++ b/examples/cms-sanity/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/cms-sanity/pages/api/exit-preview.js b/examples/cms-sanity/pages/api/exit-preview.js
index a63a171ba4..16b744e88e 100644
--- a/examples/cms-sanity/pages/api/exit-preview.js
+++ b/examples/cms-sanity/pages/api/exit-preview.js
@@ -1,8 +1,8 @@
 export default async function exit(_, res) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-sanity/pages/api/preview.js b/examples/cms-sanity/pages/api/preview.js
index a18ff6ffc7..8035d1564c 100644
--- a/examples/cms-sanity/pages/api/preview.js
+++ b/examples/cms-sanity/pages/api/preview.js
@@ -1,40 +1,40 @@
-import { postBySlugQuery } from '../../lib/queries'
-import { previewClient } from '../../lib/sanity.server'
+import { postBySlugQuery } from "../../lib/queries";
+import { previewClient } from "../../lib/sanity.server";
 
 function redirectToPreview(res, Location) {
   // Enable Draft Mode by setting the cookie
-  res.setDraftMode({ enable: true })
+  res.setDraftMode({ enable: true });
   // Redirect to a preview capable route
-  res.writeHead(307, { Location })
-  res.end()
+  res.writeHead(307, { Location });
+  res.end();
 }
 
 export default async function preview(req, res) {
-  const secret = process.env.SANITY_STUDIO_PREVIEW_SECRET
+  const secret = process.env.SANITY_STUDIO_PREVIEW_SECRET;
   // Only require a secret when in production
-  if (!secret && process.env.NODE_ENV === 'production') {
-    throw new TypeError(`Missing SANITY_STUDIO_PREVIEW_SECRET`)
+  if (!secret && process.env.NODE_ENV === "production") {
+    throw new TypeError(`Missing SANITY_STUDIO_PREVIEW_SECRET`);
   }
   // Check the secret if it's provided, enables running preview mode locally before the env var is setup
   if (secret && req.query.secret !== secret) {
-    return res.status(401).json({ message: 'Invalid secret' })
+    return res.status(401).json({ message: "Invalid secret" });
   }
   // If no slug is provided open preview mode on the frontpage
   if (!req.query.slug) {
-    return redirectToPreview(res, '/')
+    return redirectToPreview(res, "/");
   }
 
   // Check if the post with the given `slug` exists
   const post = await previewClient.fetch(postBySlugQuery, {
     slug: req.query.slug,
-  })
+  });
 
   // If the slug doesn't exist prevent preview mode from being enabled
   if (!post) {
-    return res.status(401).json({ message: 'Invalid slug' })
+    return res.status(401).json({ message: "Invalid slug" });
   }
 
   // Redirect to the path from the fetched post
   // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
-  redirectToPreview(res, `/posts/${post.slug}`)
+  redirectToPreview(res, `/posts/${post.slug}`);
 }
diff --git a/examples/cms-sanity/pages/api/revalidate.js b/examples/cms-sanity/pages/api/revalidate.js
index 96cac3a9a3..b5add334c7 100644
--- a/examples/cms-sanity/pages/api/revalidate.js
+++ b/examples/cms-sanity/pages/api/revalidate.js
@@ -1,79 +1,79 @@
-import { isValidSignature, SIGNATURE_HEADER_NAME } from '@sanity/webhook'
-import { sanityClient } from '../../lib/sanity.server'
+import { isValidSignature, SIGNATURE_HEADER_NAME } from "@sanity/webhook";
+import { sanityClient } from "../../lib/sanity.server";
 
 // Next.js will by default parse the body, which can lead to invalid signatures
 export const config = {
   api: {
     bodyParser: false,
   },
-}
+};
 
 const AUTHOR_UPDATED_QUERY = /* groq */ `
   *[_type == "author" && _id == $id] {
     "slug": *[_type == "post" && references(^._id)].slug.current
-  }["slug"][]`
-const POST_UPDATED_QUERY = /* groq */ `*[_type == "post" && _id == $id].slug.current`
+  }["slug"][]`;
+const POST_UPDATED_QUERY = /* groq */ `*[_type == "post" && _id == $id].slug.current`;
 
 const getQueryForType = (type) => {
   switch (type) {
-    case 'author':
-      return AUTHOR_UPDATED_QUERY
-    case 'post':
-      return POST_UPDATED_QUERY
+    case "author":
+      return AUTHOR_UPDATED_QUERY;
+    case "post":
+      return POST_UPDATED_QUERY;
     default:
-      throw new TypeError(`Unknown type: ${type}`)
+      throw new TypeError(`Unknown type: ${type}`);
   }
-}
+};
 
 const log = (msg, error) =>
-  console[error ? 'error' : 'log'](`[revalidate] ${msg}`)
+  console[error ? "error" : "log"](`[revalidate] ${msg}`);
 
 async function readBody(readable) {
-  const chunks = []
+  const chunks = [];
   for await (const chunk of readable) {
-    chunks.push(typeof chunk === 'string' ? Buffer.from(chunk) : chunk)
+    chunks.push(typeof chunk === "string" ? Buffer.from(chunk) : chunk);
   }
-  return Buffer.concat(chunks).toString('utf8')
+  return Buffer.concat(chunks).toString("utf8");
 }
 
 export default async function revalidate(req, res) {
-  const signature = req.headers[SIGNATURE_HEADER_NAME]
-  const body = await readBody(req) // Read the body into a string
+  const signature = req.headers[SIGNATURE_HEADER_NAME];
+  const body = await readBody(req); // Read the body into a string
   if (
     !isValidSignature(
       body,
       signature,
-      process.env.SANITY_REVALIDATE_SECRET?.trim()
+      process.env.SANITY_REVALIDATE_SECRET?.trim(),
     )
   ) {
-    const invalidSignature = 'Invalid signature'
-    log(invalidSignature, true)
-    res.status(401).json({ success: false, message: invalidSignature })
-    return
+    const invalidSignature = "Invalid signature";
+    log(invalidSignature, true);
+    res.status(401).json({ success: false, message: invalidSignature });
+    return;
   }
 
-  const jsonBody = JSON.parse(body)
-  const { _id: id, _type } = jsonBody
-  if (typeof id !== 'string' || !id) {
-    const invalidId = 'Invalid _id'
-    log(invalidId, true)
-    return res.status(400).json({ message: invalidId })
+  const jsonBody = JSON.parse(body);
+  const { _id: id, _type } = jsonBody;
+  if (typeof id !== "string" || !id) {
+    const invalidId = "Invalid _id";
+    log(invalidId, true);
+    return res.status(400).json({ message: invalidId });
   }
 
-  log(`Querying post slug for _id '${id}', type '${_type}' ..`)
-  const slug = await sanityClient.fetch(getQueryForType(_type), { id })
+  log(`Querying post slug for _id '${id}', type '${_type}' ..`);
+  const slug = await sanityClient.fetch(getQueryForType(_type), { id });
   const slugs = (Array.isArray(slug) ? slug : [slug]).map(
-    (_slug) => `/posts/${_slug}`
-  )
-  const staleRoutes = ['/', ...slugs]
+    (_slug) => `/posts/${_slug}`,
+  );
+  const staleRoutes = ["/", ...slugs];
 
   try {
-    await Promise.all(staleRoutes.map((route) => res.revalidate(route)))
-    const updatedRoutes = `Updated routes: ${staleRoutes.join(', ')}`
-    log(updatedRoutes)
-    return res.status(200).json({ message: updatedRoutes })
+    await Promise.all(staleRoutes.map((route) => res.revalidate(route)));
+    const updatedRoutes = `Updated routes: ${staleRoutes.join(", ")}`;
+    log(updatedRoutes);
+    return res.status(200).json({ message: updatedRoutes });
   } catch (err) {
-    log(err.message, true)
-    return res.status(500).json({ message: err.message })
+    log(err.message, true);
+    return res.status(500).json({ message: err.message });
   }
 }
diff --git a/examples/cms-sanity/pages/index.js b/examples/cms-sanity/pages/index.js
index 04104b659c..682af4bbcf 100644
--- a/examples/cms-sanity/pages/index.js
+++ b/examples/cms-sanity/pages/index.js
@@ -1,10 +1,10 @@
-import { indexQuery } from '../lib/queries'
-import { getClient, overlayDrafts } from '../lib/sanity.server'
-import { PreviewSuspense } from 'next-sanity/preview'
-import { lazy } from 'react'
-import Landing from '../components/landing'
+import { indexQuery } from "../lib/queries";
+import { getClient, overlayDrafts } from "../lib/sanity.server";
+import { PreviewSuspense } from "next-sanity/preview";
+import { lazy } from "react";
+import Landing from "../components/landing";
 
-const LandingPreview = lazy(() => import('../components/landing-preview'))
+const LandingPreview = lazy(() => import("../components/landing-preview"));
 
 export default function IndexPage({ allPosts, preview }) {
   if (preview) {
@@ -12,17 +12,17 @@ export default function IndexPage({ allPosts, preview }) {
       <PreviewSuspense fallback="Loading...">
         <LandingPreview allPosts={allPosts} />
       </PreviewSuspense>
-    )
+    );
   }
 
-  return <Landing allPosts={allPosts} />
+  return <Landing allPosts={allPosts} />;
 }
 
 export async function getStaticProps({ preview = false }) {
-  const allPosts = overlayDrafts(await getClient(preview).fetch(indexQuery))
+  const allPosts = overlayDrafts(await getClient(preview).fetch(indexQuery));
   return {
     props: { allPosts, preview },
     // If webhooks isn't setup then attempt to re-generate in 1 minute intervals
     revalidate: process.env.SANITY_REVALIDATE_SECRET ? undefined : 60,
-  }
+  };
 }
diff --git a/examples/cms-sanity/pages/posts/[slug].js b/examples/cms-sanity/pages/posts/[slug].js
index a5db4e3013..2332dd291e 100644
--- a/examples/cms-sanity/pages/posts/[slug].js
+++ b/examples/cms-sanity/pages/posts/[slug].js
@@ -1,10 +1,14 @@
-import { lazy } from 'react'
-import { PreviewSuspense } from 'next-sanity/preview'
-import { postQuery, postSlugsQuery } from '../../lib/queries'
-import { getClient, overlayDrafts, sanityClient } from '../../lib/sanity.server'
-import Post from '../../components/post'
+import { lazy } from "react";
+import { PreviewSuspense } from "next-sanity/preview";
+import { postQuery, postSlugsQuery } from "../../lib/queries";
+import {
+  getClient,
+  overlayDrafts,
+  sanityClient,
+} from "../../lib/sanity.server";
+import Post from "../../components/post";
 
-const PostPreview = lazy(() => import('../../components/post-preview'))
+const PostPreview = lazy(() => import("../../components/post-preview"));
 
 export default function PostPage({ preview, data }) {
   if (preview) {
@@ -12,16 +16,16 @@ export default function PostPage({ preview, data }) {
       <PreviewSuspense fallback="Loading...">
         <PostPreview data={data} />
       </PreviewSuspense>
-    )
+    );
   }
 
-  return <Post data={data} />
+  return <Post data={data} />;
 }
 
 export async function getStaticProps({ params, preview = false }) {
   const { post, morePosts } = await getClient(preview).fetch(postQuery, {
     slug: params.slug,
-  })
+  });
 
   return {
     props: {
@@ -33,13 +37,13 @@ export async function getStaticProps({ params, preview = false }) {
     },
     // If webhooks isn't setup then attempt to re-generate in 1 minute intervals
     revalidate: process.env.SANITY_REVALIDATE_SECRET ? undefined : 60,
-  }
+  };
 }
 
 export async function getStaticPaths() {
-  const paths = await sanityClient.fetch(postSlugsQuery)
+  const paths = await sanityClient.fetch(postSlugsQuery);
   return {
     paths: paths.map((slug) => ({ params: { slug } })),
     fallback: true,
-  }
+  };
 }
diff --git a/examples/cms-sanity/postcss.config.js b/examples/cms-sanity/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-sanity/postcss.config.js
+++ b/examples/cms-sanity/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-sanity/studio/copyEnv.js b/examples/cms-sanity/studio/copyEnv.js
index f8b877d946..c447b4161a 100644
--- a/examples/cms-sanity/studio/copyEnv.js
+++ b/examples/cms-sanity/studio/copyEnv.js
@@ -1,9 +1,9 @@
-const fs = require('fs')
+const fs = require("fs");
 
-if (fs.existsSync('../.env')) {
-  fs.copyFileSync('../.env', '.env.development')
-} else if (fs.existsSync('../.env.local')) {
-  fs.copyFileSync('../.env.local', '.env.development')
+if (fs.existsSync("../.env")) {
+  fs.copyFileSync("../.env", ".env.development");
+} else if (fs.existsSync("../.env.local")) {
+  fs.copyFileSync("../.env.local", ".env.development");
 } else {
-  throw new Error('No .env or .env.local file found at root of the project')
+  throw new Error("No .env or .env.local file found at root of the project");
 }
diff --git a/examples/cms-sanity/studio/resolveProductionUrl.js b/examples/cms-sanity/studio/resolveProductionUrl.js
index db1b5e86ee..f95c3d7d19 100644
--- a/examples/cms-sanity/studio/resolveProductionUrl.js
+++ b/examples/cms-sanity/studio/resolveProductionUrl.js
@@ -1,18 +1,21 @@
-let productionUrl
+let productionUrl;
 try {
   productionUrl = new URL(
-    import.meta.env.SANITY_STUDIO_PREVIEW_URL || 'http://localhost:3000'
-  )
+    import.meta.env.SANITY_STUDIO_PREVIEW_URL || "http://localhost:3000",
+  );
 } catch (err) {
-  console.error('Invalid productionUrl', err)
+  console.error("Invalid productionUrl", err);
 }
 
 export function resolveProductionUrl(prev, { document }) {
   if (!productionUrl || !document.slug?.current) {
-    return prev
+    return prev;
   }
-  const searchParams = new URLSearchParams()
-  searchParams.set('secret', import.meta.env.SANITY_STUDIO_PREVIEW_SECRET || '')
-  searchParams.set('slug', document.slug.current)
-  return `${productionUrl.origin}/api/preview?${searchParams}`
+  const searchParams = new URLSearchParams();
+  searchParams.set(
+    "secret",
+    import.meta.env.SANITY_STUDIO_PREVIEW_SECRET || "",
+  );
+  searchParams.set("slug", document.slug.current);
+  return `${productionUrl.origin}/api/preview?${searchParams}`;
 }
diff --git a/examples/cms-sanity/studio/sanity.cli.js b/examples/cms-sanity/studio/sanity.cli.js
index 9e83299eb3..84dd1a717d 100644
--- a/examples/cms-sanity/studio/sanity.cli.js
+++ b/examples/cms-sanity/studio/sanity.cli.js
@@ -1,18 +1,18 @@
-import { loadEnvConfig } from '@next/env'
-import { defineCliConfig } from 'sanity/cli'
+import { loadEnvConfig } from "@next/env";
+import { defineCliConfig } from "sanity/cli";
 
-const dev = process.env.NODE_ENV !== 'production'
-loadEnvConfig(__dirname, dev, { info: () => null, error: console.error })
+const dev = process.env.NODE_ENV !== "production";
+loadEnvConfig(__dirname, dev, { info: () => null, error: console.error });
 
-const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
-const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET
+const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID;
+const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET;
 
 export default defineCliConfig({
   api: { projectId, dataset },
   vite: (config) => {
     return {
       ...config,
-      envPrefix: ['NEXT_', 'SANITY_STUDIO_', 'VITE_'],
-    }
+      envPrefix: ["NEXT_", "SANITY_STUDIO_", "VITE_"],
+    };
   },
-})
+});
diff --git a/examples/cms-sanity/studio/sanity.config.js b/examples/cms-sanity/studio/sanity.config.js
index b7276baac9..7f718f17e0 100644
--- a/examples/cms-sanity/studio/sanity.config.js
+++ b/examples/cms-sanity/studio/sanity.config.js
@@ -1,22 +1,22 @@
-import { visionTool } from '@sanity/vision'
-import { defineConfig } from 'sanity'
-import { deskTool } from 'sanity/desk'
-import { unsplashImageAsset } from 'sanity-plugin-asset-source-unsplash'
+import { visionTool } from "@sanity/vision";
+import { defineConfig } from "sanity";
+import { deskTool } from "sanity/desk";
+import { unsplashImageAsset } from "sanity-plugin-asset-source-unsplash";
 
-import { resolveProductionUrl } from './resolveProductionUrl'
-import { author } from './schemas/author'
-import { post } from './schemas/post'
+import { resolveProductionUrl } from "./resolveProductionUrl";
+import { author } from "./schemas/author";
+import { post } from "./schemas/post";
 
 const title =
   import.meta.env.NEXT_PUBLIC_SANITY_PROJECT_TITLE ||
-  'Next.js Blog with Sanity.io'
-const projectId = import.meta.env.NEXT_PUBLIC_SANITY_PROJECT_ID
-const dataset = import.meta.env.NEXT_PUBLIC_SANITY_DATASET
+  "Next.js Blog with Sanity.io";
+const projectId = import.meta.env.NEXT_PUBLIC_SANITY_PROJECT_ID;
+const dataset = import.meta.env.NEXT_PUBLIC_SANITY_DATASET;
 
 export default defineConfig({
-  basePath: '/',
-  projectId: projectId || '',
-  dataset: dataset || '',
+  basePath: "/",
+  projectId: projectId || "",
+  dataset: dataset || "",
   title,
   schema: {
     // If you want more content types, you can add them to this array
@@ -33,4 +33,4 @@ export default defineConfig({
     // https://www.sanity.io/docs/the-vision-plugin
     visionTool(),
   ],
-})
+});
diff --git a/examples/cms-sanity/studio/schemas/author.js b/examples/cms-sanity/studio/schemas/author.js
index 8bfa6ecee4..6c05e957cc 100644
--- a/examples/cms-sanity/studio/schemas/author.js
+++ b/examples/cms-sanity/studio/schemas/author.js
@@ -1,20 +1,20 @@
 export const author = {
-  name: 'author',
-  title: 'Author',
-  type: 'document',
+  name: "author",
+  title: "Author",
+  type: "document",
   fields: [
     {
-      name: 'name',
-      title: 'Name',
-      type: 'string',
+      name: "name",
+      title: "Name",
+      type: "string",
       validation: (Rule) => Rule.required(),
     },
     {
-      name: 'picture',
-      title: 'Picture',
-      type: 'image',
+      name: "picture",
+      title: "Picture",
+      type: "image",
       options: { hotspot: true },
       validation: (Rule) => Rule.required(),
     },
   ],
-}
+};
diff --git a/examples/cms-sanity/studio/schemas/post.js b/examples/cms-sanity/studio/schemas/post.js
index ccb406df2d..99556226f1 100644
--- a/examples/cms-sanity/studio/schemas/post.js
+++ b/examples/cms-sanity/studio/schemas/post.js
@@ -1,64 +1,64 @@
 export const post = {
-  name: 'post',
-  title: 'Post',
-  type: 'document',
+  name: "post",
+  title: "Post",
+  type: "document",
   fields: [
     {
-      name: 'title',
-      title: 'Title',
-      type: 'string',
+      name: "title",
+      title: "Title",
+      type: "string",
       validation: (Rule) => Rule.required(),
     },
     {
-      name: 'slug',
-      title: 'Slug',
-      type: 'slug',
+      name: "slug",
+      title: "Slug",
+      type: "slug",
       options: {
-        source: 'title',
+        source: "title",
         maxLength: 96,
       },
       validation: (Rule) => Rule.required(),
     },
     {
-      name: 'content',
-      title: 'Content',
-      type: 'array',
-      of: [{ type: 'block' }],
+      name: "content",
+      title: "Content",
+      type: "array",
+      of: [{ type: "block" }],
     },
     {
-      name: 'excerpt',
-      title: 'Excerpt',
-      type: 'string',
+      name: "excerpt",
+      title: "Excerpt",
+      type: "string",
     },
     {
-      name: 'coverImage',
-      title: 'Cover Image',
-      type: 'image',
+      name: "coverImage",
+      title: "Cover Image",
+      type: "image",
       options: {
         hotspot: true,
       },
     },
     {
-      name: 'date',
-      title: 'Date',
-      type: 'datetime',
+      name: "date",
+      title: "Date",
+      type: "datetime",
     },
     {
-      name: 'author',
-      title: 'Author',
-      type: 'reference',
-      to: [{ type: 'author' }],
+      name: "author",
+      title: "Author",
+      type: "reference",
+      to: [{ type: "author" }],
     },
   ],
   preview: {
     select: {
-      title: 'title',
-      author: 'author.name',
-      media: 'coverImage',
+      title: "title",
+      author: "author.name",
+      media: "coverImage",
     },
     prepare(selection) {
-      const { author } = selection
-      return { ...selection, subtitle: author && `by ${author}` }
+      const { author } = selection;
+      return { ...selection, subtitle: author && `by ${author}` };
     },
   },
-}
+};
diff --git a/examples/cms-sanity/studio/tailwind.config.js b/examples/cms-sanity/studio/tailwind.config.js
index d8f8322c9e..8b4fa5cb74 100644
--- a/examples/cms-sanity/studio/tailwind.config.js
+++ b/examples/cms-sanity/studio/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./components/**/*.{js,ts,jsx,tsx}'],
+  content: ["./components/**/*.{js,ts,jsx,tsx}"],
   theme: {},
   plugins: [],
-}
+};
diff --git a/examples/cms-sanity/tailwind.config.js b/examples/cms-sanity/tailwind.config.js
index ea0efae6d7..a8f65a525d 100644
--- a/examples/cms-sanity/tailwind.config.js
+++ b/examples/cms-sanity/tailwind.config.js
@@ -1,38 +1,38 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/cms-sitecore-xmcloud/.graphql-let.yml b/examples/cms-sitecore-xmcloud/.graphql-let.yml
index 85b6e0d8a2..550067f114 100644
--- a/examples/cms-sitecore-xmcloud/.graphql-let.yml
+++ b/examples/cms-sitecore-xmcloud/.graphql-let.yml
@@ -1,6 +1,6 @@
 schema:
-  - './src/temp/GraphQLIntrospectionResult.json'
-documents: 'src/**/*.graphql'
+  - "./src/temp/GraphQLIntrospectionResult.json"
+documents: "src/**/*.graphql"
 plugins:
   - typescript-operations
   - typed-document-node
diff --git a/examples/cms-sitecore-xmcloud/next.config.js b/examples/cms-sitecore-xmcloud/next.config.js
index ca92b3473e..672e4292d5 100644
--- a/examples/cms-sitecore-xmcloud/next.config.js
+++ b/examples/cms-sitecore-xmcloud/next.config.js
@@ -1,8 +1,8 @@
-const jssConfig = require('./src/temp/config')
-const { getPublicUrl } = require('@sitecore-jss/sitecore-jss-nextjs')
-const plugins = require('./src/temp/next-config-plugins') || {}
+const jssConfig = require("./src/temp/config");
+const { getPublicUrl } = require("@sitecore-jss/sitecore-jss-nextjs");
+const plugins = require("./src/temp/next-config-plugins") || {};
 
-const publicUrl = getPublicUrl()
+const publicUrl = getPublicUrl();
 
 /**
  * @type {import('next').NextConfig}
@@ -12,7 +12,7 @@ const nextConfig = {
   assetPrefix: publicUrl,
 
   // Allow specifying a distinct distDir when concurrently running app in a container
-  distDir: process.env.NEXTJS_DIST_DIR || '.next',
+  distDir: process.env.NEXTJS_DIST_DIR || ".next",
 
   // Make the same PUBLIC_URL available as an environment variable on the client bundle
   env: {
@@ -22,7 +22,7 @@ const nextConfig = {
   i18n: {
     // These are all the locales you want to support in your application.
     // These should generally match (or at least be a subset of) those in Sitecore.
-    locales: ['en'],
+    locales: ["en"],
     // This is the locale that will be used when visiting a non-locale
     // prefixed path e.g. `/styleguide`.
     defaultLocale: jssConfig.defaultLanguage,
@@ -36,34 +36,37 @@ const nextConfig = {
     return [
       // API endpoints
       {
-        source: '/sitecore/api/:path*',
+        source: "/sitecore/api/:path*",
         destination: `${jssConfig.sitecoreApiHost}/sitecore/api/:path*`,
       },
       // media items
       {
-        source: '/-/:path*',
+        source: "/-/:path*",
         destination: `${jssConfig.sitecoreApiHost}/-/:path*`,
       },
       // visitor identification
       {
-        source: '/layouts/system/:path*',
+        source: "/layouts/system/:path*",
         destination: `${jssConfig.sitecoreApiHost}/layouts/system/:path*`,
       },
       // healthz check
       {
-        source: '/healthz',
-        destination: '/api/healthz',
+        source: "/healthz",
+        destination: "/api/healthz",
       },
       // rewrite for Sitecore service pages
       {
-        source: '/sitecore/service/:path*',
+        source: "/sitecore/service/:path*",
         destination: `${jssConfig.sitecoreApiHost}/sitecore/service/:path*`,
       },
-    ]
+    ];
   },
-}
+};
 
 module.exports = () => {
   // Run the base config through any configured plugins
-  return Object.values(plugins).reduce((acc, plugin) => plugin(acc), nextConfig)
-}
+  return Object.values(plugins).reduce(
+    (acc, plugin) => plugin(acc),
+    nextConfig,
+  );
+};
diff --git a/examples/cms-sitecore-xmcloud/scripts/bootstrap.ts b/examples/cms-sitecore-xmcloud/scripts/bootstrap.ts
index 7ef1ffecea..4f10601ea3 100644
--- a/examples/cms-sitecore-xmcloud/scripts/bootstrap.ts
+++ b/examples/cms-sitecore-xmcloud/scripts/bootstrap.ts
@@ -8,14 +8,14 @@
 /*
    PLUGINS GENERATION
 */
-import './generate-plugins'
+import "./generate-plugins";
 
 /*
   CONFIG GENERATION
 */
-import './generate-config'
+import "./generate-config";
 
 /*
   COMPONENT FACTORY GENERATION
 */
-import './generate-component-factory'
+import "./generate-component-factory";
diff --git a/examples/cms-sitecore-xmcloud/scripts/config/index.ts b/examples/cms-sitecore-xmcloud/scripts/config/index.ts
index 932cf3e42d..13a8a22b8d 100644
--- a/examples/cms-sitecore-xmcloud/scripts/config/index.ts
+++ b/examples/cms-sitecore-xmcloud/scripts/config/index.ts
@@ -1,28 +1,28 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const plugins = require('scripts/temp/config-plugins')
+const plugins = require("scripts/temp/config-plugins");
 
 /**
  * JSS configuration object
  */
 export interface JssConfig extends Record<string, string | undefined> {
-  sitecoreApiKey?: string
-  sitecoreApiHost?: string
-  jssAppName?: string
-  graphQLEndpointPath?: string
-  defaultLanguage?: string
-  graphQLEndpoint?: string
+  sitecoreApiKey?: string;
+  sitecoreApiHost?: string;
+  jssAppName?: string;
+  graphQLEndpointPath?: string;
+  defaultLanguage?: string;
+  graphQLEndpoint?: string;
 }
 
 export interface ConfigPlugin {
   /**
    * Detect order when the plugin should be called, e.g. 0 - will be called first (can be a plugin which data is required for other plugins)
    */
-  order: number
+  order: number;
   /**
    * A function which will be called during config generation
    * @param {JssConfig} config Current (accumulated) config
    */
-  exec(config: JssConfig): Promise<JssConfig>
+  exec(config: JssConfig): Promise<JssConfig>;
 }
 
 export class JssConfigFactory {
@@ -31,9 +31,9 @@ export class JssConfigFactory {
       .sort((p1, p2) => p1.order - p2.order)
       .reduce(
         (promise, plugin) => promise.then((config) => plugin.exec(config)),
-        Promise.resolve(defaultConfig)
-      )
+        Promise.resolve(defaultConfig),
+      );
   }
 }
 
-export const jssConfigFactory = new JssConfigFactory()
+export const jssConfigFactory = new JssConfigFactory();
diff --git a/examples/cms-sitecore-xmcloud/scripts/config/plugins/computed.ts b/examples/cms-sitecore-xmcloud/scripts/config/plugins/computed.ts
index 2a898db95f..0978a7ba57 100644
--- a/examples/cms-sitecore-xmcloud/scripts/config/plugins/computed.ts
+++ b/examples/cms-sitecore-xmcloud/scripts/config/plugins/computed.ts
@@ -1,4 +1,4 @@
-import { ConfigPlugin, JssConfig } from '..'
+import { ConfigPlugin, JssConfig } from "..";
 
 /**
  * This plugin will set computed config props.
@@ -7,15 +7,15 @@ import { ConfigPlugin, JssConfig } from '..'
  */
 class ComputedPlugin implements ConfigPlugin {
   // should come after other plugins (but before fallback)
-  order = 10
+  order = 10;
 
   async exec(config: JssConfig) {
     return Object.assign({}, config, {
       graphQLEndpoint:
         config.graphQLEndpoint ||
         `${config.sitecoreApiHost}${config.graphQLEndpointPath}`,
-    })
+    });
   }
 }
 
-export const computedPlugin = new ComputedPlugin()
+export const computedPlugin = new ComputedPlugin();
diff --git a/examples/cms-sitecore-xmcloud/scripts/config/plugins/fallback.ts b/examples/cms-sitecore-xmcloud/scripts/config/plugins/fallback.ts
index d428dca3cc..f1d1ef93da 100644
--- a/examples/cms-sitecore-xmcloud/scripts/config/plugins/fallback.ts
+++ b/examples/cms-sitecore-xmcloud/scripts/config/plugins/fallback.ts
@@ -1,4 +1,4 @@
-import { ConfigPlugin, JssConfig } from '..'
+import { ConfigPlugin, JssConfig } from "..";
 
 /**
  * This config will set fallback values for properties that were left empty
@@ -6,14 +6,14 @@ import { ConfigPlugin, JssConfig } from '..'
  */
 class FallbackPlugin implements ConfigPlugin {
   // should always come last
-  order = 100
+  order = 100;
 
   async exec(config: JssConfig) {
     return Object.assign({}, config, {
-      defaultLanguage: config.defaultLanguage || 'en',
-      sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
-    })
+      defaultLanguage: config.defaultLanguage || "en",
+      sitecoreApiKey: config.sitecoreApiKey || "no-api-key-set",
+    });
   }
 }
 
-export const fallbackPlugin = new FallbackPlugin()
+export const fallbackPlugin = new FallbackPlugin();
diff --git a/examples/cms-sitecore-xmcloud/scripts/config/plugins/package-json.ts b/examples/cms-sitecore-xmcloud/scripts/config/plugins/package-json.ts
index 7b767c98a1..561e7a6dc9 100644
--- a/examples/cms-sitecore-xmcloud/scripts/config/plugins/package-json.ts
+++ b/examples/cms-sitecore-xmcloud/scripts/config/plugins/package-json.ts
@@ -1,22 +1,22 @@
-import { ConfigPlugin, JssConfig } from '..'
-import packageConfig from 'package.json'
+import { ConfigPlugin, JssConfig } from "..";
+import packageConfig from "package.json";
 
 /**
  * This plugin will set config props based on package.json.
  */
 class PackageJsonPlugin implements ConfigPlugin {
-  order = 1
+  order = 1;
 
   async exec(config: JssConfig) {
-    if (!packageConfig.config) return config
+    if (!packageConfig.config) return config;
 
     return Object.assign({}, config, {
       jssAppName: config.jssAppName || packageConfig.config.appName,
       graphQLEndpointPath:
         config.graphQLEndpointPath || packageConfig.config.graphQLEndpointPath,
       defaultLanguage: config.defaultLanguage || packageConfig.config.language,
-    })
+    });
   }
 }
 
-export const packageJsonPlugin = new PackageJsonPlugin()
+export const packageJsonPlugin = new PackageJsonPlugin();
diff --git a/examples/cms-sitecore-xmcloud/scripts/config/plugins/scjssconfig.ts b/examples/cms-sitecore-xmcloud/scripts/config/plugins/scjssconfig.ts
index 47c5e8d157..f37152f01c 100644
--- a/examples/cms-sitecore-xmcloud/scripts/config/plugins/scjssconfig.ts
+++ b/examples/cms-sitecore-xmcloud/scripts/config/plugins/scjssconfig.ts
@@ -1,4 +1,4 @@
-import { ConfigPlugin, JssConfig } from '..'
+import { ConfigPlugin, JssConfig } from "..";
 
 /**
  * This plugin will set config props based on scjssconfig.json.
@@ -6,24 +6,24 @@ import { ConfigPlugin, JssConfig } from '..'
  * or are depending on environment variables instead (production).
  */
 class ScJssConfigPlugin implements ConfigPlugin {
-  order = 1
+  order = 1;
 
   async exec(config: JssConfig) {
-    let scJssConfig
+    let scJssConfig;
     try {
-      scJssConfig = require('scjssconfig.json')
+      scJssConfig = require("scjssconfig.json");
     } catch (e) {
-      return config
+      return config;
     }
 
-    if (!scJssConfig) return config
+    if (!scJssConfig) return config;
 
     return Object.assign({}, config, {
       sitecoreApiKey: config.sitecoreApiKey || scJssConfig.sitecore?.apiKey,
       sitecoreApiHost:
         config.sitecoreApiHost || scJssConfig.sitecore?.layoutServiceHost,
-    })
+    });
   }
 }
 
-export const scjssconfigPlugin = new ScJssConfigPlugin()
+export const scjssconfigPlugin = new ScJssConfigPlugin();
diff --git a/examples/cms-sitecore-xmcloud/scripts/fetch-graphql-introspection-data.ts b/examples/cms-sitecore-xmcloud/scripts/fetch-graphql-introspection-data.ts
index 2a66c72352..6aefe24cbc 100644
--- a/examples/cms-sitecore-xmcloud/scripts/fetch-graphql-introspection-data.ts
+++ b/examples/cms-sitecore-xmcloud/scripts/fetch-graphql-introspection-data.ts
@@ -1,48 +1,48 @@
-import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-nextjs'
-import fs from 'fs'
-import { getIntrospectionQuery } from 'graphql'
+import { GraphQLRequestClient } from "@sitecore-jss/sitecore-jss-nextjs";
+import fs from "fs";
+import { getIntrospectionQuery } from "graphql";
 
 // This script load graphql introspection data in order to use graphql code generator and generate typescript types
 // The `jss graphql:update` command should be executed when Sitecore templates related to the site are altered.
 
-let jssConfig
+let jssConfig;
 
 try {
   // eslint-disable-next-line
-  jssConfig = require('../src/temp/config')
+  jssConfig = require("../src/temp/config");
 } catch (e) {
   console.error(
-    'Unable to require JSS config. Ensure `jss setup` has been run, and the app has been started at least once after setup.'
-  )
-  console.error(e)
-  process.exit(1)
+    "Unable to require JSS config. Ensure `jss setup` has been run, and the app has been started at least once after setup.",
+  );
+  console.error(e);
+  process.exit(1);
 }
 
 console.log(
-  `Fetch graphql introspection data from ${jssConfig.graphQLEndpoint}...`
-)
+  `Fetch graphql introspection data from ${jssConfig.graphQLEndpoint}...`,
+);
 
 const client = new GraphQLRequestClient(jssConfig.graphQLEndpoint, {
   apiKey: jssConfig.sitecoreApiKey,
-})
+});
 
 client
   .request(getIntrospectionQuery())
   .then((result) => {
     fs.writeFile(
-      './src/temp/GraphQLIntrospectionResult.json',
+      "./src/temp/GraphQLIntrospectionResult.json",
       JSON.stringify(result, null, 2),
       (err) => {
         if (err) {
-          console.error('Error writing GraphQLIntrospectionResult file', err)
-          return
+          console.error("Error writing GraphQLIntrospectionResult file", err);
+          return;
         }
 
-        console.log('GraphQL Introspection Data successfully fetched!')
-      }
-    )
+        console.log("GraphQL Introspection Data successfully fetched!");
+      },
+    );
   })
   .catch((e) => {
-    console.error(e)
-    process.exit(1)
-  })
+    console.error(e);
+    process.exit(1);
+  });
diff --git a/examples/cms-sitecore-xmcloud/scripts/generate-component-factory.ts b/examples/cms-sitecore-xmcloud/scripts/generate-component-factory.ts
index 72d0d411ce..483aefbc5b 100644
--- a/examples/cms-sitecore-xmcloud/scripts/generate-component-factory.ts
+++ b/examples/cms-sitecore-xmcloud/scripts/generate-component-factory.ts
@@ -1,10 +1,10 @@
-import fs from 'fs'
-import path from 'path'
+import fs from "fs";
+import path from "path";
 import generateComponentFactory, {
   ComponentFile,
   PackageDefinition,
-} from './templates/component-factory'
-import { getItems, watchItems } from './utils'
+} from "./templates/component-factory";
+import { getItems, watchItems } from "./utils";
 
 /*
   COMPONENT FACTORY GENERATION
@@ -27,10 +27,10 @@ import { getItems, watchItems } from './utils'
   when calling the script.
 */
 
-const componentFactoryPath = path.resolve('src/temp/componentFactory.ts')
-const componentRootPath = 'src/components'
+const componentFactoryPath = path.resolve("src/temp/componentFactory.ts");
+const componentRootPath = "src/components";
 
-const isWatch = process.argv.some((arg) => arg === '--watch')
+const isWatch = process.argv.some((arg) => arg === "--watch");
 
 function getComponentList(path: string): (PackageDefinition | ComponentFile)[] {
   const components = getItems<PackageDefinition | ComponentFile>({
@@ -38,12 +38,12 @@ function getComponentList(path: string): (PackageDefinition | ComponentFile)[] {
     resolveItem: (path, name) => ({
       path: `${path}/${name}`,
       componentName: name,
-      moduleName: name.replace(/[^\w]+/g, ''),
+      moduleName: name.replace(/[^\w]+/g, ""),
     }),
     cb: (name) => console.debug(`Registering JSS component ${name}`),
-  })
+  });
 
-  return components
+  return components;
 }
 
 /**
@@ -69,16 +69,16 @@ function writeComponentFactory() {
    *    ]
    *  }
    */
-  const packages: PackageDefinition[] = []
-  const components = getComponentList(componentRootPath)
+  const packages: PackageDefinition[] = [];
+  const components = getComponentList(componentRootPath);
 
-  components.unshift(...packages)
+  components.unshift(...packages);
 
-  const fileContent = generateComponentFactory(components)
-  console.log(`Writing component factory to ${componentFactoryPath}`)
+  const fileContent = generateComponentFactory(components);
+  console.log(`Writing component factory to ${componentFactoryPath}`);
   fs.writeFileSync(componentFactoryPath, fileContent, {
-    encoding: 'utf8',
-  })
+    encoding: "utf8",
+  });
 }
 
 /**
@@ -88,10 +88,10 @@ function writeComponentFactory() {
  */
 function watchComponentFactory() {
   console.log(
-    `Watching for changes to component factory sources in ${componentRootPath}...`
-  )
+    `Watching for changes to component factory sources in ${componentRootPath}...`,
+  );
 
-  watchItems(componentRootPath, writeComponentFactory)
+  watchItems(componentRootPath, writeComponentFactory);
 }
 
-;(isWatch ? watchComponentFactory : writeComponentFactory)()
+(isWatch ? watchComponentFactory : writeComponentFactory)();
diff --git a/examples/cms-sitecore-xmcloud/scripts/generate-config.ts b/examples/cms-sitecore-xmcloud/scripts/generate-config.ts
index 6ecf1f4b30..ac98164342 100644
--- a/examples/cms-sitecore-xmcloud/scripts/generate-config.ts
+++ b/examples/cms-sitecore-xmcloud/scripts/generate-config.ts
@@ -1,8 +1,8 @@
-import 'dotenv/config'
-import fs from 'fs'
-import path from 'path'
-import { constantCase } from 'constant-case'
-import { JssConfig, jssConfigFactory } from './config'
+import "dotenv/config";
+import fs from "fs";
+import path from "path";
+import { constantCase } from "constant-case";
+import { JssConfig, jssConfigFactory } from "./config";
 
 /*
   CONFIG GENERATION
@@ -11,13 +11,13 @@ import { JssConfig, jssConfigFactory } from './config'
 */
 
 const defaultConfig: JssConfig = {
-  sitecoreApiKey: process.env[`${constantCase('sitecoreApiKey')}`],
-  sitecoreApiHost: process.env[`${constantCase('sitecoreApiHost')}`],
-  jssAppName: process.env[`${constantCase('jssAppName')}`],
-  graphQLEndpointPath: process.env[`${constantCase('graphQLEndpointPath')}`],
-  defaultLanguage: process.env[`${constantCase('defaultLanguage')}`],
-  graphQLEndpoint: process.env[`${constantCase('graphQLEndpoint')}`],
-}
+  sitecoreApiKey: process.env[`${constantCase("sitecoreApiKey")}`],
+  sitecoreApiHost: process.env[`${constantCase("sitecoreApiHost")}`],
+  jssAppName: process.env[`${constantCase("jssAppName")}`],
+  graphQLEndpointPath: process.env[`${constantCase("graphQLEndpointPath")}`],
+  defaultLanguage: process.env[`${constantCase("defaultLanguage")}`],
+  graphQLEndpoint: process.env[`${constantCase("graphQLEndpoint")}`],
+};
 
 /**
  * Writes the config object to disk with support for environment variables.
@@ -27,19 +27,19 @@ function writeConfig(config: JssConfig): void {
   let configText = `/* eslint-disable */
 // Do not edit this file, it is auto-generated at build time!
 // See scripts/bootstrap.ts to modify the generation of this file.
-const config = {};\n`
+const config = {};\n`;
 
   // Set configuration values, allowing override with environment variables
   Object.keys(config).forEach((prop) => {
     configText += `config.${prop} = process.env.${constantCase(prop)} || '${
       config[prop]
-    }',\n`
-  })
-  configText += `module.exports = config;`
+    }',\n`;
+  });
+  configText += `module.exports = config;`;
 
-  const configPath = path.resolve('src/temp/config.js')
-  console.log(`Writing runtime config to ${configPath}`)
-  fs.writeFileSync(configPath, configText, { encoding: 'utf8' })
+  const configPath = path.resolve("src/temp/config.js");
+  console.log(`Writing runtime config to ${configPath}`);
+  fs.writeFileSync(configPath, configText, { encoding: "utf8" });
 }
 
 /**
@@ -51,13 +51,13 @@ function generateConfig(defaultConfig: JssConfig): void {
   jssConfigFactory
     .create(defaultConfig)
     .then((config) => {
-      writeConfig(config)
+      writeConfig(config);
     })
     .catch((e) => {
-      console.error('Error generating config')
-      console.error(e)
-      process.exit(1)
-    })
+      console.error("Error generating config");
+      console.error(e);
+      process.exit(1);
+    });
 }
 
-generateConfig(defaultConfig)
+generateConfig(defaultConfig);
diff --git a/examples/cms-sitecore-xmcloud/scripts/generate-plugins.ts b/examples/cms-sitecore-xmcloud/scripts/generate-plugins.ts
index 2ec8450569..b1ea55fb0b 100644
--- a/examples/cms-sitecore-xmcloud/scripts/generate-plugins.ts
+++ b/examples/cms-sitecore-xmcloud/scripts/generate-plugins.ts
@@ -1,6 +1,6 @@
-import fs from 'fs'
-import path from 'path'
-import { getItems } from './utils'
+import fs from "fs";
+import path from "path";
+import { getItems } from "./utils";
 
 /*
   PLUGINS GENERATION
@@ -20,53 +20,53 @@ enum ModuleType {
 }
 
 interface PluginDefinition {
-  listPath: string
-  rootPath: string
-  moduleType: ModuleType
+  listPath: string;
+  rootPath: string;
+  moduleType: ModuleType;
 }
 
 interface PluginFile {
-  path: string
-  name: string
+  path: string;
+  name: string;
 }
 
 const pluginDefinitions = [
   {
-    listPath: 'scripts/temp/config-plugins.ts',
-    rootPath: 'scripts/config/plugins',
+    listPath: "scripts/temp/config-plugins.ts",
+    rootPath: "scripts/config/plugins",
     moduleType: ModuleType.ESM,
   },
   {
-    listPath: 'src/temp/sitemap-fetcher-plugins.ts',
-    rootPath: 'src/lib/sitemap-fetcher/plugins',
+    listPath: "src/temp/sitemap-fetcher-plugins.ts",
+    rootPath: "src/lib/sitemap-fetcher/plugins",
     moduleType: ModuleType.ESM,
   },
   {
-    listPath: 'src/temp/middleware-plugins.ts',
-    rootPath: 'src/lib/middleware/plugins',
+    listPath: "src/temp/middleware-plugins.ts",
+    rootPath: "src/lib/middleware/plugins",
     moduleType: ModuleType.ESM,
   },
   {
-    listPath: 'src/temp/page-props-factory-plugins.ts',
-    rootPath: 'src/lib/page-props-factory/plugins',
+    listPath: "src/temp/page-props-factory-plugins.ts",
+    rootPath: "src/lib/page-props-factory/plugins",
     moduleType: ModuleType.ESM,
   },
   {
-    listPath: 'src/temp/next-config-plugins.js',
-    rootPath: 'src/lib/next-config/plugins',
+    listPath: "src/temp/next-config-plugins.js",
+    rootPath: "src/lib/next-config/plugins",
     moduleType: ModuleType.CJS,
   },
   {
-    listPath: 'src/temp/extract-path-plugins.ts',
-    rootPath: 'src/lib/extract-path/plugins',
+    listPath: "src/temp/extract-path-plugins.ts",
+    rootPath: "src/lib/extract-path/plugins",
     moduleType: ModuleType.ESM,
   },
   {
-    listPath: 'src/temp/site-resolver-plugins.ts',
-    rootPath: 'src/lib/site-resolver/plugins',
+    listPath: "src/temp/site-resolver-plugins.ts",
+    rootPath: "src/lib/site-resolver/plugins",
     moduleType: ModuleType.ESM,
   },
-]
+];
 
 function getPluginList(path: string, pluginName: string): PluginFile[] {
   const plugins = getItems<PluginFile>({
@@ -76,9 +76,9 @@ function getPluginList(path: string, pluginName: string): PluginFile[] {
       name: `${name.replace(/-./g, (x) => x[1].toUpperCase())}Plugin`,
     }),
     cb: (name) => console.debug(`Registering ${pluginName} plugin ${name}`),
-  })
+  });
 
-  return plugins
+  return plugins;
 }
 
 /**
@@ -92,37 +92,37 @@ function getPluginList(path: string, pluginName: string): PluginFile[] {
 function writePlugins(
   listPath: string,
   rootPath: string,
-  moduleType: ModuleType
+  moduleType: ModuleType,
 ) {
-  const segments = rootPath.split('/')
-  const pluginName = segments[segments.length - 2]
-  const plugins = getPluginList(rootPath, pluginName)
-  let fileContent = ''
+  const segments = rootPath.split("/");
+  const pluginName = segments[segments.length - 2];
+  const plugins = getPluginList(rootPath, pluginName);
+  let fileContent = "";
 
   fileContent = plugins
     .map((plugin) => {
       return moduleType === ModuleType.CJS
         ? `exports.${plugin.name} = require('${plugin.path.replace(
-            'src/',
-            '../'
+            "src/",
+            "../",
           )}');`
-        : `export { ${plugin.name} } from '${plugin.path}';`
+        : `export { ${plugin.name} } from '${plugin.path}';`;
     })
-    .join('\r\n')
-    .concat('\r\n')
+    .join("\r\n")
+    .concat("\r\n");
 
   if (!plugins.length) {
     fileContent =
       moduleType === ModuleType.CJS
-        ? 'module.exports = {};\r\n'
-        : 'export {};\r\n'
+        ? "module.exports = {};\r\n"
+        : "export {};\r\n";
   }
 
-  const filePath = path.resolve(listPath)
-  console.log(`Writing ${pluginName} plugins to ${filePath}`)
+  const filePath = path.resolve(listPath);
+  console.log(`Writing ${pluginName} plugins to ${filePath}`);
   fs.writeFileSync(filePath, fileContent, {
-    encoding: 'utf8',
-  })
+    encoding: "utf8",
+  });
 }
 
 function run(definitions: PluginDefinition[]) {
@@ -130,9 +130,9 @@ function run(definitions: PluginDefinition[]) {
     writePlugins(
       definition.listPath,
       definition.rootPath,
-      definition.moduleType
-    )
-  })
+      definition.moduleType,
+    );
+  });
 }
 
-run(pluginDefinitions)
+run(pluginDefinitions);
diff --git a/examples/cms-sitecore-xmcloud/scripts/scaffold-component.ts b/examples/cms-sitecore-xmcloud/scripts/scaffold-component.ts
index 32d2f705fa..618ac2994f 100644
--- a/examples/cms-sitecore-xmcloud/scripts/scaffold-component.ts
+++ b/examples/cms-sitecore-xmcloud/scripts/scaffold-component.ts
@@ -14,32 +14,32 @@
 
 /* eslint-disable no-throw-literal,no-console */
 
-import fs from 'fs'
-import path from 'path'
-import chalk from 'chalk'
-import generateComponentSrc from './templates/component-src'
+import fs from "fs";
+import path from "path";
+import chalk from "chalk";
+import generateComponentSrc from "./templates/component-src";
 
-const componentRootPath = 'src/components'
+const componentRootPath = "src/components";
 
 // Matches component names that start with a capital letter, and contain only letters, number,
 // underscores, or dashes. Optionally, the component name can be preceded by a relative path
-const nameParamFormat = new RegExp(/^((?:[\w-]+\/)*)([A-Z][\w-]+)$/)
-const componentArg = process.argv[2]
+const nameParamFormat = new RegExp(/^((?:[\w-]+\/)*)([A-Z][\w-]+)$/);
+const componentArg = process.argv[2];
 
 if (!componentArg) {
-  throw 'Component name was not passed. Usage: jss scaffold <ComponentName>'
+  throw "Component name was not passed. Usage: jss scaffold <ComponentName>";
 }
 
-const regExResult = nameParamFormat.exec(componentArg)
+const regExResult = nameParamFormat.exec(componentArg);
 
 if (regExResult === null) {
   throw `Component name should start with an uppercase letter and contain only letters, numbers,
-dashes, or underscores. If specifying a path, it must be relative to src/components`
+dashes, or underscores. If specifying a path, it must be relative to src/components`;
 }
 
-const componentPath = regExResult[1]
-const componentName = regExResult[2]
-const filename = `${componentName}.tsx`
+const componentPath = regExResult[1];
+const componentName = regExResult[2];
+const filename = `${componentName}.tsx`;
 
 /**
  * Force to use `crlf` line endings, we are using `crlf` across the project.
@@ -47,7 +47,7 @@ const filename = `${componentName}.tsx`
  * @param {string} content
  */
 function editLineEndings(content: string) {
-  return content.replace(/\r|\n/gm, '\r\n')
+  return content.replace(/\r|\n/gm, "\r\n");
 }
 
 /**
@@ -60,36 +60,36 @@ function editLineEndings(content: string) {
 function scaffoldFile(
   rootPath: string,
   fileContent: string,
-  filename: string
+  filename: string,
 ): string | null {
-  const outputDir = path.join(rootPath, componentPath)
-  const outputFile = path.join(outputDir, filename)
+  const outputDir = path.join(rootPath, componentPath);
+  const outputFile = path.join(outputDir, filename);
 
   if (fs.existsSync(outputFile)) {
-    console.log(chalk.red(`Skipping creating ${outputFile}; already exists.`))
-    return null
+    console.log(chalk.red(`Skipping creating ${outputFile}; already exists.`));
+    return null;
   }
 
-  fs.mkdirSync(outputDir, { recursive: true })
-  fs.writeFileSync(outputFile, editLineEndings(fileContent), 'utf8')
-  console.log(chalk.green(`File ${outputFile} has been scaffolded.`))
-  return outputFile
+  fs.mkdirSync(outputDir, { recursive: true });
+  fs.writeFileSync(outputFile, editLineEndings(fileContent), "utf8");
+  console.log(chalk.green(`File ${outputFile} has been scaffolded.`));
+  return outputFile;
 }
 
 const componentOutputPath = scaffoldFile(
   componentRootPath,
   generateComponentSrc(componentName),
-  filename
-)
+  filename,
+);
 
 console.log(
   chalk.green(`
 Scaffolding of ${componentName} complete.
-Next steps:`)
-)
+Next steps:`),
+);
 
 if (componentOutputPath) {
   console.log(
-    `* Implement the React component in ${chalk.green(componentOutputPath)}`
-  )
+    `* Implement the React component in ${chalk.green(componentOutputPath)}`,
+  );
 }
diff --git a/examples/cms-sitecore-xmcloud/scripts/temp/config-plugins.ts b/examples/cms-sitecore-xmcloud/scripts/temp/config-plugins.ts
index aacc0009fa..b7170e92d2 100644
--- a/examples/cms-sitecore-xmcloud/scripts/temp/config-plugins.ts
+++ b/examples/cms-sitecore-xmcloud/scripts/temp/config-plugins.ts
@@ -1,4 +1,4 @@
-export { computedPlugin } from 'scripts/config/plugins/computed'
-export { fallbackPlugin } from 'scripts/config/plugins/fallback'
-export { packageJsonPlugin } from 'scripts/config/plugins/package-json'
-export { scjssconfigPlugin } from 'scripts/config/plugins/scjssconfig'
+export { computedPlugin } from "scripts/config/plugins/computed";
+export { fallbackPlugin } from "scripts/config/plugins/fallback";
+export { packageJsonPlugin } from "scripts/config/plugins/package-json";
+export { scjssconfigPlugin } from "scripts/config/plugins/scjssconfig";
diff --git a/examples/cms-sitecore-xmcloud/scripts/templates/component-factory.ts b/examples/cms-sitecore-xmcloud/scripts/templates/component-factory.ts
index efcec4cbfa..11e6a5700a 100644
--- a/examples/cms-sitecore-xmcloud/scripts/templates/component-factory.ts
+++ b/examples/cms-sitecore-xmcloud/scripts/templates/component-factory.ts
@@ -2,24 +2,24 @@
  * Describes a file that represents a component definition
  */
 export interface ComponentFile {
-  path: string
-  moduleName: string
-  componentName: string
+  path: string;
+  moduleName: string;
+  componentName: string;
 }
 
 export interface PackageDefinition {
-  name: string
+  name: string;
   components: {
-    moduleName: string
-    componentName: string
-  }[]
+    moduleName: string;
+    componentName: string;
+  }[];
 }
 
 const isLazyLoadingModule = (componentPath: string) =>
-  componentPath.includes('.dynamic')
+  componentPath.includes(".dynamic");
 
 const removeDynamicModuleNameEnding = (moduleName: string) =>
-  moduleName.replace(/\.?dynamic$/i, '')
+  moduleName.replace(/\.?dynamic$/i, "");
 
 /**
  * Generates the contents of the component factory file using a predefined string template.
@@ -27,50 +27,50 @@ const removeDynamicModuleNameEnding = (moduleName: string) =>
  * @returns component factory file contents
  */
 function generateComponentFactory(
-  components: (PackageDefinition | ComponentFile)[]
+  components: (PackageDefinition | ComponentFile)[],
 ): string {
   const componentFiles = components.filter(
-    (component) => (component as ComponentFile).path
-  ) as ComponentFile[]
+    (component) => (component as ComponentFile).path,
+  ) as ComponentFile[];
   const packages = components.filter(
-    (component) => (component as PackageDefinition).components
-  ) as PackageDefinition[]
+    (component) => (component as PackageDefinition).components,
+  ) as PackageDefinition[];
 
   const hasLazyModules = componentFiles.find((component) =>
-    isLazyLoadingModule(component.path)
-  )
+    isLazyLoadingModule(component.path),
+  );
 
   return `/* eslint-disable */
 // Do not edit this file, it is auto-generated at build time!
 // See scripts/generate-component-factory.ts to modify the generation of this file.
 
-${hasLazyModules ? "import dynamic from 'next/dynamic'" : ''}
+${hasLazyModules ? "import dynamic from 'next/dynamic'" : ""}
 
 ${packages.map((pkg) => {
-  const list = pkg.components.map((c) => c.moduleName).join(', ')
+  const list = pkg.components.map((c) => c.moduleName).join(", ");
 
-  return `import { ${list} } from '${pkg.name}'`
+  return `import { ${list} } from '${pkg.name}'`;
 })}
 ${componentFiles
   .map((component) => {
     if (isLazyLoadingModule(component.path)) {
-      const moduleName = removeDynamicModuleNameEnding(component.moduleName)
+      const moduleName = removeDynamicModuleNameEnding(component.moduleName);
       return `const ${moduleName} = {
   module: () => import('${component.path}'),
   element: (isEditing?: boolean) => isEditing ? require('${component.path}')?.default : dynamic(${moduleName}.module)
-}`
+}`;
     }
 
-    return `import * as ${component.moduleName} from '${component.path}';`
+    return `import * as ${component.moduleName} from '${component.path}';`;
   })
-  .join('\n')}
+  .join("\n")}
 
 const components = new Map();
 ${packages.map((p) =>
   p.components.map(
     (component) =>
-      `components.set('${component.componentName}', ${component.moduleName})`
-  )
+      `components.set('${component.componentName}', ${component.moduleName})`,
+  ),
 )}
 ${componentFiles
   .map(
@@ -83,9 +83,9 @@ ${componentFiles
         isLazyLoadingModule(component.path)
           ? removeDynamicModuleNameEnding(component.moduleName)
           : component.moduleName
-      });`
+      });`,
   )
-  .join('\n')}
+  .join("\n")}
 
 // Next.js 'dynamic' import and JavaScript 'dynamic' import are different.
 // Next.js 'dynamic(...)' returns common 'React.ComponentType' while
@@ -136,7 +136,7 @@ export function componentFactory(componentName: string, exportName?: string) {
 export function editingComponentFactory(componentName: string, exportName?: string) {
   return baseComponentFactory(componentName, exportName, true);
 }
-`
+`;
 }
 
-export default generateComponentFactory
+export default generateComponentFactory;
diff --git a/examples/cms-sitecore-xmcloud/scripts/templates/component-src.ts b/examples/cms-sitecore-xmcloud/scripts/templates/component-src.ts
index 9adae12a29..632799ce27 100644
--- a/examples/cms-sitecore-xmcloud/scripts/templates/component-src.ts
+++ b/examples/cms-sitecore-xmcloud/scripts/templates/component-src.ts
@@ -21,7 +21,7 @@ const ${componentName} = (props: ${componentName}Props): JSX.Element => (
 );
 
 export default withDatasourceCheck()<${componentName}Props>(${componentName});
-`
+`;
 }
 
-export default generateComponentSrc
+export default generateComponentSrc;
diff --git a/examples/cms-sitecore-xmcloud/scripts/utils.ts b/examples/cms-sitecore-xmcloud/scripts/utils.ts
index ab9e496f5b..0dae77aba1 100644
--- a/examples/cms-sitecore-xmcloud/scripts/utils.ts
+++ b/examples/cms-sitecore-xmcloud/scripts/utils.ts
@@ -1,5 +1,5 @@
-import fs from 'fs'
-import chokidar from 'chokidar'
+import fs from "fs";
+import chokidar from "chokidar";
 
 /**
  * Run watch mode, watching on @var rootPath
@@ -7,8 +7,8 @@ import chokidar from 'chokidar'
 export function watchItems(rootPath: string, cb: () => void): void {
   chokidar
     .watch(rootPath, { ignoreInitial: true, awaitWriteFinish: true })
-    .on('add', cb)
-    .on('unlink', cb)
+    .on("add", cb)
+    .on("unlink", cb);
 }
 
 /**
@@ -20,34 +20,34 @@ export function watchItems(rootPath: string, cb: () => void): void {
  * @returns {Item[]} items
  */
 export function getItems<Item>(settings: {
-  path: string
-  resolveItem: (path: string, name: string) => Item
-  cb?: (name: string) => void
-  fileFormat?: RegExp
+  path: string;
+  resolveItem: (path: string, name: string) => Item;
+  cb?: (name: string) => void;
+  fileFormat?: RegExp;
 }): Item[] {
   const {
     path,
     resolveItem,
     cb,
     fileFormat = new RegExp(/(.+)(?<!\.d)\.[jt]sx?$/),
-  } = settings
-  const items: Item[] = []
-  const folders: fs.Dirent[] = []
+  } = settings;
+  const items: Item[] = [];
+  const folders: fs.Dirent[] = [];
 
-  if (!fs.existsSync(path)) return []
+  if (!fs.existsSync(path)) return [];
 
   fs.readdirSync(path, { withFileTypes: true }).forEach((item) => {
     if (item.isDirectory()) {
-      folders.push(item)
+      folders.push(item);
     }
 
     if (fileFormat.test(item.name)) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const name = item.name.match(fileFormat)![1]
-      items.push(resolveItem(path, name))
-      cb && cb(name)
+      const name = item.name.match(fileFormat)![1];
+      items.push(resolveItem(path, name));
+      cb && cb(name);
     }
-  })
+  });
 
   for (const folder of folders) {
     items.push(
@@ -56,9 +56,9 @@ export function getItems<Item>(settings: {
         resolveItem,
         cb,
         fileFormat,
-      })
-    )
+      }),
+    );
   }
 
-  return items
+  return items;
 }
diff --git a/examples/cms-sitecore-xmcloud/src/Layout.tsx b/examples/cms-sitecore-xmcloud/src/Layout.tsx
index 42f6d7e765..40fa82983e 100644
--- a/examples/cms-sitecore-xmcloud/src/Layout.tsx
+++ b/examples/cms-sitecore-xmcloud/src/Layout.tsx
@@ -1,40 +1,40 @@
 /**
  * This Layout is needed for Starter Kit.
  */
-import React from 'react'
-import Head from 'next/head'
+import React from "react";
+import Head from "next/head";
 import {
   Placeholder,
   getPublicUrl,
   LayoutServiceData,
   Field,
-} from '@sitecore-jss/sitecore-jss-nextjs'
-import Scripts from 'src/Scripts'
+} from "@sitecore-jss/sitecore-jss-nextjs";
+import Scripts from "src/Scripts";
 
 // Prefix public assets with a public URL to enable compatibility with Sitecore Experience Editor.
 // If you're not supporting the Experience Editor, you can remove this.
-const publicUrl = getPublicUrl()
+const publicUrl = getPublicUrl();
 
 interface LayoutProps {
-  layoutData: LayoutServiceData
+  layoutData: LayoutServiceData;
 }
 
 interface RouteFields {
-  [key: string]: unknown
-  Title?: Field
+  [key: string]: unknown;
+  Title?: Field;
 }
 
 const Layout = ({ layoutData }: LayoutProps): JSX.Element => {
-  const { route } = layoutData.sitecore
-  const fields = route?.fields as RouteFields
-  const isPageEditing = layoutData.sitecore.context.pageEditing
-  const mainClassPageEditing = isPageEditing ? 'editing-mode' : 'prod-mode'
+  const { route } = layoutData.sitecore;
+  const fields = route?.fields as RouteFields;
+  const isPageEditing = layoutData.sitecore.context.pageEditing;
+  const mainClassPageEditing = isPageEditing ? "editing-mode" : "prod-mode";
 
   return (
     <>
       <Scripts />
       <Head>
-        <title>{fields?.Title?.value?.toString() || 'Page'}</title>
+        <title>{fields?.Title?.value?.toString() || "Page"}</title>
         <link rel="icon" href={`${publicUrl}/favicon.ico`} />
       </Head>
 
@@ -57,7 +57,7 @@ const Layout = ({ layoutData }: LayoutProps): JSX.Element => {
         </footer>
       </div>
     </>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;
diff --git a/examples/cms-sitecore-xmcloud/src/Navigation.tsx b/examples/cms-sitecore-xmcloud/src/Navigation.tsx
index c1e7a1446f..adc1c0c98e 100644
--- a/examples/cms-sitecore-xmcloud/src/Navigation.tsx
+++ b/examples/cms-sitecore-xmcloud/src/Navigation.tsx
@@ -1,8 +1,8 @@
-import { getPublicUrl } from '@sitecore-jss/sitecore-jss-nextjs'
+import { getPublicUrl } from "@sitecore-jss/sitecore-jss-nextjs";
 
 // Prefix public assets with a public URL to enable compatibility with Sitecore editors.
 // If you're not supporting Sitecore editors, you can remove this.
-const publicUrl = getPublicUrl()
+const publicUrl = getPublicUrl();
 
 const Navigation = (): JSX.Element => (
   <div>
@@ -22,6 +22,6 @@ const Navigation = (): JSX.Element => (
       </ul>
     </nav>
   </div>
-)
+);
 
-export default Navigation
+export default Navigation;
diff --git a/examples/cms-sitecore-xmcloud/src/NotFound.tsx b/examples/cms-sitecore-xmcloud/src/NotFound.tsx
index e4e59d16b6..173d9af573 100644
--- a/examples/cms-sitecore-xmcloud/src/NotFound.tsx
+++ b/examples/cms-sitecore-xmcloud/src/NotFound.tsx
@@ -1,4 +1,4 @@
-import Head from 'next/head'
+import Head from "next/head";
 
 /**
  * Rendered in case if we have 404 error
@@ -14,6 +14,6 @@ const NotFound = (): JSX.Element => (
       <a href="/">Go to the Home page</a>
     </div>
   </>
-)
+);
 
-export default NotFound
+export default NotFound;
diff --git a/examples/cms-sitecore-xmcloud/src/Scripts.tsx b/examples/cms-sitecore-xmcloud/src/Scripts.tsx
index c57b322012..d84477ba2a 100644
--- a/examples/cms-sitecore-xmcloud/src/Scripts.tsx
+++ b/examples/cms-sitecore-xmcloud/src/Scripts.tsx
@@ -1,5 +1,5 @@
 const Scripts = (): JSX.Element | null => {
-  return null
-}
+  return null;
+};
 
-export default Scripts
+export default Scripts;
diff --git a/examples/cms-sitecore-xmcloud/src/assets/app.css b/examples/cms-sitecore-xmcloud/src/assets/app.css
index 489cdc72b0..e0d77b9002 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/app.css
+++ b/examples/cms-sitecore-xmcloud/src/assets/app.css
@@ -1,5 +1,5 @@
-a[target='_blank']:after {
-  content: '\1F5D7';
+a[target="_blank"]:after {
+  content: "\1F5D7";
 }
 
 /*
diff --git a/examples/cms-sitecore-xmcloud/src/assets/basic/_container.scss b/examples/cms-sitecore-xmcloud/src/assets/basic/_container.scss
index 8644503433..92505f46e1 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/basic/_container.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/basic/_container.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/mixins';
-@import 'variables';
+@import "@sass/abstracts/mixins";
+@import "variables";
 
 body {
   font-family: Roboto;
diff --git a/examples/cms-sitecore-xmcloud/src/assets/basic/_fonts.scss b/examples/cms-sitecore-xmcloud/src/assets/basic/_fonts.scss
index d383a9572f..662f0a36b5 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/basic/_fonts.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/basic/_fonts.scss
@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
diff --git a/examples/cms-sitecore-xmcloud/src/assets/basic/_footer.scss b/examples/cms-sitecore-xmcloud/src/assets/basic/_footer.scss
index bc97d5ce85..4fc7a878db 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/basic/_footer.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/basic/_footer.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/mixins';
-@import 'variables';
+@import "@sass/abstracts/mixins";
+@import "variables";
 
 footer {
   @include respond-to(mobile-large) {
diff --git a/examples/cms-sitecore-xmcloud/src/assets/basic/_header.scss b/examples/cms-sitecore-xmcloud/src/assets/basic/_header.scss
index e5810fee4a..9a20cea821 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/basic/_header.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/basic/_header.scss
@@ -1,6 +1,6 @@
-@import '@sass/abstracts/vars/colors';
-@import '@sass/abstracts/mixins';
-@import 'variables';
+@import "@sass/abstracts/vars/colors";
+@import "@sass/abstracts/mixins";
+@import "variables";
 
 .prod-mode {
   #header {
diff --git a/examples/cms-sitecore-xmcloud/src/assets/basic/_navigation.scss b/examples/cms-sitecore-xmcloud/src/assets/basic/_navigation.scss
index 43e7ef89ff..4b6ba904ed 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/basic/_navigation.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/basic/_navigation.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars';
-@import 'variables';
+@import "@sass/abstracts/vars";
+@import "variables";
 
 $hamburger-width: 28px;
 $hamburger-height: 18px;
@@ -112,7 +112,7 @@ $hamburger-margin: 18px;
         &:checked ~ {
           .menu-humburger {
             &::before {
-              content: '\00d7';
+              content: "\00d7";
               color: $text-basic-active;
               font-size: $text-size-48;
               position: fixed;
@@ -134,7 +134,7 @@ $hamburger-margin: 18px;
 
       .menu-humburger {
         &::before {
-          content: '';
+          content: "";
           width: $hamburger-width;
           height: $hamburger-height;
           margin-right: $hamburger-margin;
diff --git a/examples/cms-sitecore-xmcloud/src/assets/basic/_promo.scss b/examples/cms-sitecore-xmcloud/src/assets/basic/_promo.scss
index 255b26c9b3..3c9055cc80 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/basic/_promo.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/basic/_promo.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
 /**PROMO**/
 
 .promo {
diff --git a/examples/cms-sitecore-xmcloud/src/assets/basic/_rich-text.scss b/examples/cms-sitecore-xmcloud/src/assets/basic/_rich-text.scss
index ae6878e5a0..3bf6fbb156 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/basic/_rich-text.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/basic/_rich-text.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars';
-@import 'variables';
+@import "@sass/abstracts/vars";
+@import "variables";
 
 .rich-text {
   font-size: $text-size-16;
diff --git a/examples/cms-sitecore-xmcloud/src/assets/basic/main.scss b/examples/cms-sitecore-xmcloud/src/assets/basic/main.scss
index 2ce2e49be8..37318b8ce1 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/basic/main.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/basic/main.scss
@@ -1,8 +1,8 @@
-@import 'fonts';
-@import 'container';
-@import 'header';
-@import 'promo';
-@import 'navigation';
-@import 'component';
-@import 'rich-text';
-@import 'footer';
+@import "fonts";
+@import "container";
+@import "header";
+@import "promo";
+@import "navigation";
+@import "component";
+@import "rich-text";
+@import "footer";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/main.scss b/examples/cms-sitecore-xmcloud/src/assets/main.scss
index addfe5ca59..782e492b96 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/main.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/main.scss
@@ -1,5 +1,5 @@
-@import 'basic/fonts';
-@import 'font-awesome/scss/font-awesome';
-@import 'bootstrap/scss/bootstrap';
-@import 'sass/main.scss';
-@import 'basic/main.scss';
+@import "basic/fonts";
+@import "font-awesome/scss/font-awesome";
+@import "bootstrap/scss/bootstrap";
+@import "sass/main.scss";
+@import "basic/main.scss";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/abstracts/_functions.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/abstracts/_functions.scss
index fdef2da81d..a69228693e 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/abstracts/_functions.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/abstracts/_functions.scss
@@ -1,7 +1,7 @@
 @function headings($from: 1, $to: 6) {
   @if $from==$to {
-    @return 'h#{$from}';
+    @return "h#{$from}";
   } @else {
-    @return 'h#{$from},' + headings($from + 1, $to);
+    @return "h#{$from}," + headings($from + 1, $to);
   }
 }
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/abstracts/_mixins.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/abstracts/_mixins.scss
index b6be54ed08..e8bc821504 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/abstracts/_mixins.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/abstracts/_mixins.scss
@@ -1,4 +1,4 @@
-@import 'vars';
+@import "vars";
 
 /* breakpoints */
 
@@ -12,7 +12,7 @@ $break-mobile-large: 992px;
 }
 @mixin clearfix {
   &:after {
-    content: '';
+    content: "";
     display: table;
     clear: both;
   }
@@ -30,13 +30,13 @@ $break-mobile-large: 992px;
 }
 @mixin proxima-font($weight: semibold) {
   @if ($weight==semibold) {
-    font-family: 'ProximaNova-Semibold', arial, helvetica, sans-serif;
+    font-family: "ProximaNova-Semibold", arial, helvetica, sans-serif;
   } @else if($weight==light) {
-    font-family: 'ProximaNova-Light', arial, helvetica, sans-serif;
+    font-family: "ProximaNova-Light", arial, helvetica, sans-serif;
   }
 }
 @mixin opensans-font-stack() {
-  font-family: 'Open Sans', Helvetica, Verdana, Tahoma, sans-serif;
+  font-family: "Open Sans", Helvetica, Verdana, Tahoma, sans-serif;
 }
 @mixin loading-gif() {
   background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSJibGFjayI+DQogIDxwYXRoICBvcGFjaXR5PSIuMjUiIGQ9Ik0xNiAwIEExNiAxNiAwIDAgMCAxNiAzMiBBMTYgMTYgMCAwIDAgMTYgMCBNMTYgNCBBMTIgMTIgMCAwIDEgMTYgMjggQTEyIDEyIDAgMCAxIDE2IDQiLz4NCiAgPHBhdGggZmlsbD0nIzFhODBiNicgZD0iTTE2IDAgQTE2IDE2IDAgMCAxIDMyIDE2IEwyOCAxNiBBMTIgMTIgMCAwIDAgMTYgNHoiPg0KICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBmcm9tPSIwIDE2IDE2IiB0bz0iMzYwIDE2IDE2IiBkdXI9IjAuOHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICA8L3BhdGg+DQo8L3N2Zz4NCg==);
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/abstracts/_vars.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/abstracts/_vars.scss
index c3c1d94e35..8d3e66eec4 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/abstracts/_vars.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/abstracts/_vars.scss
@@ -1,3 +1,3 @@
-@import 'vars/colors';
-@import 'vars/margins';
-@import 'vars/fontSizes';
+@import "vars/colors";
+@import "vars/margins";
+@import "vars/fontSizes";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/base/fonts/_fonts.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/base/fonts/_fonts.scss
index 49d54e9f19..d9a85af3d1 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/base/fonts/_fonts.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/base/fonts/_fonts.scss
@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese");
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/base/fonts/index.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/base/fonts/index.scss
index 2b1a3796bb..dd68bcb81c 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/base/fonts/index.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/base/fonts/index.scss
@@ -1 +1 @@
-@import 'fonts';
+@import "fonts";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/base/index.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/base/index.scss
index 72c7ca6829..aa58842dee 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/base/index.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/base/index.scss
@@ -1,3 +1,3 @@
-@import 'fonts';
-@import 'links';
-@import 'reset/ui-datepicker';
+@import "fonts";
+@import "links";
+@import "reset/ui-datepicker";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/base/links/_link-button.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/base/links/_link-button.scss
index cd6d696c5c..3a9c2c6934 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/base/links/_link-button.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/base/links/_link-button.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars/colors';
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/vars/colors";
+@import "@sass/abstracts/mixins";
 
 .button-default,
 .default {
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/base/links/index.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/base/links/index.scss
index b47c809b05..56627622c1 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/base/links/index.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/base/links/index.scss
@@ -1 +1 @@
-@import 'link-button';
+@import "link-button";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/base/reset/_inputs.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/base/reset/_inputs.scss
index 2b76bcb99e..a86b8ec619 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/base/reset/_inputs.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/base/reset/_inputs.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/mixins';
-@import '@sass/abstracts/vars';
+@import "@sass/abstracts/mixins";
+@import "@sass/abstracts/vars";
 
 label {
   background: transparent;
@@ -22,9 +22,9 @@ button {
 input:focus {
   border: 1px solid $border-gray;
 }
-input[type='submit'],
-input[type='reset'],
-input[type='button'],
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
 button {
   border: 1px solid $border-basic-color;
   padding: 5px 20px;
@@ -37,12 +37,12 @@ button::-moz-focus-inner {
   border: 0;
   padding: 0;
 }
-input[type='text'] {
+input[type="text"] {
   font-size: 13px;
 }
-input[type='text'],
-input[type='email'],
-input[type='password'],
+input[type="text"],
+input[type="email"],
+input[type="password"],
 textarea,
 select {
   box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/base/reset/_links.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/base/reset/_links.scss
index c83f047bbd..92785387da 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/base/reset/_links.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/base/reset/_links.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/mixins';
-@import '@sass/abstracts/vars';
+@import "@sass/abstracts/mixins";
+@import "@sass/abstracts/vars";
 
 a {
   background-color: transparent;
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/base/reset/_ui-datepicker.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/base/reset/_ui-datepicker.scss
index 9305794899..8ba03395aa 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/base/reset/_ui-datepicker.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/base/reset/_ui-datepicker.scss
@@ -1,4 +1,4 @@
-@import '@sass/abstracts/vars';
+@import "@sass/abstracts/vars";
 
 .ui-datepicker-title {
   select {
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/base/richtext/_richtext-files-icons.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/base/richtext/_richtext-files-icons.scss
index 59fe03b50c..6c7586aa4f 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/base/richtext/_richtext-files-icons.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/base/richtext/_richtext-files-icons.scss
@@ -1,6 +1,6 @@
-@import '@fontawesome/scss/mixins';
-@import '@fontawesome/scss/variables';
-@import '@sass/abstracts/mixins';
+@import "@fontawesome/scss/mixins";
+@import "@fontawesome/scss/variables";
+@import "@sass/abstracts/mixins";
 
 //files icons
 .field-filetypeicon > a > span,
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/base/richtext/index.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/base/richtext/index.scss
index 1ba07dc731..f3d8b32b4b 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/base/richtext/index.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/base/richtext/index.scss
@@ -1,2 +1,2 @@
-@import 'richtext';
-@import 'richtext-files-icons';
+@import "richtext";
+@import "richtext-files-icons";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/base/typehead/_typehead.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/base/typehead/_typehead.scss
index 0365acda25..32bc1aaaae 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/base/typehead/_typehead.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/base/typehead/_typehead.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
 
 .twitter-typeahead {
   display: inline-block;
@@ -68,7 +68,7 @@
     min-height: 50px;
     position: relative;
     &:after {
-      content: '';
+      content: "";
       position: absolute;
       top: 50%;
       left: 50%;
@@ -81,7 +81,7 @@
       z-index: 11;
     }
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       top: 0;
       left: 0;
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/base/typehead/index.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/base/typehead/index.scss
index c0b2466dbf..dc8dc6ba07 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/base/typehead/index.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/base/typehead/index.scss
@@ -1 +1 @@
-@import 'typehead';
+@import "typehead";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-column-splitter.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-column-splitter.scss
index 0aea965b66..9e7aaf51c0 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-column-splitter.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-column-splitter.scss
@@ -1,4 +1,4 @@
-@import '@sass/abstracts/vars';
+@import "@sass/abstracts/vars";
 
 .row.column-splitter {
   margin-left: 0;
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-container.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-container.scss
index 86bee01402..9d9f618d85 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-container.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-container.scss
@@ -1,4 +1,4 @@
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/mixins";
 
 .container-wrapper {
   width: 100%;
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-image.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-image.scss
index 92efb3b9ad..08503a5ef8 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-image.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-image.scss
@@ -1,4 +1,4 @@
-@import '@sass/abstracts/vars';
+@import "@sass/abstracts/vars";
 
 .image {
   img {
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-navigation.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-navigation.scss
index 9af44e6e91..e9a6d6b410 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-navigation.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-navigation.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/mixins';
-@import '@sass/abstracts/vars';
+@import "@sass/abstracts/mixins";
+@import "@sass/abstracts/vars";
 
 .navigation {
   background: $nav-bg;
@@ -51,4 +51,4 @@
     padding-left: 10px;
   }
 }
-@import '@sass/components/navigation/';
+@import "@sass/components/navigation/";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-promo.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-promo.scss
index 77064f569b..439d13d79e 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-promo.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-promo.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
 
 .promo {
   background: $promo-bg;
@@ -37,6 +37,6 @@
       margin-bottom: 10px;
     }
   }
-  @import '@sass/variants/promo';
-  @import '@sass/base/richtext/richtext';
+  @import "@sass/variants/promo";
+  @import "@sass/base/richtext/richtext";
 }
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-richtext-content.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-richtext-content.scss
index 6cd5e8c531..d44c71b3fe 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-richtext-content.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/_component-richtext-content.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
 
 .content,
 .rich-text {
@@ -10,11 +10,11 @@
   * {
     max-width: 100%;
   }
-  @import '@sass/base/richtext';
+  @import "@sass/base/richtext";
 }
 .rich-text {
-  @import '@sass/variants/rich-text';
+  @import "@sass/variants/rich-text";
 }
 .content {
-  @import '@sass/variants/page-content';
+  @import "@sass/variants/page-content";
 }
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/common/_boxed.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/common/_boxed.scss
index 2345bcade3..d48ce7ac32 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/common/_boxed.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/common/_boxed.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
 
 .boxed {
   box-sizing: border-box;
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/common/_clearfix.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/common/_clearfix.scss
index 0f85b51c78..bb1b6fe911 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/common/_clearfix.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/common/_clearfix.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
 
 .component-content-clearfix {
   .component-content {
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/common/_link-button.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/common/_link-button.scss
index ec7cec5df6..972c380790 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/common/_link-button.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/common/_link-button.scss
@@ -1,7 +1,7 @@
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/mixins";
 
 .link-button {
-  @import '@sass/base/links/';
+  @import "@sass/base/links/";
 }
 // Promo button
 .promo.link-button {
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/common/index.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/common/index.scss
index d3a66a1416..0f4d800131 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/common/index.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/common/index.scss
@@ -1,6 +1,6 @@
-@import 'alignment';
-@import 'boxed';
-@import 'clearfix';
-@import 'highlighted';
-@import 'link-button';
-@import 'promoted-box';
+@import "alignment";
+@import "boxed";
+@import "clearfix";
+@import "highlighted";
+@import "link-button";
+@import "promoted-box";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/container/_bordered.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/container/_bordered.scss
index 4510a07359..b6c1025621 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/container/_bordered.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/container/_bordered.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
 
 .sxa-bordered {
   box-sizing: border-box;
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/container/_title-row-box.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/container/_title-row-box.scss
index 76b13e2e0b..f57c6276f9 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/container/_title-row-box.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/container/_title-row-box.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
 
 .title-row-box {
   @include border-basic();
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/container/index.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/container/index.scss
index 8b09323a3e..3feb29f6bc 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/container/index.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/container/index.scss
@@ -1 +1 @@
-@import 'bordered';
+@import "bordered";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/image/index.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/image/index.scss
index 5a79b6155e..d32d333adb 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/image/index.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/image/index.scss
@@ -1,2 +1,2 @@
-@import 'image-default-size';
-@import 'image-banner';
+@import "image-default-size";
+@import "image-banner";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/index.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/index.scss
index d93583e8a4..76f359e5b9 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/index.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/index.scss
@@ -1,17 +1,17 @@
-@import 'component-column-splitter';
-@import 'component-container';
-@import 'component-image';
-@import 'component-navigation';
-@import 'component-promo';
-@import '_component-richtext-content';
+@import "component-column-splitter";
+@import "component-container";
+@import "component-image";
+@import "component-navigation";
+@import "component-promo";
+@import "_component-richtext-content";
 
-@import 'common';
-@import 'container';
-@import 'layout';
-@import 'spacing';
-@import 'promo';
-@import 'spacing';
-@import 'title';
-@import 'image';
-@import 'link-list';
-@import 'rich-text';
+@import "common";
+@import "container";
+@import "layout";
+@import "spacing";
+@import "promo";
+@import "spacing";
+@import "title";
+@import "image";
+@import "link-list";
+@import "rich-text";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/layout/_acaindent.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/layout/_acaindent.scss
index b435f32d93..2ea17be8dc 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/layout/_acaindent.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/layout/_acaindent.scss
@@ -1,4 +1,4 @@
-@import '@sass/abstracts/vars';
+@import "@sass/abstracts/vars";
 
 .alan-indent {
   margin: 0 $extralarge-margin;
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/layout/_background.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/layout/_background.scss
index b11ee29829..823f3e2012 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/layout/_background.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/layout/_background.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
 
 %cover-bg {
   background-repeat: no-repeat;
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/layout/index.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/layout/index.scss
index 38924a7477..a7477ec3c9 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/layout/index.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/layout/index.scss
@@ -1 +1 @@
-@import 'background';
+@import "background";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/link-list/_component-link-list.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/link-list/_component-link-list.scss
index 9441f03c26..c40629be01 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/link-list/_component-link-list.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/link-list/_component-link-list.scss
@@ -1,7 +1,7 @@
-@import '@sass/abstracts/mixins';
-@import '@sass/abstracts/vars';
-@import '@fontawesome/scss/mixins';
-@import '@fontawesome/scss/variables';
+@import "@sass/abstracts/mixins";
+@import "@sass/abstracts/vars";
+@import "@fontawesome/scss/mixins";
+@import "@fontawesome/scss/variables";
 
 .link-list {
   background: $link-list-bg;
@@ -45,6 +45,6 @@
       }
     }
   }
-  @import '../../base/links';
-  @import '../../variants/link-list';
+  @import "../../base/links";
+  @import "../../variants/link-list";
 }
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/link-list/_list-vertical.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/link-list/_list-vertical.scss
index 50f71e6ff9..700cdf7ba2 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/link-list/_list-vertical.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/link-list/_list-vertical.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
 
 .link-list.list-vertical {
   h3 {
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/link-list/index.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/link-list/index.scss
index cf000d7cda..85cbda239a 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/link-list/index.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/link-list/index.scss
@@ -1,2 +1,2 @@
-@import 'component-link-list';
-@import 'list-vertical';
+@import "component-link-list";
+@import "list-vertical";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_navigation-fat.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_navigation-fat.scss
index 06453f04f3..3d93d489db 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_navigation-fat.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_navigation-fat.scss
@@ -1,7 +1,7 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
-@import '@fontawesome/scss/mixins';
-@import '@fontawesome/scss/variables';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
+@import "@fontawesome/scss/mixins";
+@import "@fontawesome/scss/variables";
 
 .navigation.navigation-fat {
   background: $bg-basic-color;
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_navigation-main-horizontal-vertical.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_navigation-main-horizontal-vertical.scss
index 973ea5007f..961d43ced1 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_navigation-main-horizontal-vertical.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_navigation-main-horizontal-vertical.scss
@@ -1,7 +1,7 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
-@import '@fontawesome/scss/mixins';
-@import '@fontawesome/scss/variables';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
+@import "@fontawesome/scss/mixins";
+@import "@fontawesome/scss/variables";
 
 $borderSize: 2px;
 
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_navigation-mobile.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_navigation-mobile.scss
index 33b534c557..2891bbe055 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_navigation-mobile.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_navigation-mobile.scss
@@ -1,7 +1,7 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
-@import '@fontawesome/scss/mixins';
-@import '@fontawesome/scss/variables';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
+@import "@fontawesome/scss/mixins";
+@import "@fontawesome/scss/variables";
 
 .navigation.navigation-mobile {
   nav > ul {
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_navigation-sidebar.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_navigation-sidebar.scss
index 0371680494..e0f32d6e8f 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_navigation-sidebar.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_navigation-sidebar.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
 
 .navigation.navigation-sidebar {
   a {
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_sitemap-navigation.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_sitemap-navigation.scss
index 95725b9164..e657e0280b 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_sitemap-navigation.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/_sitemap-navigation.scss
@@ -1,7 +1,7 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
-@import '@fontawesome/scss/mixins';
-@import '@fontawesome/scss/variables';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
+@import "@fontawesome/scss/mixins";
+@import "@fontawesome/scss/variables";
 
 .navigation.sitemap-navigation {
   .level2 a {
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/index.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/index.scss
index 6850050e43..abd702aa65 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/index.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/navigation/index.scss
@@ -1,5 +1,5 @@
-@import 'navigation-main-horizontal-vertical';
-@import 'navigation-mobile';
-@import 'navigation-sidebar';
-@import 'sitemap-navigation';
-@import 'navigation-fat';
+@import "navigation-main-horizontal-vertical";
+@import "navigation-mobile";
+@import "navigation-sidebar";
+@import "sitemap-navigation";
+@import "navigation-fat";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/promo/_promo-hero.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/promo/_promo-hero.scss
index 9845d64701..272f1e2096 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/promo/_promo-hero.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/promo/_promo-hero.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
 
 .promo.promo-hero {
   position: relative;
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/promo/_promo-shadow.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/promo/_promo-shadow.scss
index be34b9fc1a..a78e41afbf 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/promo/_promo-shadow.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/promo/_promo-shadow.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
 
 .promo-shadow {
   max-width: 960px;
@@ -28,7 +28,7 @@
       max-height: 100px;
       max-width: 460px;
       width: 47%;
-      content: '';
+      content: "";
       bottom: 10px;
     }
     &:before {
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/promo/index.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/promo/index.scss
index 1c71782f60..337235b99a 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/promo/index.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/promo/index.scss
@@ -1,3 +1,3 @@
-@import 'absolute-bottom-link';
-@import 'promo-hero';
-@import 'promo-shadow';
+@import "absolute-bottom-link";
+@import "promo-hero";
+@import "promo-shadow";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/rich-text/_rich-text-lists.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/rich-text/_rich-text-lists.scss
index 9d7b3bc88b..282a3e6cb8 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/rich-text/_rich-text-lists.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/rich-text/_rich-text-lists.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
 
 .rich-text-lists,
 .field-featurelist {
@@ -18,13 +18,13 @@
         display: inline-block;
         vertical-align: middle;
         @include font-size(1.2);
-        font-family: 'FontAwesome', sans-serif;
+        font-family: "FontAwesome", sans-serif;
         position: absolute;
         top: 3px;
         left: 0;
         color: $text-basic;
         text-align: center;
-        content: '\f00c';
+        content: "\f00c";
         width: 20px;
         margin: 0 5px 0 0;
         padding: 0;
@@ -39,13 +39,13 @@
         display: inline-block;
         vertical-align: middle;
         @include font-size(1.2);
-        font-family: 'FontAwesome', sans-serif;
+        font-family: "FontAwesome", sans-serif;
         position: absolute;
         top: 3px;
         left: 0;
         color: $text-basic;
         text-align: center;
-        content: '\f046';
+        content: "\f046";
         width: 20px;
         margin: 0 5px 0 0;
         padding: 0;
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/rich-text/index.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/rich-text/index.scss
index 6e89c6a0e1..767bfc1cd6 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/rich-text/index.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/rich-text/index.scss
@@ -1 +1 @@
-@import 'rich-text-lists';
+@import "rich-text-lists";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/spacing/_background-colors.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/spacing/_background-colors.scss
index 30afeef82e..db4c608772 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/spacing/_background-colors.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/spacing/_background-colors.scss
@@ -1,4 +1,4 @@
-@import '@sass/abstracts/vars';
+@import "@sass/abstracts/vars";
 
 .container-gray-background {
   background: $bg-light-gray;
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/spacing/_indent.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/spacing/_indent.scss
index 9d2f599e66..f088535596 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/spacing/_indent.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/spacing/_indent.scss
@@ -1,4 +1,4 @@
-@import '@sass/abstracts/vars';
+@import "@sass/abstracts/vars";
 .indent {
   margin: 0 $extralarge-margin;
 }
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/spacing/index.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/spacing/index.scss
index 6d31d378d6..c8292402bb 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/spacing/index.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/spacing/index.scss
@@ -1,2 +1,2 @@
-@import 'background-colors';
-@import 'indent';
+@import "background-colors";
+@import "indent";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/title/_component-title.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/title/_component-title.scss
index 4fe0e836f3..e5b514bcbb 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/title/_component-title.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/title/_component-title.scss
@@ -1,5 +1,5 @@
-@import '@sass/abstracts/vars';
-@import '@sass/abstracts/mixins';
+@import "@sass/abstracts/vars";
+@import "@sass/abstracts/mixins";
 
 .title {
   background: $title-bg;
@@ -21,5 +21,5 @@
       }
     }
   }
-  @import '@sass/variants/title';
+  @import "@sass/variants/title";
 }
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/components/title/index.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/components/title/index.scss
index f91198792d..6045d0642d 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/components/title/index.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/components/title/index.scss
@@ -1 +1 @@
-@import 'component-title';
+@import "component-title";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/main.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/main.scss
index 87f2515961..ee7d1dfc81 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/main.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/main.scss
@@ -1,4 +1,4 @@
-@import 'base';
-@import 'components';
-@import 'variants';
-@import 'app';
+@import "base";
+@import "components";
+@import "variants";
+@import "app";
diff --git a/examples/cms-sitecore-xmcloud/src/assets/sass/variants/index.scss b/examples/cms-sitecore-xmcloud/src/assets/sass/variants/index.scss
index 5064fee7c2..4bb4ce7aab 100644
--- a/examples/cms-sitecore-xmcloud/src/assets/sass/variants/index.scss
+++ b/examples/cms-sitecore-xmcloud/src/assets/sass/variants/index.scss
@@ -1,6 +1,6 @@
-@import 'link-list';
-@import 'navigation';
-@import 'page-content';
-@import 'promo';
-@import 'rich-text';
-@import 'title';
+@import "link-list";
+@import "navigation";
+@import "page-content";
+@import "promo";
+@import "rich-text";
+@import "title";
diff --git a/examples/cms-sitecore-xmcloud/src/components/ColumnSplitter.tsx b/examples/cms-sitecore-xmcloud/src/components/ColumnSplitter.tsx
index 995778c92f..755b35bc74 100644
--- a/examples/cms-sitecore-xmcloud/src/components/ColumnSplitter.tsx
+++ b/examples/cms-sitecore-xmcloud/src/components/ColumnSplitter.tsx
@@ -1,19 +1,19 @@
-import React from 'react'
+import React from "react";
 import {
   ComponentParams,
   ComponentRendering,
   Placeholder,
-} from '@sitecore-jss/sitecore-jss-nextjs'
+} from "@sitecore-jss/sitecore-jss-nextjs";
 
 interface ComponentProps {
-  rendering: ComponentRendering & { params: ComponentParams }
-  params: ComponentParams
+  rendering: ComponentRendering & { params: ComponentParams };
+  params: ComponentParams;
 }
 
 export const Default = (props: ComponentProps): JSX.Element => {
-  const styles = `${props.params.GridParameters ?? ''} ${
-    props.params.Styles ?? ''
-  }`.trimEnd()
+  const styles = `${props.params.GridParameters ?? ""} ${
+    props.params.Styles ?? ""
+  }`.trimEnd();
   const columnWidths = [
     props.params.ColumnWidth1,
     props.params.ColumnWidth2,
@@ -23,7 +23,7 @@ export const Default = (props: ComponentProps): JSX.Element => {
     props.params.ColumnWidth6,
     props.params.ColumnWidth7,
     props.params.ColumnWidth8,
-  ]
+  ];
   const columnStyles = [
     props.params.Styles1,
     props.params.Styles2,
@@ -33,9 +33,9 @@ export const Default = (props: ComponentProps): JSX.Element => {
     props.params.Styles6,
     props.params.Styles7,
     props.params.Styles8,
-  ]
-  const enabledPlaceholders = props.params.EnabledPlaceholders.split(',')
-  const id = props.params.RenderingIdentifier
+  ];
+  const enabledPlaceholders = props.params.EnabledPlaceholders.split(",");
+  const id = props.params.RenderingIdentifier;
 
   return (
     <div
@@ -43,10 +43,10 @@ export const Default = (props: ComponentProps): JSX.Element => {
       id={id ? id : undefined}
     >
       {enabledPlaceholders.map((ph, index) => {
-        const phKey = `column-${ph}-{*}`
+        const phKey = `column-${ph}-{*}`;
         const phStyles = `${columnWidths[+ph - 1]} ${
-          columnStyles[+ph - 1] ?? ''
-        }`.trimEnd()
+          columnStyles[+ph - 1] ?? ""
+        }`.trimEnd();
 
         return (
           <div key={index} className={phStyles}>
@@ -58,8 +58,8 @@ export const Default = (props: ComponentProps): JSX.Element => {
               />
             </div>
           </div>
-        )
+        );
       })}
     </div>
-  )
-}
+  );
+};
diff --git a/examples/cms-sitecore-xmcloud/src/components/Container.tsx b/examples/cms-sitecore-xmcloud/src/components/Container.tsx
index b880da06a9..b7ba2b2ad4 100644
--- a/examples/cms-sitecore-xmcloud/src/components/Container.tsx
+++ b/examples/cms-sitecore-xmcloud/src/components/Container.tsx
@@ -1,41 +1,41 @@
-import React from 'react'
+import React from "react";
 import {
   ComponentParams,
   ComponentRendering,
   Placeholder,
   useSitecoreContext,
-} from '@sitecore-jss/sitecore-jss-nextjs'
+} from "@sitecore-jss/sitecore-jss-nextjs";
 
 const BACKGROUND_REG_EXP = new RegExp(
-  /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi
-)
+  /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi,
+);
 
 interface ComponentProps {
-  rendering: ComponentRendering & { params: ComponentParams }
-  params: ComponentParams
+  rendering: ComponentRendering & { params: ComponentParams };
+  params: ComponentParams;
 }
 
 const DefaultContainer = (props: ComponentProps): JSX.Element => {
-  const { sitecoreContext } = useSitecoreContext()
+  const { sitecoreContext } = useSitecoreContext();
   const containerStyles =
-    props.params && props.params.Styles ? props.params.Styles : ''
-  const styles = `${props.params.GridParameters} ${containerStyles}`.trimEnd()
-  const phKey = `container-${props.params.DynamicPlaceholderId}`
-  const id = props.params.RenderingIdentifier
-  let backgroundImage = props.params.BackgroundImage as string
-  let backgroundStyle: { [key: string]: string } = {}
+    props.params && props.params.Styles ? props.params.Styles : "";
+  const styles = `${props.params.GridParameters} ${containerStyles}`.trimEnd();
+  const phKey = `container-${props.params.DynamicPlaceholderId}`;
+  const id = props.params.RenderingIdentifier;
+  let backgroundImage = props.params.BackgroundImage as string;
+  let backgroundStyle: { [key: string]: string } = {};
 
   if (backgroundImage) {
     const prefix = `${
-      sitecoreContext.pageState !== 'normal' ? '/sitecore/shell' : ''
-    }/-/media/`
+      sitecoreContext.pageState !== "normal" ? "/sitecore/shell" : ""
+    }/-/media/`;
     backgroundImage = `${backgroundImage
       ?.match(BACKGROUND_REG_EXP)
       ?.pop()
-      ?.replace(/-/gi, '')}`
+      ?.replace(/-/gi, "")}`;
     backgroundStyle = {
       backgroundImage: `url('${prefix}${backgroundImage}')`,
-    }
+    };
   }
 
   return (
@@ -49,19 +49,19 @@ const DefaultContainer = (props: ComponentProps): JSX.Element => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export const Default = (props: ComponentProps): JSX.Element => {
-  const splitStyles = props.params?.Styles?.split(' ')
+  const splitStyles = props.params?.Styles?.split(" ");
 
-  if (splitStyles && splitStyles.includes('container')) {
+  if (splitStyles && splitStyles.includes("container")) {
     return (
       <div className="container-wrapper">
         <DefaultContainer {...props} />
       </div>
-    )
+    );
   }
 
-  return <DefaultContainer {...props} />
-}
+  return <DefaultContainer {...props} />;
+};
diff --git a/examples/cms-sitecore-xmcloud/src/components/ContentBlock.tsx b/examples/cms-sitecore-xmcloud/src/components/ContentBlock.tsx
index 33540cb07e..6eba63d886 100644
--- a/examples/cms-sitecore-xmcloud/src/components/ContentBlock.tsx
+++ b/examples/cms-sitecore-xmcloud/src/components/ContentBlock.tsx
@@ -3,15 +3,15 @@ import {
   RichText,
   Field,
   withDatasourceCheck,
-} from '@sitecore-jss/sitecore-jss-nextjs'
-import { ComponentProps } from 'lib/component-props'
+} from "@sitecore-jss/sitecore-jss-nextjs";
+import { ComponentProps } from "lib/component-props";
 
 type ContentBlockProps = ComponentProps & {
   fields: {
-    heading: Field<string>
-    content: Field<string>
-  }
-}
+    heading: Field<string>;
+    content: Field<string>;
+  };
+};
 
 /**
  * A simple Content Block component, with a heading and rich text block.
@@ -24,6 +24,6 @@ const ContentBlock = ({ fields }: ContentBlockProps): JSX.Element => (
 
     <RichText className="contentDescription" field={fields.content} />
   </div>
-)
+);
 
-export default withDatasourceCheck()<ContentBlockProps>(ContentBlock)
+export default withDatasourceCheck()<ContentBlockProps>(ContentBlock);
diff --git a/examples/cms-sitecore-xmcloud/src/components/FEaaSWrapper.tsx b/examples/cms-sitecore-xmcloud/src/components/FEaaSWrapper.tsx
index 00bc5756f1..46001bfc0a 100644
--- a/examples/cms-sitecore-xmcloud/src/components/FEaaSWrapper.tsx
+++ b/examples/cms-sitecore-xmcloud/src/components/FEaaSWrapper.tsx
@@ -1,12 +1,12 @@
 import {
   FEaaSComponent,
   FEaaSComponentProps,
-} from '@sitecore-jss/sitecore-jss-nextjs'
-import React from 'react'
+} from "@sitecore-jss/sitecore-jss-nextjs";
+import React from "react";
 
 export const Default = (props: FEaaSComponentProps): JSX.Element => {
-  const styles = `component feaas ${props.params?.styles}`.trimEnd()
-  const id = props.params?.RenderingIdentifier
+  const styles = `component feaas ${props.params?.styles}`.trimEnd();
+  const id = props.params?.RenderingIdentifier;
 
   return (
     <div className={styles} id={id ? id : undefined}>
@@ -14,5 +14,5 @@ export const Default = (props: FEaaSComponentProps): JSX.Element => {
         <FEaaSComponent {...props} />
       </div>
     </div>
-  )
-}
+  );
+};
diff --git a/examples/cms-sitecore-xmcloud/src/components/Image.tsx b/examples/cms-sitecore-xmcloud/src/components/Image.tsx
index 07032ebd37..c53ea4fd33 100644
--- a/examples/cms-sitecore-xmcloud/src/components/Image.tsx
+++ b/examples/cms-sitecore-xmcloud/src/components/Image.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 import {
   Image as JssImage,
   Link as JssLink,
@@ -7,18 +7,18 @@ import {
   LinkField,
   Text,
   useSitecoreContext,
-} from '@sitecore-jss/sitecore-jss-nextjs'
+} from "@sitecore-jss/sitecore-jss-nextjs";
 
 interface Fields {
-  Image: ImageField
-  ImageCaption: Field<string>
-  TargetUrl: LinkField
+  Image: ImageField;
+  ImageCaption: Field<string>;
+  TargetUrl: LinkField;
 }
 
 type ImageProps = {
-  params: { [key: string]: string }
-  fields: Fields
-}
+  params: { [key: string]: string };
+  fields: Fields;
+};
 
 const ImageDefault = (props: ImageProps): JSX.Element => (
   <div className={`component image ${props.params.styles}`.trimEnd()}>
@@ -26,23 +26,23 @@ const ImageDefault = (props: ImageProps): JSX.Element => (
       <span className="is-empty-hint">Image</span>
     </div>
   </div>
-)
+);
 
 export const Banner = (props: ImageProps): JSX.Element => {
-  const { sitecoreContext } = useSitecoreContext()
+  const { sitecoreContext } = useSitecoreContext();
   const backgroundStyle = {
     backgroundImage: `url('${props?.fields?.Image?.value?.src}')`,
-  }
+  };
   const modifyImageProps = {
     ...props.fields.Image,
     editable: props?.fields?.Image?.editable
       ?.replace(`width="${props?.fields?.Image?.value?.width}"`, 'width="100%"')
       .replace(
         `height="${props?.fields?.Image?.value?.height}"`,
-        'height="100%"'
+        'height="100%"',
       ),
-  }
-  const id = props.params.RenderingIdentifier
+  };
+  const id = props.params.RenderingIdentifier;
 
   return (
     <div
@@ -56,19 +56,19 @@ export const Banner = (props: ImageProps): JSX.Element => {
         {sitecoreContext.pageEditing ? (
           <JssImage field={modifyImageProps} />
         ) : (
-          ''
+          ""
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
 export const Default = (props: ImageProps): JSX.Element => {
-  const { sitecoreContext } = useSitecoreContext()
+  const { sitecoreContext } = useSitecoreContext();
 
   if (props.fields) {
-    const Image = () => <JssImage field={props.fields.Image} />
-    const id = props.params.RenderingIdentifier
+    const Image = () => <JssImage field={props.fields.Image} />;
+    const id = props.params.RenderingIdentifier;
 
     return (
       <div
@@ -76,7 +76,7 @@ export const Default = (props: ImageProps): JSX.Element => {
         id={id ? id : undefined}
       >
         <div className="component-content">
-          {sitecoreContext.pageState === 'edit' ? (
+          {sitecoreContext.pageState === "edit" ? (
             <Image />
           ) : (
             <JssLink field={props.fields.TargetUrl}>
@@ -90,8 +90,8 @@ export const Default = (props: ImageProps): JSX.Element => {
           />
         </div>
       </div>
-    )
+    );
   }
 
-  return <ImageDefault {...props} />
-}
+  return <ImageDefault {...props} />;
+};
diff --git a/examples/cms-sitecore-xmcloud/src/components/LinkList.tsx b/examples/cms-sitecore-xmcloud/src/components/LinkList.tsx
index 7133ade7d0..457a893581 100644
--- a/examples/cms-sitecore-xmcloud/src/components/LinkList.tsx
+++ b/examples/cms-sitecore-xmcloud/src/components/LinkList.tsx
@@ -1,50 +1,50 @@
-import React from 'react'
+import React from "react";
 import {
   Link as JssLink,
   Text,
   LinkField,
   TextField,
-} from '@sitecore-jss/sitecore-jss-nextjs'
+} from "@sitecore-jss/sitecore-jss-nextjs";
 
 type ResultsFieldLink = {
   field: {
-    link: LinkField
-  }
-}
+    link: LinkField;
+  };
+};
 
 interface Fields {
   data: {
     datasource: {
       children: {
-        results: ResultsFieldLink[]
-      }
+        results: ResultsFieldLink[];
+      };
       field: {
-        title: TextField
-      }
-    }
-  }
+        title: TextField;
+      };
+    };
+  };
 }
 
 type LinkListProps = {
-  params: { [key: string]: string }
-  fields: Fields
-}
+  params: { [key: string]: string };
+  fields: Fields;
+};
 
 type LinkListItemProps = {
-  key: string
-  index: number
-  total: number
-  field: LinkField
-}
+  key: string;
+  index: number;
+  total: number;
+  field: LinkField;
+};
 
 const LinkListItem = (props: LinkListItemProps) => {
-  let className = `item${props.index}`
-  className += (props.index + 1) % 2 === 0 ? ' even' : ' odd'
+  let className = `item${props.index}`;
+  className += (props.index + 1) % 2 === 0 ? " even" : " odd";
   if (props.index === 0) {
-    className += ' first'
+    className += " first";
   }
   if (props.index + 1 === props.total) {
-    className += ' last'
+    className += " last";
   }
   return (
     <li className={className}>
@@ -52,13 +52,13 @@ const LinkListItem = (props: LinkListItemProps) => {
         <JssLink field={props.field} />
       </div>
     </li>
-  )
-}
+  );
+};
 
 export const Default = (props: LinkListProps): JSX.Element => {
-  const datasource = props.fields?.data?.datasource
-  const styles = `component link-list ${props.params.styles}`.trimEnd()
-  const id = props.params.RenderingIdentifier
+  const datasource = props.fields?.data?.datasource;
+  const styles = `component link-list ${props.params.styles}`.trimEnd();
+  const id = props.params.RenderingIdentifier;
 
   if (datasource) {
     const list = datasource.children.results
@@ -70,7 +70,7 @@ export const Default = (props: LinkListProps): JSX.Element => {
           total={datasource.children.results.length}
           field={element.field.link}
         />
-      ))
+      ));
 
     return (
       <div className={styles} id={id ? id : undefined}>
@@ -79,7 +79,7 @@ export const Default = (props: LinkListProps): JSX.Element => {
           <ul>{list}</ul>
         </div>
       </div>
-    )
+    );
   }
 
   return (
@@ -88,5 +88,5 @@ export const Default = (props: LinkListProps): JSX.Element => {
         <h3>Link List</h3>
       </div>
     </div>
-  )
-}
+  );
+};
diff --git a/examples/cms-sitecore-xmcloud/src/components/Navigation.tsx b/examples/cms-sitecore-xmcloud/src/components/Navigation.tsx
index 5733d28d83..c2c9274fa4 100644
--- a/examples/cms-sitecore-xmcloud/src/components/Navigation.tsx
+++ b/examples/cms-sitecore-xmcloud/src/components/Navigation.tsx
@@ -1,58 +1,58 @@
-import React, { useState } from 'react'
+import React, { useState } from "react";
 import {
   Link,
   LinkField,
   Text,
   TextField,
   useSitecoreContext,
-} from '@sitecore-jss/sitecore-jss-nextjs'
+} from "@sitecore-jss/sitecore-jss-nextjs";
 
 interface Fields {
-  Id: string
-  DisplayName: string
-  Title: TextField
-  NavigationTitle: TextField
-  Href: string
-  Querystring: string
-  Children: Array<Fields>
-  Styles: string[]
+  Id: string;
+  DisplayName: string;
+  Title: TextField;
+  NavigationTitle: TextField;
+  Href: string;
+  Querystring: string;
+  Children: Array<Fields>;
+  Styles: string[];
 }
 
 type NavigationProps = {
-  params?: { [key: string]: string }
-  fields: Fields
-  handleClick: (event?: React.MouseEvent<HTMLElement>) => void
-  relativeLevel: number
-}
+  params?: { [key: string]: string };
+  fields: Fields;
+  handleClick: (event?: React.MouseEvent<HTMLElement>) => void;
+  relativeLevel: number;
+};
 
 const getNavigationText = function (
-  props: NavigationProps
+  props: NavigationProps,
 ): JSX.Element | string {
-  let text
+  let text;
 
   if (props.fields.NavigationTitle) {
-    text = <Text field={props.fields.NavigationTitle} />
+    text = <Text field={props.fields.NavigationTitle} />;
   } else if (props.fields.Title) {
-    text = <Text field={props.fields.Title} />
+    text = <Text field={props.fields.Title} />;
   } else {
-    text = props.fields.DisplayName
+    text = props.fields.DisplayName;
   }
 
-  return text
-}
+  return text;
+};
 
 const getLinkTitle = (props: NavigationProps): string | undefined => {
-  let title
+  let title;
   if (props.fields.NavigationTitle?.value) {
-    title = props.fields.NavigationTitle.value.toString()
+    title = props.fields.NavigationTitle.value.toString();
   } else if (props.fields.Title?.value) {
-    title = props.fields.Title.value.toString()
+    title = props.fields.Title.value.toString();
   } else {
-    title = props.fields.DisplayName
+    title = props.fields.DisplayName;
   }
 
-  return title
-}
+  return title;
+};
 
 const getLinkField = (props: NavigationProps): LinkField => ({
   value: {
@@ -60,12 +60,12 @@ const getLinkField = (props: NavigationProps): LinkField => ({
     title: getLinkTitle(props),
     querystring: props.fields.Querystring,
   },
-})
+});
 
 const NavigationList = (props: NavigationProps) => {
-  const { sitecoreContext } = useSitecoreContext()
+  const { sitecoreContext } = useSitecoreContext();
 
-  let children: JSX.Element[] = []
+  let children: JSX.Element[] = [];
   if (props.fields.Children && props.fields.Children.length) {
     children = props.fields.Children.map((element: Fields, index: number) => (
       <NavigationList
@@ -74,14 +74,14 @@ const NavigationList = (props: NavigationProps) => {
         handleClick={props.handleClick}
         relativeLevel={props.relativeLevel + 1}
       />
-    ))
+    ));
   }
 
   return (
     <li
       className={props.fields.Styles.concat(
-        'rel-level' + props.relativeLevel
-      ).join(' ')}
+        "rel-level" + props.relativeLevel,
+      ).join(" ")}
       key={props.fields.Id}
       tabIndex={0}
     >
@@ -96,19 +96,19 @@ const NavigationList = (props: NavigationProps) => {
       </div>
       {children.length > 0 ? <ul className="clearfix">{children}</ul> : null}
     </li>
-  )
-}
+  );
+};
 
 export const Default = (props: NavigationProps): JSX.Element => {
-  const [isOpenMenu, openMenu] = useState(false)
-  const { sitecoreContext } = useSitecoreContext()
+  const [isOpenMenu, openMenu] = useState(false);
+  const { sitecoreContext } = useSitecoreContext();
   const styles =
     props.params != null
-      ? `${props.params.GridParameters ?? ''} ${
-          props.params.Styles ?? ''
+      ? `${props.params.GridParameters ?? ""} ${
+          props.params.Styles ?? ""
         }`.trimEnd()
-      : ''
-  const id = props.params != null ? props.params.RenderingIdentifier : null
+      : "";
+  const id = props.params != null ? props.params.RenderingIdentifier : null;
 
   if (!Object.values(props.fields).length) {
     return (
@@ -118,23 +118,23 @@ export const Default = (props: NavigationProps): JSX.Element => {
       >
         <div className="component-content">[Navigation]</div>
       </div>
-    )
+    );
   }
 
   const handleToggleMenu = (
     event?: React.MouseEvent<HTMLElement>,
-    flag?: boolean
+    flag?: boolean,
   ): void => {
     if (event && sitecoreContext?.pageEditing) {
-      event.preventDefault()
+      event.preventDefault();
     }
 
     if (flag !== undefined) {
-      return openMenu(flag)
+      return openMenu(flag);
     }
 
-    openMenu(!isOpenMenu)
-  }
+    openMenu(!isOpenMenu);
+  };
 
   const list = Object.values(props.fields)
     .filter((element) => element)
@@ -147,7 +147,7 @@ export const Default = (props: NavigationProps): JSX.Element => {
         }
         relativeLevel={1}
       />
-    ))
+    ));
 
   return (
     <div className={`component navigation ${styles}`} id={id ? id : undefined}>
@@ -166,5 +166,5 @@ export const Default = (props: NavigationProps): JSX.Element => {
         </div>
       </label>
     </div>
-  )
-}
+  );
+};
diff --git a/examples/cms-sitecore-xmcloud/src/components/PageContent.tsx b/examples/cms-sitecore-xmcloud/src/components/PageContent.tsx
index 2fb8585932..0d180c48ab 100644
--- a/examples/cms-sitecore-xmcloud/src/components/PageContent.tsx
+++ b/examples/cms-sitecore-xmcloud/src/components/PageContent.tsx
@@ -1,27 +1,27 @@
-import React from 'react'
+import React from "react";
 import {
   RichText as JssRichText,
   useSitecoreContext,
   RichTextField,
-} from '@sitecore-jss/sitecore-jss-nextjs'
+} from "@sitecore-jss/sitecore-jss-nextjs";
 
 interface Fields {
-  Content: RichTextField
+  Content: RichTextField;
 }
 
 type PageContentProps = {
-  params: { [key: string]: string }
-  fields: Fields
-}
+  params: { [key: string]: string };
+  fields: Fields;
+};
 
 type ComponentContentProps = {
-  id: string
-  styles: string
-  children: JSX.Element
-}
+  id: string;
+  styles: string;
+  children: JSX.Element;
+};
 
 const ComponentContent = (props: ComponentContentProps) => {
-  const id = props.id
+  const id = props.id;
   return (
     <div
       className={`component content ${props.styles}`}
@@ -31,12 +31,12 @@ const ComponentContent = (props: ComponentContentProps) => {
         <div className="field-content">{props.children}</div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export const Default = (props: PageContentProps): JSX.Element => {
-  const { sitecoreContext } = useSitecoreContext()
-  const id = props.params.RenderingIdentifier
+  const { sitecoreContext } = useSitecoreContext();
+  const id = props.params.RenderingIdentifier;
 
   if (
     !(props.fields && props.fields.Content) &&
@@ -51,18 +51,18 @@ export const Default = (props: PageContentProps): JSX.Element => {
           <div className="field-content">[Content]</div>
         </div>
       </div>
-    )
+    );
   }
 
   const field = (
     props.fields && props.fields.Content
       ? props.fields.Content
       : sitecoreContext?.route?.fields?.Content
-  ) as RichTextField
+  ) as RichTextField;
 
   return (
     <ComponentContent styles={props.params.styles} id={id}>
       <JssRichText field={field} />
     </ComponentContent>
-  )
-}
+  );
+};
diff --git a/examples/cms-sitecore-xmcloud/src/components/PartialDesignDynamicPlaceholder.tsx b/examples/cms-sitecore-xmcloud/src/components/PartialDesignDynamicPlaceholder.tsx
index 0aa32f8a58..4548be0d99 100644
--- a/examples/cms-sitecore-xmcloud/src/components/PartialDesignDynamicPlaceholder.tsx
+++ b/examples/cms-sitecore-xmcloud/src/components/PartialDesignDynamicPlaceholder.tsx
@@ -1,20 +1,20 @@
-import React from 'react'
+import React from "react";
 import {
   Placeholder,
   ComponentRendering,
-} from '@sitecore-jss/sitecore-jss-nextjs'
+} from "@sitecore-jss/sitecore-jss-nextjs";
 
 type DynamicPlaceholderProps = {
-  rendering: ComponentRendering
-}
+  rendering: ComponentRendering;
+};
 
 const PartialDesignDynamicPlaceholder = (
-  props: DynamicPlaceholderProps
+  props: DynamicPlaceholderProps,
 ): JSX.Element => (
   <Placeholder
-    name={props.rendering?.params?.sig || ''}
+    name={props.rendering?.params?.sig || ""}
     rendering={props.rendering}
   />
-)
+);
 
-export default PartialDesignDynamicPlaceholder
+export default PartialDesignDynamicPlaceholder;
diff --git a/examples/cms-sitecore-xmcloud/src/components/Promo.tsx b/examples/cms-sitecore-xmcloud/src/components/Promo.tsx
index 52c94a93f4..e421bc0d02 100644
--- a/examples/cms-sitecore-xmcloud/src/components/Promo.tsx
+++ b/examples/cms-sitecore-xmcloud/src/components/Promo.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 import {
   Image as JssImage,
   Link as JssLink,
@@ -7,19 +7,19 @@ import {
   Field,
   LinkField,
   Text,
-} from '@sitecore-jss/sitecore-jss-nextjs'
+} from "@sitecore-jss/sitecore-jss-nextjs";
 
 interface Fields {
-  PromoIcon: ImageField
-  PromoText: Field<string>
-  PromoLink: LinkField
-  PromoText2: Field<string>
+  PromoIcon: ImageField;
+  PromoText: Field<string>;
+  PromoLink: LinkField;
+  PromoText2: Field<string>;
 }
 
 type PromoProps = {
-  params: { [key: string]: string }
-  fields: Fields
-}
+  params: { [key: string]: string };
+  fields: Fields;
+};
 
 const PromoDefaultComponent = (props: PromoProps): JSX.Element => (
   <div className={`component promo ${props.params.styles}`}>
@@ -27,10 +27,10 @@ const PromoDefaultComponent = (props: PromoProps): JSX.Element => (
       <span className="is-empty-hint">Promo</span>
     </div>
   </div>
-)
+);
 
 export const Default = (props: PromoProps): JSX.Element => {
-  const id = props.params.RenderingIdentifier
+  const id = props.params.RenderingIdentifier;
   if (props.fields) {
     return (
       <div
@@ -53,14 +53,14 @@ export const Default = (props: PromoProps): JSX.Element => {
           </div>
         </div>
       </div>
-    )
+    );
   }
 
-  return <PromoDefaultComponent {...props} />
-}
+  return <PromoDefaultComponent {...props} />;
+};
 
 export const WithText = (props: PromoProps): JSX.Element => {
-  const id = props.params.RenderingIdentifier
+  const id = props.params.RenderingIdentifier;
   if (props.fields) {
     return (
       <div
@@ -83,8 +83,8 @@ export const WithText = (props: PromoProps): JSX.Element => {
           </div>
         </div>
       </div>
-    )
+    );
   }
 
-  return <PromoDefaultComponent {...props} />
-}
+  return <PromoDefaultComponent {...props} />;
+};
diff --git a/examples/cms-sitecore-xmcloud/src/components/RichText.tsx b/examples/cms-sitecore-xmcloud/src/components/RichText.tsx
index 526331332e..8829c24c59 100644
--- a/examples/cms-sitecore-xmcloud/src/components/RichText.tsx
+++ b/examples/cms-sitecore-xmcloud/src/components/RichText.tsx
@@ -1,25 +1,25 @@
-import React from 'react'
+import React from "react";
 import {
   Field,
   RichText as JssRichText,
-} from '@sitecore-jss/sitecore-jss-nextjs'
+} from "@sitecore-jss/sitecore-jss-nextjs";
 
 interface Fields {
-  Text: Field<string>
+  Text: Field<string>;
 }
 
 export type RichTextProps = {
-  params: { [key: string]: string }
-  fields: Fields
-}
+  params: { [key: string]: string };
+  fields: Fields;
+};
 
 export const Default = (props: RichTextProps): JSX.Element => {
   const text = props.fields ? (
     <JssRichText field={props.fields.Text} />
   ) : (
     <span className="is-empty-hint">Rich text</span>
-  )
-  const id = props.params.RenderingIdentifier
+  );
+  const id = props.params.RenderingIdentifier;
 
   return (
     <div
@@ -28,5 +28,5 @@ export const Default = (props: RichTextProps): JSX.Element => {
     >
       <div className="component-content">{text}</div>
     </div>
-  )
-}
+  );
+};
diff --git a/examples/cms-sitecore-xmcloud/src/components/RowSplitter.tsx b/examples/cms-sitecore-xmcloud/src/components/RowSplitter.tsx
index a688dc2b6b..ed82465273 100644
--- a/examples/cms-sitecore-xmcloud/src/components/RowSplitter.tsx
+++ b/examples/cms-sitecore-xmcloud/src/components/RowSplitter.tsx
@@ -1,19 +1,19 @@
-import React from 'react'
+import React from "react";
 import {
   ComponentParams,
   ComponentRendering,
   Placeholder,
-} from '@sitecore-jss/sitecore-jss-nextjs'
+} from "@sitecore-jss/sitecore-jss-nextjs";
 
 interface ComponentProps {
-  rendering: ComponentRendering & { params: ComponentParams }
-  params: ComponentParams
+  rendering: ComponentRendering & { params: ComponentParams };
+  params: ComponentParams;
 }
 
 export const Default = (props: ComponentProps): JSX.Element => {
-  const styles = `${props.params.GridParameters ?? ''} ${
-    props.params.Styles ?? ''
-  }`.trimEnd()
+  const styles = `${props.params.GridParameters ?? ""} ${
+    props.params.Styles ?? ""
+  }`.trimEnd();
   const rowStyles = [
     props.params.Styles1,
     props.params.Styles2,
@@ -23,9 +23,9 @@ export const Default = (props: ComponentProps): JSX.Element => {
     props.params.Styles6,
     props.params.Styles7,
     props.params.Styles8,
-  ]
-  const enabledPlaceholders = props.params.EnabledPlaceholders.split(',')
-  const id = props.params.RenderingIdentifier
+  ];
+  const enabledPlaceholders = props.params.EnabledPlaceholders.split(",");
+  const id = props.params.RenderingIdentifier;
 
   return (
     <div
@@ -33,8 +33,8 @@ export const Default = (props: ComponentProps): JSX.Element => {
       id={id ? id : undefined}
     >
       {enabledPlaceholders.map((ph, index) => {
-        const phKey = `row-${ph}-{*}`
-        const phStyles = `${rowStyles[+ph - 1] ?? ''}`.trimEnd()
+        const phKey = `row-${ph}-{*}`;
+        const phStyles = `${rowStyles[+ph - 1] ?? ""}`.trimEnd();
 
         return (
           <div key={index} className={`container-fluid ${phStyles}`.trimEnd()}>
@@ -48,8 +48,8 @@ export const Default = (props: ComponentProps): JSX.Element => {
               </div>
             </div>
           </div>
-        )
+        );
       })}
     </div>
-  )
-}
+  );
+};
diff --git a/examples/cms-sitecore-xmcloud/src/components/Title.tsx b/examples/cms-sitecore-xmcloud/src/components/Title.tsx
index ef53c5eb02..ebee263050 100644
--- a/examples/cms-sitecore-xmcloud/src/components/Title.tsx
+++ b/examples/cms-sitecore-xmcloud/src/components/Title.tsx
@@ -1,84 +1,84 @@
-import React from 'react'
+import React from "react";
 import {
   Link,
   Text,
   useSitecoreContext,
   LinkField,
   TextField,
-} from '@sitecore-jss/sitecore-jss-nextjs'
+} from "@sitecore-jss/sitecore-jss-nextjs";
 
 interface Fields {
   data: {
     datasource: {
       url: {
-        path: string
-        siteName: string
-      }
+        path: string;
+        siteName: string;
+      };
       field: {
         jsonValue: {
-          value: string
-          editable: string
-        }
-      }
-    }
+          value: string;
+          editable: string;
+        };
+      };
+    };
     contextItem: {
       url: {
-        path: string
-        siteName: string
-      }
+        path: string;
+        siteName: string;
+      };
       field: {
         jsonValue: {
-          value: string
-          editable: string
-        }
-      }
-    }
-  }
+          value: string;
+          editable: string;
+        };
+      };
+    };
+  };
 }
 
 type TitleProps = {
-  params: { [key: string]: string }
-  fields: Fields
-}
+  params: { [key: string]: string };
+  fields: Fields;
+};
 
 type ComponentContentProps = {
-  id: string
-  styles: string
-  children: JSX.Element
-}
+  id: string;
+  styles: string;
+  children: JSX.Element;
+};
 
 const ComponentContent = (props: ComponentContentProps) => {
-  const id = props.id
+  const id = props.id;
   return (
     <div className={`component title ${props.styles}`} id={id ? id : undefined}>
       <div className="component-content">
         <div className="field-title">{props.children}</div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export const Default = (props: TitleProps): JSX.Element => {
   const datasource =
-    props.fields?.data?.datasource || props.fields?.data?.contextItem
-  const { sitecoreContext } = useSitecoreContext()
+    props.fields?.data?.datasource || props.fields?.data?.contextItem;
+  const { sitecoreContext } = useSitecoreContext();
 
   const text: TextField = {
     value: datasource?.field?.jsonValue?.value,
     editable: datasource?.field?.jsonValue?.editable,
-  }
+  };
   const link: LinkField = {
     value: {
       href: datasource?.url?.path,
       title: datasource?.field?.jsonValue?.value,
       editable: true,
     },
-  }
-  if (sitecoreContext.pageState !== 'normal') {
-    link.value.querystring = `sc_site=${datasource?.url?.siteName}`
+  };
+  if (sitecoreContext.pageState !== "normal") {
+    link.value.querystring = `sc_site=${datasource?.url?.siteName}`;
     if (!text.value) {
-      text.value = 'Title field'
-      link.value.href = '#'
+      text.value = "Title field";
+      link.value.href = "#";
     }
   }
 
@@ -88,7 +88,7 @@ export const Default = (props: TitleProps): JSX.Element => {
       id={props.params.RenderingIdentifier}
     >
       <>
-        {sitecoreContext.pageState === 'edit' ? (
+        {sitecoreContext.pageState === "edit" ? (
           <Text field={text} />
         ) : (
           <Link field={link}>
@@ -97,5 +97,5 @@ export const Default = (props: TitleProps): JSX.Element => {
         )}
       </>
     </ComponentContent>
-  )
-}
+  );
+};
diff --git a/examples/cms-sitecore-xmcloud/src/lib/component-props/index.ts b/examples/cms-sitecore-xmcloud/src/lib/component-props/index.ts
index bb84a36b22..860c16351b 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/component-props/index.ts
+++ b/examples/cms-sitecore-xmcloud/src/lib/component-props/index.ts
@@ -2,15 +2,15 @@ import {
   ComponentParams,
   ComponentRendering,
   SitecoreContextValue,
-} from '@sitecore-jss/sitecore-jss-nextjs'
+} from "@sitecore-jss/sitecore-jss-nextjs";
 
 /**
  * Shared component props
  */
 export type ComponentProps = {
-  rendering: ComponentRendering
-  params: ComponentParams
-}
+  rendering: ComponentRendering;
+  params: ComponentParams;
+};
 
 /**
  * Component props with context
@@ -19,5 +19,5 @@ export type ComponentProps = {
  * @example const { sitecoreContext } = useSitecoreContext()
  */
 export type ComponentWithContextProps = ComponentProps & {
-  sitecoreContext: SitecoreContextValue
-}
+  sitecoreContext: SitecoreContextValue;
+};
diff --git a/examples/cms-sitecore-xmcloud/src/lib/data-fetcher.ts b/examples/cms-sitecore-xmcloud/src/lib/data-fetcher.ts
index 3ae88b6e9e..10321272ed 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/data-fetcher.ts
+++ b/examples/cms-sitecore-xmcloud/src/lib/data-fetcher.ts
@@ -1,7 +1,7 @@
 import {
   AxiosDataFetcher,
   AxiosResponse,
-} from '@sitecore-jss/sitecore-jss-nextjs'
+} from "@sitecore-jss/sitecore-jss-nextjs";
 
 /**
  * Implements a data fetcher using Axios - replace with your favorite
@@ -12,7 +12,7 @@ import {
  */
 export function dataFetcher<ResponseType>(
   url: string,
-  data?: unknown
+  data?: unknown,
 ): Promise<AxiosResponse<ResponseType>> {
-  return new AxiosDataFetcher().fetch<ResponseType>(url, data)
+  return new AxiosDataFetcher().fetch<ResponseType>(url, data);
 }
diff --git a/examples/cms-sitecore-xmcloud/src/lib/dictionary-service-factory.ts b/examples/cms-sitecore-xmcloud/src/lib/dictionary-service-factory.ts
index 63354373c6..c8f487edb6 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/dictionary-service-factory.ts
+++ b/examples/cms-sitecore-xmcloud/src/lib/dictionary-service-factory.ts
@@ -3,8 +3,8 @@ import {
   RestDictionaryService,
   GraphQLDictionaryService,
   constants,
-} from '@sitecore-jss/sitecore-jss-nextjs'
-import config from 'temp/config'
+} from "@sitecore-jss/sitecore-jss-nextjs";
+import config from "temp/config";
 
 /**
  * Factory responsible for creating a DictionaryService instance
@@ -31,9 +31,9 @@ export class DictionaryServiceFactory {
           apiHost: config.sitecoreApiHost,
           apiKey: config.sitecoreApiKey,
           siteName,
-        })
+        });
   }
 }
 
 /** DictionaryServiceFactory singleton */
-export const dictionaryServiceFactory = new DictionaryServiceFactory()
+export const dictionaryServiceFactory = new DictionaryServiceFactory();
diff --git a/examples/cms-sitecore-xmcloud/src/lib/extract-path/index.ts b/examples/cms-sitecore-xmcloud/src/lib/extract-path/index.ts
index bcd5969e83..34f8e563e4 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/extract-path/index.ts
+++ b/examples/cms-sitecore-xmcloud/src/lib/extract-path/index.ts
@@ -1,11 +1,11 @@
-import { ParsedUrlQuery } from 'querystring'
-import * as plugins from 'temp/extract-path-plugins'
+import { ParsedUrlQuery } from "querystring";
+import * as plugins from "temp/extract-path-plugins";
 
 export interface Plugin {
   /**
    * A function which will be called during path extraction
    */
-  exec(path: string): string
+  exec(path: string): string;
 }
 
 export class PathExtractor {
@@ -15,24 +15,24 @@ export class PathExtractor {
    */
   public extract(params: ParsedUrlQuery | undefined): string {
     if (params === undefined) {
-      return '/'
+      return "/";
     }
     let path = Array.isArray(params.path)
-      ? params.path.join('/')
-      : params.path ?? '/'
+      ? params.path.join("/")
+      : params.path ?? "/";
 
     // Ensure leading '/'
-    if (!path.startsWith('/')) {
-      path = '/' + path
+    if (!path.startsWith("/")) {
+      path = "/" + path;
     }
 
     const extractedPath = (Object.values(plugins) as Plugin[]).reduce(
       (resultPath, plugin) => plugin.exec(resultPath),
-      path
-    )
+      path,
+    );
 
-    return extractedPath
+    return extractedPath;
   }
 }
 
-export const pathExtractor = new PathExtractor()
+export const pathExtractor = new PathExtractor();
diff --git a/examples/cms-sitecore-xmcloud/src/lib/layout-service-factory.ts b/examples/cms-sitecore-xmcloud/src/lib/layout-service-factory.ts
index 15450ea569..8552185759 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/layout-service-factory.ts
+++ b/examples/cms-sitecore-xmcloud/src/lib/layout-service-factory.ts
@@ -3,8 +3,8 @@ import {
   RestLayoutService,
   GraphQLLayoutService,
   constants,
-} from '@sitecore-jss/sitecore-jss-nextjs'
-import config from 'temp/config'
+} from "@sitecore-jss/sitecore-jss-nextjs";
+import config from "temp/config";
 
 /**
  * Factory responsible for creating a LayoutService instance
@@ -25,10 +25,10 @@ export class LayoutServiceFactory {
           apiHost: config.sitecoreApiHost,
           apiKey: config.sitecoreApiKey,
           siteName,
-          configurationName: 'default',
-        })
+          configurationName: "default",
+        });
   }
 }
 
 /** LayoutServiceFactory singleton */
-export const layoutServiceFactory = new LayoutServiceFactory()
+export const layoutServiceFactory = new LayoutServiceFactory();
diff --git a/examples/cms-sitecore-xmcloud/src/lib/middleware/index.ts b/examples/cms-sitecore-xmcloud/src/lib/middleware/index.ts
index 6395d38d65..36dce12037 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/middleware/index.ts
+++ b/examples/cms-sitecore-xmcloud/src/lib/middleware/index.ts
@@ -1,32 +1,32 @@
-import { NextResponse } from 'next/server'
-import type { NextFetchEvent, NextRequest } from 'next/server'
-import * as plugins from 'temp/middleware-plugins'
+import { NextResponse } from "next/server";
+import type { NextFetchEvent, NextRequest } from "next/server";
+import * as plugins from "temp/middleware-plugins";
 
 export interface MiddlewarePlugin {
   /**
    * Detect order when the plugin should be called, e.g. 0 - will be called first (can be a plugin which data is required for other plugins)
    */
-  order: number
+  order: number;
   /**
    * A middleware to be called, it's required to return @type {NextResponse} for other middlewares
    */
   exec(
     req: NextRequest,
     res?: NextResponse,
-    ev?: NextFetchEvent
-  ): Promise<NextResponse>
+    ev?: NextFetchEvent,
+  ): Promise<NextResponse>;
 }
 
 export default async function middleware(
   req: NextRequest,
-  ev: NextFetchEvent
+  ev: NextFetchEvent,
 ): Promise<NextResponse> {
-  const response = NextResponse.next()
+  const response = NextResponse.next();
 
   return (Object.values(plugins) as MiddlewarePlugin[])
     .sort((p1, p2) => p1.order - p2.order)
     .reduce(
       (p, plugin) => p.then((res) => plugin.exec(req, res, ev)),
-      Promise.resolve(response)
-    )
+      Promise.resolve(response),
+    );
 }
diff --git a/examples/cms-sitecore-xmcloud/src/lib/middleware/plugins/redirects.ts b/examples/cms-sitecore-xmcloud/src/lib/middleware/plugins/redirects.ts
index bae6889264..715fbbb8d9 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/middleware/plugins/redirects.ts
+++ b/examples/cms-sitecore-xmcloud/src/lib/middleware/plugins/redirects.ts
@@ -1,12 +1,12 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { RedirectsMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/middleware'
-import config from 'temp/config'
-import { MiddlewarePlugin } from '..'
-import { siteResolver } from 'lib/site-resolver'
+import { NextRequest, NextResponse } from "next/server";
+import { RedirectsMiddleware } from "@sitecore-jss/sitecore-jss-nextjs/middleware";
+import config from "temp/config";
+import { MiddlewarePlugin } from "..";
+import { siteResolver } from "lib/site-resolver";
 
 class RedirectsPlugin implements MiddlewarePlugin {
-  private redirectsMiddleware: RedirectsMiddleware
-  order = 0
+  private redirectsMiddleware: RedirectsMiddleware;
+  order = 0;
 
   constructor() {
     this.redirectsMiddleware = new RedirectsMiddleware({
@@ -14,17 +14,17 @@ class RedirectsPlugin implements MiddlewarePlugin {
       apiKey: config.sitecoreApiKey,
       // These are all the locales you support in your application.
       // These should match those in your next.config.js (i18n.locales).
-      locales: ['en'],
+      locales: ["en"],
       // This function determines if a route should be excluded from RedirectsMiddleware.
       // Certain paths are ignored by default (e.g. files and Next.js API routes), but you may wish to exclude more.
       // This is an important performance consideration since Next.js Edge middleware runs on every request.
       excludeRoute: () => false,
       // This function determines if the middleware should be turned off.
       // By default it is disabled while in development mode.
-      disabled: () => process.env.NODE_ENV === 'development',
+      disabled: () => process.env.NODE_ENV === "development",
       // Site resolver implementation
       siteResolver,
-    })
+    });
   }
 
   /**
@@ -33,8 +33,8 @@ class RedirectsPlugin implements MiddlewarePlugin {
    * @returns Promise<NextResponse>
    */
   async exec(req: NextRequest, res?: NextResponse): Promise<NextResponse> {
-    return this.redirectsMiddleware.getHandler()(req, res)
+    return this.redirectsMiddleware.getHandler()(req, res);
   }
 }
 
-export const redirectsPlugin = new RedirectsPlugin()
+export const redirectsPlugin = new RedirectsPlugin();
diff --git a/examples/cms-sitecore-xmcloud/src/lib/next-config/plugins/graphql.js b/examples/cms-sitecore-xmcloud/src/lib/next-config/plugins/graphql.js
index 22d3e18f0b..8aeee74322 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/next-config/plugins/graphql.js
+++ b/examples/cms-sitecore-xmcloud/src/lib/next-config/plugins/graphql.js
@@ -7,29 +7,29 @@ const graphqlPlugin = (nextConfig = {}) => {
       config.module.rules.push({
         test: /\.graphql$/,
         exclude: /node_modules/,
-        use: [options.defaultLoaders.babel, { loader: 'graphql-let/loader' }],
-      })
+        use: [options.defaultLoaders.babel, { loader: "graphql-let/loader" }],
+      });
 
       config.module.rules.push({
         test: /\.graphqls$/,
         exclude: /node_modules/,
-        use: ['graphql-let/schema/loader'],
-      })
+        use: ["graphql-let/schema/loader"],
+      });
 
       config.module.rules.push({
         test: /\.ya?ml$/,
-        type: 'json',
-        use: 'yaml-loader',
-      })
+        type: "json",
+        use: "yaml-loader",
+      });
 
       // Overload the Webpack config if it was already overloaded
-      if (typeof nextConfig.webpack === 'function') {
-        return nextConfig.webpack(config, options)
+      if (typeof nextConfig.webpack === "function") {
+        return nextConfig.webpack(config, options);
       }
 
-      return config
+      return config;
     },
-  })
-}
+  });
+};
 
-module.exports = graphqlPlugin
+module.exports = graphqlPlugin;
diff --git a/examples/cms-sitecore-xmcloud/src/lib/next-config/plugins/robots.js b/examples/cms-sitecore-xmcloud/src/lib/next-config/plugins/robots.js
index fcc6fa7314..dcb6a8bf28 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/next-config/plugins/robots.js
+++ b/examples/cms-sitecore-xmcloud/src/lib/next-config/plugins/robots.js
@@ -8,12 +8,12 @@ const robotsPlugin = (nextConfig = {}) => {
         ...(await nextConfig.rewrites()),
         // robots route
         {
-          source: '/robots.txt',
-          destination: '/api/robots',
+          source: "/robots.txt",
+          destination: "/api/robots",
         },
-      ]
+      ];
     },
-  })
-}
+  });
+};
 
-module.exports = robotsPlugin
+module.exports = robotsPlugin;
diff --git a/examples/cms-sitecore-xmcloud/src/lib/next-config/plugins/sass.js b/examples/cms-sitecore-xmcloud/src/lib/next-config/plugins/sass.js
index f0c7165f3d..ede5f9716d 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/next-config/plugins/sass.js
+++ b/examples/cms-sitecore-xmcloud/src/lib/next-config/plugins/sass.js
@@ -1,5 +1,5 @@
-const path = require('path')
-const SassAlias = require('sass-alias')
+const path = require("path");
+const SassAlias = require("sass-alias");
 
 /**
  * @param {import('next').NextConfig} nextConfig
@@ -8,15 +8,15 @@ const sassPlugin = (nextConfig = {}) => {
   return Object.assign({}, nextConfig, {
     sassOptions: {
       importer: new SassAlias({
-        '@sass': path.join(__dirname, '../../../assets', 'sass'),
-        '@fontawesome': path.join(
+        "@sass": path.join(__dirname, "../../../assets", "sass"),
+        "@fontawesome": path.join(
           __dirname,
-          '../../../../node_modules',
-          'font-awesome'
+          "../../../../node_modules",
+          "font-awesome",
         ),
       }).getImporter(),
     },
-  })
-}
+  });
+};
 
-module.exports = sassPlugin
+module.exports = sassPlugin;
diff --git a/examples/cms-sitecore-xmcloud/src/lib/next-config/plugins/sitemap.js b/examples/cms-sitecore-xmcloud/src/lib/next-config/plugins/sitemap.js
index 473eedf81b..82da83d061 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/next-config/plugins/sitemap.js
+++ b/examples/cms-sitecore-xmcloud/src/lib/next-config/plugins/sitemap.js
@@ -8,12 +8,12 @@ const sitemapPlugin = (nextConfig = {}) => {
         ...(await nextConfig.rewrites()),
         // sitemap route
         {
-          source: '/sitemap:id([\\w-]{0,}).xml',
-          destination: '/api/sitemap',
+          source: "/sitemap:id([\\w-]{0,}).xml",
+          destination: "/api/sitemap",
         },
-      ]
+      ];
     },
-  })
-}
+  });
+};
 
-module.exports = sitemapPlugin
+module.exports = sitemapPlugin;
diff --git a/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/index.ts b/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/index.ts
index 866fad3f82..292d54702a 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/index.ts
+++ b/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/index.ts
@@ -1,29 +1,29 @@
-import { GetServerSidePropsContext, GetStaticPropsContext } from 'next'
-import { SitecorePageProps } from 'lib/page-props'
-import * as plugins from 'temp/page-props-factory-plugins'
+import { GetServerSidePropsContext, GetStaticPropsContext } from "next";
+import { SitecorePageProps } from "lib/page-props";
+import * as plugins from "temp/page-props-factory-plugins";
 
 /**
  * Determines whether context is GetServerSidePropsContext (SSR) or GetStaticPropsContext (SSG)
  * @param {GetServerSidePropsContext | GetStaticPropsContext} context
  */
 export const isServerSidePropsContext = function (
-  context: GetServerSidePropsContext | GetStaticPropsContext
+  context: GetServerSidePropsContext | GetStaticPropsContext,
 ): context is GetServerSidePropsContext {
-  return (context as GetServerSidePropsContext).req !== undefined
-}
+  return (context as GetServerSidePropsContext).req !== undefined;
+};
 
 export interface Plugin {
   /**
    * Detect order when the plugin should be called, e.g. 0 - will be called first (can be a plugin which data is required for other plugins)
    */
-  order: number
+  order: number;
   /**
    * A function which will be called during page props generation
    */
   exec(
     props: SitecorePageProps,
-    context: GetServerSidePropsContext | GetStaticPropsContext
-  ): Promise<SitecorePageProps>
+    context: GetServerSidePropsContext | GetStaticPropsContext,
+  ): Promise<SitecorePageProps>;
 }
 
 export class SitecorePagePropsFactory {
@@ -33,18 +33,18 @@ export class SitecorePagePropsFactory {
    * @see SitecorePageProps
    */
   public async create(
-    context: GetServerSidePropsContext | GetStaticPropsContext
+    context: GetServerSidePropsContext | GetStaticPropsContext,
   ): Promise<SitecorePageProps> {
     const extendedProps = await (Object.values(plugins) as Plugin[])
       .sort((p1, p2) => p1.order - p2.order)
       .reduce(async (result, plugin) => {
-        const props = await result
-        const newProps = await plugin.exec(props, context)
-        return newProps
-      }, Promise.resolve({} as SitecorePageProps))
+        const props = await result;
+        const newProps = await plugin.exec(props, context);
+        return newProps;
+      }, Promise.resolve({} as SitecorePageProps));
 
-    return extendedProps
+    return extendedProps;
   }
 }
 
-export const sitecorePagePropsFactory = new SitecorePagePropsFactory()
+export const sitecorePagePropsFactory = new SitecorePagePropsFactory();
diff --git a/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/plugins/component-props.ts b/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/plugins/component-props.ts
index 1ca0e7b498..7ccd35c618 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/plugins/component-props.ts
+++ b/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/plugins/component-props.ts
@@ -1,23 +1,23 @@
-import { ComponentPropsService } from '@sitecore-jss/sitecore-jss-nextjs'
-import { SitecorePageProps } from 'lib/page-props'
-import { GetServerSidePropsContext, GetStaticPropsContext } from 'next'
-import { componentModule } from 'temp/componentFactory'
-import { Plugin, isServerSidePropsContext } from '..'
+import { ComponentPropsService } from "@sitecore-jss/sitecore-jss-nextjs";
+import { SitecorePageProps } from "lib/page-props";
+import { GetServerSidePropsContext, GetStaticPropsContext } from "next";
+import { componentModule } from "temp/componentFactory";
+import { Plugin, isServerSidePropsContext } from "..";
 
 class ComponentPropsPlugin implements Plugin {
-  private componentPropsService: ComponentPropsService
+  private componentPropsService: ComponentPropsService;
 
-  order = 2
+  order = 2;
 
   constructor() {
-    this.componentPropsService = new ComponentPropsService()
+    this.componentPropsService = new ComponentPropsService();
   }
 
   async exec(
     props: SitecorePageProps,
-    context: GetServerSidePropsContext | GetStaticPropsContext
+    context: GetServerSidePropsContext | GetStaticPropsContext,
   ) {
-    if (!props.layoutData.sitecore.route) return props
+    if (!props.layoutData.sitecore.route) return props;
 
     // Retrieve component props using side-effects defined on components level
     if (isServerSidePropsContext(context)) {
@@ -26,18 +26,18 @@ class ComponentPropsPlugin implements Plugin {
           layoutData: props.layoutData,
           context,
           componentModule,
-        })
+        });
     } else {
       props.componentProps =
         await this.componentPropsService.fetchStaticComponentProps({
           layoutData: props.layoutData,
           context,
           componentModule,
-        })
+        });
     }
 
-    return props
+    return props;
   }
 }
 
-export const componentPropsPlugin = new ComponentPropsPlugin()
+export const componentPropsPlugin = new ComponentPropsPlugin();
diff --git a/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/plugins/normal-mode.ts b/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/plugins/normal-mode.ts
index 76892e88c3..d790aea853 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/plugins/normal-mode.ts
+++ b/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/plugins/normal-mode.ts
@@ -1,39 +1,39 @@
-import { GetServerSidePropsContext, GetStaticPropsContext } from 'next'
+import { GetServerSidePropsContext, GetStaticPropsContext } from "next";
 import {
   DictionaryService,
   LayoutService,
-} from '@sitecore-jss/sitecore-jss-nextjs'
-import { dictionaryServiceFactory } from 'lib/dictionary-service-factory'
-import { layoutServiceFactory } from 'lib/layout-service-factory'
-import { SitecorePageProps } from 'lib/page-props'
-import { pathExtractor } from 'lib/extract-path'
-import { Plugin, isServerSidePropsContext } from '..'
+} from "@sitecore-jss/sitecore-jss-nextjs";
+import { dictionaryServiceFactory } from "lib/dictionary-service-factory";
+import { layoutServiceFactory } from "lib/layout-service-factory";
+import { SitecorePageProps } from "lib/page-props";
+import { pathExtractor } from "lib/extract-path";
+import { Plugin, isServerSidePropsContext } from "..";
 
 class NormalModePlugin implements Plugin {
-  private dictionaryServices: Map<string, DictionaryService>
-  private layoutServices: Map<string, LayoutService>
+  private dictionaryServices: Map<string, DictionaryService>;
+  private layoutServices: Map<string, LayoutService>;
 
-  order = 1
+  order = 1;
 
   constructor() {
-    this.dictionaryServices = new Map<string, DictionaryService>()
-    this.layoutServices = new Map<string, LayoutService>()
+    this.dictionaryServices = new Map<string, DictionaryService>();
+    this.layoutServices = new Map<string, LayoutService>();
   }
 
   async exec(
     props: SitecorePageProps,
-    context: GetServerSidePropsContext | GetStaticPropsContext
+    context: GetServerSidePropsContext | GetStaticPropsContext,
   ) {
-    if (context.preview) return props
+    if (context.preview) return props;
 
     // Get normalized Sitecore item path
-    const path = pathExtractor.extract(context.params)
+    const path = pathExtractor.extract(context.params);
 
     // Use context locale if Next.js i18n is configured, otherwise use default site language
-    props.locale = context.locale ?? props.site.language
+    props.locale = context.locale ?? props.site.language;
 
     // Fetch layout data, passing on req/res for SSR
-    const layoutService = this.getLayoutService(props.site.name)
+    const layoutService = this.getLayoutService(props.site.name);
     props.layoutData = await layoutService.fetchLayoutData(
       path,
       props.locale,
@@ -42,47 +42,49 @@ class NormalModePlugin implements Plugin {
         : undefined,
       isServerSidePropsContext(context)
         ? (context as GetServerSidePropsContext).res
-        : undefined
-    )
+        : undefined,
+    );
 
     if (!props.layoutData.sitecore.route) {
       // A missing route value signifies an invalid path, so set notFound.
       // Our page routes will return this in getStatic/ServerSideProps,
       // which will trigger our custom 404 page with proper 404 status code.
       // You could perform additional logging here to track these if desired.
-      props.notFound = true
+      props.notFound = true;
     }
 
     // Fetch dictionary data
-    const dictionaryService = this.getDictionaryService(props.site.name)
-    props.dictionary = await dictionaryService.fetchDictionaryData(props.locale)
+    const dictionaryService = this.getDictionaryService(props.site.name);
+    props.dictionary = await dictionaryService.fetchDictionaryData(
+      props.locale,
+    );
 
-    return props
+    return props;
   }
 
   private getDictionaryService(siteName: string): DictionaryService {
     if (this.dictionaryServices.has(siteName)) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      return this.dictionaryServices.get(siteName)!
+      return this.dictionaryServices.get(siteName)!;
     }
 
-    const dictionaryService = dictionaryServiceFactory.create(siteName)
-    this.dictionaryServices.set(siteName, dictionaryService)
+    const dictionaryService = dictionaryServiceFactory.create(siteName);
+    this.dictionaryServices.set(siteName, dictionaryService);
 
-    return dictionaryService
+    return dictionaryService;
   }
 
   private getLayoutService(siteName: string): LayoutService {
     if (this.layoutServices.has(siteName)) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      return this.layoutServices.get(siteName)!
+      return this.layoutServices.get(siteName)!;
     }
 
-    const layoutService = layoutServiceFactory.create(siteName)
-    this.layoutServices.set(siteName, layoutService)
+    const layoutService = layoutServiceFactory.create(siteName);
+    this.layoutServices.set(siteName, layoutService);
 
-    return layoutService
+    return layoutService;
   }
 }
 
-export const normalModePlugin = new NormalModePlugin()
+export const normalModePlugin = new NormalModePlugin();
diff --git a/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/plugins/preview-mode.ts b/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/plugins/preview-mode.ts
index e8de3cb0b3..a689d9cf42 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/plugins/preview-mode.ts
+++ b/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/plugins/preview-mode.ts
@@ -1,34 +1,34 @@
-import { SiteInfo } from '@sitecore-jss/sitecore-jss-nextjs'
-import { editingDataService } from '@sitecore-jss/sitecore-jss-nextjs/editing'
-import { SitecorePageProps } from 'lib/page-props'
-import { GetServerSidePropsContext, GetStaticPropsContext } from 'next'
-import { Plugin } from '..'
+import { SiteInfo } from "@sitecore-jss/sitecore-jss-nextjs";
+import { editingDataService } from "@sitecore-jss/sitecore-jss-nextjs/editing";
+import { SitecorePageProps } from "lib/page-props";
+import { GetServerSidePropsContext, GetStaticPropsContext } from "next";
+import { Plugin } from "..";
 
 class PreviewModePlugin implements Plugin {
-  order = 1
+  order = 1;
 
   async exec(
     props: SitecorePageProps,
-    context: GetServerSidePropsContext | GetStaticPropsContext
+    context: GetServerSidePropsContext | GetStaticPropsContext,
   ) {
-    if (!context.preview) return props
+    if (!context.preview) return props;
 
     // If we're in preview (editing) mode, use data already sent along with the editing request
-    const data = await editingDataService.getEditingData(context.previewData)
+    const data = await editingDataService.getEditingData(context.previewData);
     if (!data) {
       throw new Error(
         `Unable to get editing data for preview ${JSON.stringify(
-          context.previewData
-        )}`
-      )
+          context.previewData,
+        )}`,
+      );
     }
-    props.site = data.layoutData.sitecore.context.site as SiteInfo
-    props.locale = data.language
-    props.layoutData = data.layoutData
-    props.dictionary = data.dictionary
+    props.site = data.layoutData.sitecore.context.site as SiteInfo;
+    props.locale = data.language;
+    props.layoutData = data.layoutData;
+    props.dictionary = data.dictionary;
 
-    return props
+    return props;
   }
 }
 
-export const previewModePlugin = new PreviewModePlugin()
+export const previewModePlugin = new PreviewModePlugin();
diff --git a/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/plugins/site.ts b/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/plugins/site.ts
index 4e0f54bbd6..393c7799fc 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/plugins/site.ts
+++ b/examples/cms-sitecore-xmcloud/src/lib/page-props-factory/plugins/site.ts
@@ -1,23 +1,23 @@
-import { SitecorePageProps } from 'lib/page-props'
-import { GetServerSidePropsContext, GetStaticPropsContext } from 'next'
-import { Plugin } from '..'
-import { siteResolver } from 'lib/site-resolver'
-import config from 'temp/config'
+import { SitecorePageProps } from "lib/page-props";
+import { GetServerSidePropsContext, GetStaticPropsContext } from "next";
+import { Plugin } from "..";
+import { siteResolver } from "lib/site-resolver";
+import config from "temp/config";
 
 class SitePlugin implements Plugin {
-  order = 0
+  order = 0;
 
   async exec(
     props: SitecorePageProps,
-    context: GetServerSidePropsContext | GetStaticPropsContext
+    context: GetServerSidePropsContext | GetStaticPropsContext,
   ) {
-    if (context.preview) return props
+    if (context.preview) return props;
 
     // Resolve site by name
-    props.site = siteResolver.getByName(config.jssAppName)
+    props.site = siteResolver.getByName(config.jssAppName);
 
-    return props
+    return props;
   }
 }
 
-export const sitePlugin = new SitePlugin()
+export const sitePlugin = new SitePlugin();
diff --git a/examples/cms-sitecore-xmcloud/src/lib/page-props.ts b/examples/cms-sitecore-xmcloud/src/lib/page-props.ts
index dfadc6457c..9aeb9368a7 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/page-props.ts
+++ b/examples/cms-sitecore-xmcloud/src/lib/page-props.ts
@@ -3,16 +3,16 @@ import {
   ComponentPropsCollection,
   LayoutServiceData,
   SiteInfo,
-} from '@sitecore-jss/sitecore-jss-nextjs'
+} from "@sitecore-jss/sitecore-jss-nextjs";
 
 /**
  * Sitecore page props
  */
 export type SitecorePageProps = {
-  site: SiteInfo
-  locale: string
-  dictionary: DictionaryPhrases
-  componentProps: ComponentPropsCollection
-  notFound: boolean
-  layoutData: LayoutServiceData
-}
+  site: SiteInfo;
+  locale: string;
+  dictionary: DictionaryPhrases;
+  componentProps: ComponentPropsCollection;
+  notFound: boolean;
+  layoutData: LayoutServiceData;
+};
diff --git a/examples/cms-sitecore-xmcloud/src/lib/site-resolver/index.ts b/examples/cms-sitecore-xmcloud/src/lib/site-resolver/index.ts
index fa221343e0..220240cfae 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/site-resolver/index.ts
+++ b/examples/cms-sitecore-xmcloud/src/lib/site-resolver/index.ts
@@ -1,8 +1,8 @@
 import {
   SiteInfo,
   SiteResolver,
-} from '@sitecore-jss/sitecore-jss-nextjs/middleware'
-import * as plugins from 'temp/site-resolver-plugins'
+} from "@sitecore-jss/sitecore-jss-nextjs/middleware";
+import * as plugins from "temp/site-resolver-plugins";
 
 /*
   The site resolver stores site information and is used in the app
@@ -17,12 +17,12 @@ export interface SiteResolverPlugin {
   /**
    * A function which will be called during sites collection
    */
-  exec(sites: SiteInfo[]): SiteInfo[]
+  exec(sites: SiteInfo[]): SiteInfo[];
 }
 
 const sites = (Object.values(plugins) as SiteResolverPlugin[]).reduce(
   (sites, plugin) => plugin.exec(sites),
-  []
-)
+  [],
+);
 
-export const siteResolver = new SiteResolver(sites)
+export const siteResolver = new SiteResolver(sites);
diff --git a/examples/cms-sitecore-xmcloud/src/lib/site-resolver/plugins/default.ts b/examples/cms-sitecore-xmcloud/src/lib/site-resolver/plugins/default.ts
index e262621dcc..859da71542 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/site-resolver/plugins/default.ts
+++ b/examples/cms-sitecore-xmcloud/src/lib/site-resolver/plugins/default.ts
@@ -1,6 +1,6 @@
-import { SiteInfo } from '@sitecore-jss/sitecore-jss-nextjs/middleware'
-import config from 'temp/config'
-import { SiteResolverPlugin } from '..'
+import { SiteInfo } from "@sitecore-jss/sitecore-jss-nextjs/middleware";
+import config from "temp/config";
+import { SiteResolverPlugin } from "..";
 
 class DefaultPlugin implements SiteResolverPlugin {
   exec(sites: SiteInfo[]): SiteInfo[] {
@@ -8,11 +8,11 @@ class DefaultPlugin implements SiteResolverPlugin {
     sites.unshift({
       name: config.jssAppName,
       language: config.defaultLanguage,
-      hostName: '*',
-    })
+      hostName: "*",
+    });
 
-    return sites
+    return sites;
   }
 }
 
-export const defaultPlugin = new DefaultPlugin()
+export const defaultPlugin = new DefaultPlugin();
diff --git a/examples/cms-sitecore-xmcloud/src/lib/sitemap-fetcher/index.ts b/examples/cms-sitecore-xmcloud/src/lib/sitemap-fetcher/index.ts
index 4ab49cbe13..fd775912a3 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/sitemap-fetcher/index.ts
+++ b/examples/cms-sitecore-xmcloud/src/lib/sitemap-fetcher/index.ts
@@ -1,12 +1,12 @@
-import { GetStaticPathsContext } from 'next'
-import { StaticPath } from '@sitecore-jss/sitecore-jss-nextjs'
-import * as plugins from 'temp/sitemap-fetcher-plugins'
+import { GetStaticPathsContext } from "next";
+import { StaticPath } from "@sitecore-jss/sitecore-jss-nextjs";
+import * as plugins from "temp/sitemap-fetcher-plugins";
 
 export interface SitemapFetcherPlugin {
   /**
    * A function which will be called during page props generation
    */
-  exec(context?: GetStaticPathsContext): Promise<StaticPath[]>
+  exec(context?: GetStaticPathsContext): Promise<StaticPath[]>;
 }
 
 export class SitecoreSitemapFetcher {
@@ -15,13 +15,13 @@ export class SitecoreSitemapFetcher {
    * @param {GetStaticPathsContext} context
    */
   async fetch(context?: GetStaticPathsContext): Promise<StaticPath[]> {
-    const pluginsList = Object.values(plugins) as SitemapFetcherPlugin[]
+    const pluginsList = Object.values(plugins) as SitemapFetcherPlugin[];
     const pluginsResults = await Promise.all(
-      pluginsList.map((plugin) => plugin.exec(context))
-    )
-    const results = pluginsResults.reduce((acc, cur) => [...acc, ...cur], [])
-    return results
+      pluginsList.map((plugin) => plugin.exec(context)),
+    );
+    const results = pluginsResults.reduce((acc, cur) => [...acc, ...cur], []);
+    return results;
   }
 }
 
-export const sitemapFetcher = new SitecoreSitemapFetcher()
+export const sitemapFetcher = new SitecoreSitemapFetcher();
diff --git a/examples/cms-sitecore-xmcloud/src/lib/sitemap-fetcher/plugins/graphql-sitemap-service.ts b/examples/cms-sitecore-xmcloud/src/lib/sitemap-fetcher/plugins/graphql-sitemap-service.ts
index 125c5464a0..109c52fef3 100644
--- a/examples/cms-sitecore-xmcloud/src/lib/sitemap-fetcher/plugins/graphql-sitemap-service.ts
+++ b/examples/cms-sitecore-xmcloud/src/lib/sitemap-fetcher/plugins/graphql-sitemap-service.ts
@@ -2,30 +2,30 @@ import {
   GraphQLSitemapService,
   StaticPath,
   constants,
-} from '@sitecore-jss/sitecore-jss-nextjs'
-import config from 'temp/config'
-import { SitemapFetcherPlugin } from '..'
-import { GetStaticPathsContext } from 'next'
+} from "@sitecore-jss/sitecore-jss-nextjs";
+import config from "temp/config";
+import { SitemapFetcherPlugin } from "..";
+import { GetStaticPathsContext } from "next";
 
 class GraphqlSitemapServicePlugin implements SitemapFetcherPlugin {
-  _graphqlSitemapService: GraphQLSitemapService
+  _graphqlSitemapService: GraphQLSitemapService;
 
   constructor() {
     this._graphqlSitemapService = new GraphQLSitemapService({
       endpoint: config.graphQLEndpoint,
       apiKey: config.sitecoreApiKey,
       siteName: config.jssAppName,
-    })
+    });
   }
 
   async exec(context?: GetStaticPathsContext): Promise<StaticPath[]> {
     if (process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED) {
-      return []
+      return [];
     }
     return process.env.EXPORT_MODE
       ? this._graphqlSitemapService.fetchExportSitemap(config.defaultLanguage)
-      : this._graphqlSitemapService.fetchSSGSitemap(context?.locales || [])
+      : this._graphqlSitemapService.fetchSSGSitemap(context?.locales || []);
   }
 }
 
-export const graphqlSitemapServicePlugin = new GraphqlSitemapServicePlugin()
+export const graphqlSitemapServicePlugin = new GraphqlSitemapServicePlugin();
diff --git a/examples/cms-sitecore-xmcloud/src/middleware.ts b/examples/cms-sitecore-xmcloud/src/middleware.ts
index 1dd37c5aeb..b3cebb48aa 100644
--- a/examples/cms-sitecore-xmcloud/src/middleware.ts
+++ b/examples/cms-sitecore-xmcloud/src/middleware.ts
@@ -1,9 +1,9 @@
-import type { NextRequest, NextFetchEvent } from 'next/server'
-import middleware from 'lib/middleware'
+import type { NextRequest, NextFetchEvent } from "next/server";
+import middleware from "lib/middleware";
 
 // eslint-disable-next-line
 export default async function (req: NextRequest, ev: NextFetchEvent) {
-  return middleware(req, ev)
+  return middleware(req, ev);
 }
 
 export const config = {
@@ -15,5 +15,5 @@ export const config = {
    * 4. /- (Sitecore media)
    * 5. all root files inside /public (e.g. /favicon.ico)
    */
-  matcher: ['/', '/((?!api/|_next/|sitecore/api/|-/|[\\w-]+\\.\\w+).*)'],
-}
+  matcher: ["/", "/((?!api/|_next/|sitecore/api/|-/|[\\w-]+\\.\\w+).*)"],
+};
diff --git a/examples/cms-sitecore-xmcloud/src/pages/404.tsx b/examples/cms-sitecore-xmcloud/src/pages/404.tsx
index 7af78687e1..ad3fb7cfe6 100644
--- a/examples/cms-sitecore-xmcloud/src/pages/404.tsx
+++ b/examples/cms-sitecore-xmcloud/src/pages/404.tsx
@@ -1,19 +1,19 @@
-import config from 'temp/config'
+import config from "temp/config";
 import {
   GraphQLErrorPagesService,
   SitecoreContext,
   ErrorPages,
-} from '@sitecore-jss/sitecore-jss-nextjs'
-import { SitecorePageProps } from 'lib/page-props'
-import NotFound from 'src/NotFound'
-import { componentFactory } from 'temp/componentFactory'
-import Layout from 'src/Layout'
-import { GetStaticProps } from 'next'
-import { siteResolver } from 'lib/site-resolver'
+} from "@sitecore-jss/sitecore-jss-nextjs";
+import { SitecorePageProps } from "lib/page-props";
+import NotFound from "src/NotFound";
+import { componentFactory } from "temp/componentFactory";
+import Layout from "src/Layout";
+import { GetStaticProps } from "next";
+import { siteResolver } from "lib/site-resolver";
 
 const Custom404 = (props: SitecorePageProps): JSX.Element => {
   if (!(props && props.layoutData)) {
-    return <NotFound />
+    return <NotFound />;
   }
 
   return (
@@ -23,25 +23,25 @@ const Custom404 = (props: SitecorePageProps): JSX.Element => {
     >
       <Layout layoutData={props.layoutData} />
     </SitecoreContext>
-  )
-}
+  );
+};
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  const site = siteResolver.getByName(config.jssAppName)
+  const site = siteResolver.getByName(config.jssAppName);
   const errorPagesService = new GraphQLErrorPagesService({
     endpoint: config.graphQLEndpoint,
     apiKey: config.sitecoreApiKey,
     siteName: site.name,
     language: context.locale || config.defaultLanguage,
-  })
-  let resultErrorPages: ErrorPages | null = null
+  });
+  let resultErrorPages: ErrorPages | null = null;
 
   if (!process.env.DISABLE_SSG_FETCH) {
     try {
-      resultErrorPages = await errorPagesService.fetchErrorPages()
+      resultErrorPages = await errorPagesService.fetchErrorPages();
     } catch (error) {
-      console.log('Error occurred while fetching error pages')
-      console.log(error)
+      console.log("Error occurred while fetching error pages");
+      console.log(error);
     }
   }
 
@@ -49,7 +49,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
     props: {
       layoutData: resultErrorPages?.notFoundPage?.rendered || null,
     },
-  }
-}
+  };
+};
 
-export default Custom404
+export default Custom404;
diff --git a/examples/cms-sitecore-xmcloud/src/pages/500.tsx b/examples/cms-sitecore-xmcloud/src/pages/500.tsx
index 2b72b95990..6509c880f3 100644
--- a/examples/cms-sitecore-xmcloud/src/pages/500.tsx
+++ b/examples/cms-sitecore-xmcloud/src/pages/500.tsx
@@ -1,15 +1,15 @@
-import Head from 'next/head'
+import Head from "next/head";
 import {
   GraphQLErrorPagesService,
   SitecoreContext,
   ErrorPages,
-} from '@sitecore-jss/sitecore-jss-nextjs'
-import { SitecorePageProps } from 'lib/page-props'
-import Layout from 'src/Layout'
-import { componentFactory } from 'temp/componentFactory'
-import { GetStaticProps } from 'next'
-import config from 'temp/config'
-import { siteResolver } from 'lib/site-resolver'
+} from "@sitecore-jss/sitecore-jss-nextjs";
+import { SitecorePageProps } from "lib/page-props";
+import Layout from "src/Layout";
+import { componentFactory } from "temp/componentFactory";
+import { GetStaticProps } from "next";
+import config from "temp/config";
+import { siteResolver } from "lib/site-resolver";
 
 /**
  * Rendered in case if we have 500 error
@@ -28,11 +28,11 @@ const ServerError = (): JSX.Element => (
       <a href="/">Go to the Home page</a>
     </div>
   </>
-)
+);
 
 const Custom500 = (props: SitecorePageProps): JSX.Element => {
   if (!(props && props.layoutData)) {
-    return <ServerError />
+    return <ServerError />;
   }
 
   return (
@@ -42,25 +42,25 @@ const Custom500 = (props: SitecorePageProps): JSX.Element => {
     >
       <Layout layoutData={props.layoutData} />
     </SitecoreContext>
-  )
-}
+  );
+};
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  const site = siteResolver.getByName(config.jssAppName)
+  const site = siteResolver.getByName(config.jssAppName);
   const errorPagesService = new GraphQLErrorPagesService({
     endpoint: config.graphQLEndpoint,
     apiKey: config.sitecoreApiKey,
     siteName: site.name,
     language: context.locale || context.defaultLocale || config.defaultLanguage,
-  })
-  let resultErrorPages: ErrorPages | null = null
+  });
+  let resultErrorPages: ErrorPages | null = null;
 
   if (!process.env.DISABLE_SSG_FETCH) {
     try {
-      resultErrorPages = await errorPagesService.fetchErrorPages()
+      resultErrorPages = await errorPagesService.fetchErrorPages();
     } catch (error) {
-      console.log('Error occurred while fetching error pages')
-      console.log(error)
+      console.log("Error occurred while fetching error pages");
+      console.log(error);
     }
   }
 
@@ -68,7 +68,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
     props: {
       layoutData: resultErrorPages?.serverErrorPage?.rendered || null,
     },
-  }
-}
+  };
+};
 
-export default Custom500
+export default Custom500;
diff --git a/examples/cms-sitecore-xmcloud/src/pages/[[...path]].tsx b/examples/cms-sitecore-xmcloud/src/pages/[[...path]].tsx
index 2f6eda491e..170f81eb92 100644
--- a/examples/cms-sitecore-xmcloud/src/pages/[[...path]].tsx
+++ b/examples/cms-sitecore-xmcloud/src/pages/[[...path]].tsx
@@ -1,7 +1,7 @@
-import { useEffect } from 'react'
-import { GetStaticPaths, GetStaticProps } from 'next'
-import NotFound from 'src/NotFound'
-import Layout from 'src/Layout'
+import { useEffect } from "react";
+import { GetStaticPaths, GetStaticProps } from "next";
+import NotFound from "src/NotFound";
+import Layout from "src/Layout";
 import {
   RenderingType,
   SitecoreContext,
@@ -9,15 +9,15 @@ import {
   handleEditorFastRefresh,
   EditingComponentPlaceholder,
   StaticPath,
-} from '@sitecore-jss/sitecore-jss-nextjs'
-import { SitecorePageProps } from 'lib/page-props'
-import { sitecorePagePropsFactory } from 'lib/page-props-factory'
+} from "@sitecore-jss/sitecore-jss-nextjs";
+import { SitecorePageProps } from "lib/page-props";
+import { sitecorePagePropsFactory } from "lib/page-props-factory";
 // different componentFactory method will be used based on whether page is being edited
 import {
   componentFactory,
   editingComponentFactory,
-} from 'temp/componentFactory'
-import { sitemapFetcher } from 'lib/sitemap-fetcher'
+} from "temp/componentFactory";
+import { sitemapFetcher } from "lib/sitemap-fetcher";
 
 const SitecorePage = ({
   notFound,
@@ -26,17 +26,17 @@ const SitecorePage = ({
 }: SitecorePageProps): JSX.Element => {
   useEffect(() => {
     // Since Sitecore editors do not support Fast Refresh, need to refresh editor chromes after Fast Refresh finished
-    handleEditorFastRefresh()
-  }, [])
+    handleEditorFastRefresh();
+  }, []);
 
   if (notFound || !layoutData.sitecore.route) {
     // Shouldn't hit this (as long as 'notFound' is being returned below), but just to be safe
-    return <NotFound />
+    return <NotFound />;
   }
 
-  const isEditing = layoutData.sitecore.context.pageEditing
+  const isEditing = layoutData.sitecore.context.pageEditing;
   const isComponentRendering =
-    layoutData.sitecore.context.renderingType === RenderingType.Component
+    layoutData.sitecore.context.renderingType === RenderingType.Component;
 
   return (
     <ComponentPropsContext value={componentProps}>
@@ -57,8 +57,8 @@ const SitecorePage = ({
         )}
       </SitecoreContext>
     </ComponentPropsContext>
-  )
-}
+  );
+};
 
 // This function gets called at build and export time to determine
 // pages for SSG ("paths", as tokenized array).
@@ -71,35 +71,35 @@ export const getStaticPaths: GetStaticPaths = async (context) => {
   // ahead of time (non-development mode in this example).
   // See https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration
 
-  let paths: StaticPath[] = []
-  let fallback: boolean | 'blocking' = 'blocking'
+  let paths: StaticPath[] = [];
+  let fallback: boolean | "blocking" = "blocking";
 
   if (
-    process.env.NODE_ENV !== 'development' &&
+    process.env.NODE_ENV !== "development" &&
     !process.env.DISABLE_SSG_FETCH
   ) {
     try {
       // Note: Next.js runs export in production mode
-      paths = await sitemapFetcher.fetch(context)
+      paths = await sitemapFetcher.fetch(context);
     } catch (error) {
-      console.log('Error occurred while fetching static paths')
-      console.log(error)
+      console.log("Error occurred while fetching static paths");
+      console.log(error);
     }
 
-    fallback = process.env.EXPORT_MODE ? false : fallback
+    fallback = process.env.EXPORT_MODE ? false : fallback;
   }
 
   return {
     paths,
     fallback,
-  }
-}
+  };
+};
 
 // This function gets called at build time on server-side.
 // It may be called again, on a serverless function, if
 // revalidation (or fallback) is enabled and a new request comes in.
 export const getStaticProps: GetStaticProps = async (context) => {
-  const props = await sitecorePagePropsFactory.create(context)
+  const props = await sitecorePagePropsFactory.create(context);
 
   return {
     props,
@@ -108,7 +108,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
     // - At most once every 5 seconds
     revalidate: 5, // In seconds
     notFound: props.notFound, // Returns custom 404 page with a status code of 404 when true
-  }
-}
+  };
+};
 
-export default SitecorePage
+export default SitecorePage;
diff --git a/examples/cms-sitecore-xmcloud/src/pages/_app.tsx b/examples/cms-sitecore-xmcloud/src/pages/_app.tsx
index a4f5aad1c1..f774ef03cd 100644
--- a/examples/cms-sitecore-xmcloud/src/pages/_app.tsx
+++ b/examples/cms-sitecore-xmcloud/src/pages/_app.tsx
@@ -1,14 +1,14 @@
-import type { AppProps } from 'next/app'
-import { I18nProvider } from 'next-localization'
-import { SitecorePageProps } from 'lib/page-props'
+import type { AppProps } from "next/app";
+import { I18nProvider } from "next-localization";
+import { SitecorePageProps } from "lib/page-props";
 
-import 'assets/main.scss'
+import "assets/main.scss";
 
 function App({
   Component,
   pageProps,
 }: AppProps<SitecorePageProps>): JSX.Element {
-  const { dictionary, ...rest } = pageProps
+  const { dictionary, ...rest } = pageProps;
 
   return (
     // Use the next-localization (w/ rosetta) library to provide our translation dictionary to the app.
@@ -17,7 +17,7 @@ function App({
     <I18nProvider lngDict={dictionary} locale={pageProps.locale}>
       <Component {...rest} />
     </I18nProvider>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/examples/cms-sitecore-xmcloud/src/pages/_error.tsx b/examples/cms-sitecore-xmcloud/src/pages/_error.tsx
index b6002e14c0..0d33918e9d 100644
--- a/examples/cms-sitecore-xmcloud/src/pages/_error.tsx
+++ b/examples/cms-sitecore-xmcloud/src/pages/_error.tsx
@@ -1,8 +1,8 @@
-import { NextPage } from 'next'
-import Head from 'next/head'
+import { NextPage } from "next";
+import Head from "next/head";
 
 interface ErrorPageProps {
-  statusCode?: number | null | undefined
+  statusCode?: number | null | undefined;
 }
 
 /**
@@ -19,17 +19,17 @@ const ErrorPage: NextPage<ErrorPageProps> = ({ statusCode }) => (
       <p>
         {statusCode
           ? `A server-side ${statusCode} error occurred.`
-          : 'A client-side error occurred.'}
+          : "A client-side error occurred."}
       </p>
       <a href="/">Go to the Home page</a>
     </div>
   </>
-)
+);
 
 ErrorPage.getInitialProps = ({ res, err }) => {
-  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
 
-  return { statusCode }
-}
+  return { statusCode };
+};
 
-export default ErrorPage
+export default ErrorPage;
diff --git a/examples/cms-sitecore-xmcloud/src/pages/api/editing/data/[key].ts b/examples/cms-sitecore-xmcloud/src/pages/api/editing/data/[key].ts
index aa170e5aaf..3b1d751fdb 100644
--- a/examples/cms-sitecore-xmcloud/src/pages/api/editing/data/[key].ts
+++ b/examples/cms-sitecore-xmcloud/src/pages/api/editing/data/[key].ts
@@ -1,4 +1,4 @@
-import { EditingDataMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/editing'
+import { EditingDataMiddleware } from "@sitecore-jss/sitecore-jss-nextjs/editing";
 
 /**
  * This Next.js API route is used to handle Sitecore editor data storage and retrieval by key
@@ -13,13 +13,13 @@ import { EditingDataMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/editing
 export const config = {
   api: {
     bodyParser: {
-      sizeLimit: '2mb',
+      sizeLimit: "2mb",
     },
     responseLimit: false,
   },
-}
+};
 
 // Wire up the EditingDataMiddleware handler
-const handler = new EditingDataMiddleware().getHandler()
+const handler = new EditingDataMiddleware().getHandler();
 
-export default handler
+export default handler;
diff --git a/examples/cms-sitecore-xmcloud/src/pages/api/editing/render.ts b/examples/cms-sitecore-xmcloud/src/pages/api/editing/render.ts
index 477d7d0e85..d243cbb166 100644
--- a/examples/cms-sitecore-xmcloud/src/pages/api/editing/render.ts
+++ b/examples/cms-sitecore-xmcloud/src/pages/api/editing/render.ts
@@ -1,4 +1,4 @@
-import { EditingRenderMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/editing'
+import { EditingRenderMiddleware } from "@sitecore-jss/sitecore-jss-nextjs/editing";
 
 /**
  * This Next.js API route is used to handle POST requests from Sitecore editors.
@@ -19,13 +19,13 @@ import { EditingRenderMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/editi
 export const config = {
   api: {
     bodyParser: {
-      sizeLimit: '2mb',
+      sizeLimit: "2mb",
     },
     responseLimit: false,
   },
-}
+};
 
 // Wire up the EditingRenderMiddleware handler
-const handler = new EditingRenderMiddleware().getHandler()
+const handler = new EditingRenderMiddleware().getHandler();
 
-export default handler
+export default handler;
diff --git a/examples/cms-sitecore-xmcloud/src/pages/api/healthz.ts b/examples/cms-sitecore-xmcloud/src/pages/api/healthz.ts
index c3750d3e95..7d3f45d71e 100644
--- a/examples/cms-sitecore-xmcloud/src/pages/api/healthz.ts
+++ b/examples/cms-sitecore-xmcloud/src/pages/api/healthz.ts
@@ -1,4 +1,4 @@
-import { HealthcheckMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/monitoring'
+import { HealthcheckMiddleware } from "@sitecore-jss/sitecore-jss-nextjs/monitoring";
 
 /**
  * This Next.js API route is used to handle healthz check request.
@@ -7,6 +7,6 @@ import { HealthcheckMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/monitor
  */
 
 // Wire up the HealthcheckMiddleware handler
-const handler = new HealthcheckMiddleware().getHandler()
+const handler = new HealthcheckMiddleware().getHandler();
 
-export default handler
+export default handler;
diff --git a/examples/cms-sitecore-xmcloud/src/pages/api/robots.ts b/examples/cms-sitecore-xmcloud/src/pages/api/robots.ts
index b7198cac0f..58ee96bc5b 100644
--- a/examples/cms-sitecore-xmcloud/src/pages/api/robots.ts
+++ b/examples/cms-sitecore-xmcloud/src/pages/api/robots.ts
@@ -1,29 +1,29 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { GraphQLRobotsService } from '@sitecore-jss/sitecore-jss-nextjs'
-import { siteResolver } from 'lib/site-resolver'
-import config from 'temp/config'
+import type { NextApiRequest, NextApiResponse } from "next";
+import { GraphQLRobotsService } from "@sitecore-jss/sitecore-jss-nextjs";
+import { siteResolver } from "lib/site-resolver";
+import config from "temp/config";
 
 const robotsApi = async (
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ): Promise<void> => {
   // Ensure response is text/html
-  res.setHeader('Content-Type', 'text/html;charset=utf-8')
+  res.setHeader("Content-Type", "text/html;charset=utf-8");
 
   // Resolve site based on hostname
-  const hostName = req.headers['host']?.split(':')[0] || 'localhost'
-  const site = siteResolver.getByHost(hostName)
+  const hostName = req.headers["host"]?.split(":")[0] || "localhost";
+  const site = siteResolver.getByHost(hostName);
 
   // create robots graphql service
   const robotsService = new GraphQLRobotsService({
     endpoint: config.graphQLEndpoint,
     apiKey: config.sitecoreApiKey,
     siteName: site.name,
-  })
+  });
 
-  const robotsResult = await robotsService.fetchRobots()
+  const robotsResult = await robotsService.fetchRobots();
 
-  return res.status(200).send(robotsResult)
-}
+  return res.status(200).send(robotsResult);
+};
 
-export default robotsApi
+export default robotsApi;
diff --git a/examples/cms-sitecore-xmcloud/src/pages/api/sitemap.ts b/examples/cms-sitecore-xmcloud/src/pages/api/sitemap.ts
index 2056bfd1c5..66f339e791 100644
--- a/examples/cms-sitecore-xmcloud/src/pages/api/sitemap.ts
+++ b/examples/cms-sitecore-xmcloud/src/pages/api/sitemap.ts
@@ -1,79 +1,79 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from "next";
 import {
   AxiosDataFetcher,
   GraphQLSitemapXmlService,
   getPublicUrl,
   AxiosResponse,
-} from '@sitecore-jss/sitecore-jss-nextjs'
-import { siteResolver } from 'lib/site-resolver'
-import config from 'temp/config'
+} from "@sitecore-jss/sitecore-jss-nextjs";
+import { siteResolver } from "lib/site-resolver";
+import config from "temp/config";
 
-const ABSOLUTE_URL_REGEXP = '^(?:[a-z]+:)?//'
+const ABSOLUTE_URL_REGEXP = "^(?:[a-z]+:)?//";
 
 const sitemapApi = async (
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ): Promise<NextApiResponse | void> => {
   const {
     query: { id },
-  } = req
+  } = req;
 
   // Resolve site based on hostname
-  const hostName = req.headers['host']?.split(':')[0] || 'localhost'
-  const site = siteResolver.getByHost(hostName)
+  const hostName = req.headers["host"]?.split(":")[0] || "localhost";
+  const site = siteResolver.getByHost(hostName);
 
   // create sitemap graphql service
   const sitemapXmlService = new GraphQLSitemapXmlService({
     endpoint: config.graphQLEndpoint,
     apiKey: config.sitecoreApiKey,
     siteName: site.name,
-  })
+  });
 
   // if url has sitemap-{n}.xml type. The id - can be null if it's sitemap.xml request
-  const sitemapPath = await sitemapXmlService.getSitemap(id as string)
+  const sitemapPath = await sitemapXmlService.getSitemap(id as string);
 
   // if sitemap is match otherwise redirect to 404 page
   if (sitemapPath) {
-    const isAbsoluteUrl = sitemapPath.match(ABSOLUTE_URL_REGEXP)
+    const isAbsoluteUrl = sitemapPath.match(ABSOLUTE_URL_REGEXP);
     const sitemapUrl = isAbsoluteUrl
       ? sitemapPath
-      : `${config.sitecoreApiHost}${sitemapPath}`
-    res.setHeader('Content-Type', 'text/xml;charset=utf-8')
+      : `${config.sitecoreApiHost}${sitemapPath}`;
+    res.setHeader("Content-Type", "text/xml;charset=utf-8");
 
     // need to prepare stream from sitemap url
     return new AxiosDataFetcher()
       .get(sitemapUrl, {
-        responseType: 'stream',
+        responseType: "stream",
       })
       .then((response: AxiosResponse) => {
-        response.data.pipe(res)
+        response.data.pipe(res);
       })
-      .catch(() => res.redirect('/404'))
+      .catch(() => res.redirect("/404"));
   }
 
   // this approache if user go to /sitemap.xml - under it generate xml page with list of sitemaps
-  const sitemaps = await sitemapXmlService.fetchSitemaps()
+  const sitemaps = await sitemapXmlService.fetchSitemaps();
 
   if (!sitemaps.length) {
-    return res.redirect('/404')
+    return res.redirect("/404");
   }
 
   const SitemapLinks = sitemaps
     .map((item) => {
-      const parseUrl = item.split('/')
-      const lastSegment = parseUrl[parseUrl.length - 1]
+      const parseUrl = item.split("/");
+      const lastSegment = parseUrl[parseUrl.length - 1];
 
       return `<sitemap>
         <loc>${getPublicUrl()}/${lastSegment}</loc>
-      </sitemap>`
+      </sitemap>`;
     })
-    .join('')
+    .join("");
 
-  res.setHeader('Content-Type', 'text/xml;charset=utf-8')
+  res.setHeader("Content-Type", "text/xml;charset=utf-8");
 
   return res.send(`
   <sitemapindex xmlns="http://sitemaps.org/schemas/sitemap/0.9" encoding="UTF-8">${SitemapLinks}</sitemapindex>
-  `)
-}
+  `);
+};
 
-export default sitemapApi
+export default sitemapApi;
diff --git a/examples/cms-sitefinity/components/alert.tsx b/examples/cms-sitefinity/components/alert.tsx
index 067672f380..8d7d941af8 100644
--- a/examples/cms-sitefinity/components/alert.tsx
+++ b/examples/cms-sitefinity/components/alert.tsx
@@ -1,35 +1,35 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 type Props = {
-  preview?: boolean
-}
+  preview?: boolean;
+};
 
 const Alert = ({ preview }: Props) => {
   return (
     <div
-      className={cn('border-b', {
-        'bg-neutral-800 border-neutral-800 text-white': preview,
-        'bg-neutral-50 border-neutral-200': !preview,
+      className={cn("border-b", {
+        "bg-neutral-800 border-neutral-800 text-white": preview,
+        "bg-neutral-50 border-neutral-200": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This page is a preview.{' '}
+              This page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-teal-300 duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-blue-600 duration-200 transition-colors"
@@ -42,7 +42,7 @@ const Alert = ({ preview }: Props) => {
         </div>
       </Container>
     </div>
-  )
-}
+  );
+};
 
-export default Alert
+export default Alert;
diff --git a/examples/cms-sitefinity/components/avatar.tsx b/examples/cms-sitefinity/components/avatar.tsx
index 920d385162..9c2ea4d381 100644
--- a/examples/cms-sitefinity/components/avatar.tsx
+++ b/examples/cms-sitefinity/components/avatar.tsx
@@ -1,7 +1,7 @@
 type Props = {
-  name: string
-  picture: string
-}
+  name: string;
+  picture: string;
+};
 
 const Avatar = ({ name, picture }: Props) => {
   return (
@@ -9,7 +9,7 @@ const Avatar = ({ name, picture }: Props) => {
       <img src={picture} className="w-12 h-12 rounded-full mr-4" alt={name} />
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
-}
+  );
+};
 
-export default Avatar
+export default Avatar;
diff --git a/examples/cms-sitefinity/components/container.tsx b/examples/cms-sitefinity/components/container.tsx
index 1a1f687144..17458eb8ed 100644
--- a/examples/cms-sitefinity/components/container.tsx
+++ b/examples/cms-sitefinity/components/container.tsx
@@ -1,9 +1,9 @@
 type Props = {
-  children?: React.ReactNode
-}
+  children?: React.ReactNode;
+};
 
 const Container = ({ children }: Props) => {
-  return <div className="container mx-auto px-5">{children}</div>
-}
+  return <div className="container mx-auto px-5">{children}</div>;
+};
 
-export default Container
+export default Container;
diff --git a/examples/cms-sitefinity/components/cover-image.tsx b/examples/cms-sitefinity/components/cover-image.tsx
index a39bd072da..775d1a05fa 100644
--- a/examples/cms-sitefinity/components/cover-image.tsx
+++ b/examples/cms-sitefinity/components/cover-image.tsx
@@ -1,22 +1,22 @@
-import cn from 'classnames'
-import Link from 'next/link'
+import cn from "classnames";
+import Link from "next/link";
 
 type Props = {
-  title: string
-  src: string
-  slug?: string
-}
+  title: string;
+  src: string;
+  slug?: string;
+};
 
 const CoverImage = ({ title, src, slug }: Props) => {
   const image = (
     <img
       src={src}
       alt={`Cover Image for ${title}`}
-      className={cn('shadow-sm', {
-        'hover:shadow-lg transition-shadow duration-200': slug,
+      className={cn("shadow-sm", {
+        "hover:shadow-lg transition-shadow duration-200": slug,
       })}
     />
-  )
+  );
   return (
     <div className="sm:mx-0">
       {slug ? (
@@ -27,7 +27,7 @@ const CoverImage = ({ title, src, slug }: Props) => {
         image
       )}
     </div>
-  )
-}
+  );
+};
 
-export default CoverImage
+export default CoverImage;
diff --git a/examples/cms-sitefinity/components/date-formatter.tsx b/examples/cms-sitefinity/components/date-formatter.tsx
index e827be5e9c..b092f5ec13 100644
--- a/examples/cms-sitefinity/components/date-formatter.tsx
+++ b/examples/cms-sitefinity/components/date-formatter.tsx
@@ -1,12 +1,12 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
 type Props = {
-  dateString: string
-}
+  dateString: string;
+};
 
 const DateFormatter = ({ dateString }: Props) => {
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
-}
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "LLLL	d, yyyy")}</time>;
+};
 
-export default DateFormatter
+export default DateFormatter;
diff --git a/examples/cms-sitefinity/components/footer.tsx b/examples/cms-sitefinity/components/footer.tsx
index d2bcba3336..3cd2edc51e 100644
--- a/examples/cms-sitefinity/components/footer.tsx
+++ b/examples/cms-sitefinity/components/footer.tsx
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 const Footer = () => {
   return (
@@ -26,7 +26,7 @@ const Footer = () => {
         </div>
       </Container>
     </footer>
-  )
-}
+  );
+};
 
-export default Footer
+export default Footer;
diff --git a/examples/cms-sitefinity/components/header.tsx b/examples/cms-sitefinity/components/header.tsx
index 6ecbe1ad0c..0848e1f555 100644
--- a/examples/cms-sitefinity/components/header.tsx
+++ b/examples/cms-sitefinity/components/header.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 const Header = () => {
   return (
@@ -8,7 +8,7 @@ const Header = () => {
       </Link>
       .
     </h2>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;
diff --git a/examples/cms-sitefinity/components/hero-post.tsx b/examples/cms-sitefinity/components/hero-post.tsx
index c75c08eb51..3a4a14bb76 100644
--- a/examples/cms-sitefinity/components/hero-post.tsx
+++ b/examples/cms-sitefinity/components/hero-post.tsx
@@ -1,17 +1,17 @@
-import Avatar from './avatar'
-import DateFormatter from './date-formatter'
-import CoverImage from './cover-image'
-import Link from 'next/link'
-import type Author from '../interfaces/author'
+import Avatar from "./avatar";
+import DateFormatter from "./date-formatter";
+import CoverImage from "./cover-image";
+import Link from "next/link";
+import type Author from "../interfaces/author";
 
 type Props = {
-  title: string
-  coverImage: string
-  date: string
-  excerpt: string
-  author: Author
-  slug: string
-}
+  title: string;
+  coverImage: string;
+  date: string;
+  excerpt: string;
+  author: Author;
+  slug: string;
+};
 
 const HeroPost = ({
   title,
@@ -47,7 +47,7 @@ const HeroPost = ({
         </div>
       </div>
     </section>
-  )
-}
+  );
+};
 
-export default HeroPost
+export default HeroPost;
diff --git a/examples/cms-sitefinity/components/intro.tsx b/examples/cms-sitefinity/components/intro.tsx
index d41e6fb1b9..030d7f6c53 100644
--- a/examples/cms-sitefinity/components/intro.tsx
+++ b/examples/cms-sitefinity/components/intro.tsx
@@ -1,4 +1,4 @@
-import { CMS_NAME } from '../lib/constants'
+import { CMS_NAME } from "../lib/constants";
 
 const Intro = () => {
   return (
@@ -7,17 +7,17 @@ const Intro = () => {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-blue-600 duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
+        </a>{" "}
         and {CMS_NAME}.
       </h4>
     </section>
-  )
-}
+  );
+};
 
-export default Intro
+export default Intro;
diff --git a/examples/cms-sitefinity/components/layout.tsx b/examples/cms-sitefinity/components/layout.tsx
index 9cd23e56e1..de3eb1b267 100644
--- a/examples/cms-sitefinity/components/layout.tsx
+++ b/examples/cms-sitefinity/components/layout.tsx
@@ -1,11 +1,11 @@
-import Alert from './alert'
-import Footer from './footer'
-import Meta from './meta'
+import Alert from "./alert";
+import Footer from "./footer";
+import Meta from "./meta";
 
 type Props = {
-  preview?: boolean
-  children: React.ReactNode
-}
+  preview?: boolean;
+  children: React.ReactNode;
+};
 
 const Layout = ({ preview, children }: Props) => {
   return (
@@ -17,7 +17,7 @@ const Layout = ({ preview, children }: Props) => {
       </div>
       <Footer />
     </>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;
diff --git a/examples/cms-sitefinity/components/meta.tsx b/examples/cms-sitefinity/components/meta.tsx
index 24690de3d3..ac3c5fcfc1 100644
--- a/examples/cms-sitefinity/components/meta.tsx
+++ b/examples/cms-sitefinity/components/meta.tsx
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "../lib/constants";
 
 const Meta = () => {
   return (
@@ -38,7 +38,7 @@ const Meta = () => {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
-}
+  );
+};
 
-export default Meta
+export default Meta;
diff --git a/examples/cms-sitefinity/components/more-stories.tsx b/examples/cms-sitefinity/components/more-stories.tsx
index 0bcb92808c..e62918eb07 100644
--- a/examples/cms-sitefinity/components/more-stories.tsx
+++ b/examples/cms-sitefinity/components/more-stories.tsx
@@ -1,9 +1,9 @@
-import PostPreview from './post-preview'
-import type Post from '../interfaces/post'
+import PostPreview from "./post-preview";
+import type Post from "../interfaces/post";
 
 type Props = {
-  posts: Post[]
-}
+  posts: Post[];
+};
 
 const MoreStories = ({ posts }: Props) => {
   return (
@@ -25,7 +25,7 @@ const MoreStories = ({ posts }: Props) => {
         ))}
       </div>
     </section>
-  )
-}
+  );
+};
 
-export default MoreStories
+export default MoreStories;
diff --git a/examples/cms-sitefinity/components/post-body.tsx b/examples/cms-sitefinity/components/post-body.tsx
index cfb1f70ced..e994a567d7 100644
--- a/examples/cms-sitefinity/components/post-body.tsx
+++ b/examples/cms-sitefinity/components/post-body.tsx
@@ -1,18 +1,18 @@
-import markdownStyles from './markdown-styles.module.css'
+import markdownStyles from "./markdown-styles.module.css";
 
 type Props = {
-  content: string
-}
+  content: string;
+};
 
 const PostBody = ({ content }: Props) => {
   return (
     <div className="max-w-2xl mx-auto">
       <div
-        className={markdownStyles['markdown']}
+        className={markdownStyles["markdown"]}
         dangerouslySetInnerHTML={{ __html: content }}
       />
     </div>
-  )
-}
+  );
+};
 
-export default PostBody
+export default PostBody;
diff --git a/examples/cms-sitefinity/components/post-header.tsx b/examples/cms-sitefinity/components/post-header.tsx
index a2316fb324..68dcddf2e5 100644
--- a/examples/cms-sitefinity/components/post-header.tsx
+++ b/examples/cms-sitefinity/components/post-header.tsx
@@ -1,15 +1,15 @@
-import Avatar from './avatar'
-import DateFormatter from './date-formatter'
-import CoverImage from './cover-image'
-import PostTitle from './post-title'
-import type Author from '../interfaces/author'
+import Avatar from "./avatar";
+import DateFormatter from "./date-formatter";
+import CoverImage from "./cover-image";
+import PostTitle from "./post-title";
+import type Author from "../interfaces/author";
 
 type Props = {
-  title: string
-  coverImage: string
-  date: string
-  author: Author
-}
+  title: string;
+  coverImage: string;
+  date: string;
+  author: Author;
+};
 
 const PostHeader = ({ title, coverImage, date, author }: Props) => {
   return (
@@ -30,7 +30,7 @@ const PostHeader = ({ title, coverImage, date, author }: Props) => {
         </div>
       </div>
     </>
-  )
-}
+  );
+};
 
-export default PostHeader
+export default PostHeader;
diff --git a/examples/cms-sitefinity/components/post-preview.tsx b/examples/cms-sitefinity/components/post-preview.tsx
index e8edaf2ece..ce622e202c 100644
--- a/examples/cms-sitefinity/components/post-preview.tsx
+++ b/examples/cms-sitefinity/components/post-preview.tsx
@@ -1,17 +1,17 @@
-import Avatar from './avatar'
-import DateFormatter from './date-formatter'
-import CoverImage from './cover-image'
-import Link from 'next/link'
-import type Author from '../interfaces/author'
+import Avatar from "./avatar";
+import DateFormatter from "./date-formatter";
+import CoverImage from "./cover-image";
+import Link from "next/link";
+import type Author from "../interfaces/author";
 
 type Props = {
-  title: string
-  coverImage: string
-  date: string
-  excerpt: string
-  author: Author
-  slug: string
-}
+  title: string;
+  coverImage: string;
+  date: string;
+  excerpt: string;
+  author: Author;
+  slug: string;
+};
 
 const PostPreview = ({
   title,
@@ -41,7 +41,7 @@ const PostPreview = ({
       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
       <Avatar name={author.name} picture={author.picture} />
     </div>
-  )
-}
+  );
+};
 
-export default PostPreview
+export default PostPreview;
diff --git a/examples/cms-sitefinity/components/post-title.tsx b/examples/cms-sitefinity/components/post-title.tsx
index 74dc0fdb10..70ff3d12e5 100644
--- a/examples/cms-sitefinity/components/post-title.tsx
+++ b/examples/cms-sitefinity/components/post-title.tsx
@@ -1,15 +1,15 @@
-import { ReactNode } from 'react'
+import { ReactNode } from "react";
 
 type Props = {
-  children?: ReactNode
-}
+  children?: ReactNode;
+};
 
 const PostTitle = ({ children }: Props) => {
   return (
     <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
-  )
-}
+  );
+};
 
-export default PostTitle
+export default PostTitle;
diff --git a/examples/cms-sitefinity/components/section-separator.tsx b/examples/cms-sitefinity/components/section-separator.tsx
index 5205e528e4..49e9c6ac81 100644
--- a/examples/cms-sitefinity/components/section-separator.tsx
+++ b/examples/cms-sitefinity/components/section-separator.tsx
@@ -1,5 +1,5 @@
 const SectionSeparator = () => {
-  return <hr className="border-neutral-200 mt-28 mb-24" />
-}
+  return <hr className="border-neutral-200 mt-28 mb-24" />;
+};
 
-export default SectionSeparator
+export default SectionSeparator;
diff --git a/examples/cms-sitefinity/interfaces/author.ts b/examples/cms-sitefinity/interfaces/author.ts
index 4d9892b341..dc545c709f 100644
--- a/examples/cms-sitefinity/interfaces/author.ts
+++ b/examples/cms-sitefinity/interfaces/author.ts
@@ -1,6 +1,6 @@
 type Author = {
-  name: string
-  picture: string
-}
+  name: string;
+  picture: string;
+};
 
-export default Author
+export default Author;
diff --git a/examples/cms-sitefinity/interfaces/post.ts b/examples/cms-sitefinity/interfaces/post.ts
index 179bf746fb..816513b00a 100644
--- a/examples/cms-sitefinity/interfaces/post.ts
+++ b/examples/cms-sitefinity/interfaces/post.ts
@@ -1,16 +1,16 @@
-import type Author from './author'
+import type Author from "./author";
 
 type PostType = {
-  slug: string
-  title: string
-  date: string
-  coverImage: string
-  author: Author
-  excerpt: string
+  slug: string;
+  title: string;
+  date: string;
+  coverImage: string;
+  author: Author;
+  excerpt: string;
   ogImage: {
-    url: string
-  }
-  content: string
-}
+    url: string;
+  };
+  content: string;
+};
 
-export default PostType
+export default PostType;
diff --git a/examples/cms-sitefinity/lib/api.ts b/examples/cms-sitefinity/lib/api.ts
index 18344bd449..b68a8f1ea3 100644
--- a/examples/cms-sitefinity/lib/api.ts
+++ b/examples/cms-sitefinity/lib/api.ts
@@ -1,15 +1,15 @@
-import PostType from '../interfaces/post'
+import PostType from "../interfaces/post";
 
 export async function executeGraphQLForBlogPosts(
-  query: string
+  query: string,
 ): Promise<CmsPost[]> {
-  const graphQLEndpoint = `${process.env.SF_API_URL}graphql`
+  const graphQLEndpoint = `${process.env.SF_API_URL}graphql`;
   const response = await fetch(graphQLEndpoint, {
-    method: 'POST',
+    method: "POST",
     body: JSON.stringify({ query }),
-    headers: { 'Content-Type': 'application/json' },
-  }).then((x) => x.json())
-  return response['data']['posts']
+    headers: { "Content-Type": "application/json" },
+  }).then((x) => x.json());
+  return response["data"]["posts"];
 }
 
 export async function getAllPostSlugsFromCms(): Promise<string[]> {
@@ -19,19 +19,19 @@ export async function getAllPostSlugsFromCms(): Promise<string[]> {
                 itemDefaultUrl
             }
         }
-    `
+    `;
 
-  const blogPosts = await executeGraphQLForBlogPosts(query)
-  const slugs = blogPosts.map((x) => x.itemDefaultUrl)
-  return slugs
+  const blogPosts = await executeGraphQLForBlogPosts(query);
+  const slugs = blogPosts.map((x) => x.itemDefaultUrl);
+  return slugs;
 }
 
 function transformImageUrl(url: string) {
-  if (!url.startsWith('http')) {
-    url = process.env.SF_URL + url.substring(1)
+  if (!url.startsWith("http")) {
+    url = process.env.SF_URL + url.substring(1);
   }
 
-  return url
+  return url;
 }
 
 function mapCmsBlog(source: CmsPost): PostType {
@@ -49,11 +49,11 @@ function mapCmsBlog(source: CmsPost): PostType {
     ogImage: {
       url: transformImageUrl(source.openGraphImage[0].url),
     },
-  }
+  };
 }
 
 export async function getPostBySlugFromCms(slug: string): Promise<PostType> {
-  const modifiedSlug = slug
+  const modifiedSlug = slug;
   var query = `
         query {
             posts(_filter: {itemDefaultUrl: {_eq: "${modifiedSlug}"}}) {
@@ -77,14 +77,14 @@ export async function getPostBySlugFromCms(slug: string): Promise<PostType> {
                 }
             }
         }
-    `
+    `;
 
   const blogPosts = (await executeGraphQLForBlogPosts(query)).map((x) =>
-    mapCmsBlog(x)
-  )
-  if (blogPosts.length > 0) return blogPosts[0]
+    mapCmsBlog(x),
+  );
+  if (blogPosts.length > 0) return blogPosts[0];
 
-  return null
+  return null;
 }
 
 export async function getAllPostsFromCms(): Promise<PostType[]> {
@@ -111,30 +111,30 @@ export async function getAllPostsFromCms(): Promise<PostType[]> {
                 }
             }
         }
-    `
+    `;
 
   const blogPosts = (await executeGraphQLForBlogPosts(query)).map((x) =>
-    mapCmsBlog(x)
-  )
-  return blogPosts
+    mapCmsBlog(x),
+  );
+  return blogPosts;
 }
 
 interface CmsPost {
-  title: string
-  excerpt: string
-  dateCreated: string
-  content: string
-  itemDefaultUrl: string
+  title: string;
+  excerpt: string;
+  dateCreated: string;
+  content: string;
+  itemDefaultUrl: string;
   openGraphImage: {
-    url: string
-  }
+    url: string;
+  };
   coverImage: {
-    url: string
-  }
+    url: string;
+  };
   authorOfPost: {
-    title: string
+    title: string;
     picture: {
-      url: string
-    }
-  }
+      url: string;
+    };
+  };
 }
diff --git a/examples/cms-sitefinity/lib/constants.ts b/examples/cms-sitefinity/lib/constants.ts
index 2d9d9657fc..44d52be1ce 100644
--- a/examples/cms-sitefinity/lib/constants.ts
+++ b/examples/cms-sitefinity/lib/constants.ts
@@ -1,4 +1,4 @@
-export const EXAMPLE_PATH = 'blog-starter'
-export const CMS_NAME = 'Sitefinity'
+export const EXAMPLE_PATH = "blog-starter";
+export const CMS_NAME = "Sitefinity";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20Starter%20Example.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg'
+  "https://og-image.vercel.app/Next.js%20Blog%20Starter%20Example.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg";
diff --git a/examples/cms-sitefinity/pages/_app.tsx b/examples/cms-sitefinity/pages/_app.tsx
index 6ac887c043..0ee799e016 100644
--- a/examples/cms-sitefinity/pages/_app.tsx
+++ b/examples/cms-sitefinity/pages/_app.tsx
@@ -1,6 +1,6 @@
-import { AppProps } from 'next/app'
-import '../styles/index.css'
+import { AppProps } from "next/app";
+import "../styles/index.css";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/cms-sitefinity/pages/index.tsx b/examples/cms-sitefinity/pages/index.tsx
index aeb579d3a7..ae710d9bca 100644
--- a/examples/cms-sitefinity/pages/index.tsx
+++ b/examples/cms-sitefinity/pages/index.tsx
@@ -1,20 +1,20 @@
-import Container from '../components/container'
-import MoreStories from '../components/more-stories'
-import HeroPost from '../components/hero-post'
-import Intro from '../components/intro'
-import Layout from '../components/layout'
-import { getAllPostsFromCms } from '../lib/api'
-import Head from 'next/head'
-import { CMS_NAME } from '../lib/constants'
-import Post from '../interfaces/post'
+import Container from "../components/container";
+import MoreStories from "../components/more-stories";
+import HeroPost from "../components/hero-post";
+import Intro from "../components/intro";
+import Layout from "../components/layout";
+import { getAllPostsFromCms } from "../lib/api";
+import Head from "next/head";
+import { CMS_NAME } from "../lib/constants";
+import Post from "../interfaces/post";
 
 type Props = {
-  allPosts: Post[]
-}
+  allPosts: Post[];
+};
 
 export default function Index({ allPosts }: Props) {
-  const heroPost = allPosts[0]
-  const morePosts = allPosts.slice(1)
+  const heroPost = allPosts[0];
+  const morePosts = allPosts.slice(1);
   return (
     <>
       <Layout>
@@ -37,13 +37,13 @@ export default function Index({ allPosts }: Props) {
         </Container>
       </Layout>
     </>
-  )
+  );
 }
 
 export const getStaticProps = async () => {
-  const allPosts = await getAllPostsFromCms()
+  const allPosts = await getAllPostsFromCms();
 
   return {
     props: { allPosts },
-  }
-}
+  };
+};
diff --git a/examples/cms-sitefinity/pages/posts/[...slug].tsx b/examples/cms-sitefinity/pages/posts/[...slug].tsx
index 222b07a29d..48c453f3b7 100644
--- a/examples/cms-sitefinity/pages/posts/[...slug].tsx
+++ b/examples/cms-sitefinity/pages/posts/[...slug].tsx
@@ -1,26 +1,26 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import Container from '../../components/container'
-import PostBody from '../../components/post-body'
-import Header from '../../components/header'
-import PostHeader from '../../components/post-header'
-import Layout from '../../components/layout'
-import { getAllPostSlugsFromCms, getPostBySlugFromCms } from '../../lib/api'
-import PostTitle from '../../components/post-title'
-import Head from 'next/head'
-import { CMS_NAME } from '../../lib/constants'
-import type PostType from '../../interfaces/post'
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Container from "../../components/container";
+import PostBody from "../../components/post-body";
+import Header from "../../components/header";
+import PostHeader from "../../components/post-header";
+import Layout from "../../components/layout";
+import { getAllPostSlugsFromCms, getPostBySlugFromCms } from "../../lib/api";
+import PostTitle from "../../components/post-title";
+import Head from "next/head";
+import { CMS_NAME } from "../../lib/constants";
+import type PostType from "../../interfaces/post";
 
 type Props = {
-  post: PostType
-  morePosts: PostType[]
-  preview?: boolean
-}
+  post: PostType;
+  morePosts: PostType[];
+  preview?: boolean;
+};
 
 export default function Post({ post, morePosts, preview }: Props) {
-  const router = useRouter()
+  const router = useRouter();
   if (!router.isFallback && !post?.slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
   return (
     <Layout preview={preview}>
@@ -49,37 +49,37 @@ export default function Post({ post, morePosts, preview }: Props) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 type Params = {
   params: {
-    slug: string[]
-  }
-}
+    slug: string[];
+  };
+};
 
 export async function getStaticProps({ params }: Params) {
-  debugger
-  const post = await getPostBySlugFromCms('/' + params.slug.join('/'))
+  debugger;
+  const post = await getPostBySlugFromCms("/" + params.slug.join("/"));
 
   return {
     props: {
       post,
     },
-  }
+  };
 }
 
 export async function getStaticPaths() {
-  const slugs = await getAllPostSlugsFromCms()
+  const slugs = await getAllPostSlugsFromCms();
 
   return {
     paths: slugs.map((slug) => {
       return {
         params: {
-          slug: slug.split('/').splice(1),
+          slug: slug.split("/").splice(1),
         },
-      }
+      };
     }),
     fallback: false,
-  }
+  };
 }
diff --git a/examples/cms-sitefinity/postcss.config.js b/examples/cms-sitefinity/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-sitefinity/postcss.config.js
+++ b/examples/cms-sitefinity/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-sitefinity/tailwind.config.js b/examples/cms-sitefinity/tailwind.config.js
index 798640446b..f2b6eaeb61 100644
--- a/examples/cms-sitefinity/tailwind.config.js
+++ b/examples/cms-sitefinity/tailwind.config.js
@@ -1,34 +1,34 @@
 module.exports = {
-  content: ['./components/**/*.tsx', './pages/**/*.tsx'],
+  content: ["./components/**/*.tsx", "./pages/**/*.tsx"],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        sm: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        md: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        sm: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        md: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/cms-storyblok/components/alert.js b/examples/cms-storyblok/components/alert.js
index 051f331964..98355c9031 100644
--- a/examples/cms-storyblok/components/alert.js
+++ b/examples/cms-storyblok/components/alert.js
@@ -1,31 +1,31 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '@/lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "@/lib/constants";
 
 export default function Alert({ preview }) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This is page is a preview.{' '}
+              This is page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -38,5 +38,5 @@ export default function Alert({ preview }) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-storyblok/components/avatar.js b/examples/cms-storyblok/components/avatar.js
index d513df6211..37bd865b96 100644
--- a/examples/cms-storyblok/components/avatar.js
+++ b/examples/cms-storyblok/components/avatar.js
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Avatar({ name, picture }) {
   return (
@@ -13,5 +13,5 @@ export default function Avatar({ name, picture }) {
       </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-storyblok/components/container.js b/examples/cms-storyblok/components/container.js
index fc1c29dfb0..92e559ece3 100644
--- a/examples/cms-storyblok/components/container.js
+++ b/examples/cms-storyblok/components/container.js
@@ -1,3 +1,3 @@
 export default function Container({ children }) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }
diff --git a/examples/cms-storyblok/components/cover-image.js b/examples/cms-storyblok/components/cover-image.js
index c210ab1dc3..b4766f48f1 100644
--- a/examples/cms-storyblok/components/cover-image.js
+++ b/examples/cms-storyblok/components/cover-image.js
@@ -1,6 +1,6 @@
-import cn from 'classnames'
-import Image from 'next/image'
-import Link from 'next/link'
+import cn from "classnames";
+import Image from "next/image";
+import Link from "next/link";
 
 export default function CoverImage({ title, url, slug }) {
   const image = (
@@ -9,11 +9,11 @@ export default function CoverImage({ title, url, slug }) {
       height={1000}
       alt={`Cover Image for ${title}`}
       src={url}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": slug,
       })}
     />
-  )
+  );
   return (
     <div className="sm:mx-0">
       {slug ? (
@@ -24,5 +24,5 @@ export default function CoverImage({ title, url, slug }) {
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-storyblok/components/date.js b/examples/cms-storyblok/components/date.js
index 6503e2986d..1482d33792 100644
--- a/examples/cms-storyblok/components/date.js
+++ b/examples/cms-storyblok/components/date.js
@@ -1,13 +1,13 @@
-import { parseISO, format } from 'date-fns'
-import { useEffect, useState } from 'react'
+import { parseISO, format } from "date-fns";
+import { useEffect, useState } from "react";
 
 // dateString might be null for unpublished posts
 export default function DateComponent({ dateString }) {
-  const [date, setDate] = useState(dateString ? parseISO(dateString) : null)
+  const [date, setDate] = useState(dateString ? parseISO(dateString) : null);
   useEffect(() => {
     if (!date) {
-      setDate(new Date())
+      setDate(new Date());
     }
-  }, [date])
-  return date && <time dateTime={date}>{format(date, 'LLLL d, yyyy')}</time>
+  }, [date]);
+  return date && <time dateTime={date}>{format(date, "LLLL d, yyyy")}</time>;
 }
diff --git a/examples/cms-storyblok/components/footer.js b/examples/cms-storyblok/components/footer.js
index b305c3eb40..d4213d236e 100644
--- a/examples/cms-storyblok/components/footer.js
+++ b/examples/cms-storyblok/components/footer.js
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '@/lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "@/lib/constants";
 
 export default function Footer() {
   return (
@@ -26,5 +26,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-storyblok/components/header.js b/examples/cms-storyblok/components/header.js
index 05cb9af247..e6dea52099 100644
--- a/examples/cms-storyblok/components/header.js
+++ b/examples/cms-storyblok/components/header.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-storyblok/components/hero-post.js b/examples/cms-storyblok/components/hero-post.js
index 3112a11454..4aa1503889 100644
--- a/examples/cms-storyblok/components/hero-post.js
+++ b/examples/cms-storyblok/components/hero-post.js
@@ -1,7 +1,7 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function HeroPost({
   title,
@@ -33,5 +33,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-storyblok/components/intro.js b/examples/cms-storyblok/components/intro.js
index c3003c6196..b751ac199e 100644
--- a/examples/cms-storyblok/components/intro.js
+++ b/examples/cms-storyblok/components/intro.js
@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '@/lib/constants'
+import { CMS_NAME, CMS_URL } from "@/lib/constants";
 
 export default function Intro() {
   return (
@@ -7,14 +7,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -24,5 +24,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-storyblok/components/layout.js b/examples/cms-storyblok/components/layout.js
index 399802b095..d9e7c4b074 100644
--- a/examples/cms-storyblok/components/layout.js
+++ b/examples/cms-storyblok/components/layout.js
@@ -1,6 +1,6 @@
-import Alert from './alert'
-import Footer from './footer'
-import Meta from './meta'
+import Alert from "./alert";
+import Footer from "./footer";
+import Meta from "./meta";
 
 export default function Layout({ preview, children }) {
   return (
@@ -12,5 +12,5 @@ export default function Layout({ preview, children }) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-storyblok/components/meta.js b/examples/cms-storyblok/components/meta.js
index cec6227420..88aac65487 100644
--- a/examples/cms-storyblok/components/meta.js
+++ b/examples/cms-storyblok/components/meta.js
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '@/lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "@/lib/constants";
 
 export default function Meta() {
   return (
@@ -38,5 +38,5 @@ export default function Meta() {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-storyblok/components/more-stories.js b/examples/cms-storyblok/components/more-stories.js
index 583c01eda2..33d9993403 100644
--- a/examples/cms-storyblok/components/more-stories.js
+++ b/examples/cms-storyblok/components/more-stories.js
@@ -1,4 +1,4 @@
-import PostPreview from './post-preview'
+import PostPreview from "./post-preview";
 
 export default function MoreStories({ posts }) {
   return (
@@ -20,5 +20,5 @@ export default function MoreStories({ posts }) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-storyblok/components/post-body.js b/examples/cms-storyblok/components/post-body.js
index 4cc2bb52bc..45b5a1fb95 100644
--- a/examples/cms-storyblok/components/post-body.js
+++ b/examples/cms-storyblok/components/post-body.js
@@ -1,12 +1,12 @@
-import markdownStyles from './markdown-styles.module.css'
+import markdownStyles from "./markdown-styles.module.css";
 
 export default function PostBody({ content }) {
   return (
     <div className="max-w-2xl mx-auto">
       <div
-        className={markdownStyles['markdown']}
+        className={markdownStyles["markdown"]}
         dangerouslySetInnerHTML={{ __html: content }}
       />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-storyblok/components/post-header.js b/examples/cms-storyblok/components/post-header.js
index 96fa80e5ad..5ebae6b04f 100644
--- a/examples/cms-storyblok/components/post-header.js
+++ b/examples/cms-storyblok/components/post-header.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
-import PostTitle from '../components/post-title'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "../components/cover-image";
+import PostTitle from "../components/post-title";
 
 export default function PostHeader({ title, coverImage, date, author }) {
   return (
@@ -22,5 +22,5 @@ export default function PostHeader({ title, coverImage, date, author }) {
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-storyblok/components/post-preview.js b/examples/cms-storyblok/components/post-preview.js
index a833572559..e586d961ee 100644
--- a/examples/cms-storyblok/components/post-preview.js
+++ b/examples/cms-storyblok/components/post-preview.js
@@ -1,7 +1,7 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function PostPreview({
   title,
@@ -27,5 +27,5 @@ export default function PostPreview({
       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
       <Avatar name={author.name} picture={author.content.picture} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-storyblok/components/post-title.js b/examples/cms-storyblok/components/post-title.js
index edd8cba65c..a15f06616f 100644
--- a/examples/cms-storyblok/components/post-title.js
+++ b/examples/cms-storyblok/components/post-title.js
@@ -3,5 +3,5 @@ export default function PostTitle({ children }) {
     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
-  )
+  );
 }
diff --git a/examples/cms-storyblok/components/section-separator.js b/examples/cms-storyblok/components/section-separator.js
index 4ca5c65fdc..b86fb50b7d 100644
--- a/examples/cms-storyblok/components/section-separator.js
+++ b/examples/cms-storyblok/components/section-separator.js
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }
diff --git a/examples/cms-storyblok/lib/api.js b/examples/cms-storyblok/lib/api.js
index 71c338eb8e..76cec52ec8 100644
--- a/examples/cms-storyblok/lib/api.js
+++ b/examples/cms-storyblok/lib/api.js
@@ -1,24 +1,24 @@
 async function fetchAPI(query, { variables, preview } = {}) {
-  const res = await fetch('https://gapi.storyblok.com/v1/api', {
-    method: 'POST',
+  const res = await fetch("https://gapi.storyblok.com/v1/api", {
+    method: "POST",
     headers: {
-      'Content-Type': 'application/json',
+      "Content-Type": "application/json",
       Token: process.env.STORYBLOK_API_KEY,
-      Version: preview ? 'draft' : 'published',
+      Version: preview ? "draft" : "published",
     },
     body: JSON.stringify({
       query,
       variables,
     }),
-  })
+  });
 
-  const json = await res.json()
+  const json = await res.json();
   if (json.errors) {
-    console.error(json.errors)
-    throw new Error('Failed to fetch API')
+    console.error(json.errors);
+    throw new Error("Failed to fetch API");
   }
 
-  return json.data
+  return json.data;
 }
 
 export async function getPreviewPostBySlug(slug) {
@@ -35,9 +35,9 @@ export async function getPreviewPostBySlug(slug) {
       variables: {
         slug: `posts/${slug}`,
       },
-    }
-  )
-  return post
+    },
+  );
+  return post;
 }
 
 export async function getAllPostsWithSlug() {
@@ -49,8 +49,8 @@ export async function getAllPostsWithSlug() {
         }
       }
     }
-  `)
-  return data?.PostItems.items
+  `);
+  return data?.PostItems.items;
 }
 
 export async function getAllPostsForHome(preview) {
@@ -76,9 +76,9 @@ export async function getAllPostsForHome(preview) {
       }
     }
   `,
-    { preview }
-  )
-  return data?.PostItems.items
+    { preview },
+  );
+  return data?.PostItems.items;
 }
 
 export async function getPostAndMorePosts(slug, preview) {
@@ -125,13 +125,13 @@ export async function getPostAndMorePosts(slug, preview) {
       variables: {
         slug: `posts/${slug}`,
       },
-    }
-  )
+    },
+  );
 
   return {
     post: data?.PostItem,
     morePosts: (data?.PostItems?.items || [])
       .filter((item) => item.slug !== slug)
       .slice(0, 2),
-  }
+  };
 }
diff --git a/examples/cms-storyblok/lib/constants.js b/examples/cms-storyblok/lib/constants.js
index 9c48befed6..e4490379bd 100644
--- a/examples/cms-storyblok/lib/constants.js
+++ b/examples/cms-storyblok/lib/constants.js
@@ -1,5 +1,5 @@
-export const EXAMPLE_PATH = 'cms-storyblok'
-export const CMS_NAME = 'Storyblok'
-export const CMS_URL = 'https://www.storyblok.com/'
+export const EXAMPLE_PATH = "cms-storyblok";
+export const CMS_NAME = "Storyblok";
+export const CMS_URL = "https://www.storyblok.com/";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**Storyblok**.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1591740146%2Fnextjs%2Fexamples%2Fstoryblok-logo.svg'
+  "https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**Storyblok**.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1591740146%2Fnextjs%2Fexamples%2Fstoryblok-logo.svg";
diff --git a/examples/cms-storyblok/lib/markdownToHtml.js b/examples/cms-storyblok/lib/markdownToHtml.js
index 735fed2df3..fe3948ba7d 100644
--- a/examples/cms-storyblok/lib/markdownToHtml.js
+++ b/examples/cms-storyblok/lib/markdownToHtml.js
@@ -1,7 +1,7 @@
-import { remark } from 'remark'
-import html from 'remark-html'
+import { remark } from "remark";
+import html from "remark-html";
 
 export default async function markdownToHtml(markdown) {
-  const result = await remark().use(html).process(markdown)
-  return result.toString()
+  const result = await remark().use(html).process(markdown);
+  return result.toString();
 }
diff --git a/examples/cms-storyblok/pages/_app.js b/examples/cms-storyblok/pages/_app.js
index f18e112c7c..a82d9dd7b0 100644
--- a/examples/cms-storyblok/pages/_app.js
+++ b/examples/cms-storyblok/pages/_app.js
@@ -1,7 +1,7 @@
-import '@/styles/index.css'
+import "@/styles/index.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-storyblok/pages/_document.js b/examples/cms-storyblok/pages/_document.js
index 54e8bf3e2a..b2fff8b426 100644
--- a/examples/cms-storyblok/pages/_document.js
+++ b/examples/cms-storyblok/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/cms-storyblok/pages/api/exit-preview.js b/examples/cms-storyblok/pages/api/exit-preview.js
index a63a171ba4..16b744e88e 100644
--- a/examples/cms-storyblok/pages/api/exit-preview.js
+++ b/examples/cms-storyblok/pages/api/exit-preview.js
@@ -1,8 +1,8 @@
 export default async function exit(_, res) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-storyblok/pages/api/preview.js b/examples/cms-storyblok/pages/api/preview.js
index c306723e0b..168b7435ae 100644
--- a/examples/cms-storyblok/pages/api/preview.js
+++ b/examples/cms-storyblok/pages/api/preview.js
@@ -1,4 +1,4 @@
-import { getPreviewPostBySlug } from '@/lib/api'
+import { getPreviewPostBySlug } from "@/lib/api";
 
 export default async function preview(req, res) {
   // Check the secret and next parameters
@@ -7,22 +7,22 @@ export default async function preview(req, res) {
     req.query.secret !== process.env.STORYBLOK_PREVIEW_SECRET ||
     !req.query.slug
   ) {
-    return res.status(401).json({ message: 'Invalid token' })
+    return res.status(401).json({ message: "Invalid token" });
   }
 
   // Fetch the headless CMS to check if the provided `slug` exists
-  const post = await getPreviewPostBySlug(req.query.slug)
+  const post = await getPreviewPostBySlug(req.query.slug);
 
   // If the slug doesn't exist prevent preview mode from being enabled
   if (!post) {
-    return res.status(401).json({ message: 'Invalid slug' })
+    return res.status(401).json({ message: "Invalid slug" });
   }
 
   // Enable Draft Mode by setting the cookie
-  res.setDraftMode({ enable: true })
+  res.setDraftMode({ enable: true });
 
   // Redirect to the path from the fetched post
   // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
-  res.writeHead(307, { Location: `/posts/${post?.PostItem?.slug}` })
-  res.end()
+  res.writeHead(307, { Location: `/posts/${post?.PostItem?.slug}` });
+  res.end();
 }
diff --git a/examples/cms-storyblok/pages/index.js b/examples/cms-storyblok/pages/index.js
index 0f6be0d1a0..6c67c7e9a7 100644
--- a/examples/cms-storyblok/pages/index.js
+++ b/examples/cms-storyblok/pages/index.js
@@ -1,15 +1,15 @@
-import Container from '@/components/container'
-import MoreStories from '@/components/more-stories'
-import HeroPost from '@/components/hero-post'
-import Intro from '@/components/intro'
-import Layout from '@/components/layout'
-import { getAllPostsForHome } from '@/lib/api'
-import Head from 'next/head'
-import { CMS_NAME } from '@/lib/constants'
+import Container from "@/components/container";
+import MoreStories from "@/components/more-stories";
+import HeroPost from "@/components/hero-post";
+import Intro from "@/components/intro";
+import Layout from "@/components/layout";
+import { getAllPostsForHome } from "@/lib/api";
+import Head from "next/head";
+import { CMS_NAME } from "@/lib/constants";
 
 export default function Index({ allPosts, preview }) {
-  const heroPost = allPosts[0]
-  const morePosts = allPosts.slice(1)
+  const heroPost = allPosts[0];
+  const morePosts = allPosts.slice(1);
   return (
     <>
       <Layout preview={preview}>
@@ -32,12 +32,12 @@ export default function Index({ allPosts, preview }) {
         </Container>
       </Layout>
     </>
-  )
+  );
 }
 
 export async function getStaticProps({ preview = null }) {
-  const allPosts = (await getAllPostsForHome(preview)) || []
+  const allPosts = (await getAllPostsForHome(preview)) || [];
   return {
     props: { allPosts, preview },
-  }
+  };
 }
diff --git a/examples/cms-storyblok/pages/posts/[slug].js b/examples/cms-storyblok/pages/posts/[slug].js
index 1e957a5c8d..4756fe9b34 100644
--- a/examples/cms-storyblok/pages/posts/[slug].js
+++ b/examples/cms-storyblok/pages/posts/[slug].js
@@ -1,22 +1,22 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import Container from '@/components/container'
-import PostBody from '@/components/post-body'
-import MoreStories from '@/components/more-stories'
-import Header from '@/components/header'
-import PostHeader from '@/components/post-header'
-import SectionSeparator from '@/components/section-separator'
-import Layout from '@/components/layout'
-import { getAllPostsWithSlug, getPostAndMorePosts } from '@/lib/api'
-import PostTitle from '@/components/post-title'
-import Head from 'next/head'
-import { CMS_NAME } from '@/lib/constants'
-import RichTextResolver from 'storyblok-js-client/dist/richTextResolver'
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Container from "@/components/container";
+import PostBody from "@/components/post-body";
+import MoreStories from "@/components/more-stories";
+import Header from "@/components/header";
+import PostHeader from "@/components/post-header";
+import SectionSeparator from "@/components/section-separator";
+import Layout from "@/components/layout";
+import { getAllPostsWithSlug, getPostAndMorePosts } from "@/lib/api";
+import PostTitle from "@/components/post-title";
+import Head from "next/head";
+import { CMS_NAME } from "@/lib/constants";
+import RichTextResolver from "storyblok-js-client/dist/richTextResolver";
 
 export default function Post({ post, morePosts, preview }) {
-  const router = useRouter()
+  const router = useRouter();
   if (!router.isFallback && !post?.slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
   return (
     <Layout preview={preview}>
@@ -47,11 +47,11 @@ export default function Post({ post, morePosts, preview }) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps({ params, preview = null }) {
-  const data = await getPostAndMorePosts(params.slug, preview)
+  const data = await getPostAndMorePosts(params.slug, preview);
 
   return {
     props: {
@@ -64,13 +64,13 @@ export async function getStaticProps({ params, preview = null }) {
       },
       morePosts: data.morePosts,
     },
-  }
+  };
 }
 
 export async function getStaticPaths() {
-  const allPosts = await getAllPostsWithSlug()
+  const allPosts = await getAllPostsWithSlug();
   return {
     paths: allPosts?.map((post) => `/posts/${post.slug}`) || [],
     fallback: true,
-  }
+  };
 }
diff --git a/examples/cms-storyblok/postcss.config.js b/examples/cms-storyblok/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-storyblok/postcss.config.js
+++ b/examples/cms-storyblok/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-storyblok/tailwind.config.js b/examples/cms-storyblok/tailwind.config.js
index ea0efae6d7..a8f65a525d 100644
--- a/examples/cms-storyblok/tailwind.config.js
+++ b/examples/cms-storyblok/tailwind.config.js
@@ -1,38 +1,38 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/cms-takeshape/components/alert.js b/examples/cms-takeshape/components/alert.js
index 2994d59fbd..5ee5cde79a 100644
--- a/examples/cms-takeshape/components/alert.js
+++ b/examples/cms-takeshape/components/alert.js
@@ -1,31 +1,31 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Alert({ preview }) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This is page is a preview.{' '}
+              This is page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -38,5 +38,5 @@ export default function Alert({ preview }) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-takeshape/components/avatar.js b/examples/cms-takeshape/components/avatar.js
index 490838b1df..abb2d51d39 100644
--- a/examples/cms-takeshape/components/avatar.js
+++ b/examples/cms-takeshape/components/avatar.js
@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import { getImageUrl } from 'takeshape-routing'
+import Image from "next/image";
+import { getImageUrl } from "takeshape-routing";
 
 export default function Avatar({ name, picture }) {
   return (
@@ -7,8 +7,8 @@ export default function Avatar({ name, picture }) {
       <div className="w-12 h-12 relative mr-4">
         <Image
           src={getImageUrl(picture.path, {
-            fm: 'jpg',
-            fit: 'crop',
+            fm: "jpg",
+            fit: "crop",
             w: 100,
             h: 100,
             sat: -100,
@@ -20,5 +20,5 @@ export default function Avatar({ name, picture }) {
       </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-takeshape/components/container.js b/examples/cms-takeshape/components/container.js
index fc1c29dfb0..92e559ece3 100644
--- a/examples/cms-takeshape/components/container.js
+++ b/examples/cms-takeshape/components/container.js
@@ -1,3 +1,3 @@
 export default function Container({ children }) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }
diff --git a/examples/cms-takeshape/components/cover-image.js b/examples/cms-takeshape/components/cover-image.js
index 5b987a215f..6361136683 100644
--- a/examples/cms-takeshape/components/cover-image.js
+++ b/examples/cms-takeshape/components/cover-image.js
@@ -1,7 +1,7 @@
-import cn from 'classnames'
-import Image from 'next/image'
-import Link from 'next/link'
-import { getImageUrl } from 'takeshape-routing'
+import cn from "classnames";
+import Image from "next/image";
+import Link from "next/link";
+import { getImageUrl } from "takeshape-routing";
 
 export default function CoverImage({ title, coverImage, slug }) {
   const image = (
@@ -10,16 +10,16 @@ export default function CoverImage({ title, coverImage, slug }) {
       height={1000}
       alt={`Cover Image for ${title}`}
       src={getImageUrl(coverImage.path, {
-        fm: 'jpg',
-        fit: 'crop',
+        fm: "jpg",
+        fit: "crop",
         w: 2000,
         h: 1000,
       })}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": slug,
       })}
     />
-  )
+  );
   return (
     <div className="sm:mx-0">
       {slug ? (
@@ -30,5 +30,5 @@ export default function CoverImage({ title, coverImage, slug }) {
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-takeshape/components/date.js b/examples/cms-takeshape/components/date.js
index eac5681378..5be2fe25ba 100644
--- a/examples/cms-takeshape/components/date.js
+++ b/examples/cms-takeshape/components/date.js
@@ -1,6 +1,6 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
 export default function Date({ dateString }) {
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "LLLL	d, yyyy")}</time>;
 }
diff --git a/examples/cms-takeshape/components/footer.js b/examples/cms-takeshape/components/footer.js
index da9eed88ec..81422c7c6b 100644
--- a/examples/cms-takeshape/components/footer.js
+++ b/examples/cms-takeshape/components/footer.js
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Footer() {
   return (
@@ -26,5 +26,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-takeshape/components/header.js b/examples/cms-takeshape/components/header.js
index 05cb9af247..e6dea52099 100644
--- a/examples/cms-takeshape/components/header.js
+++ b/examples/cms-takeshape/components/header.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-takeshape/components/hero-post.js b/examples/cms-takeshape/components/hero-post.js
index 1496270c74..b6af063aaf 100644
--- a/examples/cms-takeshape/components/hero-post.js
+++ b/examples/cms-takeshape/components/hero-post.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
-import Link from 'next/link'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "../components/cover-image";
+import Link from "next/link";
 
 export default function HeroPost({
   title,
@@ -33,5 +33,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-takeshape/components/intro.js b/examples/cms-takeshape/components/intro.js
index 5931b3c596..e8578bef66 100644
--- a/examples/cms-takeshape/components/intro.js
+++ b/examples/cms-takeshape/components/intro.js
@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '../lib/constants'
+import { CMS_NAME, CMS_URL } from "../lib/constants";
 
 export default function Intro() {
   return (
@@ -7,14 +7,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -24,5 +24,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-takeshape/components/layout.js b/examples/cms-takeshape/components/layout.js
index 99d9535313..a2e161c793 100644
--- a/examples/cms-takeshape/components/layout.js
+++ b/examples/cms-takeshape/components/layout.js
@@ -1,6 +1,6 @@
-import Alert from '../components/alert'
-import Footer from '../components/footer'
-import Meta from '../components/meta'
+import Alert from "../components/alert";
+import Footer from "../components/footer";
+import Meta from "../components/meta";
 
 export default function Layout({ preview, children }) {
   return (
@@ -12,5 +12,5 @@ export default function Layout({ preview, children }) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-takeshape/components/meta.js b/examples/cms-takeshape/components/meta.js
index d9c48d5831..a95395d8b9 100644
--- a/examples/cms-takeshape/components/meta.js
+++ b/examples/cms-takeshape/components/meta.js
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "../lib/constants";
 
 export default function Meta() {
   return (
@@ -38,5 +38,5 @@ export default function Meta() {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-takeshape/components/more-stories.js b/examples/cms-takeshape/components/more-stories.js
index 57fdbb6c46..87b94578e3 100644
--- a/examples/cms-takeshape/components/more-stories.js
+++ b/examples/cms-takeshape/components/more-stories.js
@@ -1,4 +1,4 @@
-import PostPreview from '../components/post-preview'
+import PostPreview from "../components/post-preview";
 
 export default function MoreStories({ posts }) {
   return (
@@ -20,5 +20,5 @@ export default function MoreStories({ posts }) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-takeshape/components/post-body.js b/examples/cms-takeshape/components/post-body.js
index 4cc2bb52bc..45b5a1fb95 100644
--- a/examples/cms-takeshape/components/post-body.js
+++ b/examples/cms-takeshape/components/post-body.js
@@ -1,12 +1,12 @@
-import markdownStyles from './markdown-styles.module.css'
+import markdownStyles from "./markdown-styles.module.css";
 
 export default function PostBody({ content }) {
   return (
     <div className="max-w-2xl mx-auto">
       <div
-        className={markdownStyles['markdown']}
+        className={markdownStyles["markdown"]}
         dangerouslySetInnerHTML={{ __html: content }}
       />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-takeshape/components/post-header.js b/examples/cms-takeshape/components/post-header.js
index 9c021e703a..6404588493 100644
--- a/examples/cms-takeshape/components/post-header.js
+++ b/examples/cms-takeshape/components/post-header.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
-import PostTitle from '../components/post-title'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "../components/cover-image";
+import PostTitle from "../components/post-title";
 
 export default function PostHeader({ title, coverImage, date, author }) {
   return (
@@ -22,5 +22,5 @@ export default function PostHeader({ title, coverImage, date, author }) {
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-takeshape/components/post-preview.js b/examples/cms-takeshape/components/post-preview.js
index 2b76d9f38f..44b19ad48c 100644
--- a/examples/cms-takeshape/components/post-preview.js
+++ b/examples/cms-takeshape/components/post-preview.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function PostPreview({
   title,
@@ -27,5 +27,5 @@ export default function PostPreview({
       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
       <Avatar name={author.name} picture={author.picture} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-takeshape/components/post-title.js b/examples/cms-takeshape/components/post-title.js
index edd8cba65c..a15f06616f 100644
--- a/examples/cms-takeshape/components/post-title.js
+++ b/examples/cms-takeshape/components/post-title.js
@@ -3,5 +3,5 @@ export default function PostTitle({ children }) {
     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
-  )
+  );
 }
diff --git a/examples/cms-takeshape/components/section-separator.js b/examples/cms-takeshape/components/section-separator.js
index 4ca5c65fdc..b86fb50b7d 100644
--- a/examples/cms-takeshape/components/section-separator.js
+++ b/examples/cms-takeshape/components/section-separator.js
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }
diff --git a/examples/cms-takeshape/lib/api.js b/examples/cms-takeshape/lib/api.js
index 4c6cad7f9b..315dac13f3 100644
--- a/examples/cms-takeshape/lib/api.js
+++ b/examples/cms-takeshape/lib/api.js
@@ -1,25 +1,25 @@
-const API_URL = `https://api.takeshape.io/project/${process.env.TAKESHAPE_PROJECT_ID}/graphql`
-const API_KEY = process.env.TAKESHAPE_API_KEY
+const API_URL = `https://api.takeshape.io/project/${process.env.TAKESHAPE_PROJECT_ID}/graphql`;
+const API_KEY = process.env.TAKESHAPE_API_KEY;
 
 async function fetchAPI(query, { variables } = {}) {
   const res = await fetch(API_URL, {
-    method: 'POST',
+    method: "POST",
     headers: {
-      'Content-Type': 'application/json',
+      "Content-Type": "application/json",
       Authorization: `Bearer ${API_KEY}`,
     },
     body: JSON.stringify({
       query,
       variables,
     }),
-  })
+  });
 
-  const json = await res.json()
+  const json = await res.json();
   if (json.errors) {
-    console.error(json.errors)
-    throw new Error('Failed to fetch API')
+    console.error(json.errors);
+    throw new Error("Failed to fetch API");
   }
-  return json.data
+  return json.data;
 }
 
 export async function getPreviewPostBySlug(slug) {
@@ -36,9 +36,9 @@ export async function getPreviewPostBySlug(slug) {
       variables: {
         slug,
       },
-    }
-  )
-  return (data?.post?.items || [])[0]
+    },
+  );
+  return (data?.post?.items || [])[0];
 }
 
 export async function getAllPostsWithSlug() {
@@ -50,8 +50,8 @@ export async function getAllPostsWithSlug() {
         }
       }
     }
-  `)
-  return data?.allPosts?.items
+  `);
+  return data?.allPosts?.items;
 }
 
 export async function getAllPostsForHome(preview) {
@@ -82,9 +82,9 @@ export async function getAllPostsForHome(preview) {
         onlyEnabled: !preview,
         preview,
       },
-    }
-  )
-  return data?.allPosts?.items
+    },
+  );
+  return data?.allPosts?.items;
 }
 
 export async function getPostAndMorePosts(slug, preview) {
@@ -92,7 +92,7 @@ export async function getPostAndMorePosts(slug, preview) {
     `
   query PostBySlug($slug: String, $onlyEnabled: Boolean) {
     post: getPostList(filter: { term: {slug: $slug}}, ${
-      preview ? '' : 'where: { _status: { eq: "enabled" } },'
+      preview ? "" : 'where: { _status: { eq: "enabled" } },'
     } size: 1, onlyEnabled: $onlyEnabled) {
       items {
         title
@@ -112,7 +112,7 @@ export async function getPostAndMorePosts(slug, preview) {
     }
     morePosts: getPostList(
       filter: { bool: { must_not: { term: {slug: $slug}}}}, , ${
-        preview ? '' : 'where: { _status: { eq: "enabled" } },'
+        preview ? "" : 'where: { _status: { eq: "enabled" } },'
       }
       sort: { field: "date", order: "desc" }, size: 2, onlyEnabled: $onlyEnabled) {
       items {
@@ -138,7 +138,7 @@ export async function getPostAndMorePosts(slug, preview) {
         slug,
         onlyEnabled: !preview,
       },
-    }
-  )
-  return data
+    },
+  );
+  return data;
 }
diff --git a/examples/cms-takeshape/lib/constants.js b/examples/cms-takeshape/lib/constants.js
index a5719ea6a2..244c1cf92b 100644
--- a/examples/cms-takeshape/lib/constants.js
+++ b/examples/cms-takeshape/lib/constants.js
@@ -1,5 +1,5 @@
-export const EXAMPLE_PATH = 'cms-takeshape'
-export const CMS_NAME = 'TakeShape'
-export const CMS_URL = 'https://www.takeshape.io/'
+export const EXAMPLE_PATH = "cms-takeshape";
+export const CMS_NAME = "TakeShape";
+export const CMS_URL = "https://www.takeshape.io/";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**TakeShape**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fwww.takeshape.io%2Fandroid-icon-192x192.png&heights=200&heights=200'
+  "https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**TakeShape**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fwww.takeshape.io%2Fandroid-icon-192x192.png&heights=200&heights=200";
diff --git a/examples/cms-takeshape/lib/markdownToHtml.js b/examples/cms-takeshape/lib/markdownToHtml.js
index 735fed2df3..fe3948ba7d 100644
--- a/examples/cms-takeshape/lib/markdownToHtml.js
+++ b/examples/cms-takeshape/lib/markdownToHtml.js
@@ -1,7 +1,7 @@
-import { remark } from 'remark'
-import html from 'remark-html'
+import { remark } from "remark";
+import html from "remark-html";
 
 export default async function markdownToHtml(markdown) {
-  const result = await remark().use(html).process(markdown)
-  return result.toString()
+  const result = await remark().use(html).process(markdown);
+  return result.toString();
 }
diff --git a/examples/cms-takeshape/pages/_app.js b/examples/cms-takeshape/pages/_app.js
index d56d9bf601..aa7931ca32 100644
--- a/examples/cms-takeshape/pages/_app.js
+++ b/examples/cms-takeshape/pages/_app.js
@@ -1,7 +1,7 @@
-import '../styles/index.css'
+import "../styles/index.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-takeshape/pages/_document.js b/examples/cms-takeshape/pages/_document.js
index 54e8bf3e2a..b2fff8b426 100644
--- a/examples/cms-takeshape/pages/_document.js
+++ b/examples/cms-takeshape/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/cms-takeshape/pages/api/exit-preview.js b/examples/cms-takeshape/pages/api/exit-preview.js
index a63a171ba4..16b744e88e 100644
--- a/examples/cms-takeshape/pages/api/exit-preview.js
+++ b/examples/cms-takeshape/pages/api/exit-preview.js
@@ -1,8 +1,8 @@
 export default async function exit(_, res) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-takeshape/pages/api/preview.js b/examples/cms-takeshape/pages/api/preview.js
index 18b5f7e033..b92ce6ea3a 100644
--- a/examples/cms-takeshape/pages/api/preview.js
+++ b/examples/cms-takeshape/pages/api/preview.js
@@ -1,4 +1,4 @@
-import { getPreviewPostBySlug } from '../../lib/api'
+import { getPreviewPostBySlug } from "../../lib/api";
 
 export default async function preview(req, res) {
   // Check the secret and next parameters
@@ -7,22 +7,22 @@ export default async function preview(req, res) {
     req.query.secret !== process.env.TAKESHAPE_PREVIEW_SECRET ||
     !req.query.slug
   ) {
-    return res.status(401).json({ message: 'Invalid token' })
+    return res.status(401).json({ message: "Invalid token" });
   }
 
   // Fetch the headless CMS to check if the provided `slug` exists
-  const post = await getPreviewPostBySlug(req.query.slug)
+  const post = await getPreviewPostBySlug(req.query.slug);
 
   // If the slug doesn't exist prevent preview mode from being enabled
   if (!post) {
-    return res.status(401).json({ message: 'Invalid slug' })
+    return res.status(401).json({ message: "Invalid slug" });
   }
 
   // Enable Draft Mode by setting the cookie
-  res.setDraftMode({ enable: true })
+  res.setDraftMode({ enable: true });
 
   // Redirect to the path from the fetched post
   // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
-  res.writeHead(307, { Location: `/posts/${post.slug}` })
-  res.end()
+  res.writeHead(307, { Location: `/posts/${post.slug}` });
+  res.end();
 }
diff --git a/examples/cms-takeshape/pages/index.js b/examples/cms-takeshape/pages/index.js
index b0dec690f3..1b61318d84 100644
--- a/examples/cms-takeshape/pages/index.js
+++ b/examples/cms-takeshape/pages/index.js
@@ -1,15 +1,15 @@
-import Container from '../components/container'
-import MoreStories from '../components/more-stories'
-import HeroPost from '../components/hero-post'
-import Intro from '../components/intro'
-import Layout from '../components/layout'
-import { getAllPostsForHome } from '../lib/api'
-import Head from 'next/head'
-import { CMS_NAME } from '../lib/constants'
+import Container from "../components/container";
+import MoreStories from "../components/more-stories";
+import HeroPost from "../components/hero-post";
+import Intro from "../components/intro";
+import Layout from "../components/layout";
+import { getAllPostsForHome } from "../lib/api";
+import Head from "next/head";
+import { CMS_NAME } from "../lib/constants";
 
 export default function Index({ allPosts, preview }) {
-  const heroPost = allPosts[0]
-  const morePosts = allPosts.slice(1)
+  const heroPost = allPosts[0];
+  const morePosts = allPosts.slice(1);
   return (
     <>
       <Layout preview={preview}>
@@ -32,12 +32,12 @@ export default function Index({ allPosts, preview }) {
         </Container>
       </Layout>
     </>
-  )
+  );
 }
 
 export async function getStaticProps({ preview = false }) {
-  const allPosts = await getAllPostsForHome(preview)
+  const allPosts = await getAllPostsForHome(preview);
   return {
     props: { allPosts, preview },
-  }
+  };
 }
diff --git a/examples/cms-takeshape/pages/posts/[slug].js b/examples/cms-takeshape/pages/posts/[slug].js
index 8d71e75273..8c6e74f1f1 100644
--- a/examples/cms-takeshape/pages/posts/[slug].js
+++ b/examples/cms-takeshape/pages/posts/[slug].js
@@ -1,23 +1,23 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import { getImageUrl } from 'takeshape-routing'
-import Container from '../../components/container'
-import PostBody from '../../components/post-body'
-import MoreStories from '../../components/more-stories'
-import Header from '../../components/header'
-import PostHeader from '../../components/post-header'
-import SectionSeparator from '../../components/section-separator'
-import Layout from '../../components/layout'
-import { getAllPostsWithSlug, getPostAndMorePosts } from '../../lib/api'
-import PostTitle from '../../components/post-title'
-import Head from 'next/head'
-import { CMS_NAME } from '../../lib/constants'
-import markdownToHtml from '../../lib/markdownToHtml'
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import { getImageUrl } from "takeshape-routing";
+import Container from "../../components/container";
+import PostBody from "../../components/post-body";
+import MoreStories from "../../components/more-stories";
+import Header from "../../components/header";
+import PostHeader from "../../components/post-header";
+import SectionSeparator from "../../components/section-separator";
+import Layout from "../../components/layout";
+import { getAllPostsWithSlug, getPostAndMorePosts } from "../../lib/api";
+import PostTitle from "../../components/post-title";
+import Head from "next/head";
+import { CMS_NAME } from "../../lib/constants";
+import markdownToHtml from "../../lib/markdownToHtml";
 
 export default function Post({ post, morePosts, preview }) {
-  const router = useRouter()
+  const router = useRouter();
   if (!router.isFallback && !post?.slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
   return (
     <Layout preview={preview}>
@@ -35,8 +35,8 @@ export default function Post({ post, morePosts, preview }) {
                 <meta
                   property="og:image"
                   content={getImageUrl(post.coverImage, {
-                    fm: 'jpg',
-                    fit: 'crop',
+                    fm: "jpg",
+                    fit: "crop",
                     w: 2000,
                     h: 1000,
                   })}
@@ -56,14 +56,14 @@ export default function Post({ post, morePosts, preview }) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps({ params, preview = false }) {
-  const data = await getPostAndMorePosts(params.slug, preview)
+  const data = await getPostAndMorePosts(params.slug, preview);
   const content = await markdownToHtml(
-    (data?.post?.items || [])[0]?.content || ''
-  )
+    (data?.post?.items || [])[0]?.content || "",
+  );
 
   return {
     props: {
@@ -74,13 +74,13 @@ export async function getStaticProps({ params, preview = false }) {
       },
       morePosts: data?.morePosts.items ?? [],
     },
-  }
+  };
 }
 
 export async function getStaticPaths() {
-  const allPosts = await getAllPostsWithSlug()
+  const allPosts = await getAllPostsWithSlug();
   return {
     paths: allPosts?.map((post) => `/posts/${post.slug}`) || [],
     fallback: true,
-  }
+  };
 }
diff --git a/examples/cms-takeshape/postcss.config.js b/examples/cms-takeshape/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-takeshape/postcss.config.js
+++ b/examples/cms-takeshape/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-takeshape/tailwind.config.js b/examples/cms-takeshape/tailwind.config.js
index ea0efae6d7..a8f65a525d 100644
--- a/examples/cms-takeshape/tailwind.config.js
+++ b/examples/cms-takeshape/tailwind.config.js
@@ -1,38 +1,38 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/cms-tina/.tina/components/TinaDynamicProvider.js b/examples/cms-tina/.tina/components/TinaDynamicProvider.js
index 5f6bd24bc8..f33e5b445b 100644
--- a/examples/cms-tina/.tina/components/TinaDynamicProvider.js
+++ b/examples/cms-tina/.tina/components/TinaDynamicProvider.js
@@ -1,6 +1,6 @@
-import dynamic from 'next/dynamic'
-const TinaProvider = dynamic(() => import('./TinaProvider'), { ssr: false })
-import { TinaEditProvider } from 'tinacms/dist/edit-state'
+import dynamic from "next/dynamic";
+const TinaProvider = dynamic(() => import("./TinaProvider"), { ssr: false });
+import { TinaEditProvider } from "tinacms/dist/edit-state";
 
 const DynamicTina = ({ children }) => {
   return (
@@ -9,7 +9,7 @@ const DynamicTina = ({ children }) => {
         {children}
       </TinaEditProvider>
     </>
-  )
-}
+  );
+};
 
-export default DynamicTina
+export default DynamicTina;
diff --git a/examples/cms-tina/.tina/components/TinaProvider.js b/examples/cms-tina/.tina/components/TinaProvider.js
index 96d00b56aa..1f46ecea96 100644
--- a/examples/cms-tina/.tina/components/TinaProvider.js
+++ b/examples/cms-tina/.tina/components/TinaProvider.js
@@ -1,5 +1,5 @@
-import TinaCMS from 'tinacms'
-import { tinaConfig } from '../schema.ts'
+import TinaCMS from "tinacms";
+import { tinaConfig } from "../schema.ts";
 
 // Importing the TinaProvider directly into your page will cause Tina to be added to the production bundle.
 // Instead, import the tina/provider/index default export to have it dynamially imported in edit-moode
@@ -8,7 +8,7 @@ import { tinaConfig } from '../schema.ts'
  * @private Do not import this directly, please import the dynamic provider instead
  */
 const TinaProvider = ({ children }) => {
-  return <TinaCMS {...tinaConfig}>{children}</TinaCMS>
-}
+  return <TinaCMS {...tinaConfig}>{children}</TinaCMS>;
+};
 
-export default TinaProvider
+export default TinaProvider;
diff --git a/examples/cms-tina/.tina/schema.ts b/examples/cms-tina/.tina/schema.ts
index 1b7d0332a8..cc73853a9c 100644
--- a/examples/cms-tina/.tina/schema.ts
+++ b/examples/cms-tina/.tina/schema.ts
@@ -1,84 +1,84 @@
-import { defineSchema, defineConfig } from 'tinacms'
+import { defineSchema, defineConfig } from "tinacms";
 
 const schema = defineSchema({
   collections: [
     {
-      label: 'Blog Posts',
-      name: 'posts',
-      path: '_posts',
+      label: "Blog Posts",
+      name: "posts",
+      path: "_posts",
       fields: [
         {
-          type: 'string',
-          label: 'Title',
-          name: 'title',
+          type: "string",
+          label: "Title",
+          name: "title",
         },
         {
-          type: 'string',
-          label: 'Excerpt',
-          name: 'excerpt',
+          type: "string",
+          label: "Excerpt",
+          name: "excerpt",
         },
         {
-          type: 'string',
-          label: 'Cover Image',
-          name: 'coverImage',
+          type: "string",
+          label: "Cover Image",
+          name: "coverImage",
         },
         {
-          type: 'string',
-          label: 'Date',
-          name: 'date',
+          type: "string",
+          label: "Date",
+          name: "date",
         },
         {
-          type: 'object',
-          label: 'author',
-          name: 'author',
+          type: "object",
+          label: "author",
+          name: "author",
           fields: [
             {
-              type: 'string',
-              label: 'Name',
-              name: 'name',
+              type: "string",
+              label: "Name",
+              name: "name",
             },
             {
-              type: 'string',
-              label: 'Picture',
-              name: 'picture',
+              type: "string",
+              label: "Picture",
+              name: "picture",
             },
           ],
         },
         {
-          type: 'object',
-          label: 'OG Image',
-          name: 'ogImage',
+          type: "object",
+          label: "OG Image",
+          name: "ogImage",
           fields: [
             {
-              type: 'string',
-              label: 'Url',
-              name: 'url',
+              type: "string",
+              label: "Url",
+              name: "url",
             },
           ],
         },
         {
-          type: 'string',
-          label: 'Blog Post Body',
-          name: 'body',
+          type: "string",
+          label: "Blog Post Body",
+          name: "body",
           isBody: true,
           ui: {
-            component: 'textarea',
+            component: "textarea",
           },
         },
       ],
     },
   ],
-})
-export default schema
+});
+export default schema;
 // Your tina config
 // ==============
-const branch = 'main'
+const branch = "main";
 // When working locally, hit our local filesystem.
 // On a Vercel deployment, hit the Tina Cloud API
 const apiURL =
-  process.env.NODE_ENV == 'development'
-    ? 'http://localhost:4001/graphql'
-    : `https://content.tinajs.io/content/${process.env.NEXT_PUBLIC_TINA_CLIENT_ID}/github/${branch}`
+  process.env.NODE_ENV == "development"
+    ? "http://localhost:4001/graphql"
+    : `https://content.tinajs.io/content/${process.env.NEXT_PUBLIC_TINA_CLIENT_ID}/github/${branch}`;
 
 export const tinaConfig = defineConfig({
   apiURL,
@@ -90,17 +90,17 @@ export const tinaConfig = defineConfig({
     /**
      * 1. Import `tinacms` and `RouteMappingPlugin`
      **/
-    import('tinacms').then(({ RouteMappingPlugin }) => {
+    import("tinacms").then(({ RouteMappingPlugin }) => {
       /**
        * 2. Define the `RouteMappingPlugin` see https://tina.io/docs/tinacms-context/#the-routemappingplugin for more details
        **/
       const RouteMapping = new RouteMappingPlugin((collection, document) => {
-        return undefined
-      })
+        return undefined;
+      });
       /**
        * 3. Add the `RouteMappingPlugin` to the `cms`.
        **/
-      cms.plugins.add(RouteMapping)
-    })
+      cms.plugins.add(RouteMapping);
+    });
   },
-})
+});
diff --git a/examples/cms-tina/_posts/dynamic-routing.md b/examples/cms-tina/_posts/dynamic-routing.md
index b6ef7a26e6..44b0b311f3 100644
--- a/examples/cms-tina/_posts/dynamic-routing.md
+++ b/examples/cms-tina/_posts/dynamic-routing.md
@@ -1,13 +1,13 @@
 ---
-title: 'Dynamic Routing and Static Generation'
-excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.'
-coverImage: '/assets/blog/dynamic-routing/cover.jpg'
-date: '2020-03-16T05:35:07.322Z'
+title: "Dynamic Routing and Static Generation"
+excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus."
+coverImage: "/assets/blog/dynamic-routing/cover.jpg"
+date: "2020-03-16T05:35:07.322Z"
 author:
   name: JJ Kasper
-  picture: '/assets/blog/authors/jj.jpeg'
+  picture: "/assets/blog/authors/jj.jpeg"
 ogImage:
-  url: '/assets/blog/dynamic-routing/cover.jpg'
+  url: "/assets/blog/dynamic-routing/cover.jpg"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
diff --git a/examples/cms-tina/_posts/hello-world.md b/examples/cms-tina/_posts/hello-world.md
index 8d85a1df8f..e3fe9fe827 100644
--- a/examples/cms-tina/_posts/hello-world.md
+++ b/examples/cms-tina/_posts/hello-world.md
@@ -1,13 +1,13 @@
 ---
-title: 'Learn How to Pre-render Pages Using Static Generation with Next.js'
-excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.'
-coverImage: '/assets/blog/hello-world/cover.jpg'
-date: '2020-03-16T05:35:07.322Z'
+title: "Learn How to Pre-render Pages Using Static Generation with Next.js"
+excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus."
+coverImage: "/assets/blog/hello-world/cover.jpg"
+date: "2020-03-16T05:35:07.322Z"
 author:
   name: Tim Neutkens
-  picture: '/assets/blog/authors/tim.jpeg'
+  picture: "/assets/blog/authors/tim.jpeg"
 ogImage:
-  url: '/assets/blog/hello-world/cover.jpg'
+  url: "/assets/blog/hello-world/cover.jpg"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
diff --git a/examples/cms-tina/_posts/preview.md b/examples/cms-tina/_posts/preview.md
index 3d70ba7f99..588bf9dd03 100644
--- a/examples/cms-tina/_posts/preview.md
+++ b/examples/cms-tina/_posts/preview.md
@@ -1,13 +1,13 @@
 ---
-title: 'Preview Mode for Static Generation'
-excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.'
-coverImage: '/assets/blog/preview/cover.jpg'
-date: '2020-03-16T05:35:07.322Z'
+title: "Preview Mode for Static Generation"
+excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus."
+coverImage: "/assets/blog/preview/cover.jpg"
+date: "2020-03-16T05:35:07.322Z"
 author:
   name: Joe Haddad
-  picture: '/assets/blog/authors/joe.jpeg'
+  picture: "/assets/blog/authors/joe.jpeg"
 ogImage:
-  url: '/assets/blog/preview/cover.jpg'
+  url: "/assets/blog/preview/cover.jpg"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
diff --git a/examples/cms-tina/components/alert.js b/examples/cms-tina/components/alert.js
index b924cb097f..8e8729368f 100644
--- a/examples/cms-tina/components/alert.js
+++ b/examples/cms-tina/components/alert.js
@@ -1,31 +1,31 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Alert({ preview }) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This page is a preview.{' '}
+              This page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -38,5 +38,5 @@ export default function Alert({ preview }) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-tina/components/avatar.js b/examples/cms-tina/components/avatar.js
index 0ae7f66413..9090695970 100644
--- a/examples/cms-tina/components/avatar.js
+++ b/examples/cms-tina/components/avatar.js
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Avatar({ name, picture }) {
   return (
@@ -12,5 +12,5 @@ export default function Avatar({ name, picture }) {
       />
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-tina/components/container.js b/examples/cms-tina/components/container.js
index fc1c29dfb0..92e559ece3 100644
--- a/examples/cms-tina/components/container.js
+++ b/examples/cms-tina/components/container.js
@@ -1,3 +1,3 @@
 export default function Container({ children }) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }
diff --git a/examples/cms-tina/components/cover-image.js b/examples/cms-tina/components/cover-image.js
index 81692e8b30..e36f87bf32 100644
--- a/examples/cms-tina/components/cover-image.js
+++ b/examples/cms-tina/components/cover-image.js
@@ -1,20 +1,20 @@
-import cn from 'classnames'
-import Link from 'next/link'
-import Image from 'next/image'
+import cn from "classnames";
+import Link from "next/link";
+import Image from "next/image";
 
 export default function CoverImage({ title, src, slug, height, width }) {
   const image = (
     <Image
       src={src}
       alt={`Cover Image for ${title}`}
-      className={cn('shadow-sm', {
-        'hover:shadow-md transition-shadow duration-200': slug,
+      className={cn("shadow-sm", {
+        "hover:shadow-md transition-shadow duration-200": slug,
       })}
       layout="responsive"
       width={width}
       height={height}
     />
-  )
+  );
   return (
     <div className="sm:mx-0">
       {slug ? (
@@ -25,5 +25,5 @@ export default function CoverImage({ title, src, slug, height, width }) {
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-tina/components/date-formatter.js b/examples/cms-tina/components/date-formatter.js
index 9de4f48800..4393b41073 100644
--- a/examples/cms-tina/components/date-formatter.js
+++ b/examples/cms-tina/components/date-formatter.js
@@ -1,6 +1,6 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
 export default function DateFormatter({ dateString }) {
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "LLLL	d, yyyy")}</time>;
 }
diff --git a/examples/cms-tina/components/footer.js b/examples/cms-tina/components/footer.js
index da9eed88ec..81422c7c6b 100644
--- a/examples/cms-tina/components/footer.js
+++ b/examples/cms-tina/components/footer.js
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Footer() {
   return (
@@ -26,5 +26,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-tina/components/header.js b/examples/cms-tina/components/header.js
index 05cb9af247..e6dea52099 100644
--- a/examples/cms-tina/components/header.js
+++ b/examples/cms-tina/components/header.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-tina/components/hero-post.js b/examples/cms-tina/components/hero-post.js
index 93ee21ff53..815a113dde 100644
--- a/examples/cms-tina/components/hero-post.js
+++ b/examples/cms-tina/components/hero-post.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import DateFormatter from '../components/date-formatter'
-import CoverImage from '../components/cover-image'
-import Link from 'next/link'
+import Avatar from "../components/avatar";
+import DateFormatter from "../components/date-formatter";
+import CoverImage from "../components/cover-image";
+import Link from "next/link";
 
 export default function HeroPost({
   title,
@@ -39,5 +39,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-tina/components/intro.js b/examples/cms-tina/components/intro.js
index 048fc170a1..0bf69244a6 100644
--- a/examples/cms-tina/components/intro.js
+++ b/examples/cms-tina/components/intro.js
@@ -1,4 +1,4 @@
-import { CMS_NAME } from '../lib/constants'
+import { CMS_NAME } from "../lib/constants";
 
 export default function Intro() {
   return (
@@ -7,15 +7,15 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
+        </a>{" "}
         and {CMS_NAME}.
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-tina/components/layout.js b/examples/cms-tina/components/layout.js
index 99d9535313..a2e161c793 100644
--- a/examples/cms-tina/components/layout.js
+++ b/examples/cms-tina/components/layout.js
@@ -1,6 +1,6 @@
-import Alert from '../components/alert'
-import Footer from '../components/footer'
-import Meta from '../components/meta'
+import Alert from "../components/alert";
+import Footer from "../components/footer";
+import Meta from "../components/meta";
 
 export default function Layout({ preview, children }) {
   return (
@@ -12,5 +12,5 @@ export default function Layout({ preview, children }) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-tina/components/meta.js b/examples/cms-tina/components/meta.js
index 349fc3d73a..b7838e3aa7 100644
--- a/examples/cms-tina/components/meta.js
+++ b/examples/cms-tina/components/meta.js
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "../lib/constants";
 
 export default function Meta() {
   return (
@@ -38,5 +38,5 @@ export default function Meta() {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-tina/components/more-stories.js b/examples/cms-tina/components/more-stories.js
index 57fdbb6c46..87b94578e3 100644
--- a/examples/cms-tina/components/more-stories.js
+++ b/examples/cms-tina/components/more-stories.js
@@ -1,4 +1,4 @@
-import PostPreview from '../components/post-preview'
+import PostPreview from "../components/post-preview";
 
 export default function MoreStories({ posts }) {
   return (
@@ -20,5 +20,5 @@ export default function MoreStories({ posts }) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-tina/components/post-body.js b/examples/cms-tina/components/post-body.js
index 4cc2bb52bc..45b5a1fb95 100644
--- a/examples/cms-tina/components/post-body.js
+++ b/examples/cms-tina/components/post-body.js
@@ -1,12 +1,12 @@
-import markdownStyles from './markdown-styles.module.css'
+import markdownStyles from "./markdown-styles.module.css";
 
 export default function PostBody({ content }) {
   return (
     <div className="max-w-2xl mx-auto">
       <div
-        className={markdownStyles['markdown']}
+        className={markdownStyles["markdown"]}
         dangerouslySetInnerHTML={{ __html: content }}
       />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-tina/components/post-header.js b/examples/cms-tina/components/post-header.js
index 76789f7a98..ec2c7c2642 100644
--- a/examples/cms-tina/components/post-header.js
+++ b/examples/cms-tina/components/post-header.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import DateFormatter from '../components/date-formatter'
-import CoverImage from '../components/cover-image'
-import PostTitle from '../components/post-title'
+import Avatar from "../components/avatar";
+import DateFormatter from "../components/date-formatter";
+import CoverImage from "../components/cover-image";
+import PostTitle from "../components/post-title";
 
 export default function PostHeader({ title, coverImage, date, author }) {
   return (
@@ -22,5 +22,5 @@ export default function PostHeader({ title, coverImage, date, author }) {
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-tina/components/post-preview.js b/examples/cms-tina/components/post-preview.js
index d1b5b53c8f..1eae6d408e 100644
--- a/examples/cms-tina/components/post-preview.js
+++ b/examples/cms-tina/components/post-preview.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import DateFormatter from '../components/date-formatter'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "../components/avatar";
+import DateFormatter from "../components/date-formatter";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function PostPreview({
   title,
@@ -33,5 +33,5 @@ export default function PostPreview({
       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
       <Avatar name={author.name} picture={author.picture} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-tina/components/post-title.js b/examples/cms-tina/components/post-title.js
index edd8cba65c..a15f06616f 100644
--- a/examples/cms-tina/components/post-title.js
+++ b/examples/cms-tina/components/post-title.js
@@ -3,5 +3,5 @@ export default function PostTitle({ children }) {
     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
-  )
+  );
 }
diff --git a/examples/cms-tina/components/section-separator.js b/examples/cms-tina/components/section-separator.js
index 4ca5c65fdc..b86fb50b7d 100644
--- a/examples/cms-tina/components/section-separator.js
+++ b/examples/cms-tina/components/section-separator.js
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }
diff --git a/examples/cms-tina/lib/api.js b/examples/cms-tina/lib/api.js
index b9612a8ac5..7e31107cbd 100644
--- a/examples/cms-tina/lib/api.js
+++ b/examples/cms-tina/lib/api.js
@@ -1,43 +1,43 @@
-import fs from 'fs'
-import { join } from 'path'
-import matter from 'gray-matter'
+import fs from "fs";
+import { join } from "path";
+import matter from "gray-matter";
 
-const postsDirectory = join(process.cwd(), '_posts')
+const postsDirectory = join(process.cwd(), "_posts");
 
 export function getPostSlugs() {
-  return fs.readdirSync(postsDirectory)
+  return fs.readdirSync(postsDirectory);
 }
 
 export function getPostBySlug(slug, fields = []) {
-  const realSlug = slug.replace(/\.md$/, '')
-  const fullPath = join(postsDirectory, `${realSlug}.md`)
-  const fileContents = fs.readFileSync(fullPath, 'utf8')
-  const { data, content } = matter(fileContents)
+  const realSlug = slug.replace(/\.md$/, "");
+  const fullPath = join(postsDirectory, `${realSlug}.md`);
+  const fileContents = fs.readFileSync(fullPath, "utf8");
+  const { data, content } = matter(fileContents);
 
-  const items = {}
+  const items = {};
 
   // Ensure only the minimal needed data is exposed
   fields.forEach((field) => {
-    if (field === 'slug') {
-      items[field] = realSlug
+    if (field === "slug") {
+      items[field] = realSlug;
     }
-    if (field === 'content') {
-      items[field] = content
+    if (field === "content") {
+      items[field] = content;
     }
 
-    if (typeof data[field] !== 'undefined') {
-      items[field] = data[field]
+    if (typeof data[field] !== "undefined") {
+      items[field] = data[field];
     }
-  })
+  });
 
-  return items
+  return items;
 }
 
 export function getAllPosts(fields = []) {
-  const slugs = getPostSlugs()
+  const slugs = getPostSlugs();
   const posts = slugs
     .map((slug) => getPostBySlug(slug, fields))
     // sort posts by date in descending order
-    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
-  return posts
+    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1));
+  return posts;
 }
diff --git a/examples/cms-tina/lib/constants.js b/examples/cms-tina/lib/constants.js
index 671a9c22b4..2d5af67a9b 100644
--- a/examples/cms-tina/lib/constants.js
+++ b/examples/cms-tina/lib/constants.js
@@ -1,4 +1,4 @@
-export const EXAMPLE_PATH = 'cms-tina'
-export const CMS_NAME = 'Tina'
+export const EXAMPLE_PATH = "cms-tina";
+export const CMS_NAME = "Tina";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20Starter%20Example.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg'
+  "https://og-image.vercel.app/Next.js%20Blog%20Starter%20Example.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg";
diff --git a/examples/cms-tina/lib/markdownToHtml.js b/examples/cms-tina/lib/markdownToHtml.js
index 735fed2df3..fe3948ba7d 100644
--- a/examples/cms-tina/lib/markdownToHtml.js
+++ b/examples/cms-tina/lib/markdownToHtml.js
@@ -1,7 +1,7 @@
-import { remark } from 'remark'
-import html from 'remark-html'
+import { remark } from "remark";
+import html from "remark-html";
 
 export default async function markdownToHtml(markdown) {
-  const result = await remark().use(html).process(markdown)
-  return result.toString()
+  const result = await remark().use(html).process(markdown);
+  return result.toString();
 }
diff --git a/examples/cms-tina/pages/_app.js b/examples/cms-tina/pages/_app.js
index 8ad946c7eb..485d60837f 100644
--- a/examples/cms-tina/pages/_app.js
+++ b/examples/cms-tina/pages/_app.js
@@ -1,12 +1,12 @@
-import Tina from '../.tina/components/TinaDynamicProvider.js'
+import Tina from "../.tina/components/TinaDynamicProvider.js";
 
-import '../styles/index.css'
+import "../styles/index.css";
 const App = ({ Component, pageProps }) => {
   return (
     <Tina>
       <Component {...pageProps} />
     </Tina>
-  )
-}
+  );
+};
 
-export default App
+export default App;
diff --git a/examples/cms-tina/pages/_document.js b/examples/cms-tina/pages/_document.js
index 54e8bf3e2a..b2fff8b426 100644
--- a/examples/cms-tina/pages/_document.js
+++ b/examples/cms-tina/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/cms-tina/pages/admin.js b/examples/cms-tina/pages/admin.js
index edebe7a815..27cdfa86f9 100644
--- a/examples/cms-tina/pages/admin.js
+++ b/examples/cms-tina/pages/admin.js
@@ -1,2 +1,2 @@
-import { TinaAdmin } from 'tinacms'
-export default TinaAdmin
+import { TinaAdmin } from "tinacms";
+export default TinaAdmin;
diff --git a/examples/cms-tina/pages/index.js b/examples/cms-tina/pages/index.js
index 681a1b6585..12c985bdba 100644
--- a/examples/cms-tina/pages/index.js
+++ b/examples/cms-tina/pages/index.js
@@ -1,15 +1,15 @@
-import Container from '../components/container'
-import MoreStories from '../components/more-stories'
-import HeroPost from '../components/hero-post'
-import Intro from '../components/intro'
-import Layout from '../components/layout'
-import { getAllPosts } from '../lib/api'
-import Head from 'next/head'
-import { CMS_NAME } from '../lib/constants'
+import Container from "../components/container";
+import MoreStories from "../components/more-stories";
+import HeroPost from "../components/hero-post";
+import Intro from "../components/intro";
+import Layout from "../components/layout";
+import { getAllPosts } from "../lib/api";
+import Head from "next/head";
+import { CMS_NAME } from "../lib/constants";
 
 export default function Index({ allPosts }) {
-  const heroPost = allPosts[0]
-  const morePosts = allPosts.slice(1)
+  const heroPost = allPosts[0];
+  const morePosts = allPosts.slice(1);
   return (
     <>
       <Layout>
@@ -32,20 +32,20 @@ export default function Index({ allPosts }) {
         </Container>
       </Layout>
     </>
-  )
+  );
 }
 
 export async function getStaticProps() {
   const allPosts = getAllPosts([
-    'title',
-    'date',
-    'slug',
-    'author',
-    'coverImage',
-    'excerpt',
-  ])
+    "title",
+    "date",
+    "slug",
+    "author",
+    "coverImage",
+    "excerpt",
+  ]);
 
   return {
     props: { allPosts },
-  }
+  };
 }
diff --git a/examples/cms-tina/pages/posts/[slug].js b/examples/cms-tina/pages/posts/[slug].js
index d6498c61c3..2b9cb597da 100644
--- a/examples/cms-tina/pages/posts/[slug].js
+++ b/examples/cms-tina/pages/posts/[slug].js
@@ -1,20 +1,20 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import Container from '../../components/container'
-import PostBody from '../../components/post-body'
-import Header from '../../components/header'
-import PostHeader from '../../components/post-header'
-import Layout from '../../components/layout'
-import { getPostBySlug, getAllPosts } from '../../lib/api'
-import PostTitle from '../../components/post-title'
-import Head from 'next/head'
-import { CMS_NAME } from '../../lib/constants'
-import markdownToHtml from '../../lib/markdownToHtml'
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Container from "../../components/container";
+import PostBody from "../../components/post-body";
+import Header from "../../components/header";
+import PostHeader from "../../components/post-header";
+import Layout from "../../components/layout";
+import { getPostBySlug, getAllPosts } from "../../lib/api";
+import PostTitle from "../../components/post-title";
+import Head from "next/head";
+import { CMS_NAME } from "../../lib/constants";
+import markdownToHtml from "../../lib/markdownToHtml";
 
 export default function Post({ post, morePosts, preview }) {
-  const router = useRouter()
+  const router = useRouter();
   if (!router.isFallback && !post?.slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
   return (
     <Layout preview={preview}>
@@ -43,20 +43,20 @@ export default function Post({ post, morePosts, preview }) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps({ params }) {
   const post = getPostBySlug(params.slug, [
-    'title',
-    'date',
-    'slug',
-    'author',
-    'content',
-    'ogImage',
-    'coverImage',
-  ])
-  const content = await markdownToHtml(post.content || '')
+    "title",
+    "date",
+    "slug",
+    "author",
+    "content",
+    "ogImage",
+    "coverImage",
+  ]);
+  const content = await markdownToHtml(post.content || "");
 
   return {
     props: {
@@ -65,11 +65,11 @@ export async function getStaticProps({ params }) {
         content,
       },
     },
-  }
+  };
 }
 
 export async function getStaticPaths() {
-  const posts = getAllPosts(['slug'])
+  const posts = getAllPosts(["slug"]);
 
   return {
     paths: posts.map((post) => {
@@ -77,8 +77,8 @@ export async function getStaticPaths() {
         params: {
           slug: post.slug,
         },
-      }
+      };
     }),
     fallback: false,
-  }
+  };
 }
diff --git a/examples/cms-tina/postcss.config.js b/examples/cms-tina/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-tina/postcss.config.js
+++ b/examples/cms-tina/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-tina/tailwind.config.js b/examples/cms-tina/tailwind.config.js
index 24ef0704e9..a2cc9a5ff1 100644
--- a/examples/cms-tina/tailwind.config.js
+++ b/examples/cms-tina/tailwind.config.js
@@ -1,34 +1,34 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./components/**/*.js', './pages/**/*.js'],
+  content: ["./components/**/*.js", "./pages/**/*.js"],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        sm: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        md: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        sm: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        md: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
-}
+};
diff --git a/examples/cms-umbraco-heartcore/components/alert.js b/examples/cms-umbraco-heartcore/components/alert.js
index b924cb097f..8e8729368f 100755
--- a/examples/cms-umbraco-heartcore/components/alert.js
+++ b/examples/cms-umbraco-heartcore/components/alert.js
@@ -1,31 +1,31 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Alert({ preview }) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This page is a preview.{' '}
+              This page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -38,5 +38,5 @@ export default function Alert({ preview }) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-umbraco-heartcore/components/avatar.js b/examples/cms-umbraco-heartcore/components/avatar.js
index 6777f50313..edd075a80b 100755
--- a/examples/cms-umbraco-heartcore/components/avatar.js
+++ b/examples/cms-umbraco-heartcore/components/avatar.js
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Avatar({ name, picture }) {
   return (
@@ -13,5 +13,5 @@ export default function Avatar({ name, picture }) {
       </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-umbraco-heartcore/components/container.js b/examples/cms-umbraco-heartcore/components/container.js
index fc1c29dfb0..92e559ece3 100755
--- a/examples/cms-umbraco-heartcore/components/container.js
+++ b/examples/cms-umbraco-heartcore/components/container.js
@@ -1,3 +1,3 @@
 export default function Container({ children }) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }
diff --git a/examples/cms-umbraco-heartcore/components/cover-image.js b/examples/cms-umbraco-heartcore/components/cover-image.js
index 6dc53de0a7..003c04f346 100755
--- a/examples/cms-umbraco-heartcore/components/cover-image.js
+++ b/examples/cms-umbraco-heartcore/components/cover-image.js
@@ -1,6 +1,6 @@
-import cn from 'classnames'
-import Link from 'next/link'
-import Image from 'next/image'
+import cn from "classnames";
+import Link from "next/link";
+import Image from "next/image";
 
 export default function CoverImage({ title, url, slug }) {
   const image = (
@@ -8,12 +8,12 @@ export default function CoverImage({ title, url, slug }) {
       width={2000}
       height={1000}
       alt={`Cover Image for ${title}`}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": slug,
       })}
       src={url}
     />
-  )
+  );
 
   return (
     <div className="sm:mx-0">
@@ -25,5 +25,5 @@ export default function CoverImage({ title, url, slug }) {
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-umbraco-heartcore/components/date.js b/examples/cms-umbraco-heartcore/components/date.js
index 0ec71d3747..35955a7892 100755
--- a/examples/cms-umbraco-heartcore/components/date.js
+++ b/examples/cms-umbraco-heartcore/components/date.js
@@ -1,6 +1,6 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
 export default function Date({ dateString }) {
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "LLLL d, yyyy")}</time>;
 }
diff --git a/examples/cms-umbraco-heartcore/components/footer.js b/examples/cms-umbraco-heartcore/components/footer.js
index da9eed88ec..81422c7c6b 100755
--- a/examples/cms-umbraco-heartcore/components/footer.js
+++ b/examples/cms-umbraco-heartcore/components/footer.js
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Footer() {
   return (
@@ -26,5 +26,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-umbraco-heartcore/components/header.js b/examples/cms-umbraco-heartcore/components/header.js
index 05cb9af247..e6dea52099 100755
--- a/examples/cms-umbraco-heartcore/components/header.js
+++ b/examples/cms-umbraco-heartcore/components/header.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-umbraco-heartcore/components/hero-post.js b/examples/cms-umbraco-heartcore/components/hero-post.js
index ebfdf1f642..58716f3452 100755
--- a/examples/cms-umbraco-heartcore/components/hero-post.js
+++ b/examples/cms-umbraco-heartcore/components/hero-post.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
-import Link from 'next/link'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "../components/cover-image";
+import Link from "next/link";
 
 export default function HeroPost({
   title,
@@ -33,5 +33,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-umbraco-heartcore/components/intro.js b/examples/cms-umbraco-heartcore/components/intro.js
index 5931b3c596..e8578bef66 100755
--- a/examples/cms-umbraco-heartcore/components/intro.js
+++ b/examples/cms-umbraco-heartcore/components/intro.js
@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '../lib/constants'
+import { CMS_NAME, CMS_URL } from "../lib/constants";
 
 export default function Intro() {
   return (
@@ -7,14 +7,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -24,5 +24,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-umbraco-heartcore/components/layout.js b/examples/cms-umbraco-heartcore/components/layout.js
index 99d9535313..a2e161c793 100755
--- a/examples/cms-umbraco-heartcore/components/layout.js
+++ b/examples/cms-umbraco-heartcore/components/layout.js
@@ -1,6 +1,6 @@
-import Alert from '../components/alert'
-import Footer from '../components/footer'
-import Meta from '../components/meta'
+import Alert from "../components/alert";
+import Footer from "../components/footer";
+import Meta from "../components/meta";
 
 export default function Layout({ preview, children }) {
   return (
@@ -12,5 +12,5 @@ export default function Layout({ preview, children }) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-umbraco-heartcore/components/meta.js b/examples/cms-umbraco-heartcore/components/meta.js
index d9c48d5831..a95395d8b9 100755
--- a/examples/cms-umbraco-heartcore/components/meta.js
+++ b/examples/cms-umbraco-heartcore/components/meta.js
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "../lib/constants";
 
 export default function Meta() {
   return (
@@ -38,5 +38,5 @@ export default function Meta() {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-umbraco-heartcore/components/more-stories.js b/examples/cms-umbraco-heartcore/components/more-stories.js
index 57fdbb6c46..87b94578e3 100755
--- a/examples/cms-umbraco-heartcore/components/more-stories.js
+++ b/examples/cms-umbraco-heartcore/components/more-stories.js
@@ -1,4 +1,4 @@
-import PostPreview from '../components/post-preview'
+import PostPreview from "../components/post-preview";
 
 export default function MoreStories({ posts }) {
   return (
@@ -20,5 +20,5 @@ export default function MoreStories({ posts }) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-umbraco-heartcore/components/post-body.js b/examples/cms-umbraco-heartcore/components/post-body.js
index 30c9b59f6d..a99fef9b7f 100755
--- a/examples/cms-umbraco-heartcore/components/post-body.js
+++ b/examples/cms-umbraco-heartcore/components/post-body.js
@@ -1,4 +1,4 @@
-import postStyles from './post-styles.module.css'
+import postStyles from "./post-styles.module.css";
 
 export default function PostBody({ content }) {
   return (
@@ -6,5 +6,5 @@ export default function PostBody({ content }) {
       className={`max-w-2xl mx-auto post ${postStyles.post}`}
       dangerouslySetInnerHTML={{ __html: content }}
     />
-  )
+  );
 }
diff --git a/examples/cms-umbraco-heartcore/components/post-header.js b/examples/cms-umbraco-heartcore/components/post-header.js
index 1b8b1b91f6..9ed89a86c7 100755
--- a/examples/cms-umbraco-heartcore/components/post-header.js
+++ b/examples/cms-umbraco-heartcore/components/post-header.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from '../components/cover-image'
-import PostTitle from '../components/post-title'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "../components/cover-image";
+import PostTitle from "../components/post-title";
 
 export default function PostHeader({ title, coverImage, date, author }) {
   return (
@@ -22,5 +22,5 @@ export default function PostHeader({ title, coverImage, date, author }) {
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-umbraco-heartcore/components/post-preview.js b/examples/cms-umbraco-heartcore/components/post-preview.js
index b2c95606f1..dfd69c15f7 100755
--- a/examples/cms-umbraco-heartcore/components/post-preview.js
+++ b/examples/cms-umbraco-heartcore/components/post-preview.js
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import Date from '../components/date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "../components/avatar";
+import Date from "../components/date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function PostPreview({
   title,
@@ -27,5 +27,5 @@ export default function PostPreview({
       <p className="mb-4 text-lg leading-relaxed">{excerpt}</p>
       <Avatar name={author.name} picture={author.picture.url} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-umbraco-heartcore/components/post-title.js b/examples/cms-umbraco-heartcore/components/post-title.js
index edd8cba65c..a15f06616f 100755
--- a/examples/cms-umbraco-heartcore/components/post-title.js
+++ b/examples/cms-umbraco-heartcore/components/post-title.js
@@ -3,5 +3,5 @@ export default function PostTitle({ children }) {
     <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
       {children}
     </h1>
-  )
+  );
 }
diff --git a/examples/cms-umbraco-heartcore/components/section-separator.js b/examples/cms-umbraco-heartcore/components/section-separator.js
index 4ca5c65fdc..b86fb50b7d 100755
--- a/examples/cms-umbraco-heartcore/components/section-separator.js
+++ b/examples/cms-umbraco-heartcore/components/section-separator.js
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }
diff --git a/examples/cms-umbraco-heartcore/lib/constants.js b/examples/cms-umbraco-heartcore/lib/constants.js
index 920e3c83f3..d72f78fb80 100755
--- a/examples/cms-umbraco-heartcore/lib/constants.js
+++ b/examples/cms-umbraco-heartcore/lib/constants.js
@@ -1,5 +1,5 @@
-export const EXAMPLE_PATH = 'cms-umbraco-heartcore'
-export const CMS_NAME = 'Umbraco Heartcore'
-export const CMS_URL = 'https://umbraco.com/heartcore'
+export const EXAMPLE_PATH = "cms-umbraco-heartcore";
+export const CMS_NAME = "Umbraco Heartcore";
+export const CMS_URL = "https://umbraco.com/heartcore";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**Umbraco%20Heartcore**.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https://media.umbraco.io/demo-headless/8d8a349dde73ca6/u_heartcore_heart_lockup_tagline_dark.svg'
+  "https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**Umbraco%20Heartcore**.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https://media.umbraco.io/demo-headless/8d8a349dde73ca6/u_heartcore_heart_lockup_tagline_dark.svg";
diff --git a/examples/cms-umbraco-heartcore/lib/umbraco-heartcore.js b/examples/cms-umbraco-heartcore/lib/umbraco-heartcore.js
index 9d6d1f4340..81f3049100 100755
--- a/examples/cms-umbraco-heartcore/lib/umbraco-heartcore.js
+++ b/examples/cms-umbraco-heartcore/lib/umbraco-heartcore.js
@@ -1,24 +1,24 @@
 async function fetchAPI(query, { variables, preview } = {}) {
-  const res = await fetch('https://graphql.umbraco.io', {
-    method: 'POST',
+  const res = await fetch("https://graphql.umbraco.io", {
+    method: "POST",
     headers: {
-      'Content-Type': 'application/json',
-      'Api-Key': process.env.UMBRACO_API_KEY,
-      'Umb-Project-Alias': process.env.UMBRACO_PROJECT_ALIAS,
+      "Content-Type": "application/json",
+      "Api-Key": process.env.UMBRACO_API_KEY,
+      "Umb-Project-Alias": process.env.UMBRACO_PROJECT_ALIAS,
     },
     body: JSON.stringify({
       query,
       variables,
     }),
-  })
-  const json = await res.json()
+  });
+  const json = await res.json();
 
   if (json.errors) {
-    console.error(json.errors)
-    throw new Error('Failed to fetch API')
+    console.error(json.errors);
+    throw new Error("Failed to fetch API");
   }
 
-  return json.data
+  return json.data;
 }
 
 export async function getPreviewPostBySlug(slug) {
@@ -34,9 +34,9 @@ export async function getPreviewPostBySlug(slug) {
       variables: {
         slug,
       },
-    }
-  )
-  return data.post
+    },
+  );
+  return data.post;
 }
 
 export async function getAllPostsWithSlug() {
@@ -50,8 +50,8 @@ export async function getAllPostsWithSlug() {
         }
       }
     }
-  `)
-  return data.allPost.edges.map((x) => x.node)
+  `);
+  return data.allPost.edges.map((x) => x.node);
 }
 
 export async function getAllPostsForHome(preview) {
@@ -86,9 +86,9 @@ export async function getAllPostsForHome(preview) {
       variables: {
         preview,
       },
-    }
-  )
-  return data.allPost.edges.map((e) => e.node)
+    },
+  );
+  return data.allPost.edges.map((e) => e.node);
 }
 
 export async function getPostAndMorePosts(slug, preview) {
@@ -142,12 +142,12 @@ export async function getPostAndMorePosts(slug, preview) {
       preview,
       variables: {
         preview,
-        slug: `/${slug.join('/')}/`,
+        slug: `/${slug.join("/")}/`,
       },
-    }
-  )
+    },
+  );
   return {
     post: data.post,
     morePosts: data.morePosts.edges.map((e) => e.node),
-  }
+  };
 }
diff --git a/examples/cms-umbraco-heartcore/next.config.js b/examples/cms-umbraco-heartcore/next.config.js
index a2166e08cb..b016a68f66 100644
--- a/examples/cms-umbraco-heartcore/next.config.js
+++ b/examples/cms-umbraco-heartcore/next.config.js
@@ -3,11 +3,11 @@ module.exports = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'media.umbraco.io',
-        port: '',
-        pathname: '/my-account/**',
+        protocol: "https",
+        hostname: "media.umbraco.io",
+        port: "",
+        pathname: "/my-account/**",
       },
     ],
   },
-}
+};
diff --git a/examples/cms-umbraco-heartcore/pages/[...slug].js b/examples/cms-umbraco-heartcore/pages/[...slug].js
index 87671dfaff..99127667ad 100755
--- a/examples/cms-umbraco-heartcore/pages/[...slug].js
+++ b/examples/cms-umbraco-heartcore/pages/[...slug].js
@@ -1,22 +1,25 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import Container from 'components/container'
-import PostBody from 'components/post-body'
-import MoreStories from 'components/more-stories'
-import Header from 'components/header'
-import PostHeader from 'components/post-header'
-import SectionSeparator from 'components/section-separator'
-import Layout from 'components/layout'
-import { getAllPostsWithSlug, getPostAndMorePosts } from 'lib/umbraco-heartcore'
-import PostTitle from 'components/post-title'
-import Head from 'next/head'
-import { CMS_NAME } from 'lib/constants'
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Container from "components/container";
+import PostBody from "components/post-body";
+import MoreStories from "components/more-stories";
+import Header from "components/header";
+import PostHeader from "components/post-header";
+import SectionSeparator from "components/section-separator";
+import Layout from "components/layout";
+import {
+  getAllPostsWithSlug,
+  getPostAndMorePosts,
+} from "lib/umbraco-heartcore";
+import PostTitle from "components/post-title";
+import Head from "next/head";
+import { CMS_NAME } from "lib/constants";
 
 export default function Post({ post, morePosts, preview }) {
-  const router = useRouter()
+  const router = useRouter();
 
   if (!router.isFallback && !post?.slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
 
   return (
@@ -48,24 +51,24 @@ export default function Post({ post, morePosts, preview }) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps({ params, preview = false }) {
-  const data = await getPostAndMorePosts(params.slug, preview)
+  const data = await getPostAndMorePosts(params.slug, preview);
   return {
     props: {
       preview,
       post: data.post,
       morePosts: data.morePosts || [],
     },
-  }
+  };
 }
 
 export async function getStaticPaths() {
-  const posts = await getAllPostsWithSlug()
+  const posts = await getAllPostsWithSlug();
   return {
     paths: posts.map(({ slug }) => slug),
     fallback: true,
-  }
+  };
 }
diff --git a/examples/cms-umbraco-heartcore/pages/_app.js b/examples/cms-umbraco-heartcore/pages/_app.js
index d56d9bf601..aa7931ca32 100755
--- a/examples/cms-umbraco-heartcore/pages/_app.js
+++ b/examples/cms-umbraco-heartcore/pages/_app.js
@@ -1,7 +1,7 @@
-import '../styles/index.css'
+import "../styles/index.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-umbraco-heartcore/pages/_document.js b/examples/cms-umbraco-heartcore/pages/_document.js
index 54e8bf3e2a..b2fff8b426 100755
--- a/examples/cms-umbraco-heartcore/pages/_document.js
+++ b/examples/cms-umbraco-heartcore/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/cms-umbraco-heartcore/pages/api/exit-preview.js b/examples/cms-umbraco-heartcore/pages/api/exit-preview.js
index fccc016b69..ba4a2bdf59 100755
--- a/examples/cms-umbraco-heartcore/pages/api/exit-preview.js
+++ b/examples/cms-umbraco-heartcore/pages/api/exit-preview.js
@@ -1,8 +1,8 @@
 export default async function handler(_, res) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-umbraco-heartcore/pages/api/preview.js b/examples/cms-umbraco-heartcore/pages/api/preview.js
index 53b9940800..a07de3d5c7 100755
--- a/examples/cms-umbraco-heartcore/pages/api/preview.js
+++ b/examples/cms-umbraco-heartcore/pages/api/preview.js
@@ -1,4 +1,4 @@
-import { getPreviewPostBySlug } from '../../lib/umbraco-heartcore'
+import { getPreviewPostBySlug } from "../../lib/umbraco-heartcore";
 
 export default async function handler(req, res) {
   // Check the secret and next parameters
@@ -7,22 +7,22 @@ export default async function handler(req, res) {
     req.query.secret !== process.env.UMBRACO_PREVIEW_SECRET ||
     !req.query.slug
   ) {
-    return res.status(401).json({ message: 'Invalid token' })
+    return res.status(401).json({ message: "Invalid token" });
   }
 
   // Fetch the headless CMS to check if the provided `slug` exists
-  const post = await getPreviewPostBySlug(req.query.slug)
+  const post = await getPreviewPostBySlug(req.query.slug);
 
   // If the slug doesn't exist prevent preview mode from being enabled
   if (!post) {
-    return res.status(401).json({ message: 'Invalid slug' })
+    return res.status(401).json({ message: "Invalid slug" });
   }
 
   // Enable Draft Mode by setting the cookie
-  res.setDraftMode({ enable: true })
+  res.setDraftMode({ enable: true });
 
   // Redirect to the path from the fetched post
   // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
-  res.writeHead(307, { Location: post.slug })
-  res.end()
+  res.writeHead(307, { Location: post.slug });
+  res.end();
 }
diff --git a/examples/cms-umbraco-heartcore/pages/index.js b/examples/cms-umbraco-heartcore/pages/index.js
index c650245c5d..68d0f94e57 100755
--- a/examples/cms-umbraco-heartcore/pages/index.js
+++ b/examples/cms-umbraco-heartcore/pages/index.js
@@ -1,15 +1,15 @@
-import Container from '../components/container'
-import MoreStories from '../components/more-stories'
-import HeroPost from '../components/hero-post'
-import Intro from '../components/intro'
-import Layout from '../components/layout'
-import { getAllPostsForHome } from '../lib/umbraco-heartcore'
-import Head from 'next/head'
-import { CMS_NAME } from '../lib/constants'
+import Container from "../components/container";
+import MoreStories from "../components/more-stories";
+import HeroPost from "../components/hero-post";
+import Intro from "../components/intro";
+import Layout from "../components/layout";
+import { getAllPostsForHome } from "../lib/umbraco-heartcore";
+import Head from "next/head";
+import { CMS_NAME } from "../lib/constants";
 
 export default function Index({ posts, preview }) {
-  const heroPost = posts[0]
-  const morePosts = posts.slice(1)
+  const heroPost = posts[0];
+  const morePosts = posts.slice(1);
   return (
     <>
       <Layout preview={preview}>
@@ -32,12 +32,12 @@ export default function Index({ posts, preview }) {
         </Container>
       </Layout>
     </>
-  )
+  );
 }
 
 export async function getStaticProps({ preview = false }) {
-  const posts = (await getAllPostsForHome(preview)) || []
+  const posts = (await getAllPostsForHome(preview)) || [];
   return {
     props: { posts, preview },
-  }
+  };
 }
diff --git a/examples/cms-umbraco-heartcore/postcss.config.js b/examples/cms-umbraco-heartcore/postcss.config.js
index 3fa0a9514d..3687d286ec 100755
--- a/examples/cms-umbraco-heartcore/postcss.config.js
+++ b/examples/cms-umbraco-heartcore/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-umbraco-heartcore/tailwind.config.js b/examples/cms-umbraco-heartcore/tailwind.config.js
index ea0efae6d7..a8f65a525d 100755
--- a/examples/cms-umbraco-heartcore/tailwind.config.js
+++ b/examples/cms-umbraco-heartcore/tailwind.config.js
@@ -1,38 +1,38 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/cms-webiny/README.md b/examples/cms-webiny/README.md
index 9de9e1efe2..813eec132d 100644
--- a/examples/cms-webiny/README.md
+++ b/examples/cms-webiny/README.md
@@ -57,7 +57,7 @@ pnpm create next-app --example cms-webiny cms-webiny-app
 
 Follow the [Webiny docs](https://www.webiny.com/docs/tutorials/install-webiny) to install a Webiny project on your cloud hosting provider. Because Webiny is a distributed system we don't run it locally. This also means you don't need to worry about setting up Docker, or installing databases and drivers on your local machine for Postgres, MongoDB or similar. The cloud takes care of that for you.
 
-If you get stuck or have any questions, please [join the community](http://webiny-community.slack.com 'Webiny slack channel') and reach out for some help.
+If you get stuck or have any questions, please [join the community](http://webiny-community.slack.com "Webiny slack channel") and reach out for some help.
 
 Once you have an app up and running click into the "HeadlessCMS" app in the sidebar, click on _models_ and add the following models and fields:
 
diff --git a/examples/cms-webiny/components/alert.tsx b/examples/cms-webiny/components/alert.tsx
index 018eae66ad..e8936c3699 100644
--- a/examples/cms-webiny/components/alert.tsx
+++ b/examples/cms-webiny/components/alert.tsx
@@ -1,31 +1,31 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Alert({ preview }) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-sm text-center">
           {preview ? (
             <>
-              This page is a preview.{' '}
+              This page is a preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline transition-colors duration-200 hover:text-cyan"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline transition-colors duration-200 hover:text-success"
@@ -38,5 +38,5 @@ export default function Alert({ preview }) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-webiny/components/avatar.tsx b/examples/cms-webiny/components/avatar.tsx
index 228e601437..ac70a97f65 100644
--- a/examples/cms-webiny/components/avatar.tsx
+++ b/examples/cms-webiny/components/avatar.tsx
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 export default function Avatar({ name, picture }) {
   return (
     <div className="flex items-center">
@@ -11,5 +11,5 @@ export default function Avatar({ name, picture }) {
       />
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-webiny/components/container.tsx b/examples/cms-webiny/components/container.tsx
index c3ed24c051..aa1a04af30 100644
--- a/examples/cms-webiny/components/container.tsx
+++ b/examples/cms-webiny/components/container.tsx
@@ -1,3 +1,3 @@
 export default function Container({ children }) {
-  return <div className="container px-5 mx-auto">{children}</div>
+  return <div className="container px-5 mx-auto">{children}</div>;
 }
diff --git a/examples/cms-webiny/components/cover-image.tsx b/examples/cms-webiny/components/cover-image.tsx
index 882bcf40ec..565cd15aaf 100644
--- a/examples/cms-webiny/components/cover-image.tsx
+++ b/examples/cms-webiny/components/cover-image.tsx
@@ -1,14 +1,14 @@
-import cn from 'classnames'
-import Link from 'next/link'
-import Image from 'next/image'
+import cn from "classnames";
+import Link from "next/link";
+import Image from "next/image";
 
 export type TCoverImage = {
-  title: string
-  src: string
-  slug?: string
-  height: number
-  width: number
-}
+  title: string;
+  src: string;
+  slug?: string;
+  height: number;
+  width: number;
+};
 
 const CoverImage: React.FC<TCoverImage> = ({
   title,
@@ -21,14 +21,14 @@ const CoverImage: React.FC<TCoverImage> = ({
     <Image
       src={src}
       alt={`Cover Image for ${title}`}
-      className={cn('shadow-sm', {
-        'hover:shadow-md transition-shadow duration-200': slug,
+      className={cn("shadow-sm", {
+        "hover:shadow-md transition-shadow duration-200": slug,
       })}
       layout="responsive"
       width={width}
       height={height}
     />
-  )
+  );
   return (
     <div className="sm:mx-0">
       {slug ? (
@@ -39,6 +39,6 @@ const CoverImage: React.FC<TCoverImage> = ({
         image
       )}
     </div>
-  )
-}
-export default CoverImage
+  );
+};
+export default CoverImage;
diff --git a/examples/cms-webiny/components/date-formatter.tsx b/examples/cms-webiny/components/date-formatter.tsx
index f91f2fbcb3..0f4380f2c9 100644
--- a/examples/cms-webiny/components/date-formatter.tsx
+++ b/examples/cms-webiny/components/date-formatter.tsx
@@ -1,10 +1,10 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
 export default function DateFormatter({ dateString }) {
   if (!dateString) {
-    return null
+    return null;
   }
-  const date = parseISO(dateString)
-  const formattedDate = format(date, 'LLLL	d, yyyy')
-  return <time dateTime={dateString}>{formattedDate}</time>
+  const date = parseISO(dateString);
+  const formattedDate = format(date, "LLLL	d, yyyy");
+  return <time dateTime={dateString}>{formattedDate}</time>;
 }
diff --git a/examples/cms-webiny/components/footer.tsx b/examples/cms-webiny/components/footer.tsx
index ca1e8bac51..4daedc6928 100644
--- a/examples/cms-webiny/components/footer.tsx
+++ b/examples/cms-webiny/components/footer.tsx
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Footer() {
   return (
@@ -26,5 +26,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-webiny/components/header.tsx b/examples/cms-webiny/components/header.tsx
index 7b72a4e8de..0d45d1def9 100644
--- a/examples/cms-webiny/components/header.tsx
+++ b/examples/cms-webiny/components/header.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-webiny/components/hero-post.tsx b/examples/cms-webiny/components/hero-post.tsx
index 0174598535..e5b8b25b29 100644
--- a/examples/cms-webiny/components/hero-post.tsx
+++ b/examples/cms-webiny/components/hero-post.tsx
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import DateFormatter from '../components/date-formatter'
-import CoverImage from '../components/cover-image'
-import Link from 'next/link'
+import Avatar from "../components/avatar";
+import DateFormatter from "../components/date-formatter";
+import CoverImage from "../components/cover-image";
+import Link from "next/link";
 
 export default function HeroPost({
   title,
@@ -39,5 +39,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-webiny/components/intro.tsx b/examples/cms-webiny/components/intro.tsx
index 01759fd8fa..bd9e688b65 100644
--- a/examples/cms-webiny/components/intro.tsx
+++ b/examples/cms-webiny/components/intro.tsx
@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '../lib/constants'
+import { CMS_NAME, CMS_URL } from "../lib/constants";
 
 export default function Intro() {
   return (
@@ -7,14 +7,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="mt-5 text-lg text-center md:text-left md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline transition-colors duration-200 hover:text-success"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline transition-colors duration-200 hover:text-success"
@@ -24,5 +24,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-webiny/components/layout.tsx b/examples/cms-webiny/components/layout.tsx
index 99d9535313..a2e161c793 100644
--- a/examples/cms-webiny/components/layout.tsx
+++ b/examples/cms-webiny/components/layout.tsx
@@ -1,6 +1,6 @@
-import Alert from '../components/alert'
-import Footer from '../components/footer'
-import Meta from '../components/meta'
+import Alert from "../components/alert";
+import Footer from "../components/footer";
+import Meta from "../components/meta";
 
 export default function Layout({ preview, children }) {
   return (
@@ -12,5 +12,5 @@ export default function Layout({ preview, children }) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-webiny/components/meta.tsx b/examples/cms-webiny/components/meta.tsx
index 349fc3d73a..b7838e3aa7 100644
--- a/examples/cms-webiny/components/meta.tsx
+++ b/examples/cms-webiny/components/meta.tsx
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "../lib/constants";
 
 export default function Meta() {
   return (
@@ -38,5 +38,5 @@ export default function Meta() {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-webiny/components/more-stories.tsx b/examples/cms-webiny/components/more-stories.tsx
index 79c512139d..7d604c2db0 100644
--- a/examples/cms-webiny/components/more-stories.tsx
+++ b/examples/cms-webiny/components/more-stories.tsx
@@ -1,4 +1,4 @@
-import PostPreview from '../components/post-preview'
+import PostPreview from "../components/post-preview";
 
 export default function MoreStories({ posts }) {
   return (
@@ -20,5 +20,5 @@ export default function MoreStories({ posts }) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-webiny/components/post-body.tsx b/examples/cms-webiny/components/post-body.tsx
index 7c6f522064..8860de834c 100644
--- a/examples/cms-webiny/components/post-body.tsx
+++ b/examples/cms-webiny/components/post-body.tsx
@@ -1,12 +1,12 @@
-import markdownStyles from './markdown-styles.module.css'
-import { RichTextRenderer } from '../lib/rich-text-renderer'
+import markdownStyles from "./markdown-styles.module.css";
+import { RichTextRenderer } from "../lib/rich-text-renderer";
 
 export default function PostBody({ content }) {
   return (
     <div className="max-w-2xl mx-auto">
-      <div className={markdownStyles['markdown']}>
+      <div className={markdownStyles["markdown"]}>
         <RichTextRenderer data={content} />
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-webiny/components/post-header.tsx b/examples/cms-webiny/components/post-header.tsx
index 388cfce31b..75668e944a 100644
--- a/examples/cms-webiny/components/post-header.tsx
+++ b/examples/cms-webiny/components/post-header.tsx
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import DateFormatter from '../components/date-formatter'
-import CoverImage from '../components/cover-image'
-import PostTitle from '../components/post-title'
+import Avatar from "../components/avatar";
+import DateFormatter from "../components/date-formatter";
+import CoverImage from "../components/cover-image";
+import PostTitle from "../components/post-title";
 
 export default function PostHeader({ title, coverImage, date, author }) {
   return (
@@ -22,5 +22,5 @@ export default function PostHeader({ title, coverImage, date, author }) {
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-webiny/components/post-preview.tsx b/examples/cms-webiny/components/post-preview.tsx
index 48076164b9..6810515fd8 100644
--- a/examples/cms-webiny/components/post-preview.tsx
+++ b/examples/cms-webiny/components/post-preview.tsx
@@ -1,7 +1,7 @@
-import Avatar from '../components/avatar'
-import DateFormatter from '../components/date-formatter'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "../components/avatar";
+import DateFormatter from "../components/date-formatter";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function PostPreview({
   title,
@@ -33,5 +33,5 @@ export default function PostPreview({
       <p className="mb-4 text-lg leading-relaxed">{excerpt}</p>
       <Avatar name={author.name} picture={author.picture} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-webiny/components/post-title.tsx b/examples/cms-webiny/components/post-title.tsx
index c104c09f45..7fc9c887d4 100644
--- a/examples/cms-webiny/components/post-title.tsx
+++ b/examples/cms-webiny/components/post-title.tsx
@@ -3,5 +3,5 @@ export default function PostTitle({ children }) {
     <h1 className="mb-12 text-6xl font-bold leading-tight tracking-tighter text-center md:text-7xl lg:text-8xl md:leading-none md:text-left">
       {children}
     </h1>
-  )
+  );
 }
diff --git a/examples/cms-webiny/components/section-separator.tsx b/examples/cms-webiny/components/section-separator.tsx
index 29d4c38cdb..5f623fb782 100644
--- a/examples/cms-webiny/components/section-separator.tsx
+++ b/examples/cms-webiny/components/section-separator.tsx
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="mb-24 border-accent-2 mt-28" />
+  return <hr className="mb-24 border-accent-2 mt-28" />;
 }
diff --git a/examples/cms-webiny/lib/api.ts b/examples/cms-webiny/lib/api.ts
index d8e7cdbf82..bbedb1a3c4 100644
--- a/examples/cms-webiny/lib/api.ts
+++ b/examples/cms-webiny/lib/api.ts
@@ -1,31 +1,31 @@
 async function fetchAPI(
   query: string,
   { variables } = {} as any,
-  preview: boolean
+  preview: boolean,
 ) {
   const url = preview
     ? `${process.env.NEXT_PUBLIC_WEBINY_PREVIEW_API_URL}`
-    : `${process.env.NEXT_PUBLIC_WEBINY_API_UR}`
+    : `${process.env.NEXT_PUBLIC_WEBINY_API_UR}`;
 
   const res = await fetch(url, {
-    method: 'POST',
+    method: "POST",
     headers: {
-      'Content-Type': 'application/json',
+      "Content-Type": "application/json",
       Authorization: `Bearer ${process.env.WEBINY_API_SECRET}`,
     },
     body: JSON.stringify({
       query,
       variables,
     }),
-  })
+  });
 
-  const json = await res.json()
+  const json = await res.json();
   if (json.errors) {
-    console.error(json.errors)
-    throw new Error('Failed to fetch API')
+    console.error(json.errors);
+    throw new Error("Failed to fetch API");
   }
 
-  return json.data
+  return json.data;
 }
 
 export async function getAllPostsWithSlug() {
@@ -40,9 +40,9 @@ export async function getAllPostsWithSlug() {
       }
     `,
     {},
-    false
-  )
-  return data?.listPosts.data
+    false,
+  );
+  return data?.listPosts.data;
 }
 
 export async function getAllPostsForHome(preview) {
@@ -66,9 +66,9 @@ export async function getAllPostsForHome(preview) {
       }
     `,
     {},
-    preview
-  )
-  return data.listPosts.data
+    preview,
+  );
+  return data.listPosts.data;
 }
 
 export async function getPostBySlug(slug, preview) {
@@ -114,7 +114,7 @@ export async function getPostBySlug(slug, preview) {
         },
       },
     },
-    preview
-  )
-  return data
+    preview,
+  );
+  return data;
 }
diff --git a/examples/cms-webiny/lib/constants.ts b/examples/cms-webiny/lib/constants.ts
index e8969da20a..7fd6fcf97d 100644
--- a/examples/cms-webiny/lib/constants.ts
+++ b/examples/cms-webiny/lib/constants.ts
@@ -1,5 +1,5 @@
-export const EXAMPLE_PATH = 'cms-webiny'
-export const CMS_NAME = 'Webiny'
-export const CMS_URL = 'https://www.webiny.com/'
+export const EXAMPLE_PATH = "cms-webiny";
+export const CMS_NAME = "Webiny";
+export const CMS_URL = "https://www.webiny.com/";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20Starter%20Example.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg'
+  "https://og-image.vercel.app/Next.js%20Blog%20Starter%20Example.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg";
diff --git a/examples/cms-webiny/lib/rich-text-renderer.tsx b/examples/cms-webiny/lib/rich-text-renderer.tsx
index 6474a2162b..5744c78fb3 100644
--- a/examples/cms-webiny/lib/rich-text-renderer.tsx
+++ b/examples/cms-webiny/lib/rich-text-renderer.tsx
@@ -1,36 +1,36 @@
-import * as React from 'react'
-import classNames from 'classnames'
+import * as React from "react";
+import classNames from "classnames";
 
 const renderParagraph = (block) => {
-  const props = { style: {}, className: '' }
+  const props = { style: {}, className: "" };
 
   if (block.data.textAlign) {
-    props.style['textAlign'] = block.data.textAlign
+    props.style["textAlign"] = block.data.textAlign;
   }
   if (block.data.className) {
-    props.className = block.data.className
+    props.className = block.data.className;
   }
   return (
     <p
       {...props}
-      className={classNames('rte-block-paragraph', props.className)}
+      className={classNames("rte-block-paragraph", props.className)}
       dangerouslySetInnerHTML={{ __html: block.data.text }}
     />
-  )
-}
+  );
+};
 
 const renderDelimiter = () => {
-  return <div className="rte-block-delimiter" />
-}
+  return <div className="rte-block-delimiter" />;
+};
 
 const renderHeader = (block) => {
-  const props = { style: {}, className: '' }
+  const props = { style: {}, className: "" };
 
   if (block.data.textAlign) {
-    props.style['textAlign'] = block.data.textAlign
+    props.style["textAlign"] = block.data.textAlign;
   }
   if (block.data.className) {
-    props.className = block.data.className
+    props.className = block.data.className;
   }
 
   switch (block.data.level) {
@@ -40,11 +40,11 @@ const renderHeader = (block) => {
           {...props}
           className={classNames(
             props.className,
-            'rte-block-heading rte-block-heading--h1'
+            "rte-block-heading rte-block-heading--h1",
           )}
           dangerouslySetInnerHTML={{ __html: block.data.text }}
         />
-      )
+      );
 
     case 2:
       return (
@@ -52,11 +52,11 @@ const renderHeader = (block) => {
           {...props}
           className={classNames(
             props.className,
-            'rte-block-heading rte-block-heading--h2'
+            "rte-block-heading rte-block-heading--h2",
           )}
           dangerouslySetInnerHTML={{ __html: block.data.text }}
         />
-      )
+      );
 
     case 3:
       return (
@@ -64,11 +64,11 @@ const renderHeader = (block) => {
           {...props}
           className={classNames(
             props.className,
-            'rte-block-heading rte-block-heading--h3'
+            "rte-block-heading rte-block-heading--h3",
           )}
           dangerouslySetInnerHTML={{ __html: block.data.text }}
         />
-      )
+      );
 
     case 4:
       return (
@@ -76,11 +76,11 @@ const renderHeader = (block) => {
           {...props}
           className={classNames(
             props.className,
-            'rte-block-heading rte-block-heading--h4'
+            "rte-block-heading rte-block-heading--h4",
           )}
           dangerouslySetInnerHTML={{ __html: block.data.text }}
         />
-      )
+      );
 
     case 5:
       return (
@@ -88,11 +88,11 @@ const renderHeader = (block) => {
           {...props}
           className={classNames(
             props.className,
-            'rte-block-heading rte-block-heading--h5'
+            "rte-block-heading rte-block-heading--h5",
           )}
           dangerouslySetInnerHTML={{ __html: block.data.text }}
         />
-      )
+      );
 
     case 6:
       return (
@@ -100,56 +100,56 @@ const renderHeader = (block) => {
           {...props}
           className={classNames(
             props.className,
-            'rte-block-heading rte-block-heading--h6'
+            "rte-block-heading rte-block-heading--h6",
           )}
           dangerouslySetInnerHTML={{ __html: block.data.text }}
         />
-      )
+      );
     default:
-      return null
+      return null;
   }
-}
+};
 
 function renderImage(block) {
   return (
     <img
-      className={'rte-block-image'}
+      className={"rte-block-image"}
       alt={block.data.caption}
       src={block.data.file}
     />
-  )
+  );
 }
 
 function renderList(block) {
   switch (block.data.style) {
-    case 'unordered':
+    case "unordered":
       return (
-        <ul className={'rte-block-list'}>
+        <ul className={"rte-block-list"}>
           {block.data.items.map((text, i) => (
             <li key={i}>{text}</li>
           ))}
         </ul>
-      )
+      );
 
-    case 'ordered':
+    case "ordered":
       return (
-        <ol className={'rte-block-list'}>
+        <ol className={"rte-block-list"}>
           {block.data.items.map((text, i) => (
             <li key={i}>{text}</li>
           ))}
         </ol>
-      )
+      );
     default:
-      return null
+      return null;
   }
 }
 
 function renderQuote(block) {
   return (
-    <blockquote className={'rte-block-blockquote'}>
+    <blockquote className={"rte-block-blockquote"}>
       <p>{block.data.text}</p>
     </blockquote>
-  )
+  );
 }
 
 const defaultRenderers = {
@@ -159,27 +159,27 @@ const defaultRenderers = {
   list: renderList,
   paragraph: renderParagraph,
   quote: renderQuote,
-}
+};
 
 export const RichTextRenderer = (props) => {
   // Combine default renderers with custom renderers
-  const renderers = Object.assign({}, defaultRenderers, props.renderers)
+  const renderers = Object.assign({}, defaultRenderers, props.renderers);
 
   return (
     <React.Fragment>
       {props.data.map((block, index) => {
-        const renderer = renderers[block.type]
+        const renderer = renderers[block.type];
         if (!renderer) {
-          return null
+          return null;
         }
 
-        const node = renderer(block)
+        const node = renderer(block);
         if (React.isValidElement(node)) {
-          return React.cloneElement(node, { key: index })
+          return React.cloneElement(node, { key: index });
         }
 
-        return null
+        return null;
       })}
     </React.Fragment>
-  )
-}
+  );
+};
diff --git a/examples/cms-webiny/next.config.js b/examples/cms-webiny/next.config.js
index 0f0006d097..3f1c243a2c 100644
--- a/examples/cms-webiny/next.config.js
+++ b/examples/cms-webiny/next.config.js
@@ -2,10 +2,10 @@ module.exports = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'myaccount.cloudfront.net',
-        port: '',
+        protocol: "https",
+        hostname: "myaccount.cloudfront.net",
+        port: "",
       },
     ],
   },
-}
+};
diff --git a/examples/cms-webiny/pages/_app.tsx b/examples/cms-webiny/pages/_app.tsx
index 70a3fbbda0..3844f96512 100644
--- a/examples/cms-webiny/pages/_app.tsx
+++ b/examples/cms-webiny/pages/_app.tsx
@@ -1,5 +1,5 @@
-import '../styles/globals.css'
+import "../styles/globals.css";
 
 export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/cms-webiny/pages/api/exit-preview.ts b/examples/cms-webiny/pages/api/exit-preview.ts
index a63a171ba4..16b744e88e 100644
--- a/examples/cms-webiny/pages/api/exit-preview.ts
+++ b/examples/cms-webiny/pages/api/exit-preview.ts
@@ -1,8 +1,8 @@
 export default async function exit(_, res) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-webiny/pages/api/preview.ts b/examples/cms-webiny/pages/api/preview.ts
index 3a014494e9..68d2a91018 100644
--- a/examples/cms-webiny/pages/api/preview.ts
+++ b/examples/cms-webiny/pages/api/preview.ts
@@ -1,25 +1,25 @@
-import { getPostBySlug } from '../../lib/api'
+import { getPostBySlug } from "../../lib/api";
 
 export default async function preview(req, res) {
   // Check the secret and next parameters
   // This secret should only be known to this API route and the CMS
   if (req.query.secret !== process.env.PREVIEW_API_SECRET || !req.query.slug) {
-    return res.status(401).json({ message: 'Invalid token' })
+    return res.status(401).json({ message: "Invalid token" });
   }
 
   // Fetch the headless CMS to check if the provided `slug` exists
-  const { post } = await getPostBySlug(req.query.slug, true)
+  const { post } = await getPostBySlug(req.query.slug, true);
 
   // If the slug doesn't exist prevent preview mode from being enabled
   if (!post) {
-    return res.status(401).json({ message: 'Invalid slug' })
+    return res.status(401).json({ message: "Invalid slug" });
   }
 
   // Enable Draft Mode by setting the cookie
-  res.setDraftMode({ enable: true })
+  res.setDraftMode({ enable: true });
 
   // Redirect to the path from the fetched post
   // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
-  res.writeHead(307, { Location: `/posts/${post.data.slug}` })
-  res.end()
+  res.writeHead(307, { Location: `/posts/${post.data.slug}` });
+  res.end();
 }
diff --git a/examples/cms-webiny/pages/index.tsx b/examples/cms-webiny/pages/index.tsx
index ecb81ca5c9..8e7c3d7b6a 100644
--- a/examples/cms-webiny/pages/index.tsx
+++ b/examples/cms-webiny/pages/index.tsx
@@ -1,15 +1,15 @@
-import Container from '../components/container'
-import MoreStories from '../components/more-stories'
-import HeroPost from '../components/hero-post'
-import Intro from '../components/intro'
-import Layout from '../components/layout'
-import { getAllPostsForHome } from '../lib/api'
-import Head from 'next/head'
-import { CMS_NAME } from '../lib/constants'
+import Container from "../components/container";
+import MoreStories from "../components/more-stories";
+import HeroPost from "../components/hero-post";
+import Intro from "../components/intro";
+import Layout from "../components/layout";
+import { getAllPostsForHome } from "../lib/api";
+import Head from "next/head";
+import { CMS_NAME } from "../lib/constants";
 
 export default function Index({ allPosts, preview }) {
-  const heroPost = allPosts[0]
-  const morePosts = allPosts.slice(1)
+  const heroPost = allPosts[0];
+  const morePosts = allPosts.slice(1);
   return (
     <>
       <Layout preview={preview}>
@@ -32,13 +32,13 @@ export default function Index({ allPosts, preview }) {
         </Container>
       </Layout>
     </>
-  )
+  );
 }
 
 export async function getStaticProps({ preview }) {
-  const allPosts = await getAllPostsForHome(preview)
+  const allPosts = await getAllPostsForHome(preview);
 
   return {
     props: { allPosts, preview },
-  }
+  };
 }
diff --git a/examples/cms-webiny/pages/posts/[slug].tsx b/examples/cms-webiny/pages/posts/[slug].tsx
index 737b70b1f0..2f03a7a374 100644
--- a/examples/cms-webiny/pages/posts/[slug].tsx
+++ b/examples/cms-webiny/pages/posts/[slug].tsx
@@ -1,21 +1,21 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import Container from '../../components/container'
-import PostBody from '../../components/post-body'
-import Header from '../../components/header'
-import PostHeader from '../../components/post-header'
-import MoreStories from '../../components/more-stories'
-import SectionSeparator from '../../components/section-separator'
-import Layout from '../../components/layout'
-import { getPostBySlug, getAllPostsWithSlug } from '../../lib/api'
-import PostTitle from '../../components/post-title'
-import Head from 'next/head'
-import { CMS_NAME } from '../../lib/constants'
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Container from "../../components/container";
+import PostBody from "../../components/post-body";
+import Header from "../../components/header";
+import PostHeader from "../../components/post-header";
+import MoreStories from "../../components/more-stories";
+import SectionSeparator from "../../components/section-separator";
+import Layout from "../../components/layout";
+import { getPostBySlug, getAllPostsWithSlug } from "../../lib/api";
+import PostTitle from "../../components/post-title";
+import Head from "next/head";
+import { CMS_NAME } from "../../lib/constants";
 
 export default function Post({ post, morePosts, preview }) {
-  const router = useRouter()
+  const router = useRouter();
   if (!router.isFallback && !post?.slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
   return (
     <Layout preview={preview}>
@@ -48,11 +48,11 @@ export default function Post({ post, morePosts, preview }) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
-  const data = await getPostBySlug(context.params.slug, context.preview)
+  const data = await getPostBySlug(context.params.slug, context.preview);
 
   return {
     props: {
@@ -62,11 +62,11 @@ export async function getStaticProps(context) {
       },
       morePosts: data.morePosts,
     },
-  }
+  };
 }
 
 export async function getStaticPaths() {
-  const allPosts = await getAllPostsWithSlug()
+  const allPosts = await getAllPostsWithSlug();
 
   return {
     paths: allPosts.map((post) => {
@@ -74,8 +74,8 @@ export async function getStaticPaths() {
         params: {
           slug: `/posts/${post.slug}`,
         },
-      }
+      };
     }),
     fallback: true,
-  }
+  };
 }
diff --git a/examples/cms-webiny/postcss.config.js b/examples/cms-webiny/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-webiny/postcss.config.js
+++ b/examples/cms-webiny/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-webiny/tailwind.config.js b/examples/cms-webiny/tailwind.config.js
index 73fc5a53fc..47c03a1539 100644
--- a/examples/cms-webiny/tailwind.config.js
+++ b/examples/cms-webiny/tailwind.config.js
@@ -1,37 +1,37 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './components/**/*.{js,ts,jsx,tsx}',
-    './pages/**/*.{js,ts,jsx,tsx}',
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        sm: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        md: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        sm: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        md: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
-}
+};
diff --git a/examples/cms-wordpress/components/alert.tsx b/examples/cms-wordpress/components/alert.tsx
index 8c986a2ce7..693f2df37f 100644
--- a/examples/cms-wordpress/components/alert.tsx
+++ b/examples/cms-wordpress/components/alert.tsx
@@ -1,31 +1,31 @@
-import Container from './container'
-import cn from 'classnames'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import cn from "classnames";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Alert({ preview }) {
   return (
     <div
-      className={cn('border-b', {
-        'bg-accent-7 border-accent-7 text-white': preview,
-        'bg-accent-1 border-accent-2': !preview,
+      className={cn("border-b", {
+        "bg-accent-7 border-accent-7 text-white": preview,
+        "bg-accent-1 border-accent-2": !preview,
       })}
     >
       <Container>
         <div className="py-2 text-center text-sm">
           {preview ? (
             <>
-              This is a page preview.{' '}
+              This is a page preview.{" "}
               <a
                 href="/api/exit-preview"
                 className="underline hover:text-cyan duration-200 transition-colors"
               >
                 Click here
-              </a>{' '}
+              </a>{" "}
               to exit preview mode.
             </>
           ) : (
             <>
-              The source code for this blog is{' '}
+              The source code for this blog is{" "}
               <a
                 href={`https://github.com/vercel/next.js/tree/canary/examples/${EXAMPLE_PATH}`}
                 className="underline hover:text-success duration-200 transition-colors"
@@ -38,5 +38,5 @@ export default function Alert({ preview }) {
         </div>
       </Container>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-wordpress/components/avatar.tsx b/examples/cms-wordpress/components/avatar.tsx
index 501f2d157b..cf6a1047e0 100644
--- a/examples/cms-wordpress/components/avatar.tsx
+++ b/examples/cms-wordpress/components/avatar.tsx
@@ -1,10 +1,11 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Avatar({ author }) {
-  const isAuthorHaveFullName = author?.node?.firstName && author?.node?.lastName
+  const isAuthorHaveFullName =
+    author?.node?.firstName && author?.node?.lastName;
   const name = isAuthorHaveFullName
     ? `${author.node.firstName} ${author.node.lastName}`
-    : author.node.name || null
+    : author.node.name || null;
 
   return (
     <div className="flex items-center">
@@ -18,5 +19,5 @@ export default function Avatar({ author }) {
       </div>
       <div className="text-xl font-bold">{name}</div>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-wordpress/components/categories.tsx b/examples/cms-wordpress/components/categories.tsx
index 0beb1ff533..eed2be1392 100644
--- a/examples/cms-wordpress/components/categories.tsx
+++ b/examples/cms-wordpress/components/categories.tsx
@@ -12,5 +12,5 @@ export default function Categories({ categories }) {
         <span className="ml-1">{categories.edges.node.name}</span>
       )}
     </span>
-  )
+  );
 }
diff --git a/examples/cms-wordpress/components/container.tsx b/examples/cms-wordpress/components/container.tsx
index fc1c29dfb0..92e559ece3 100644
--- a/examples/cms-wordpress/components/container.tsx
+++ b/examples/cms-wordpress/components/container.tsx
@@ -1,3 +1,3 @@
 export default function Container({ children }) {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="container mx-auto px-5">{children}</div>;
 }
diff --git a/examples/cms-wordpress/components/cover-image.tsx b/examples/cms-wordpress/components/cover-image.tsx
index d70ae5d314..a23de144c1 100644
--- a/examples/cms-wordpress/components/cover-image.tsx
+++ b/examples/cms-wordpress/components/cover-image.tsx
@@ -1,15 +1,15 @@
-import cn from 'classnames'
-import Image from 'next/image'
-import Link from 'next/link'
+import cn from "classnames";
+import Image from "next/image";
+import Link from "next/link";
 
 interface Props {
-  title: string
+  title: string;
   coverImage: {
     node: {
-      sourceUrl: string
-    }
-  }
-  slug?: string
+      sourceUrl: string;
+    };
+  };
+  slug?: string;
 }
 
 export default function CoverImage({ title, coverImage, slug }: Props) {
@@ -19,11 +19,11 @@ export default function CoverImage({ title, coverImage, slug }: Props) {
       height={1000}
       alt={`Cover Image for ${title}`}
       src={coverImage?.node.sourceUrl}
-      className={cn('shadow-small', {
-        'hover:shadow-medium transition-shadow duration-200': slug,
+      className={cn("shadow-small", {
+        "hover:shadow-medium transition-shadow duration-200": slug,
       })}
     />
-  )
+  );
   return (
     <div className="sm:mx-0">
       {slug ? (
@@ -34,5 +34,5 @@ export default function CoverImage({ title, coverImage, slug }: Props) {
         image
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/cms-wordpress/components/date.tsx b/examples/cms-wordpress/components/date.tsx
index eac5681378..5be2fe25ba 100644
--- a/examples/cms-wordpress/components/date.tsx
+++ b/examples/cms-wordpress/components/date.tsx
@@ -1,6 +1,6 @@
-import { parseISO, format } from 'date-fns'
+import { parseISO, format } from "date-fns";
 
 export default function Date({ dateString }) {
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL	d, yyyy')}</time>
+  const date = parseISO(dateString);
+  return <time dateTime={dateString}>{format(date, "LLLL	d, yyyy")}</time>;
 }
diff --git a/examples/cms-wordpress/components/footer.tsx b/examples/cms-wordpress/components/footer.tsx
index da9eed88ec..81422c7c6b 100644
--- a/examples/cms-wordpress/components/footer.tsx
+++ b/examples/cms-wordpress/components/footer.tsx
@@ -1,5 +1,5 @@
-import Container from './container'
-import { EXAMPLE_PATH } from '../lib/constants'
+import Container from "./container";
+import { EXAMPLE_PATH } from "../lib/constants";
 
 export default function Footer() {
   return (
@@ -26,5 +26,5 @@ export default function Footer() {
         </div>
       </Container>
     </footer>
-  )
+  );
 }
diff --git a/examples/cms-wordpress/components/header.tsx b/examples/cms-wordpress/components/header.tsx
index 05cb9af247..e6dea52099 100644
--- a/examples/cms-wordpress/components/header.tsx
+++ b/examples/cms-wordpress/components/header.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,5 +8,5 @@ export default function Header() {
       </Link>
       .
     </h2>
-  )
+  );
 }
diff --git a/examples/cms-wordpress/components/hero-post.tsx b/examples/cms-wordpress/components/hero-post.tsx
index 851cc7aa2b..482cfba750 100644
--- a/examples/cms-wordpress/components/hero-post.tsx
+++ b/examples/cms-wordpress/components/hero-post.tsx
@@ -1,7 +1,7 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function HeroPost({
   title,
@@ -40,5 +40,5 @@ export default function HeroPost({
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-wordpress/components/intro.tsx b/examples/cms-wordpress/components/intro.tsx
index 5931b3c596..e8578bef66 100644
--- a/examples/cms-wordpress/components/intro.tsx
+++ b/examples/cms-wordpress/components/intro.tsx
@@ -1,4 +1,4 @@
-import { CMS_NAME, CMS_URL } from '../lib/constants'
+import { CMS_NAME, CMS_URL } from "../lib/constants";
 
 export default function Intro() {
   return (
@@ -7,14 +7,14 @@ export default function Intro() {
         Blog.
       </h1>
       <h4 className="text-center md:text-left text-lg mt-5 md:pl-8">
-        A statically generated blog example using{' '}
+        A statically generated blog example using{" "}
         <a
           href="https://nextjs.org/"
           className="underline hover:text-success duration-200 transition-colors"
         >
           Next.js
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href={CMS_URL}
           className="underline hover:text-success duration-200 transition-colors"
@@ -24,5 +24,5 @@ export default function Intro() {
         .
       </h4>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-wordpress/components/layout.tsx b/examples/cms-wordpress/components/layout.tsx
index 399802b095..d9e7c4b074 100644
--- a/examples/cms-wordpress/components/layout.tsx
+++ b/examples/cms-wordpress/components/layout.tsx
@@ -1,6 +1,6 @@
-import Alert from './alert'
-import Footer from './footer'
-import Meta from './meta'
+import Alert from "./alert";
+import Footer from "./footer";
+import Meta from "./meta";
 
 export default function Layout({ preview, children }) {
   return (
@@ -12,5 +12,5 @@ export default function Layout({ preview, children }) {
       </div>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/cms-wordpress/components/meta.tsx b/examples/cms-wordpress/components/meta.tsx
index d9c48d5831..a95395d8b9 100644
--- a/examples/cms-wordpress/components/meta.tsx
+++ b/examples/cms-wordpress/components/meta.tsx
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { CMS_NAME, HOME_OG_IMAGE_URL } from '../lib/constants'
+import Head from "next/head";
+import { CMS_NAME, HOME_OG_IMAGE_URL } from "../lib/constants";
 
 export default function Meta() {
   return (
@@ -38,5 +38,5 @@ export default function Meta() {
       />
       <meta property="og:image" content={HOME_OG_IMAGE_URL} />
     </Head>
-  )
+  );
 }
diff --git a/examples/cms-wordpress/components/more-stories.tsx b/examples/cms-wordpress/components/more-stories.tsx
index 5304bfef42..12c4c6b79c 100644
--- a/examples/cms-wordpress/components/more-stories.tsx
+++ b/examples/cms-wordpress/components/more-stories.tsx
@@ -1,4 +1,4 @@
-import PostPreview from './post-preview'
+import PostPreview from "./post-preview";
 
 export default function MoreStories({ posts }) {
   return (
@@ -20,5 +20,5 @@ export default function MoreStories({ posts }) {
         ))}
       </div>
     </section>
-  )
+  );
 }
diff --git a/examples/cms-wordpress/components/post-body.tsx b/examples/cms-wordpress/components/post-body.tsx
index cc3a92b881..c7e94b6fe3 100644
--- a/examples/cms-wordpress/components/post-body.tsx
+++ b/examples/cms-wordpress/components/post-body.tsx
@@ -1,4 +1,4 @@
-import styles from './post-body.module.css'
+import styles from "./post-body.module.css";
 
 export default function PostBody({ content }) {
   return (
@@ -8,5 +8,5 @@ export default function PostBody({ content }) {
         dangerouslySetInnerHTML={{ __html: content }}
       />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-wordpress/components/post-header.tsx b/examples/cms-wordpress/components/post-header.tsx
index 38eed04cda..30726adf06 100644
--- a/examples/cms-wordpress/components/post-header.tsx
+++ b/examples/cms-wordpress/components/post-header.tsx
@@ -1,8 +1,8 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import PostTitle from './post-title'
-import Categories from './categories'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import PostTitle from "./post-title";
+import Categories from "./categories";
 
 export default function PostHeader({
   title,
@@ -30,5 +30,5 @@ export default function PostHeader({
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/cms-wordpress/components/post-preview.tsx b/examples/cms-wordpress/components/post-preview.tsx
index 89d741b6a9..e1da7c4d9d 100644
--- a/examples/cms-wordpress/components/post-preview.tsx
+++ b/examples/cms-wordpress/components/post-preview.tsx
@@ -1,7 +1,7 @@
-import Avatar from './avatar'
-import Date from './date'
-import CoverImage from './cover-image'
-import Link from 'next/link'
+import Avatar from "./avatar";
+import Date from "./date";
+import CoverImage from "./cover-image";
+import Link from "next/link";
 
 export default function PostPreview({
   title,
@@ -34,5 +34,5 @@ export default function PostPreview({
       />
       <Avatar author={author} />
     </div>
-  )
+  );
 }
diff --git a/examples/cms-wordpress/components/post-title.tsx b/examples/cms-wordpress/components/post-title.tsx
index 25893a3dd9..4be3275e54 100644
--- a/examples/cms-wordpress/components/post-title.tsx
+++ b/examples/cms-wordpress/components/post-title.tsx
@@ -4,5 +4,5 @@ export default function PostTitle({ children }) {
       className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left"
       dangerouslySetInnerHTML={{ __html: children }}
     />
-  )
+  );
 }
diff --git a/examples/cms-wordpress/components/section-separator.tsx b/examples/cms-wordpress/components/section-separator.tsx
index 4ca5c65fdc..b86fb50b7d 100644
--- a/examples/cms-wordpress/components/section-separator.tsx
+++ b/examples/cms-wordpress/components/section-separator.tsx
@@ -1,3 +1,3 @@
 export default function SectionSeparator() {
-  return <hr className="border-accent-2 mt-28 mb-24" />
+  return <hr className="border-accent-2 mt-28 mb-24" />;
 }
diff --git a/examples/cms-wordpress/components/tags.tsx b/examples/cms-wordpress/components/tags.tsx
index 4f5f35ccac..b3a1004b78 100644
--- a/examples/cms-wordpress/components/tags.tsx
+++ b/examples/cms-wordpress/components/tags.tsx
@@ -10,5 +10,5 @@ export default function Tags({ tags }) {
         ))}
       </p>
     </div>
-  )
+  );
 }
diff --git a/examples/cms-wordpress/lib/api.ts b/examples/cms-wordpress/lib/api.ts
index d74a8b4240..c42d8c5ed7 100644
--- a/examples/cms-wordpress/lib/api.ts
+++ b/examples/cms-wordpress/lib/api.ts
@@ -1,33 +1,33 @@
-const API_URL = process.env.WORDPRESS_API_URL
+const API_URL = process.env.WORDPRESS_API_URL;
 
-async function fetchAPI(query = '', { variables }: Record<string, any> = {}) {
-  const headers = { 'Content-Type': 'application/json' }
+async function fetchAPI(query = "", { variables }: Record<string, any> = {}) {
+  const headers = { "Content-Type": "application/json" };
 
   if (process.env.WORDPRESS_AUTH_REFRESH_TOKEN) {
     headers[
-      'Authorization'
-    ] = `Bearer ${process.env.WORDPRESS_AUTH_REFRESH_TOKEN}`
+      "Authorization"
+    ] = `Bearer ${process.env.WORDPRESS_AUTH_REFRESH_TOKEN}`;
   }
 
   // WPGraphQL Plugin must be enabled
   const res = await fetch(API_URL, {
     headers,
-    method: 'POST',
+    method: "POST",
     body: JSON.stringify({
       query,
       variables,
     }),
-  })
+  });
 
-  const json = await res.json()
+  const json = await res.json();
   if (json.errors) {
-    console.error(json.errors)
-    throw new Error('Failed to fetch API')
+    console.error(json.errors);
+    throw new Error("Failed to fetch API");
   }
-  return json.data
+  return json.data;
 }
 
-export async function getPreviewPost(id, idType = 'DATABASE_ID') {
+export async function getPreviewPost(id, idType = "DATABASE_ID") {
   const data = await fetchAPI(
     `
     query PreviewPost($id: ID!, $idType: PostIdType!) {
@@ -39,9 +39,9 @@ export async function getPreviewPost(id, idType = 'DATABASE_ID') {
     }`,
     {
       variables: { id, idType },
-    }
-  )
-  return data.post
+    },
+  );
+  return data.post;
 }
 
 export async function getAllPostsWithSlug() {
@@ -55,8 +55,8 @@ export async function getAllPostsWithSlug() {
         }
       }
     }
-  `)
-  return data?.posts
+  `);
+  return data?.posts;
 }
 
 export async function getAllPostsForHome(preview) {
@@ -95,21 +95,21 @@ export async function getAllPostsForHome(preview) {
         onlyEnabled: !preview,
         preview,
       },
-    }
-  )
+    },
+  );
 
-  return data?.posts
+  return data?.posts;
 }
 
 export async function getPostAndMorePosts(slug, preview, previewData) {
-  const postPreview = preview && previewData?.post
+  const postPreview = preview && previewData?.post;
   // The slug may be the id of an unpublished post
-  const isId = Number.isInteger(Number(slug))
+  const isId = Number.isInteger(Number(slug));
   const isSamePost = isId
     ? Number(slug) === postPreview.id
-    : slug === postPreview.slug
-  const isDraft = isSamePost && postPreview?.status === 'draft'
-  const isRevision = isSamePost && postPreview?.status === 'publish'
+    : slug === postPreview.slug;
+  const isDraft = isSamePost && postPreview?.status === "draft";
+  const isRevision = isSamePost && postPreview?.status === "publish";
   const data = await fetchAPI(
     `
     fragment AuthorFields on User {
@@ -173,7 +173,7 @@ export async function getPostAndMorePosts(slug, preview, previewData) {
           }
         }
         `
-            : ''
+            : ""
         }
       }
       posts(first: 3, where: { orderby: { field: DATE, order: DESC } }) {
@@ -188,25 +188,25 @@ export async function getPostAndMorePosts(slug, preview, previewData) {
     {
       variables: {
         id: isDraft ? postPreview.id : slug,
-        idType: isDraft ? 'DATABASE_ID' : 'SLUG',
+        idType: isDraft ? "DATABASE_ID" : "SLUG",
       },
-    }
-  )
+    },
+  );
 
   // Draft posts may not have an slug
-  if (isDraft) data.post.slug = postPreview.id
+  if (isDraft) data.post.slug = postPreview.id;
   // Apply a revision (changes in a published post)
   if (isRevision && data.post.revisions) {
-    const revision = data.post.revisions.edges[0]?.node
+    const revision = data.post.revisions.edges[0]?.node;
 
-    if (revision) Object.assign(data.post, revision)
-    delete data.post.revisions
+    if (revision) Object.assign(data.post, revision);
+    delete data.post.revisions;
   }
 
   // Filter out the main post
-  data.posts.edges = data.posts.edges.filter(({ node }) => node.slug !== slug)
+  data.posts.edges = data.posts.edges.filter(({ node }) => node.slug !== slug);
   // If there are still 3 posts, remove the last one
-  if (data.posts.edges.length > 2) data.posts.edges.pop()
+  if (data.posts.edges.length > 2) data.posts.edges.pop();
 
-  return data
+  return data;
 }
diff --git a/examples/cms-wordpress/lib/constants.ts b/examples/cms-wordpress/lib/constants.ts
index ce40e53ea5..bcda27941b 100644
--- a/examples/cms-wordpress/lib/constants.ts
+++ b/examples/cms-wordpress/lib/constants.ts
@@ -1,5 +1,5 @@
-export const EXAMPLE_PATH = 'cms-wordpress'
-export const CMS_NAME = 'WordPress'
-export const CMS_URL = 'https://wordpress.org'
+export const EXAMPLE_PATH = "cms-wordpress";
+export const CMS_NAME = "WordPress";
+export const CMS_URL = "https://wordpress.org";
 export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**WordPress**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=data%3Aimage%2Fsvg%2Bxml%2C%253C%253Fxml+version%3D%271.0%27+encoding%3D%27UTF-8%27%253F%253E%253Csvg+preserveAspectRatio%3D%27xMidYMid%27+version%3D%271.1%27+viewBox%3D%270+0+256+255%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%253E%253Cg+fill%3D%27%2523464342%27%253E%253Cpath+d%3D%27m18.124+127.5c0+43.295+25.161+80.711+61.646+98.441l-52.176-142.96c-6.0691+13.603-9.4699+28.657-9.4699+44.515zm183.22-5.5196c0-13.518-4.8557-22.88-9.0204-30.166-5.5446-9.01-10.742-16.64-10.742-25.65+0-10.055+7.6259-19.414+18.367-19.414+0.48494+0+0.94491+0.060358+1.4174+0.087415-19.46-17.828-45.387-28.714-73.863-28.714-38.213+0-71.832+19.606-91.39+49.302+2.5662+0.077008+4.9847+0.13112+7.039+0.13112+11.441+0+29.151-1.3882+29.151-1.3882+5.8963-0.34758+6.5915+8.3127+0.7014+9.01+0+0-5.9255+0.69724-12.519+1.0427l39.832+118.48+23.937-71.79-17.042-46.692c-5.8901-0.3455-11.47-1.0427-11.47-1.0427-5.8942-0.3455-5.2033-9.3575+0.69099-9.01+0+0+18.064+1.3882+28.811+1.3882+11.439+0+29.151-1.3882+29.151-1.3882+5.9005-0.34758+6.5936+8.3127+0.7014+9.01+0+0-5.938+0.69724-12.519+1.0427l39.528+117.58+10.91-36.458c4.7287-15.129+8.3273-25.995+8.3273-35.359zm-71.921+15.087l-32.818+95.363c9.7988+2.8805+20.162+4.4561+30.899+4.4561+12.738+0+24.953-2.202+36.323-6.2002-0.29346-0.46829-0.55987-0.96572-0.77841-1.5069l-33.625-92.112zm94.058-62.046c0.47037+3.4841+0.73678+7.2242+0.73678+11.247+0+11.1-2.073+23.577-8.3169+39.178l-33.411+96.599c32.518-18.963+54.391-54.193+54.391-94.545+0.002081-19.017-4.8557-36.899-13.399-52.48zm-95.977-75.023c-70.304+0-127.5+57.196-127.5+127.5+0+70.313+57.2+127.51+127.5+127.51+70.302+0+127.51-57.194+127.51-127.51-0.002082-70.304-57.209-127.5-127.51-127.5zm0+249.16c-67.08+0-121.66-54.578-121.66-121.66+0-67.08+54.576-121.65+121.66-121.65+67.078+0+121.65+54.574+121.65+121.65+0+67.084-54.574+121.66-121.65+121.66z%27%2F%253E%253C%2Fg%253E%253C%2Fsvg%253E'
+  "https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**WordPress**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=data%3Aimage%2Fsvg%2Bxml%2C%253C%253Fxml+version%3D%271.0%27+encoding%3D%27UTF-8%27%253F%253E%253Csvg+preserveAspectRatio%3D%27xMidYMid%27+version%3D%271.1%27+viewBox%3D%270+0+256+255%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%253E%253Cg+fill%3D%27%2523464342%27%253E%253Cpath+d%3D%27m18.124+127.5c0+43.295+25.161+80.711+61.646+98.441l-52.176-142.96c-6.0691+13.603-9.4699+28.657-9.4699+44.515zm183.22-5.5196c0-13.518-4.8557-22.88-9.0204-30.166-5.5446-9.01-10.742-16.64-10.742-25.65+0-10.055+7.6259-19.414+18.367-19.414+0.48494+0+0.94491+0.060358+1.4174+0.087415-19.46-17.828-45.387-28.714-73.863-28.714-38.213+0-71.832+19.606-91.39+49.302+2.5662+0.077008+4.9847+0.13112+7.039+0.13112+11.441+0+29.151-1.3882+29.151-1.3882+5.8963-0.34758+6.5915+8.3127+0.7014+9.01+0+0-5.9255+0.69724-12.519+1.0427l39.832+118.48+23.937-71.79-17.042-46.692c-5.8901-0.3455-11.47-1.0427-11.47-1.0427-5.8942-0.3455-5.2033-9.3575+0.69099-9.01+0+0+18.064+1.3882+28.811+1.3882+11.439+0+29.151-1.3882+29.151-1.3882+5.9005-0.34758+6.5936+8.3127+0.7014+9.01+0+0-5.938+0.69724-12.519+1.0427l39.528+117.58+10.91-36.458c4.7287-15.129+8.3273-25.995+8.3273-35.359zm-71.921+15.087l-32.818+95.363c9.7988+2.8805+20.162+4.4561+30.899+4.4561+12.738+0+24.953-2.202+36.323-6.2002-0.29346-0.46829-0.55987-0.96572-0.77841-1.5069l-33.625-92.112zm94.058-62.046c0.47037+3.4841+0.73678+7.2242+0.73678+11.247+0+11.1-2.073+23.577-8.3169+39.178l-33.411+96.599c32.518-18.963+54.391-54.193+54.391-94.545+0.002081-19.017-4.8557-36.899-13.399-52.48zm-95.977-75.023c-70.304+0-127.5+57.196-127.5+127.5+0+70.313+57.2+127.51+127.5+127.51+70.302+0+127.51-57.194+127.51-127.51-0.002082-70.304-57.209-127.5-127.51-127.5zm0+249.16c-67.08+0-121.66-54.578-121.66-121.66+0-67.08+54.576-121.65+121.66-121.65+67.078+0+121.65+54.574+121.65+121.65+0+67.084-54.574+121.66-121.65+121.66z%27%2F%253E%253C%2Fg%253E%253C%2Fsvg%253E";
diff --git a/examples/cms-wordpress/next.config.js b/examples/cms-wordpress/next.config.js
index 868a6455e1..c387e31e09 100644
--- a/examples/cms-wordpress/next.config.js
+++ b/examples/cms-wordpress/next.config.js
@@ -2,12 +2,12 @@ if (!URL.canParse(process.env.WORDPRESS_API_URL)) {
   throw new Error(`
     Please provide a valid WordPress instance URL.
     Add to your environment variables WORDPRESS_API_URL.
-  `)
+  `);
 }
 
 const { protocol, hostname, port, pathname } = new URL(
-  process.env.WORDPRESS_API_URL
-)
+  process.env.WORDPRESS_API_URL,
+);
 
 /** @type {import('next').NextConfig} */
 module.exports = {
@@ -21,4 +21,4 @@ module.exports = {
       },
     ],
   },
-}
+};
diff --git a/examples/cms-wordpress/pages/_app.tsx b/examples/cms-wordpress/pages/_app.tsx
index 0c585d4bb4..73ee234c2b 100644
--- a/examples/cms-wordpress/pages/_app.tsx
+++ b/examples/cms-wordpress/pages/_app.tsx
@@ -1,8 +1,8 @@
-import { AppProps } from 'next/app'
-import '../styles/index.css'
+import { AppProps } from "next/app";
+import "../styles/index.css";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/cms-wordpress/pages/_document.tsx b/examples/cms-wordpress/pages/_document.tsx
index 54e8bf3e2a..b2fff8b426 100644
--- a/examples/cms-wordpress/pages/_document.tsx
+++ b/examples/cms-wordpress/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/cms-wordpress/pages/api/exit-preview.ts b/examples/cms-wordpress/pages/api/exit-preview.ts
index d1207077f7..1d5e31d27b 100644
--- a/examples/cms-wordpress/pages/api/exit-preview.ts
+++ b/examples/cms-wordpress/pages/api/exit-preview.ts
@@ -1,10 +1,10 @@
-import { NextApiResponse } from 'next'
+import { NextApiResponse } from "next";
 
 export default async function exit(_, res: NextApiResponse) {
   // Exit Draft Mode by removing the cookie
-  res.setDraftMode({ enable: false })
+  res.setDraftMode({ enable: false });
 
   // Redirect the user back to the index page.
-  res.writeHead(307, { Location: '/' })
-  res.end()
+  res.writeHead(307, { Location: "/" });
+  res.end();
 }
diff --git a/examples/cms-wordpress/pages/api/preview.ts b/examples/cms-wordpress/pages/api/preview.ts
index df5d6d9590..a53a492d47 100644
--- a/examples/cms-wordpress/pages/api/preview.ts
+++ b/examples/cms-wordpress/pages/api/preview.ts
@@ -1,11 +1,11 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { getPreviewPost } from '../../lib/api'
+import type { NextApiRequest, NextApiResponse } from "next";
+import { getPreviewPost } from "../../lib/api";
 
 export default async function preview(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  const { secret, id, slug } = req.query
+  const { secret, id, slug } = req.query;
 
   // Check the secret and next parameters
   // This secret should only be known by this API route
@@ -14,15 +14,15 @@ export default async function preview(
     secret !== process.env.WORDPRESS_PREVIEW_SECRET ||
     (!id && !slug)
   ) {
-    return res.status(401).json({ message: 'Invalid token' })
+    return res.status(401).json({ message: "Invalid token" });
   }
 
   // Fetch WordPress to check if the provided `id` or `slug` exists
-  const post = await getPreviewPost(id || slug, id ? 'DATABASE_ID' : 'SLUG')
+  const post = await getPreviewPost(id || slug, id ? "DATABASE_ID" : "SLUG");
 
   // If the post doesn't exist prevent preview mode from being enabled
   if (!post) {
-    return res.status(401).json({ message: 'Post not found' })
+    return res.status(401).json({ message: "Post not found" });
   }
 
   // Enable Preview Mode by setting the cookies
@@ -32,10 +32,10 @@ export default async function preview(
       slug: post.slug,
       status: post.status,
     },
-  })
+  });
 
   // Redirect to the path from the fetched post
   // We don't redirect to `req.query.slug` as that might lead to open redirect vulnerabilities
-  res.writeHead(307, { Location: `/posts/${post.slug || post.databaseId}` })
-  res.end()
+  res.writeHead(307, { Location: `/posts/${post.slug || post.databaseId}` });
+  res.end();
 }
diff --git a/examples/cms-wordpress/pages/index.tsx b/examples/cms-wordpress/pages/index.tsx
index bc8d9c5500..904c4ac711 100644
--- a/examples/cms-wordpress/pages/index.tsx
+++ b/examples/cms-wordpress/pages/index.tsx
@@ -1,16 +1,16 @@
-import Head from 'next/head'
-import { GetStaticProps } from 'next'
-import Container from '../components/container'
-import MoreStories from '../components/more-stories'
-import HeroPost from '../components/hero-post'
-import Intro from '../components/intro'
-import Layout from '../components/layout'
-import { getAllPostsForHome } from '../lib/api'
-import { CMS_NAME } from '../lib/constants'
+import Head from "next/head";
+import { GetStaticProps } from "next";
+import Container from "../components/container";
+import MoreStories from "../components/more-stories";
+import HeroPost from "../components/hero-post";
+import Intro from "../components/intro";
+import Layout from "../components/layout";
+import { getAllPostsForHome } from "../lib/api";
+import { CMS_NAME } from "../lib/constants";
 
 export default function Index({ allPosts: { edges }, preview }) {
-  const heroPost = edges[0]?.node
-  const morePosts = edges.slice(1)
+  const heroPost = edges[0]?.node;
+  const morePosts = edges.slice(1);
 
   return (
     <Layout preview={preview}>
@@ -32,14 +32,14 @@ export default function Index({ allPosts: { edges }, preview }) {
         {morePosts.length > 0 && <MoreStories posts={morePosts} />}
       </Container>
     </Layout>
-  )
+  );
 }
 
 export const getStaticProps: GetStaticProps = async ({ preview = false }) => {
-  const allPosts = await getAllPostsForHome(preview)
+  const allPosts = await getAllPostsForHome(preview);
 
   return {
     props: { allPosts, preview },
     revalidate: 10,
-  }
-}
+  };
+};
diff --git a/examples/cms-wordpress/pages/posts/[slug].tsx b/examples/cms-wordpress/pages/posts/[slug].tsx
index a95dae358b..2dc02cb708 100644
--- a/examples/cms-wordpress/pages/posts/[slug].tsx
+++ b/examples/cms-wordpress/pages/posts/[slug].tsx
@@ -1,25 +1,25 @@
-import { useRouter } from 'next/router'
-import ErrorPage from 'next/error'
-import Head from 'next/head'
-import { GetStaticPaths, GetStaticProps } from 'next'
-import Container from '../../components/container'
-import PostBody from '../../components/post-body'
-import MoreStories from '../../components/more-stories'
-import Header from '../../components/header'
-import PostHeader from '../../components/post-header'
-import SectionSeparator from '../../components/section-separator'
-import Layout from '../../components/layout'
-import PostTitle from '../../components/post-title'
-import Tags from '../../components/tags'
-import { getAllPostsWithSlug, getPostAndMorePosts } from '../../lib/api'
-import { CMS_NAME } from '../../lib/constants'
+import { useRouter } from "next/router";
+import ErrorPage from "next/error";
+import Head from "next/head";
+import { GetStaticPaths, GetStaticProps } from "next";
+import Container from "../../components/container";
+import PostBody from "../../components/post-body";
+import MoreStories from "../../components/more-stories";
+import Header from "../../components/header";
+import PostHeader from "../../components/post-header";
+import SectionSeparator from "../../components/section-separator";
+import Layout from "../../components/layout";
+import PostTitle from "../../components/post-title";
+import Tags from "../../components/tags";
+import { getAllPostsWithSlug, getPostAndMorePosts } from "../../lib/api";
+import { CMS_NAME } from "../../lib/constants";
 
 export default function Post({ post, posts, preview }) {
-  const router = useRouter()
-  const morePosts = posts?.edges
+  const router = useRouter();
+  const morePosts = posts?.edges;
 
   if (!router.isFallback && !post?.slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
 
   return (
@@ -59,7 +59,7 @@ export default function Post({ post, posts, preview }) {
         )}
       </Container>
     </Layout>
-  )
+  );
 }
 
 export const getStaticProps: GetStaticProps = async ({
@@ -67,7 +67,7 @@ export const getStaticProps: GetStaticProps = async ({
   preview = false,
   previewData,
 }) => {
-  const data = await getPostAndMorePosts(params?.slug, preview, previewData)
+  const data = await getPostAndMorePosts(params?.slug, preview, previewData);
 
   return {
     props: {
@@ -76,14 +76,14 @@ export const getStaticProps: GetStaticProps = async ({
       posts: data.posts,
     },
     revalidate: 10,
-  }
-}
+  };
+};
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const allPosts = await getAllPostsWithSlug()
+  const allPosts = await getAllPostsWithSlug();
 
   return {
     paths: allPosts.edges.map(({ node }) => `/posts/${node.slug}`) || [],
     fallback: true,
-  }
-}
+  };
+};
diff --git a/examples/cms-wordpress/postcss.config.js b/examples/cms-wordpress/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/cms-wordpress/postcss.config.js
+++ b/examples/cms-wordpress/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/cms-wordpress/tailwind.config.js b/examples/cms-wordpress/tailwind.config.js
index ea0efae6d7..a8f65a525d 100644
--- a/examples/cms-wordpress/tailwind.config.js
+++ b/examples/cms-wordpress/tailwind.config.js
@@ -1,38 +1,38 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#EAEAEA',
-        'accent-7': '#333',
-        success: '#0070f3',
-        cyan: '#79FFE1',
+        "accent-1": "#FAFAFA",
+        "accent-2": "#EAEAEA",
+        "accent-7": "#333",
+        success: "#0070f3",
+        cyan: "#79FFE1",
       },
       spacing: {
-        28: '7rem',
+        28: "7rem",
       },
       letterSpacing: {
-        tighter: '-.04em',
+        tighter: "-.04em",
       },
       lineHeight: {
         tight: 1.2,
       },
       fontSize: {
-        '5xl': '2.5rem',
-        '6xl': '2.75rem',
-        '7xl': '4.5rem',
-        '8xl': '6.25rem',
+        "5xl": "2.5rem",
+        "6xl": "2.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6.25rem",
       },
       boxShadow: {
-        small: '0 5px 10px rgba(0, 0, 0, 0.12)',
-        medium: '0 8px 30px rgba(0, 0, 0, 0.12)',
+        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
+        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/convex/.prettierrc.json b/examples/convex/.prettierrc.json
deleted file mode 100644
index fd496a820e..0000000000
--- a/examples/convex/.prettierrc.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "singleQuote": true,
-  "semi": false
-}
diff --git a/examples/convex/convex/README.md b/examples/convex/convex/README.md
index 5713ecbd85..ad2f5846b0 100644
--- a/examples/convex/convex/README.md
+++ b/examples/convex/convex/README.md
@@ -7,8 +7,8 @@ A query function that takes two arguments looks like:
 
 ```ts
 // functions.js
-import { query } from './_generated/server'
-import { v } from 'convex/values'
+import { query } from "./_generated/server";
+import { v } from "convex/values";
 
 export const myQueryFunction = query({
   // Validators for arguments.
@@ -21,16 +21,16 @@ export const myQueryFunction = query({
   handler: async (ctx, args) => {
     // Read the database as many times as you need here.
     // See https://docs.convex.dev/database/reading-data.
-    const documents = await ctx.db.query('tablename').collect()
+    const documents = await ctx.db.query("tablename").collect();
 
     // Arguments passed from the client are properties of the args object.
-    console.log(args.first, args.second)
+    console.log(args.first, args.second);
 
     // Write arbitrary JavaScript here: filter, aggregate, build derived data,
     // remove non-public properties, or create new objects.
-    return documents
+    return documents;
   },
-})
+});
 ```
 
 Using this query function in a React component looks like:
@@ -38,16 +38,16 @@ Using this query function in a React component looks like:
 ```ts
 const data = useQuery(api.functions.myQueryFunction, {
   first: 10,
-  second: 'hello',
-})
+  second: "hello",
+});
 ```
 
 A mutation function looks like:
 
 ```ts
 // functions.js
-import { mutation } from './_generated/server'
-import { v } from 'convex/values'
+import { mutation } from "./_generated/server";
+import { v } from "convex/values";
 
 export const myMutationFunction = mutation({
   // Validators for arguments.
@@ -61,27 +61,27 @@ export const myMutationFunction = mutation({
     // Insert or modify documents in the database here.
     // Mutations can also read from the database like queries.
     // See https://docs.convex.dev/database/writing-data.
-    const message = { body: args.first, author: args.second }
-    const id = await ctx.db.insert('messages', message)
+    const message = { body: args.first, author: args.second };
+    const id = await ctx.db.insert("messages", message);
 
     // Optionally, return a value from your mutation.
-    return await ctx.db.get(id)
+    return await ctx.db.get(id);
   },
-})
+});
 ```
 
 Using this mutation function in a React component looks like:
 
 ```ts
-const mutation = useMutation(api.functions.myMutationFunction)
+const mutation = useMutation(api.functions.myMutationFunction);
 function handleButtonPress() {
   // fire and forget, the most common way to use mutations
-  mutation({ first: 'Hello!', second: 'me' })
+  mutation({ first: "Hello!", second: "me" });
   // OR
   // use the result once the mutation has completed
-  mutation({ first: 'Hello!', second: 'me' }).then((result) =>
-    console.log(result)
-  )
+  mutation({ first: "Hello!", second: "me" }).then((result) =>
+    console.log(result),
+  );
 }
 ```
 
diff --git a/examples/convex/convex/messages.ts b/examples/convex/convex/messages.ts
index 01faf2ae90..6c355a93ac 100644
--- a/examples/convex/convex/messages.ts
+++ b/examples/convex/convex/messages.ts
@@ -1,18 +1,18 @@
-import { query, mutation } from './_generated/server'
-import { Doc, Id } from './_generated/dataModel'
-import { v } from 'convex/values'
+import { query, mutation } from "./_generated/server";
+import { Doc, Id } from "./_generated/dataModel";
+import { v } from "convex/values";
 
 export const list = query({
   args: {},
-  handler: async (ctx): Promise<Doc<'messages'>[]> => {
-    return await ctx.db.query('messages').collect()
+  handler: async (ctx): Promise<Doc<"messages">[]> => {
+    return await ctx.db.query("messages").collect();
   },
-})
+});
 
 export const send = mutation({
   args: { body: v.string(), author: v.string() },
-  handler: async (ctx, args): Promise<Id<'messages'>> => {
-    const { body, author } = args
-    return await ctx.db.insert('messages', { body, author })
+  handler: async (ctx, args): Promise<Id<"messages">> => {
+    const { body, author } = args;
+    return await ctx.db.insert("messages", { body, author });
   },
-})
+});
diff --git a/examples/convex/convex/schema.ts b/examples/convex/convex/schema.ts
index dee5b2761e..66f9756c48 100644
--- a/examples/convex/convex/schema.ts
+++ b/examples/convex/convex/schema.ts
@@ -1,5 +1,5 @@
-import { defineSchema, defineTable } from 'convex/server'
-import { v } from 'convex/values'
+import { defineSchema, defineTable } from "convex/server";
+import { v } from "convex/values";
 
 export default defineSchema(
   {
@@ -13,5 +13,5 @@ export default defineSchema(
     schemaValidation: false,
     // This option allows you to read and write tables not specified here.
     // strictTableNameTypes: false,
-  }
-)
+  },
+);
diff --git a/examples/convex/pages/_app.tsx b/examples/convex/pages/_app.tsx
index 1e0ae9d4a2..0c2e728601 100644
--- a/examples/convex/pages/_app.tsx
+++ b/examples/convex/pages/_app.tsx
@@ -1,20 +1,20 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
 
-import { ConvexProvider, ConvexReactClient } from 'convex/react'
+import { ConvexProvider, ConvexReactClient } from "convex/react";
 
-const address = process.env.NEXT_PUBLIC_CONVEX_URL
+const address = process.env.NEXT_PUBLIC_CONVEX_URL;
 if (!address) {
-  throw new Error('Convex deployment url not found in environment.')
+  throw new Error("Convex deployment url not found in environment.");
 }
-const convex = new ConvexReactClient(address)
+const convex = new ConvexReactClient(address);
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <ConvexProvider client={convex}>
       <Component {...pageProps} />
     </ConvexProvider>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/convex/pages/index.tsx b/examples/convex/pages/index.tsx
index 254790e770..559ae17450 100644
--- a/examples/convex/pages/index.tsx
+++ b/examples/convex/pages/index.tsx
@@ -1,22 +1,22 @@
-import { FormEvent, useEffect, useState } from 'react'
-import { useMutation, useQuery } from 'convex/react'
-import { api } from '../convex/_generated/api'
+import { FormEvent, useEffect, useState } from "react";
+import { useMutation, useQuery } from "convex/react";
+import { api } from "../convex/_generated/api";
 
 export default function App() {
-  const messages = useQuery(api.messages.list)
-  const sendMessage = useMutation(api.messages.send)
+  const messages = useQuery(api.messages.list);
+  const sendMessage = useMutation(api.messages.send);
 
-  const [newMessageText, setNewMessageText] = useState('')
-  const [name, setName] = useState('user')
+  const [newMessageText, setNewMessageText] = useState("");
+  const [name, setName] = useState("user");
 
   useEffect(() => {
-    setName('User ' + Math.floor(Math.random() * 10000))
-  }, [])
+    setName("User " + Math.floor(Math.random() * 10000));
+  }, []);
 
   async function handleSendMessage(event: FormEvent) {
-    event.preventDefault()
-    setNewMessageText('')
-    await sendMessage({ body: newMessageText, author: name })
+    event.preventDefault();
+    setNewMessageText("");
+    await sendMessage({ body: newMessageText, author: name });
   }
   return (
     <main>
@@ -42,5 +42,5 @@ export default function App() {
         <input type="submit" value="Send" disabled={!newMessageText} />
       </form>
     </main>
-  )
+  );
 }
diff --git a/examples/convex/styles/globals.css b/examples/convex/styles/globals.css
index e158d80045..c0d37da998 100644
--- a/examples/convex/styles/globals.css
+++ b/examples/convex/styles/globals.css
@@ -7,7 +7,7 @@
 }
 
 body {
-  font-family: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', helvetica,
+  font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", helvetica,
     sans-serif;
 }
 
@@ -89,7 +89,7 @@ input:not([type]) {
   font-size: 16px;
 }
 
-input[type='submit'],
+input[type="submit"],
 button {
   margin-left: 4px;
   background: lightblue;
@@ -100,12 +100,12 @@ button {
   background-color: rgb(49, 108, 244);
 }
 
-input[type='submit']:hover,
+input[type="submit"]:hover,
 button:hover {
   background-color: rgb(41, 93, 207);
 }
 
-input[type='submit']:disabled,
+input[type="submit"]:disabled,
 button:disabled {
   background-color: rgb(122, 160, 248);
 }
diff --git a/examples/custom-routes-proxying/next.config.js b/examples/custom-routes-proxying/next.config.js
index 72911153e8..c96aafaadf 100644
--- a/examples/custom-routes-proxying/next.config.js
+++ b/examples/custom-routes-proxying/next.config.js
@@ -8,12 +8,12 @@ const nextConfig = {
     return {
       fallback: [
         {
-          source: '/:path*',
+          source: "/:path*",
           destination: `https://custom-routes-proxying-endpoint.vercel.app/:path*`,
         },
       ],
-    }
+    };
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/custom-routes-proxying/pages/about.tsx b/examples/custom-routes-proxying/pages/about.tsx
index 82ee1aa02a..4771fec87c 100644
--- a/examples/custom-routes-proxying/pages/about.tsx
+++ b/examples/custom-routes-proxying/pages/about.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function About() {
   return (
@@ -6,5 +6,5 @@ export default function About() {
       <h3>This is the /about page. </h3>
       <Link href="/">&larr; Back home</Link>
     </div>
-  )
+  );
 }
diff --git a/examples/custom-routes-proxying/pages/hello/[slug].tsx b/examples/custom-routes-proxying/pages/hello/[slug].tsx
index 5a42880a33..f40c858a96 100644
--- a/examples/custom-routes-proxying/pages/hello/[slug].tsx
+++ b/examples/custom-routes-proxying/pages/hello/[slug].tsx
@@ -1,13 +1,13 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
+import Link from "next/link";
+import { useRouter } from "next/router";
 
 export default function About() {
-  const router = useRouter()
+  const router = useRouter();
 
   return (
     <div>
       <h3>This is the `hello/[slug]` page. slug: {router.query.slug} </h3>
       <Link href="/">&larr; Back home</Link>
     </div>
-  )
+  );
 }
diff --git a/examples/custom-routes-proxying/pages/index.tsx b/examples/custom-routes-proxying/pages/index.tsx
index aa67cabab8..a1f3745472 100644
--- a/examples/custom-routes-proxying/pages/index.tsx
+++ b/examples/custom-routes-proxying/pages/index.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Home() {
   return (
@@ -10,5 +10,5 @@ export default function Home() {
         Hello world
       </Link>
     </div>
-  )
+  );
 }
diff --git a/examples/custom-server/pages/a.tsx b/examples/custom-server/pages/a.tsx
index 5619ede396..920fbac033 100644
--- a/examples/custom-server/pages/a.tsx
+++ b/examples/custom-server/pages/a.tsx
@@ -1,3 +1,3 @@
 export default function A() {
-  return <div>a</div>
+  return <div>a</div>;
 }
diff --git a/examples/custom-server/pages/b.tsx b/examples/custom-server/pages/b.tsx
index ca1631c34e..bd162b849e 100644
--- a/examples/custom-server/pages/b.tsx
+++ b/examples/custom-server/pages/b.tsx
@@ -1,3 +1,3 @@
 export default function B() {
-  return <div>b</div>
+  return <div>b</div>;
 }
diff --git a/examples/custom-server/pages/index.tsx b/examples/custom-server/pages/index.tsx
index a2dca7617c..bde0279778 100644
--- a/examples/custom-server/pages/index.tsx
+++ b/examples/custom-server/pages/index.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Home() {
   return (
@@ -14,5 +14,5 @@ export default function Home() {
         </Link>
       </li>
     </ul>
-  )
+  );
 }
diff --git a/examples/custom-server/server.ts b/examples/custom-server/server.ts
index 3bca396951..5822160da6 100644
--- a/examples/custom-server/server.ts
+++ b/examples/custom-server/server.ts
@@ -1,21 +1,21 @@
-import { createServer } from 'http'
-import { parse } from 'url'
-import next from 'next'
+import { createServer } from "http";
+import { parse } from "url";
+import next from "next";
 
-const port = parseInt(process.env.PORT || '3000', 10)
-const dev = process.env.NODE_ENV !== 'production'
-const app = next({ dev })
-const handle = app.getRequestHandler()
+const port = parseInt(process.env.PORT || "3000", 10);
+const dev = process.env.NODE_ENV !== "production";
+const app = next({ dev });
+const handle = app.getRequestHandler();
 
 app.prepare().then(() => {
   createServer((req, res) => {
-    const parsedUrl = parse(req.url!, true)
-    handle(req, res, parsedUrl)
-  }).listen(port)
+    const parsedUrl = parse(req.url!, true);
+    handle(req, res, parsedUrl);
+  }).listen(port);
 
   console.log(
     `> Server listening at http://localhost:${port} as ${
-      dev ? 'development' : process.env.NODE_ENV
-    }`
-  )
-})
+      dev ? "development" : process.env.NODE_ENV
+    }`,
+  );
+});
diff --git a/examples/dynamic-routing/components/header.tsx b/examples/dynamic-routing/components/header.tsx
index c9e85ec12e..49d6dff3b4 100644
--- a/examples/dynamic-routing/components/header.tsx
+++ b/examples/dynamic-routing/components/header.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -18,5 +18,5 @@ export default function Header() {
         </li>
       </ul>
     </header>
-  )
+  );
 }
diff --git a/examples/dynamic-routing/pages/about.tsx b/examples/dynamic-routing/pages/about.tsx
index d646cba7b6..f717b2e971 100644
--- a/examples/dynamic-routing/pages/about.tsx
+++ b/examples/dynamic-routing/pages/about.tsx
@@ -1,4 +1,4 @@
-import Header from '../components/header'
+import Header from "../components/header";
 
 export default function AboutPage() {
   return (
@@ -6,5 +6,5 @@ export default function AboutPage() {
       <Header />
       <h1>About page</h1>
     </>
-  )
+  );
 }
diff --git a/examples/dynamic-routing/pages/index.tsx b/examples/dynamic-routing/pages/index.tsx
index 0280a6da7a..6ce331d3ff 100644
--- a/examples/dynamic-routing/pages/index.tsx
+++ b/examples/dynamic-routing/pages/index.tsx
@@ -1,4 +1,4 @@
-import Header from '../components/header'
+import Header from "../components/header";
 
 export default function IndexPage() {
   return (
@@ -6,5 +6,5 @@ export default function IndexPage() {
       <Header />
       <h1>Hello World!</h1>
     </>
-  )
+  );
 }
diff --git a/examples/dynamic-routing/pages/post/[id]/[comment].tsx b/examples/dynamic-routing/pages/post/[id]/[comment].tsx
index 1c33af5e0f..ef52cd91ed 100644
--- a/examples/dynamic-routing/pages/post/[id]/[comment].tsx
+++ b/examples/dynamic-routing/pages/post/[id]/[comment].tsx
@@ -1,10 +1,10 @@
-import { useRouter } from 'next/router'
-import Header from '../../../components/header'
+import { useRouter } from "next/router";
+import Header from "../../../components/header";
 
 export default function CommentPage() {
-  const router = useRouter()
-  const id = router.query.id as string
-  const comment = router.query.comment as string
+  const router = useRouter();
+  const id = router.query.id as string;
+  const comment = router.query.comment as string;
 
   return (
     <>
@@ -12,5 +12,5 @@ export default function CommentPage() {
       <h1>Post: {id}</h1>
       <h1>Comment: {comment}</h1>
     </>
-  )
+  );
 }
diff --git a/examples/dynamic-routing/pages/post/[id]/index.tsx b/examples/dynamic-routing/pages/post/[id]/index.tsx
index d03d82382e..714fa0002c 100644
--- a/examples/dynamic-routing/pages/post/[id]/index.tsx
+++ b/examples/dynamic-routing/pages/post/[id]/index.tsx
@@ -1,10 +1,10 @@
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import Header from '../../../components/header'
+import { useRouter } from "next/router";
+import Link from "next/link";
+import Header from "../../../components/header";
 
 export default function PostPage() {
-  const router = useRouter()
-  const id = router.query.id as string
+  const router = useRouter();
+  const id = router.query.id as string;
 
   return (
     <>
@@ -19,5 +19,5 @@ export default function PostPage() {
         </li>
       </ul>
     </>
-  )
+  );
 }
diff --git a/examples/environment-variables/environment.d.ts b/examples/environment-variables/environment.d.ts
index cf41251370..be848f5410 100644
--- a/examples/environment-variables/environment.d.ts
+++ b/examples/environment-variables/environment.d.ts
@@ -1,15 +1,15 @@
 declare namespace NodeJS {
   export interface ProcessEnv {
-    readonly ENV_VARIABLE: string
-    readonly NEXT_PUBLIC_ENV_VARIABLE: string
+    readonly ENV_VARIABLE: string;
+    readonly NEXT_PUBLIC_ENV_VARIABLE: string;
 
-    readonly DEVELOPMENT_ENV_VARIABLE: string
-    readonly NEXT_PUBLIC_DEVELOPMENT_ENV_VARIABLE: string
+    readonly DEVELOPMENT_ENV_VARIABLE: string;
+    readonly NEXT_PUBLIC_DEVELOPMENT_ENV_VARIABLE: string;
 
-    readonly ENV_LOCAL_VARIABLE: string
-    readonly NEXT_PUBLIC_ENV_LOCAL_VARIABLE: string
+    readonly ENV_LOCAL_VARIABLE: string;
+    readonly NEXT_PUBLIC_ENV_LOCAL_VARIABLE: string;
 
-    readonly PRODUCTION_ENV_VARIABLE: string
-    readonly NEXT_PUBLIC_PRODUCTION_ENV_VARIABLE: string
+    readonly PRODUCTION_ENV_VARIABLE: string;
+    readonly NEXT_PUBLIC_PRODUCTION_ENV_VARIABLE: string;
   }
 }
diff --git a/examples/environment-variables/pages/index.tsx b/examples/environment-variables/pages/index.tsx
index f0ef31851e..3df6221da8 100644
--- a/examples/environment-variables/pages/index.tsx
+++ b/examples/environment-variables/pages/index.tsx
@@ -1,13 +1,13 @@
-import Link from 'next/link'
-import styles from '../styles.module.css'
+import Link from "next/link";
+import styles from "../styles.module.css";
 
 type CodeProps = {
-  children: React.ReactNode
-}
+  children: React.ReactNode;
+};
 
 const Code = ({ children }: CodeProps) => (
   <code className={styles.inlineCode}>{children}</code>
-)
+);
 
 const IndexPage = () => (
   <div className={styles.container}>
@@ -15,15 +15,15 @@ const IndexPage = () => (
       <h1>Environment Variables with Next.js</h1>
       <hr className={styles.hr} />
       <p>
-        In the table below you'll see how{' '}
+        In the table below you'll see how{" "}
         <Link href="https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser">
           environment variables can be exposed to the browser
-        </Link>{' '}
+        </Link>{" "}
         with Next.js.
       </p>
       <p>
         In general only <Code>.env.local</Code> or <Code>.env</Code> are needed
-        for this, but the table also features the usage of{' '}
+        for this, but the table also features the usage of{" "}
         <Code>.env.development</Code> and <Code>.env.production</Code>.
       </p>
       <table className={styles.table}>
@@ -91,9 +91,9 @@ const IndexPage = () => (
       <p>Once you run the app, you'll see logs like these in the terminal:</p>
       <pre>
         <code>
-          info - Loaded env from /home/user/../.env.local{'\n'}
-          info - Loaded env from /home/user/../.env.development{'\n'}
-          info - Loaded env from /home/user/../.env{'\n'}
+          info - Loaded env from /home/user/../.env.local{"\n"}
+          info - Loaded env from /home/user/../.env.development{"\n"}
+          info - Loaded env from /home/user/../.env{"\n"}
         </code>
       </pre>
       <p>
@@ -101,25 +101,25 @@ const IndexPage = () => (
         priority.
       </p>
       <p>
-        <Code>.env</Code> will not overwrite any variables defined in{' '}
+        <Code>.env</Code> will not overwrite any variables defined in{" "}
         <Code>.env.local</Code> or <Code>.env.development</Code>.
       </p>
     </div>
   </div>
-)
+);
 
 // `getStaticProps`, and similar Next.js methods like `getStaticPaths` and `getServerSideProps`
 // only run in Node.js. Check the terminal to see the environment variables
 export async function getStaticProps() {
   // Using the variables below in the browser will return `undefined`. Next.js doesn't
   // expose environment variables unless they start with `NEXT_PUBLIC_`
-  console.log('[Node.js only] ENV_VARIABLE:', process.env.ENV_VARIABLE)
+  console.log("[Node.js only] ENV_VARIABLE:", process.env.ENV_VARIABLE);
   console.log(
-    '[Node.js only] ENV_LOCAL_VARIABLE:',
-    process.env.ENV_LOCAL_VARIABLE
-  )
+    "[Node.js only] ENV_LOCAL_VARIABLE:",
+    process.env.ENV_LOCAL_VARIABLE,
+  );
 
-  return { props: {} }
+  return { props: {} };
 }
 
-export default IndexPage
+export default IndexPage;
diff --git a/examples/environment-variables/styles.module.css b/examples/environment-variables/styles.module.css
index f85d256498..b24f41e4bb 100644
--- a/examples/environment-variables/styles.module.css
+++ b/examples/environment-variables/styles.module.css
@@ -33,7 +33,7 @@
 
 .inlineCode::before,
 .inlineCode::after {
-  content: '`';
+  content: "`";
 }
 
 .hr {
diff --git a/examples/github-pages/app/about/page.tsx b/examples/github-pages/app/about/page.tsx
index f320a32074..b60a07cc0f 100644
--- a/examples/github-pages/app/about/page.tsx
+++ b/examples/github-pages/app/about/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function About() {
   return (
@@ -8,5 +8,5 @@ export default function About() {
         Back to <Link href="/">Home</Link>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/github-pages/app/layout.tsx b/examples/github-pages/app/layout.tsx
index 9526c89fc4..4fd0692fac 100644
--- a/examples/github-pages/app/layout.tsx
+++ b/examples/github-pages/app/layout.tsx
@@ -1,21 +1,21 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Next.js on GitHub Pages',
-  description: 'A Next.js web application on GitHub Pages',
-}
+  title: "Next.js on GitHub Pages",
+  description: "A Next.js web application on GitHub Pages",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/github-pages/app/page.tsx b/examples/github-pages/app/page.tsx
index 175f7bc35d..e266c9f94d 100644
--- a/examples/github-pages/app/page.tsx
+++ b/examples/github-pages/app/page.tsx
@@ -1,9 +1,9 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Home() {
   return (
     <div>
       Hello World. <Link href="/about">About</Link>
     </div>
-  )
+  );
 }
diff --git a/examples/github-pages/next.config.js b/examples/github-pages/next.config.js
index 98b10c1c0d..54406adf04 100644
--- a/examples/github-pages/next.config.js
+++ b/examples/github-pages/next.config.js
@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: 'export',
-  basePath: '/gh-pages-test',
-}
+  output: "export",
+  basePath: "/gh-pages-test",
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/head-elements/pages/index.tsx b/examples/head-elements/pages/index.tsx
index 90348e986d..d69392fe44 100644
--- a/examples/head-elements/pages/index.tsx
+++ b/examples/head-elements/pages/index.tsx
@@ -1,4 +1,4 @@
-import Head from 'next/head'
+import Head from "next/head";
 
 export default function Home() {
   return (
@@ -11,5 +11,5 @@ export default function Home() {
 
       <h1>This page has a title 🤔</h1>
     </div>
-  )
+  );
 }
diff --git a/examples/headers/components/Code.tsx b/examples/headers/components/Code.tsx
index 070d744be0..f395fce0a5 100644
--- a/examples/headers/components/Code.tsx
+++ b/examples/headers/components/Code.tsx
@@ -1,9 +1,9 @@
-import styles from '../styles.module.css'
+import styles from "../styles.module.css";
 
 type CodeProps = {
-  children: React.ReactNode
-}
+  children: React.ReactNode;
+};
 
 export default function Code({ children }: CodeProps) {
-  return <code className={styles.inlineCode}>{children}</code>
+  return <code className={styles.inlineCode}>{children}</code>;
 }
diff --git a/examples/headers/next.config.js b/examples/headers/next.config.js
index 670cb9524f..3bd7b69c94 100644
--- a/examples/headers/next.config.js
+++ b/examples/headers/next.config.js
@@ -7,25 +7,25 @@ const nextConfig = {
   async headers() {
     return [
       {
-        source: '/about',
+        source: "/about",
         headers: [
           {
-            key: 'X-About-Custom-Header',
-            value: 'about_header_value',
+            key: "X-About-Custom-Header",
+            value: "about_header_value",
           },
         ],
       },
       {
-        source: '/news/:id',
+        source: "/news/:id",
         headers: [
           {
-            key: 'X-News-Custom-Header',
-            value: 'news_header_value',
+            key: "X-News-Custom-Header",
+            value: "news_header_value",
           },
         ],
       },
-    ]
+    ];
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/headers/pages/about.tsx b/examples/headers/pages/about.tsx
index bdfc3fbce2..04f3fb8814 100644
--- a/examples/headers/pages/about.tsx
+++ b/examples/headers/pages/about.tsx
@@ -1,6 +1,6 @@
-import Link from 'next/link'
-import styles from '../styles.module.css'
-import Code from '../components/Code'
+import Link from "next/link";
+import styles from "../styles.module.css";
+import Code from "../components/Code";
 
 export default function About() {
   return (
@@ -9,7 +9,7 @@ export default function About() {
         <h1>Path: /about</h1>
         <hr className={styles.hr} />
         <p>
-          The response contains a custom header{' '}
+          The response contains a custom header{" "}
           <Code>X-About-Custom-Header</Code> : <Code>about_header_value</Code>.
         </p>
         <p>
@@ -20,5 +20,5 @@ export default function About() {
         <Link href="/">&larr; Back home</Link>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/headers/pages/index.tsx b/examples/headers/pages/index.tsx
index 90cf5783c9..04f7b92456 100644
--- a/examples/headers/pages/index.tsx
+++ b/examples/headers/pages/index.tsx
@@ -1,6 +1,6 @@
-import Link from 'next/link'
-import styles from '../styles.module.css'
-import Code from '../components/Code'
+import Link from "next/link";
+import styles from "../styles.module.css";
+import Code from "../components/Code";
 
 export default function Index() {
   return (
@@ -9,7 +9,7 @@ export default function Index() {
         <h1>Headers with Next.js</h1>
         <hr className={styles.hr} />
         <p>
-          The links below are examples of{' '}
+          The links below are examples of{" "}
           <Link
             href="https://nextjs.org/docs/api-reference/next.config.js/headers"
             legacyBehavior
@@ -17,7 +17,7 @@ export default function Index() {
             <>
               custom <Code>headers</Code>
             </>
-          </Link>{' '}
+          </Link>{" "}
           added to your Next.js app.
         </p>
         <nav>
@@ -41,5 +41,5 @@ export default function Index() {
         <hr className={styles.hr} />
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/headers/pages/news/[...slug].tsx b/examples/headers/pages/news/[...slug].tsx
index deaf9f1e3c..210cf25e22 100644
--- a/examples/headers/pages/news/[...slug].tsx
+++ b/examples/headers/pages/news/[...slug].tsx
@@ -1,10 +1,10 @@
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import styles from '../../styles.module.css'
-import Code from '../../components/Code'
+import { useRouter } from "next/router";
+import Link from "next/link";
+import styles from "../../styles.module.css";
+import Code from "../../components/Code";
 
 export default function News() {
-  const { asPath } = useRouter()
+  const { asPath } = useRouter();
 
   return (
     <div className={styles.container}>
@@ -12,7 +12,7 @@ export default function News() {
         <h1>Path: {asPath}</h1>
         <hr className={styles.hr} />
         <p>
-          The response contains a custom header{' '}
+          The response contains a custom header{" "}
           <Code>X-News-Custom-Header</Code> : <Code>news_header_value</Code>.
         </p>
         <p>
@@ -22,5 +22,5 @@ export default function News() {
         <Link href="/">&larr; Back home</Link>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/headers/styles.module.css b/examples/headers/styles.module.css
index cd7bec9b86..c75c982a7c 100644
--- a/examples/headers/styles.module.css
+++ b/examples/headers/styles.module.css
@@ -24,7 +24,7 @@
 
 .inlineCode::before,
 .inlineCode::after {
-  content: '`';
+  content: "`";
 }
 
 .hr {
@@ -44,7 +44,7 @@
 }
 
 .list li:before {
-  content: '-';
+  content: "-";
   color: #999999;
   position: absolute;
   margin-left: -1rem;
diff --git a/examples/hello-world/app/layout.tsx b/examples/hello-world/app/layout.tsx
index dbce4ea8e3..225b6038d7 100644
--- a/examples/hello-world/app/layout.tsx
+++ b/examples/hello-world/app/layout.tsx
@@ -1,11 +1,11 @@
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/hello-world/app/page.tsx b/examples/hello-world/app/page.tsx
index 6baa6ade86..e85d5092c7 100644
--- a/examples/hello-world/app/page.tsx
+++ b/examples/hello-world/app/page.tsx
@@ -1,3 +1,3 @@
 export default function Page() {
-  return <h1>Hello, Next.js!</h1>
+  return <h1>Hello, Next.js!</h1>;
 }
diff --git a/examples/i18n-routing/components/locale-switcher.tsx b/examples/i18n-routing/components/locale-switcher.tsx
index f716c9d8a6..1f5d1bb7f1 100644
--- a/examples/i18n-routing/components/locale-switcher.tsx
+++ b/examples/i18n-routing/components/locale-switcher.tsx
@@ -1,20 +1,20 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
+import Link from "next/link";
+import { useRouter } from "next/router";
 
 export default function LocaleSwitcher() {
-  const router = useRouter()
-  const { locales, locale: activeLocale } = router
+  const router = useRouter();
+  const { locales, locale: activeLocale } = router;
 
   const otherLocales = (locales || []).filter(
-    (locale) => locale !== activeLocale
-  )
+    (locale) => locale !== activeLocale,
+  );
 
   return (
     <div>
       <p>Locale switcher:</p>
       <ul>
         {otherLocales.map((locale) => {
-          const { pathname, query, asPath } = router
+          const { pathname, query, asPath } = router;
           return (
             <li key={locale}>
               <Link
@@ -26,9 +26,9 @@ export default function LocaleSwitcher() {
                 {locale}
               </Link>
             </li>
-          )
+          );
         })}
       </ul>
     </div>
-  )
+  );
 }
diff --git a/examples/i18n-routing/next.config.js b/examples/i18n-routing/next.config.js
index 36432bcc84..03bfe590f8 100644
--- a/examples/i18n-routing/next.config.js
+++ b/examples/i18n-routing/next.config.js
@@ -5,9 +5,9 @@
  **/
 const nextConfig = {
   i18n: {
-    locales: ['en', 'fr', 'nl'],
-    defaultLocale: 'en',
+    locales: ["en", "fr", "nl"],
+    defaultLocale: "en",
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/i18n-routing/pages/gsp/[slug].tsx b/examples/i18n-routing/pages/gsp/[slug].tsx
index 023a2bb743..7b10e6c930 100644
--- a/examples/i18n-routing/pages/gsp/[slug].tsx
+++ b/examples/i18n-routing/pages/gsp/[slug].tsx
@@ -2,19 +2,19 @@ import type {
   GetStaticProps,
   GetStaticPaths,
   InferGetStaticPropsType,
-} from 'next'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import LocaleSwitcher from '../../components/locale-switcher'
+} from "next";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import LocaleSwitcher from "../../components/locale-switcher";
 
-type GspPageProps = InferGetStaticPropsType<typeof getStaticProps>
+type GspPageProps = InferGetStaticPropsType<typeof getStaticProps>;
 
 export default function GspPage(props: GspPageProps) {
-  const router = useRouter()
-  const { defaultLocale, isFallback, query } = router
+  const router = useRouter();
+  const { defaultLocale, isFallback, query } = router;
 
   if (isFallback) {
-    return 'Loading...'
+    return "Loading...";
   }
 
   return (
@@ -36,13 +36,13 @@ export default function GspPage(props: GspPageProps) {
       <Link href="/">To index page</Link>
       <br />
     </div>
-  )
+  );
 }
 
 type Props = {
-  locale?: string
-  locales?: string[]
-}
+  locale?: string;
+  locales?: string[];
+};
 
 export const getStaticProps: GetStaticProps<Props> = async ({
   locale,
@@ -53,19 +53,19 @@ export const getStaticProps: GetStaticProps<Props> = async ({
       locale,
       locales,
     },
-  }
-}
+  };
+};
 
 export const getStaticPaths: GetStaticPaths = ({ locales = [] }) => {
-  const paths = []
+  const paths = [];
 
   for (const locale of locales) {
-    paths.push({ params: { slug: 'first' }, locale })
-    paths.push({ params: { slug: 'second' }, locale })
+    paths.push({ params: { slug: "first" }, locale });
+    paths.push({ params: { slug: "second" }, locale });
   }
 
   return {
     paths,
     fallback: true,
-  }
-}
+  };
+};
diff --git a/examples/i18n-routing/pages/gsp/index.tsx b/examples/i18n-routing/pages/gsp/index.tsx
index 0cbd6179ad..344cc50f16 100644
--- a/examples/i18n-routing/pages/gsp/index.tsx
+++ b/examples/i18n-routing/pages/gsp/index.tsx
@@ -1,14 +1,14 @@
-import type { GetStaticProps, InferGetStaticPropsType } from 'next'
+import type { GetStaticProps, InferGetStaticPropsType } from "next";
 
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import LocaleSwitcher from '../../components/locale-switcher'
+import Link from "next/link";
+import { useRouter } from "next/router";
+import LocaleSwitcher from "../../components/locale-switcher";
 
-type GspPageProps = InferGetStaticPropsType<typeof getStaticProps>
+type GspPageProps = InferGetStaticPropsType<typeof getStaticProps>;
 
 export default function GspPage(props: GspPageProps) {
-  const router = useRouter()
-  const { defaultLocale } = router
+  const router = useRouter();
+  const { defaultLocale } = router;
 
   return (
     <div>
@@ -28,13 +28,13 @@ export default function GspPage(props: GspPageProps) {
       <Link href="/">To index page</Link>
       <br />
     </div>
-  )
+  );
 }
 
 type Props = {
-  locale?: string
-  locales?: string[]
-}
+  locale?: string;
+  locales?: string[];
+};
 
 export const getStaticProps: GetStaticProps<Props> = async ({
   locale,
@@ -45,5 +45,5 @@ export const getStaticProps: GetStaticProps<Props> = async ({
       locale,
       locales,
     },
-  }
-}
+  };
+};
diff --git a/examples/i18n-routing/pages/gssp.tsx b/examples/i18n-routing/pages/gssp.tsx
index 6be62996c6..25b90f9f8f 100644
--- a/examples/i18n-routing/pages/gssp.tsx
+++ b/examples/i18n-routing/pages/gssp.tsx
@@ -1,14 +1,14 @@
-import type { GetServerSideProps, InferGetServerSidePropsType } from 'next'
+import type { GetServerSideProps, InferGetServerSidePropsType } from "next";
 
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import LocaleSwitcher from '../components/locale-switcher'
+import Link from "next/link";
+import { useRouter } from "next/router";
+import LocaleSwitcher from "../components/locale-switcher";
 
-type GsspPageProps = InferGetServerSidePropsType<typeof getServerSideProps>
+type GsspPageProps = InferGetServerSidePropsType<typeof getServerSideProps>;
 
 export default function GsspPage(props: GsspPageProps) {
-  const router = useRouter()
-  const { defaultLocale } = router
+  const router = useRouter();
+  const { defaultLocale } = router;
 
   return (
     <div>
@@ -28,13 +28,13 @@ export default function GsspPage(props: GsspPageProps) {
       <Link href="/">To index page</Link>
       <br />
     </div>
-  )
+  );
 }
 
 type Props = {
-  locale?: string
-  locales?: string[]
-}
+  locale?: string;
+  locales?: string[];
+};
 
 export const getServerSideProps: GetServerSideProps<Props> = async ({
   locale,
@@ -45,5 +45,5 @@ export const getServerSideProps: GetServerSideProps<Props> = async ({
       locale,
       locales,
     },
-  }
-}
+  };
+};
diff --git a/examples/i18n-routing/pages/index.tsx b/examples/i18n-routing/pages/index.tsx
index c3824e1207..9f85afd13a 100644
--- a/examples/i18n-routing/pages/index.tsx
+++ b/examples/i18n-routing/pages/index.tsx
@@ -1,10 +1,10 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import LocaleSwitcher from '../components/locale-switcher'
+import Link from "next/link";
+import { useRouter } from "next/router";
+import LocaleSwitcher from "../components/locale-switcher";
 
 export default function IndexPage() {
-  const router = useRouter()
-  const { locale, locales, defaultLocale } = router
+  const router = useRouter();
+  const { locale, locales, defaultLocale } = router;
 
   return (
     <div>
@@ -24,5 +24,5 @@ export default function IndexPage() {
       <Link href="/gssp">To getServerSideProps page</Link>
       <br />
     </div>
-  )
+  );
 }
diff --git a/examples/image-component/app/background/page.tsx b/examples/image-component/app/background/page.tsx
index a081f0bef0..34acdbf579 100644
--- a/examples/image-component/app/background/page.tsx
+++ b/examples/image-component/app/background/page.tsx
@@ -1,7 +1,7 @@
-import Image from 'next/image'
-import ViewSource from '../../components/view-source'
-import styles from '../../styles.module.css'
-import mountains from '../../public/mountains.jpg'
+import Image from "next/image";
+import ViewSource from "../../components/view-source";
+import styles from "../../styles.module.css";
+import mountains from "../../public/mountains.jpg";
 
 const BackgroundPage = () => (
   <div>
@@ -15,7 +15,7 @@ const BackgroundPage = () => (
         fill
         sizes="100vw"
         style={{
-          objectFit: 'cover',
+          objectFit: "cover",
         }}
       />
     </div>
@@ -25,6 +25,6 @@ const BackgroundPage = () => (
       as a Background
     </p>
   </div>
-)
+);
 
-export default BackgroundPage
+export default BackgroundPage;
diff --git a/examples/image-component/app/color/page.tsx b/examples/image-component/app/color/page.tsx
index f6bddf2cdb..acb393e764 100644
--- a/examples/image-component/app/color/page.tsx
+++ b/examples/image-component/app/color/page.tsx
@@ -1,20 +1,20 @@
-import Image from 'next/image'
-import ViewSource from '../../components/view-source'
+import Image from "next/image";
+import ViewSource from "../../components/view-source";
 
 // Pixel GIF code adapted from https://stackoverflow.com/a/33919020/266535
 const keyStr =
-  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
 
 const triplet = (e1: number, e2: number, e3: number) =>
   keyStr.charAt(e1 >> 2) +
   keyStr.charAt(((e1 & 3) << 4) | (e2 >> 4)) +
   keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
-  keyStr.charAt(e3 & 63)
+  keyStr.charAt(e3 & 63);
 
 const rgbDataURL = (r: number, g: number, b: number) =>
   `data:image/gif;base64,R0lGODlhAQABAPAA${
     triplet(0, r, g) + triplet(b, 255, 255)
-  }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`
+  }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`;
 
 const Color = () => (
   <div>
@@ -28,8 +28,8 @@ const Color = () => (
       width={750}
       height={1000}
       style={{
-        maxWidth: '100%',
-        height: 'auto',
+        maxWidth: "100%",
+        height: "auto",
       }}
     />
     <Image
@@ -40,11 +40,11 @@ const Color = () => (
       width={750}
       height={1000}
       style={{
-        maxWidth: '100%',
-        height: 'auto',
+        maxWidth: "100%",
+        height: "auto",
       }}
     />
   </div>
-)
+);
 
-export default Color
+export default Color;
diff --git a/examples/image-component/app/fill/page.tsx b/examples/image-component/app/fill/page.tsx
index ebb0bf9c6b..a679ba8251 100644
--- a/examples/image-component/app/fill/page.tsx
+++ b/examples/image-component/app/fill/page.tsx
@@ -1,34 +1,34 @@
-import Image from 'next/image'
-import ViewSource from '../../components/view-source'
-import mountains from '../../public/mountains.jpg'
+import Image from "next/image";
+import ViewSource from "../../components/view-source";
+import mountains from "../../public/mountains.jpg";
 
 const Fill = () => (
   <div>
     <ViewSource pathname="app/fill/page.tsx" />
     <h1>Image Component With Layout Fill</h1>
-    <div style={{ position: 'relative', width: '300px', height: '500px' }}>
+    <div style={{ position: "relative", width: "300px", height: "500px" }}>
       <Image
         alt="Mountains"
         src={mountains}
         fill
         sizes="100vw"
         style={{
-          objectFit: 'cover',
+          objectFit: "cover",
         }}
       />
     </div>
-    <div style={{ position: 'relative', width: '300px', height: '500px' }}>
+    <div style={{ position: "relative", width: "300px", height: "500px" }}>
       <Image
         alt="Mountains"
         src={mountains}
         fill
         sizes="100vw"
         style={{
-          objectFit: 'contain',
+          objectFit: "contain",
         }}
       />
     </div>
-    <div style={{ position: 'relative', width: '300px', height: '500px' }}>
+    <div style={{ position: "relative", width: "300px", height: "500px" }}>
       <Image
         alt="Mountains"
         src={mountains}
@@ -36,11 +36,11 @@ const Fill = () => (
         fill
         sizes="100vw"
         style={{
-          objectFit: 'none',
+          objectFit: "none",
         }}
       />
     </div>
   </div>
-)
+);
 
-export default Fill
+export default Fill;
diff --git a/examples/image-component/app/layout.tsx b/examples/image-component/app/layout.tsx
index 042b1f93d3..952dfc7125 100644
--- a/examples/image-component/app/layout.tsx
+++ b/examples/image-component/app/layout.tsx
@@ -1,19 +1,19 @@
-import '../app.css'
+import "../app.css";
 
 export const metadata = {
-  title: 'Image Component with Next.js',
+  title: "Image Component with Next.js",
   description:
-    'This page demonstrates the usage of the next/image component with live examples. This component is designed to automatically optimize images on-demand as the browser requests them.',
-}
+    "This page demonstrates the usage of the next/image component with live examples. This component is designed to automatically optimize images on-demand as the browser requests them.",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/image-component/app/page.tsx b/examples/image-component/app/page.tsx
index d018662e4b..4c47067a61 100644
--- a/examples/image-component/app/page.tsx
+++ b/examples/image-component/app/page.tsx
@@ -1,13 +1,13 @@
-import styles from '../styles.module.css'
-import Image from 'next/image'
-import Link from 'next/link'
-import ViewSource from '../components/view-source'
-import vercel from '../public/vercel.png'
-import type { PropsWithChildren } from 'react'
+import styles from "../styles.module.css";
+import Image from "next/image";
+import Link from "next/link";
+import ViewSource from "../components/view-source";
+import vercel from "../public/vercel.png";
+import type { PropsWithChildren } from "react";
 
 const Code = (props: PropsWithChildren<{}>) => (
   <code className={styles.inlineCode} {...props} />
-)
+);
 
 const Index = () => (
   <div className={styles.container}>
@@ -15,17 +15,17 @@ const Index = () => (
     <div className={styles.card}>
       <h1>Image Component with Next.js</h1>
       <p>
-        This page demonstrates the usage of the{' '}
+        This page demonstrates the usage of the{" "}
         <a href="https://nextjs.org/docs/api-reference/next/image">
           next/image
-        </a>{' '}
+        </a>{" "}
         component with live examples.
       </p>
       <p>
-        This component is designed to{' '}
+        This component is designed to{" "}
         <a href="https://nextjs.org/docs/basic-features/image-optimization">
           automatically optimize
-        </a>{' '}
+        </a>{" "}
         images on-demand as the browser requests them.
       </p>
       <hr className={styles.hr} />
@@ -60,7 +60,7 @@ const Index = () => (
       <hr className={styles.hr} />
       <h2 id="internal">Internal Image</h2>
       <p>
-        The following is an example of a reference to an internal image from the{' '}
+        The following is an example of a reference to an internal image from the{" "}
         <Code>public</Code> directory.
       </p>
       <p>
@@ -73,14 +73,14 @@ const Index = () => (
         width={1000}
         height={1000}
         style={{
-          maxWidth: '100%',
-          height: 'auto',
+          maxWidth: "100%",
+          height: "auto",
         }}
       />
       <hr className={styles.hr} />
       <h2 id="external">External Image</h2>
       <p>
-        The following is an example of a reference to an external image at{' '}
+        The following is an example of a reference to an external image at{" "}
         <Code>assets.vercel.com</Code>.
       </p>
       <p>
@@ -93,8 +93,8 @@ const Index = () => (
         width={1200}
         height={400}
         style={{
-          maxWidth: '100%',
-          height: 'auto',
+          maxWidth: "100%",
+          height: "auto",
         }}
       />
       <hr className={styles.hr} />
@@ -103,14 +103,14 @@ const Index = () => (
         You can optionally configure a cloud provider, device sizes, and more!
       </p>
       <p>
-        Checkout the{' '}
+        Checkout the{" "}
         <a href="https://nextjs.org/docs/basic-features/image-optimization">
           Image Optimization documentation
-        </a>{' '}
+        </a>{" "}
         to learn more.
       </p>
     </div>
   </div>
-)
+);
 
-export default Index
+export default Index;
diff --git a/examples/image-component/app/placeholder/page.tsx b/examples/image-component/app/placeholder/page.tsx
index 051d62a144..c327b00592 100644
--- a/examples/image-component/app/placeholder/page.tsx
+++ b/examples/image-component/app/placeholder/page.tsx
@@ -1,6 +1,6 @@
-import Image from 'next/image'
-import ViewSource from '../../components/view-source'
-import mountains from '../../public/mountains.jpg'
+import Image from "next/image";
+import ViewSource from "../../components/view-source";
+import mountains from "../../public/mountains.jpg";
 
 const PlaceholderBlur = () => (
   <div>
@@ -13,11 +13,11 @@ const PlaceholderBlur = () => (
       width={700}
       height={475}
       style={{
-        maxWidth: '100%',
-        height: 'auto',
+        maxWidth: "100%",
+        height: "auto",
       }}
     />
   </div>
-)
+);
 
-export default PlaceholderBlur
+export default PlaceholderBlur;
diff --git a/examples/image-component/app/responsive/page.tsx b/examples/image-component/app/responsive/page.tsx
index 22e686586b..a1cc556c46 100644
--- a/examples/image-component/app/responsive/page.tsx
+++ b/examples/image-component/app/responsive/page.tsx
@@ -1,6 +1,6 @@
-import Image from 'next/image'
-import ViewSource from '../../components/view-source'
-import mountains from '../../public/mountains.jpg'
+import Image from "next/image";
+import ViewSource from "../../components/view-source";
+import mountains from "../../public/mountains.jpg";
 
 const Responsive = () => (
   <div>
@@ -13,11 +13,11 @@ const Responsive = () => (
       height={475}
       sizes="100vw"
       style={{
-        width: '100%',
-        height: 'auto',
+        width: "100%",
+        height: "auto",
       }}
     />
   </div>
-)
+);
 
-export default Responsive
+export default Responsive;
diff --git a/examples/image-component/app/shimmer/page.tsx b/examples/image-component/app/shimmer/page.tsx
index cb49aee6c8..f78777bbb3 100644
--- a/examples/image-component/app/shimmer/page.tsx
+++ b/examples/image-component/app/shimmer/page.tsx
@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import ViewSource from '../../components/view-source'
+import Image from "next/image";
+import ViewSource from "../../components/view-source";
 
 const shimmer = (w: number, h: number) => `
 <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -13,12 +13,12 @@ const shimmer = (w: number, h: number) => `
   <rect width="${w}" height="${h}" fill="#333" />
   <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
   <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
-</svg>`
+</svg>`;
 
 const toBase64 = (str: string) =>
-  typeof window === 'undefined'
-    ? Buffer.from(str).toString('base64')
-    : window.btoa(str)
+  typeof window === "undefined"
+    ? Buffer.from(str).toString("base64")
+    : window.btoa(str);
 
 const Shimmer = () => (
   <div>
@@ -31,11 +31,11 @@ const Shimmer = () => (
       width={700}
       height={475}
       style={{
-        maxWidth: '100%',
-        height: 'auto',
+        maxWidth: "100%",
+        height: "auto",
       }}
     />
   </div>
-)
+);
 
-export default Shimmer
+export default Shimmer;
diff --git a/examples/image-component/app/theme/page.tsx b/examples/image-component/app/theme/page.tsx
index ef8219a5c4..dc65587367 100644
--- a/examples/image-component/app/theme/page.tsx
+++ b/examples/image-component/app/theme/page.tsx
@@ -1,25 +1,25 @@
-import Image, { ImageProps } from 'next/image'
-import ViewSource from '../../components/view-source'
-import styles from '../../styles.module.css'
+import Image, { ImageProps } from "next/image";
+import ViewSource from "../../components/view-source";
+import styles from "../../styles.module.css";
 
 // Note: we cannot use `priority` or `loading="eager"
 // because we depend on the default `loading="lazy"`
 // behavior to wait for CSS to reveal the proper image.
-type Props = Omit<ImageProps, 'src' | 'priority' | 'loading'> & {
-  srcLight: string
-  srcDark: string
-}
+type Props = Omit<ImageProps, "src" | "priority" | "loading"> & {
+  srcLight: string;
+  srcDark: string;
+};
 
 const ThemeImage = (props: Props) => {
-  const { srcLight, srcDark, ...rest } = props
+  const { srcLight, srcDark, ...rest } = props;
 
   return (
     <>
       <Image {...rest} src={srcLight} className={styles.imgLight} />
       <Image {...rest} src={srcDark} className={styles.imgDark} />
     </>
-  )
-}
+  );
+};
 
 const Page = () => (
   <div>
@@ -33,6 +33,6 @@ const Page = () => (
       height={387}
     />
   </div>
-)
+);
 
-export default Page
+export default Page;
diff --git a/examples/image-component/components/view-source.tsx b/examples/image-component/components/view-source.tsx
index 6d690ce7d3..126821b720 100644
--- a/examples/image-component/components/view-source.tsx
+++ b/examples/image-component/components/view-source.tsx
@@ -1,8 +1,8 @@
-import styles from './view-source.module.css'
+import styles from "./view-source.module.css";
 
 type ViewSourceProps = {
-  pathname: string
-}
+  pathname: string;
+};
 
 const ViewSource = ({ pathname }: ViewSourceProps) => (
   <svg
@@ -25,6 +25,6 @@ const ViewSource = ({ pathname }: ViewSourceProps) => (
       <path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />
     </a>
   </svg>
-)
+);
 
-export default ViewSource
+export default ViewSource;
diff --git a/examples/image-component/next.config.js b/examples/image-component/next.config.js
index 44ce97cfd6..056abb8a3b 100644
--- a/examples/image-component/next.config.js
+++ b/examples/image-component/next.config.js
@@ -1,14 +1,14 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   images: {
-    formats: ['image/avif', 'image/webp'],
+    formats: ["image/avif", "image/webp"],
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'assets.vercel.com',
-        port: '',
-        pathname: '/image/upload/**',
+        protocol: "https",
+        hostname: "assets.vercel.com",
+        port: "",
+        pathname: "/image/upload/**",
       },
     ],
   },
-}
+};
diff --git a/examples/image-component/styles.module.css b/examples/image-component/styles.module.css
index 9a6e1fb1c4..969baf6bcc 100644
--- a/examples/image-component/styles.module.css
+++ b/examples/image-component/styles.module.css
@@ -23,7 +23,7 @@
 
 .inlineCode::before,
 .inlineCode::after {
-  content: '`';
+  content: "`";
 }
 
 .hr {
diff --git a/examples/image-legacy-component/components/view-source.tsx b/examples/image-legacy-component/components/view-source.tsx
index d243db4953..9f720397f9 100644
--- a/examples/image-legacy-component/components/view-source.tsx
+++ b/examples/image-legacy-component/components/view-source.tsx
@@ -1,8 +1,8 @@
-import styles from './view-source.module.css'
+import styles from "./view-source.module.css";
 
 type ViewSourceProps = {
-  pathname: string
-}
+  pathname: string;
+};
 
 const ViewSource = ({ pathname }: ViewSourceProps) => (
   <svg
@@ -25,6 +25,6 @@ const ViewSource = ({ pathname }: ViewSourceProps) => (
       <path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />
     </a>
   </svg>
-)
+);
 
-export default ViewSource
+export default ViewSource;
diff --git a/examples/image-legacy-component/next.config.js b/examples/image-legacy-component/next.config.js
index 44ce97cfd6..056abb8a3b 100644
--- a/examples/image-legacy-component/next.config.js
+++ b/examples/image-legacy-component/next.config.js
@@ -1,14 +1,14 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   images: {
-    formats: ['image/avif', 'image/webp'],
+    formats: ["image/avif", "image/webp"],
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'assets.vercel.com',
-        port: '',
-        pathname: '/image/upload/**',
+        protocol: "https",
+        hostname: "assets.vercel.com",
+        port: "",
+        pathname: "/image/upload/**",
       },
     ],
   },
-}
+};
diff --git a/examples/image-legacy-component/pages/_app.tsx b/examples/image-legacy-component/pages/_app.tsx
index bde43d8134..396b932c16 100644
--- a/examples/image-legacy-component/pages/_app.tsx
+++ b/examples/image-legacy-component/pages/_app.tsx
@@ -1,6 +1,6 @@
-import type { AppProps } from 'next/app'
-import '../app.css'
+import type { AppProps } from "next/app";
+import "../app.css";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/image-legacy-component/pages/background.tsx b/examples/image-legacy-component/pages/background.tsx
index 7008a11695..ed411687e0 100644
--- a/examples/image-legacy-component/pages/background.tsx
+++ b/examples/image-legacy-component/pages/background.tsx
@@ -1,6 +1,6 @@
-import Image from 'next/legacy/image'
-import ViewSource from '../components/view-source'
-import styles from '../styles.module.css'
+import Image from "next/legacy/image";
+import ViewSource from "../components/view-source";
+import styles from "../styles.module.css";
 
 const BackgroundPage = () => (
   <div>
@@ -20,6 +20,6 @@ const BackgroundPage = () => (
       as a Background
     </p>
   </div>
-)
+);
 
-export default BackgroundPage
+export default BackgroundPage;
diff --git a/examples/image-legacy-component/pages/color.tsx b/examples/image-legacy-component/pages/color.tsx
index 3f9cdef342..74aa6968ad 100644
--- a/examples/image-legacy-component/pages/color.tsx
+++ b/examples/image-legacy-component/pages/color.tsx
@@ -1,20 +1,20 @@
-import Image from 'next/legacy/image'
-import ViewSource from '../components/view-source'
+import Image from "next/legacy/image";
+import ViewSource from "../components/view-source";
 
 // Pixel GIF code adapted from https://stackoverflow.com/a/33919020/266535
 const keyStr =
-  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
 
 const triplet = (e1: number, e2: number, e3: number) =>
   keyStr.charAt(e1 >> 2) +
   keyStr.charAt(((e1 & 3) << 4) | (e2 >> 4)) +
   keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
-  keyStr.charAt(e3 & 63)
+  keyStr.charAt(e3 & 63);
 
 const rgbDataURL = (r: number, g: number, b: number) =>
   `data:image/gif;base64,R0lGODlhAQABAPAA${
     triplet(0, r, g) + triplet(b, 255, 255)
-  }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`
+  }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`;
 
 const Color = () => (
   <div>
@@ -37,6 +37,6 @@ const Color = () => (
       height={1000}
     />
   </div>
-)
+);
 
-export default Color
+export default Color;
diff --git a/examples/image-legacy-component/pages/index.tsx b/examples/image-legacy-component/pages/index.tsx
index 03dc867ab0..ef052dd3f2 100644
--- a/examples/image-legacy-component/pages/index.tsx
+++ b/examples/image-legacy-component/pages/index.tsx
@@ -1,13 +1,13 @@
-import styles from '../styles.module.css'
-import Image from 'next/legacy/image'
-import Link from 'next/link'
-import ViewSource from '../components/view-source'
-import vercel from '../public/vercel.png'
-import type { PropsWithChildren } from 'react'
+import styles from "../styles.module.css";
+import Image from "next/legacy/image";
+import Link from "next/link";
+import ViewSource from "../components/view-source";
+import vercel from "../public/vercel.png";
+import type { PropsWithChildren } from "react";
 
 const Code = (props: PropsWithChildren<{}>) => (
   <code className={styles.inlineCode} {...props} />
-)
+);
 
 const Index = () => (
   <div className={styles.container}>
@@ -15,17 +15,17 @@ const Index = () => (
     <div className={styles.card}>
       <h1>Image Component with Next.js</h1>
       <p>
-        This page demonstrates the usage of the{' '}
+        This page demonstrates the usage of the{" "}
         <a href="https://nextjs.org/docs/api-reference/next/legacy/image">
           next/legacy/image
-        </a>{' '}
+        </a>{" "}
         component with live examples.
       </p>
       <p>
-        This component is designed to{' '}
+        This component is designed to{" "}
         <a href="https://nextjs.org/docs/basic-features/image-optimization">
           automatically optimize
-        </a>{' '}
+        </a>{" "}
         images on-demand as the browser requests them.
       </p>
       <hr className={styles.hr} />
@@ -87,7 +87,7 @@ const Index = () => (
       <hr className={styles.hr} />
       <h2 id="internal">Internal Image</h2>
       <p>
-        The following is an example of a reference to an internal image from the{' '}
+        The following is an example of a reference to an internal image from the{" "}
         <Code>public</Code> directory.
       </p>
       <p>
@@ -98,7 +98,7 @@ const Index = () => (
       <hr className={styles.hr} />
       <h2 id="external">External Image</h2>
       <p>
-        The following is an example of a reference to an external image at{' '}
+        The following is an example of a reference to an external image at{" "}
         <Code>assets.vercel.com</Code>.
       </p>
       <p>
@@ -117,14 +117,14 @@ const Index = () => (
         You can optionally configure a cloud provider, device sizes, and more!
       </p>
       <p>
-        Checkout the{' '}
+        Checkout the{" "}
         <a href="https://nextjs.org/docs/basic-features/image-optimization">
           Image Optimization documentation
-        </a>{' '}
+        </a>{" "}
         to learn more.
       </p>
     </div>
   </div>
-)
+);
 
-export default Index
+export default Index;
diff --git a/examples/image-legacy-component/pages/layout-fill.tsx b/examples/image-legacy-component/pages/layout-fill.tsx
index a5bfde37d5..f91bd71a7a 100644
--- a/examples/image-legacy-component/pages/layout-fill.tsx
+++ b/examples/image-legacy-component/pages/layout-fill.tsx
@@ -1,15 +1,15 @@
-import Image from 'next/legacy/image'
-import ViewSource from '../components/view-source'
-import mountains from '../public/mountains.jpg'
+import Image from "next/legacy/image";
+import ViewSource from "../components/view-source";
+import mountains from "../public/mountains.jpg";
 
 const Fill = () => (
   <div>
     <ViewSource pathname="pages/layout-fill.tsx" />
     <h1>Image Component With Layout Fill</h1>
-    <div style={{ position: 'relative', width: '300px', height: '500px' }}>
+    <div style={{ position: "relative", width: "300px", height: "500px" }}>
       <Image alt="Mountains" src={mountains} layout="fill" objectFit="cover" />
     </div>
-    <div style={{ position: 'relative', width: '300px', height: '500px' }}>
+    <div style={{ position: "relative", width: "300px", height: "500px" }}>
       <Image
         alt="Mountains"
         src={mountains}
@@ -17,7 +17,7 @@ const Fill = () => (
         objectFit="contain"
       />
     </div>
-    <div style={{ position: 'relative', width: '300px', height: '500px' }}>
+    <div style={{ position: "relative", width: "300px", height: "500px" }}>
       <Image
         alt="Mountains"
         src={mountains}
@@ -27,6 +27,6 @@ const Fill = () => (
       />
     </div>
   </div>
-)
+);
 
-export default Fill
+export default Fill;
diff --git a/examples/image-legacy-component/pages/layout-fixed.tsx b/examples/image-legacy-component/pages/layout-fixed.tsx
index 8bc627e707..2d217692f1 100644
--- a/examples/image-legacy-component/pages/layout-fixed.tsx
+++ b/examples/image-legacy-component/pages/layout-fixed.tsx
@@ -1,6 +1,6 @@
-import Image from 'next/legacy/image'
-import ViewSource from '../components/view-source'
-import mountains from '../public/mountains.jpg'
+import Image from "next/legacy/image";
+import ViewSource from "../components/view-source";
+import mountains from "../public/mountains.jpg";
 
 const Fixed = () => (
   <div>
@@ -14,6 +14,6 @@ const Fixed = () => (
       height={475}
     />
   </div>
-)
+);
 
-export default Fixed
+export default Fixed;
diff --git a/examples/image-legacy-component/pages/layout-intrinsic.tsx b/examples/image-legacy-component/pages/layout-intrinsic.tsx
index cdfd9c835f..0e6d13e952 100644
--- a/examples/image-legacy-component/pages/layout-intrinsic.tsx
+++ b/examples/image-legacy-component/pages/layout-intrinsic.tsx
@@ -1,6 +1,6 @@
-import Image from 'next/legacy/image'
-import ViewSource from '../components/view-source'
-import mountains from '../public/mountains.jpg'
+import Image from "next/legacy/image";
+import ViewSource from "../components/view-source";
+import mountains from "../public/mountains.jpg";
 
 const Intrinsic = () => (
   <div>
@@ -14,6 +14,6 @@ const Intrinsic = () => (
       height={475}
     />
   </div>
-)
+);
 
-export default Intrinsic
+export default Intrinsic;
diff --git a/examples/image-legacy-component/pages/layout-responsive.tsx b/examples/image-legacy-component/pages/layout-responsive.tsx
index 97954d3716..a6f8cab71e 100644
--- a/examples/image-legacy-component/pages/layout-responsive.tsx
+++ b/examples/image-legacy-component/pages/layout-responsive.tsx
@@ -1,6 +1,6 @@
-import Image from 'next/legacy/image'
-import ViewSource from '../components/view-source'
-import mountains from '../public/mountains.jpg'
+import Image from "next/legacy/image";
+import ViewSource from "../components/view-source";
+import mountains from "../public/mountains.jpg";
 
 const Responsive = () => (
   <div>
@@ -14,6 +14,6 @@ const Responsive = () => (
       height={475}
     />
   </div>
-)
+);
 
-export default Responsive
+export default Responsive;
diff --git a/examples/image-legacy-component/pages/placeholder.tsx b/examples/image-legacy-component/pages/placeholder.tsx
index cd36225b40..b13ab53f9f 100644
--- a/examples/image-legacy-component/pages/placeholder.tsx
+++ b/examples/image-legacy-component/pages/placeholder.tsx
@@ -1,6 +1,6 @@
-import Image from 'next/legacy/image'
-import ViewSource from '../components/view-source'
-import mountains from '../public/mountains.jpg'
+import Image from "next/legacy/image";
+import ViewSource from "../components/view-source";
+import mountains from "../public/mountains.jpg";
 
 const PlaceholderBlur = () => (
   <div>
@@ -14,6 +14,6 @@ const PlaceholderBlur = () => (
       height={475}
     />
   </div>
-)
+);
 
-export default PlaceholderBlur
+export default PlaceholderBlur;
diff --git a/examples/image-legacy-component/pages/shimmer.tsx b/examples/image-legacy-component/pages/shimmer.tsx
index bc59c89932..a931063f4d 100644
--- a/examples/image-legacy-component/pages/shimmer.tsx
+++ b/examples/image-legacy-component/pages/shimmer.tsx
@@ -1,5 +1,5 @@
-import Image from 'next/legacy/image'
-import ViewSource from '../components/view-source'
+import Image from "next/legacy/image";
+import ViewSource from "../components/view-source";
 
 const shimmer = (w: number, h: number) => `
 <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -13,12 +13,12 @@ const shimmer = (w: number, h: number) => `
   <rect width="${w}" height="${h}" fill="#333" />
   <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
   <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
-</svg>`
+</svg>`;
 
 const toBase64 = (str: string) =>
-  typeof window === 'undefined'
-    ? Buffer.from(str).toString('base64')
-    : window.btoa(str)
+  typeof window === "undefined"
+    ? Buffer.from(str).toString("base64")
+    : window.btoa(str);
 
 const Shimmer = () => (
   <div>
@@ -33,6 +33,6 @@ const Shimmer = () => (
       height={475}
     />
   </div>
-)
+);
 
-export default Shimmer
+export default Shimmer;
diff --git a/examples/image-legacy-component/styles.module.css b/examples/image-legacy-component/styles.module.css
index 2e3e92d886..cca13dc3bb 100644
--- a/examples/image-legacy-component/styles.module.css
+++ b/examples/image-legacy-component/styles.module.css
@@ -23,7 +23,7 @@
 
 .inlineCode::before,
 .inlineCode::after {
-  content: '`';
+  content: "`";
 }
 
 .hr {
diff --git a/examples/inngest/next.config.js b/examples/inngest/next.config.js
index 767719fc4f..658404ac69 100755
--- a/examples/inngest/next.config.js
+++ b/examples/inngest/next.config.js
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/inngest/src/app/api/inngest/route.ts b/examples/inngest/src/app/api/inngest/route.ts
index ed9c2f485a..1c43531427 100755
--- a/examples/inngest/src/app/api/inngest/route.ts
+++ b/examples/inngest/src/app/api/inngest/route.ts
@@ -1,5 +1,5 @@
-import { serve } from 'inngest/next'
-import { inngest } from '@/inngest/inngest.client'
-import { helloWorld } from '@/inngest/functions/hello-world'
+import { serve } from "inngest/next";
+import { inngest } from "@/inngest/inngest.client";
+import { helloWorld } from "@/inngest/functions/hello-world";
 
-export const { GET, POST, PUT } = serve(inngest, [helloWorld])
+export const { GET, POST, PUT } = serve(inngest, [helloWorld]);
diff --git a/examples/inngest/src/app/layout.tsx b/examples/inngest/src/app/layout.tsx
index 52ca0eb7bc..133d873d52 100755
--- a/examples/inngest/src/app/layout.tsx
+++ b/examples/inngest/src/app/layout.tsx
@@ -1,18 +1,18 @@
-import type { Metadata } from 'next'
+import type { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Next.js Inngest Example',
-  description: 'Generated by create next app',
-}
+  title: "Next.js Inngest Example",
+  description: "Generated by create next app",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/inngest/src/app/page.tsx b/examples/inngest/src/app/page.tsx
index a19c4b3261..3089b9b430 100755
--- a/examples/inngest/src/app/page.tsx
+++ b/examples/inngest/src/app/page.tsx
@@ -1,16 +1,16 @@
-import { inngest } from '@/inngest/inngest.client'
-import { redirect } from 'next/navigation'
+import { inngest } from "@/inngest/inngest.client";
+import { redirect } from "next/navigation";
 
 export default function Home() {
   async function triggerInngestEvent() {
-    'use server'
+    "use server";
     await inngest.send({
-      name: 'test/hello.world',
+      name: "test/hello.world",
       data: {
-        message: 'Hello from Next.js!',
+        message: "Hello from Next.js!",
       },
-    })
-    redirect('http://localhost:8288/stream')
+    });
+    redirect("http://localhost:8288/stream");
   }
   return (
     <main>
@@ -20,5 +20,5 @@ export default function Home() {
         </form>
       </div>
     </main>
-  )
+  );
 }
diff --git a/examples/inngest/src/inngest/functions/hello-world.ts b/examples/inngest/src/inngest/functions/hello-world.ts
index 304bb6d955..a31ddf4d00 100755
--- a/examples/inngest/src/inngest/functions/hello-world.ts
+++ b/examples/inngest/src/inngest/functions/hello-world.ts
@@ -1,10 +1,10 @@
-import { inngest } from '../inngest.client'
+import { inngest } from "../inngest.client";
 
 export const helloWorld = inngest.createFunction(
-  { id: 'hello-world', name: 'Hello World' },
-  { event: 'test/hello.world' },
+  { id: "hello-world", name: "Hello World" },
+  { event: "test/hello.world" },
   async ({ event, step }) => {
-    await step.sleep('sleep for a second', '1s')
-    return { event, body: event.data.message }
-  }
-)
+    await step.sleep("sleep for a second", "1s");
+    return { event, body: event.data.message };
+  },
+);
diff --git a/examples/inngest/src/inngest/inngest.client.ts b/examples/inngest/src/inngest/inngest.client.ts
index ed92e911e4..c11ec011e3 100755
--- a/examples/inngest/src/inngest/inngest.client.ts
+++ b/examples/inngest/src/inngest/inngest.client.ts
@@ -1,4 +1,4 @@
-import { Inngest } from 'inngest'
+import { Inngest } from "inngest";
 
 // Create a client to send and receive events
-export const inngest = new Inngest({ id: 'Basic Inngest Application' })
+export const inngest = new Inngest({ id: "Basic Inngest Application" });
diff --git a/examples/layout-component/components/layout.tsx b/examples/layout-component/components/layout.tsx
index 86a1c40d69..a42268da89 100644
--- a/examples/layout-component/components/layout.tsx
+++ b/examples/layout-component/components/layout.tsx
@@ -1,9 +1,9 @@
-import Head from 'next/head'
-import styles from './layout.module.css'
+import Head from "next/head";
+import styles from "./layout.module.css";
 
 type LayoutProps = {
-  children: React.ReactNode
-}
+  children: React.ReactNode;
+};
 
 export default function Layout({ children }: LayoutProps) {
   return (
@@ -13,5 +13,5 @@ export default function Layout({ children }: LayoutProps) {
       </Head>
       <main className={styles.main}>{children}</main>
     </>
-  )
+  );
 }
diff --git a/examples/layout-component/components/sidebar.tsx b/examples/layout-component/components/sidebar.tsx
index c35b13f41b..b3819599c9 100644
--- a/examples/layout-component/components/sidebar.tsx
+++ b/examples/layout-component/components/sidebar.tsx
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import styles from './sidebar.module.css'
+import Link from "next/link";
+import styles from "./sidebar.module.css";
 
 export default function Sidebar() {
   return (
@@ -9,5 +9,5 @@ export default function Sidebar() {
       <Link href="/about">About</Link>
       <Link href="/contact">Contact</Link>
     </nav>
-  )
+  );
 }
diff --git a/examples/layout-component/global.css b/examples/layout-component/global.css
index 350e2d10c0..3f5fbae696 100644
--- a/examples/layout-component/global.css
+++ b/examples/layout-component/global.css
@@ -7,6 +7,6 @@
 body {
   margin: 0;
   font-size: 24px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
diff --git a/examples/layout-component/pages/_app.tsx b/examples/layout-component/pages/_app.tsx
index 49b11462c1..a6d3c8989e 100644
--- a/examples/layout-component/pages/_app.tsx
+++ b/examples/layout-component/pages/_app.tsx
@@ -1,17 +1,17 @@
-import type { NextPage } from 'next'
-import type { AppProps } from 'next/app'
+import type { NextPage } from "next";
+import type { AppProps } from "next/app";
 
 export type NextPageWithLayout = NextPage & {
-  getLayout?: (page: React.ReactElement) => React.ReactNode
-}
+  getLayout?: (page: React.ReactElement) => React.ReactNode;
+};
 
 type AppPropsWithLayout = AppProps & {
-  Component: NextPageWithLayout
-}
+  Component: NextPageWithLayout;
+};
 
 export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   // Use the layout defined at the page level, if available
-  const getLayout = Component.getLayout ?? ((page) => page)
+  const getLayout = Component.getLayout ?? ((page) => page);
 
-  return getLayout(<Component {...pageProps} />)
+  return getLayout(<Component {...pageProps} />);
 }
diff --git a/examples/layout-component/pages/about.tsx b/examples/layout-component/pages/about.tsx
index ba489f7d58..7a264f6afc 100644
--- a/examples/layout-component/pages/about.tsx
+++ b/examples/layout-component/pages/about.tsx
@@ -1,6 +1,6 @@
-import type { NextPageWithLayout } from './_app'
-import Layout from '../components/layout'
-import Sidebar from '../components/sidebar'
+import type { NextPageWithLayout } from "./_app";
+import Layout from "../components/layout";
+import Sidebar from "../components/sidebar";
 
 const About: NextPageWithLayout = () => {
   return (
@@ -25,15 +25,15 @@ const About: NextPageWithLayout = () => {
       </p>
       <h3>Try It Out</h3>
       <p>
-        To visualize this, try tying in the search input in the{' '}
+        To visualize this, try tying in the search input in the{" "}
         <code>Sidebar</code> and then changing routes. You'll notice the input
         state is persisted.
       </p>
     </section>
-  )
-}
+  );
+};
 
-export default About
+export default About;
 
 About.getLayout = function getLayout(page: React.ReactElement) {
   return (
@@ -41,5 +41,5 @@ About.getLayout = function getLayout(page: React.ReactElement) {
       <Sidebar />
       {page}
     </Layout>
-  )
-}
+  );
+};
diff --git a/examples/layout-component/pages/contact.tsx b/examples/layout-component/pages/contact.tsx
index 46bd446864..280d3bf962 100644
--- a/examples/layout-component/pages/contact.tsx
+++ b/examples/layout-component/pages/contact.tsx
@@ -1,6 +1,6 @@
-import type { NextPageWithLayout } from './_app'
-import Layout from '../components/layout'
-import Sidebar from '../components/sidebar'
+import type { NextPageWithLayout } from "./_app";
+import Layout from "../components/layout";
+import Sidebar from "../components/sidebar";
 
 const Contact: NextPageWithLayout = () => {
   return (
@@ -25,15 +25,15 @@ const Contact: NextPageWithLayout = () => {
       </p>
       <h3>Try It Out</h3>
       <p>
-        To visualize this, try tying in the search input in the{' '}
+        To visualize this, try tying in the search input in the{" "}
         <code>Sidebar</code> and then changing routes. You'll notice the input
         state is persisted.
       </p>
     </section>
-  )
-}
+  );
+};
 
-export default Contact
+export default Contact;
 
 Contact.getLayout = function getLayout(page: React.ReactElement) {
   return (
@@ -41,5 +41,5 @@ Contact.getLayout = function getLayout(page: React.ReactElement) {
       <Sidebar />
       {page}
     </Layout>
-  )
-}
+  );
+};
diff --git a/examples/layout-component/pages/index.tsx b/examples/layout-component/pages/index.tsx
index fbeb83f2f8..3a3941fa12 100644
--- a/examples/layout-component/pages/index.tsx
+++ b/examples/layout-component/pages/index.tsx
@@ -1,6 +1,6 @@
-import type { NextPageWithLayout } from './_app'
-import Layout from '../components/layout'
-import Sidebar from '../components/sidebar'
+import type { NextPageWithLayout } from "./_app";
+import Layout from "../components/layout";
+import Sidebar from "../components/sidebar";
 
 const Index: NextPageWithLayout = () => {
   return (
@@ -25,15 +25,15 @@ const Index: NextPageWithLayout = () => {
       </p>
       <h3>Try It Out</h3>
       <p>
-        To visualize this, try tying in the search input in the{' '}
+        To visualize this, try tying in the search input in the{" "}
         <code>Sidebar</code> and then changing routes. You'll notice the input
         state is persisted.
       </p>
     </section>
-  )
-}
+  );
+};
 
-export default Index
+export default Index;
 
 Index.getLayout = function getLayout(page: React.ReactElement) {
   return (
@@ -41,5 +41,5 @@ Index.getLayout = function getLayout(page: React.ReactElement) {
       <Sidebar />
       {page}
     </Layout>
-  )
-}
+  );
+};
diff --git a/examples/markdoc/markdoc/functions.ts b/examples/markdoc/markdoc/functions.ts
index c846085c19..17a03f4f03 100644
--- a/examples/markdoc/markdoc/functions.ts
+++ b/examples/markdoc/markdoc/functions.ts
@@ -1,2 +1,2 @@
 /* Use this file to export your Markdoc functions */
-export default {}
+export default {};
diff --git a/examples/markdoc/markdoc/nodes.ts b/examples/markdoc/markdoc/nodes.ts
index 493e846556..7e5b827e28 100644
--- a/examples/markdoc/markdoc/nodes.ts
+++ b/examples/markdoc/markdoc/nodes.ts
@@ -1,2 +1,2 @@
 /* Use this file to export your Markdoc nodes */
-export default {}
+export default {};
diff --git a/examples/markdoc/markdoc/tags.ts b/examples/markdoc/markdoc/tags.ts
index cfdda224f2..75a54d4150 100644
--- a/examples/markdoc/markdoc/tags.ts
+++ b/examples/markdoc/markdoc/tags.ts
@@ -1,2 +1,2 @@
 /* Use this file to export your Markdoc tags */
-export default {}
+export default {};
diff --git a/examples/markdoc/next.config.js b/examples/markdoc/next.config.js
index 76948d20e5..e7dada7246 100644
--- a/examples/markdoc/next.config.js
+++ b/examples/markdoc/next.config.js
@@ -1,6 +1,6 @@
-const withMarkdoc = require('@markdoc/next.js')
+const withMarkdoc = require("@markdoc/next.js");
 
 module.exports =
   withMarkdoc(/* config: https://markdoc.io/docs/nextjs#options */)({
-    pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdoc'],
-  })
+    pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdoc"],
+  });
diff --git a/examples/markdoc/pages/_app.tsx b/examples/markdoc/pages/_app.tsx
index 8130a5c124..ceebc12cc8 100644
--- a/examples/markdoc/pages/_app.tsx
+++ b/examples/markdoc/pages/_app.tsx
@@ -1,7 +1,7 @@
-import type { AppProps } from 'next/app'
+import type { AppProps } from "next/app";
 
-import '../public/globals.css'
+import "../public/globals.css";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/markdoc/public/globals.css b/examples/markdoc/public/globals.css
index e6bbf54725..d97aabc5a0 100644
--- a/examples/markdoc/public/globals.css
+++ b/examples/markdoc/public/globals.css
@@ -1,7 +1,7 @@
 body {
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   color: rgba(60, 66, 87, 1);
   margin: 0;
 }
diff --git a/examples/middleware-matcher/middleware.ts b/examples/middleware-matcher/middleware.ts
index 2db6c8c807..4c2697451b 100644
--- a/examples/middleware-matcher/middleware.ts
+++ b/examples/middleware-matcher/middleware.ts
@@ -1,24 +1,24 @@
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
 
 export default function middleware(req: NextRequest) {
-  const path = req.nextUrl.pathname
-  const slug = path.slice(1)
+  const path = req.nextUrl.pathname;
+  const slug = path.slice(1);
 
   // Set a cookie on the response using the `ResponseCookies` API
-  const response = NextResponse.next()
+  const response = NextResponse.next();
   response.cookies.set({
-    name: 'middleware-slug',
+    name: "middleware-slug",
     value: slug,
     path,
-  })
+  });
 
-  return response
+  return response;
 }
 
 export const config = {
   matcher: [
-    '/disclaimer', // match a single, specific page
-    '/((?!public|static).*)', // match all paths not starting with 'public' or 'static'
+    "/disclaimer", // match a single, specific page
+    "/((?!public|static).*)", // match all paths not starting with 'public' or 'static'
   ],
-}
+};
diff --git a/examples/middleware-matcher/pages/[...slug].tsx b/examples/middleware-matcher/pages/[...slug].tsx
index bb2be552e6..68cb36273f 100644
--- a/examples/middleware-matcher/pages/[...slug].tsx
+++ b/examples/middleware-matcher/pages/[...slug].tsx
@@ -1,27 +1,27 @@
-import { useRouter } from 'next/router'
+import { useRouter } from "next/router";
 
 function hasMiddlewareMatched(slug?: string[]) {
   const values =
-    (typeof document !== 'undefined' ? document.cookie : '')
-      .split(';')
-      .map((pair) => pair.split('='))
-      .filter(([key]) => key === 'middleware-slug')
-      .map(([, value]) => value.trim()) ?? []
-  return values.some((value) => value === slug?.join('/'))
+    (typeof document !== "undefined" ? document.cookie : "")
+      .split(";")
+      .map((pair) => pair.split("="))
+      .filter(([key]) => key === "middleware-slug")
+      .map(([, value]) => value.trim()) ?? [];
+  return values.some((value) => value === slug?.join("/"));
 }
 
 export default function ContentPage() {
-  const router = useRouter()
-  const slug = router.query.slug as string[] // slug is an array of path segments
+  const router = useRouter();
+  const slug = router.query.slug as string[]; // slug is an array of path segments
 
   return (
     <>
       <h1>
         {hasMiddlewareMatched(slug)
-          ? 'Middleware matched!'
-          : 'Middleware ignored me'}
+          ? "Middleware matched!"
+          : "Middleware ignored me"}
       </h1>
-      <a href="/">{'<-'} back</a>
+      <a href="/">{"<-"} back</a>
     </>
-  )
+  );
 }
diff --git a/examples/middleware-matcher/pages/index.tsx b/examples/middleware-matcher/pages/index.tsx
index feec188624..b16c122f7c 100644
--- a/examples/middleware-matcher/pages/index.tsx
+++ b/examples/middleware-matcher/pages/index.tsx
@@ -1,20 +1,20 @@
 export default function Home() {
-  const matching = ['/about', '/about/topic/cats', '/public/disclaimer']
-  const notMatching = ['/public', '/public/disclaimer/nested', '/static']
+  const matching = ["/about", "/about/topic/cats", "/public/disclaimer"];
+  const notMatching = ["/public", "/public/disclaimer/nested", "/static"];
   return (
     <div>
       <h1>Middleware matching</h1>
       <p>The current middleware configuration is:</p>
       <pre>
-        export const config = {'{'}
+        export const config = {"{"}
         <br />
-        {'  '}matcher: [ <br />
-        {'    '}'/public/disclaimer', // match a single, specific page
+        {"  "}matcher: [ <br />
+        {"    "}'/public/disclaimer', // match a single, specific page
         <br />
-        {'    '}'/((?!public|static).*) // match all pages not starting with
+        {"    "}'/((?!public|static).*) // match all pages not starting with
         'public' or 'static' <br />
-        {'   '}] <br />
-        {'}'}
+        {"   "}] <br />
+        {"}"}
       </pre>
       <ul>
         {[...notMatching, ...matching].map((href) => (
@@ -24,5 +24,5 @@ export default function Home() {
         ))}
       </ul>
     </div>
-  )
+  );
 }
diff --git a/examples/middleware/middleware.ts b/examples/middleware/middleware.ts
index 56e29051ed..80fe2b8c26 100644
--- a/examples/middleware/middleware.ts
+++ b/examples/middleware/middleware.ts
@@ -1,15 +1,15 @@
-import { NextRequest, NextResponse } from 'next/server'
+import { NextRequest, NextResponse } from "next/server";
 
 export function middleware(request: NextRequest) {
-  if (request.nextUrl.pathname === '/about') {
-    return NextResponse.redirect(new URL('/redirected', request.url))
+  if (request.nextUrl.pathname === "/about") {
+    return NextResponse.redirect(new URL("/redirected", request.url));
   }
-  if (request.nextUrl.pathname === '/another') {
-    return NextResponse.rewrite(new URL('/rewrite', request.url))
+  if (request.nextUrl.pathname === "/another") {
+    return NextResponse.rewrite(new URL("/rewrite", request.url));
   }
-  return NextResponse.next()
+  return NextResponse.next();
 }
 
 export const config = {
-  matcher: ['/about/:path*', '/another/:path*'],
-}
+  matcher: ["/about/:path*", "/another/:path*"],
+};
diff --git a/examples/middleware/next.config.js b/examples/middleware/next.config.js
index a843cbee09..91ef62f0db 100755
--- a/examples/middleware/next.config.js
+++ b/examples/middleware/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/middleware/pages/_app.tsx b/examples/middleware/pages/_app.tsx
index 762941b054..ef51d6851d 100755
--- a/examples/middleware/pages/_app.tsx
+++ b/examples/middleware/pages/_app.tsx
@@ -1,7 +1,7 @@
-import type { AppProps } from 'next/app'
+import type { AppProps } from "next/app";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/middleware/pages/about.tsx b/examples/middleware/pages/about.tsx
index 2b0e0844d5..a8acd7ace9 100644
--- a/examples/middleware/pages/about.tsx
+++ b/examples/middleware/pages/about.tsx
@@ -1,7 +1,7 @@
-import { NextPage } from 'next'
+import { NextPage } from "next";
 
 export const AboutPage: NextPage = () => {
-  return <h1>About</h1>
-}
+  return <h1>About</h1>;
+};
 
-export default AboutPage
+export default AboutPage;
diff --git a/examples/middleware/pages/about2.tsx b/examples/middleware/pages/about2.tsx
index 7ce3d4fdf6..8f0779125b 100644
--- a/examples/middleware/pages/about2.tsx
+++ b/examples/middleware/pages/about2.tsx
@@ -1,7 +1,7 @@
-import { NextPage } from 'next'
+import { NextPage } from "next";
 
 export const About2Page: NextPage = () => {
-  return <h1>About 2</h1>
-}
+  return <h1>About 2</h1>;
+};
 
-export default About2Page
+export default About2Page;
diff --git a/examples/middleware/pages/another.tsx b/examples/middleware/pages/another.tsx
index c0db3a59de..9f7a7ca6e0 100644
--- a/examples/middleware/pages/another.tsx
+++ b/examples/middleware/pages/another.tsx
@@ -1,7 +1,7 @@
-import { NextPage } from 'next'
+import { NextPage } from "next";
 
 export const AnotherPage: NextPage = () => {
-  return <h1>Another</h1>
-}
+  return <h1>Another</h1>;
+};
 
-export default AnotherPage
+export default AnotherPage;
diff --git a/examples/middleware/pages/index.tsx b/examples/middleware/pages/index.tsx
index bca2388f96..74af336304 100755
--- a/examples/middleware/pages/index.tsx
+++ b/examples/middleware/pages/index.tsx
@@ -1,5 +1,5 @@
-import type { NextPage } from 'next'
-import Link from 'next/link'
+import type { NextPage } from "next";
+import Link from "next/link";
 
 const Home: NextPage = () => {
   return (
@@ -21,7 +21,7 @@ const Home: NextPage = () => {
         </Link>
       </p>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/examples/middleware/pages/redirected.tsx b/examples/middleware/pages/redirected.tsx
index b67db8b5f9..369ade6d85 100644
--- a/examples/middleware/pages/redirected.tsx
+++ b/examples/middleware/pages/redirected.tsx
@@ -1,7 +1,7 @@
-import { NextPage } from 'next'
+import { NextPage } from "next";
 
 export const RedirectedPage: NextPage = () => {
-  return <h1>Redirected from /about</h1>
-}
+  return <h1>Redirected from /about</h1>;
+};
 
-export default RedirectedPage
+export default RedirectedPage;
diff --git a/examples/middleware/pages/rewrite.tsx b/examples/middleware/pages/rewrite.tsx
index 038c47219a..c914b6b76e 100644
--- a/examples/middleware/pages/rewrite.tsx
+++ b/examples/middleware/pages/rewrite.tsx
@@ -1,7 +1,7 @@
-import { NextPage } from 'next'
+import { NextPage } from "next";
 
 export const RewritePage: NextPage = () => {
-  return <h1>Rewrite</h1>
-}
+  return <h1>Rewrite</h1>;
+};
 
-export default RewritePage
+export default RewritePage;
diff --git a/examples/modularize-imports/components/halves/LeftHalf.tsx b/examples/modularize-imports/components/halves/LeftHalf.tsx
index 5f96fe8a0d..e6ce9d3085 100644
--- a/examples/modularize-imports/components/halves/LeftHalf.tsx
+++ b/examples/modularize-imports/components/halves/LeftHalf.tsx
@@ -1,3 +1,3 @@
 export default function LeftHalf() {
-  return <span>Modularize</span>
+  return <span>Modularize</span>;
 }
diff --git a/examples/modularize-imports/components/halves/RightHalf.tsx b/examples/modularize-imports/components/halves/RightHalf.tsx
index b1b5d5e0d3..7d800c26f2 100644
--- a/examples/modularize-imports/components/halves/RightHalf.tsx
+++ b/examples/modularize-imports/components/halves/RightHalf.tsx
@@ -1,3 +1,3 @@
 export default function RightHalf() {
-  return <span>Imports</span>
+  return <span>Imports</span>;
 }
diff --git a/examples/modularize-imports/components/halves/index.tsx b/examples/modularize-imports/components/halves/index.tsx
index 5dcb862a80..650bcf754d 100644
--- a/examples/modularize-imports/components/halves/index.tsx
+++ b/examples/modularize-imports/components/halves/index.tsx
@@ -5,4 +5,4 @@
 // export { LeftHalf, RightHalf };
 
 // Flag as module for TypeScript
-export {}
+export {};
diff --git a/examples/modularize-imports/components/ui/heading-large.tsx b/examples/modularize-imports/components/ui/heading-large.tsx
index c36395f692..28fe9652b5 100644
--- a/examples/modularize-imports/components/ui/heading-large.tsx
+++ b/examples/modularize-imports/components/ui/heading-large.tsx
@@ -1,3 +1,3 @@
 export function HeadingLarge({ children }: { children: React.ReactNode }) {
-  return <h1>{children}</h1>
+  return <h1>{children}</h1>;
 }
diff --git a/examples/modularize-imports/components/ui/index.tsx b/examples/modularize-imports/components/ui/index.tsx
index b84414b379..5905dc3001 100644
--- a/examples/modularize-imports/components/ui/index.tsx
+++ b/examples/modularize-imports/components/ui/index.tsx
@@ -4,4 +4,4 @@
 // export { HeadingLarge };
 
 // Flag as module for TypeScript
-export {}
+export {};
diff --git a/examples/modularize-imports/next.config.js b/examples/modularize-imports/next.config.js
index 69156af263..5c25928725 100644
--- a/examples/modularize-imports/next.config.js
+++ b/examples/modularize-imports/next.config.js
@@ -5,17 +5,17 @@
  **/
 const nextConfig = {
   modularizeImports: {
-    '../components/halves': {
-      transform: '../components/halves/{{ member }}',
+    "../components/halves": {
+      transform: "../components/halves/{{ member }}",
     },
-    '../components/ui': {
+    "../components/ui": {
       // Use `kebabCase` helper to convert `HeadingLarge` to `heading-large`
-      transform: '../components/ui/{{ kebabCase member }}',
+      transform: "../components/ui/{{ kebabCase member }}",
       // Use `skipDefaultConversion`, since `HeadingLarge` is exported
       // using named exports instead of default exports
       skipDefaultConversion: true,
     },
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/modularize-imports/pages/index.tsx b/examples/modularize-imports/pages/index.tsx
index 1c73ce63f8..908ef8fd7b 100644
--- a/examples/modularize-imports/pages/index.tsx
+++ b/examples/modularize-imports/pages/index.tsx
@@ -1,7 +1,7 @@
 // @ts-ignore
-import { LeftHalf, RightHalf } from '../components/halves'
+import { LeftHalf, RightHalf } from "../components/halves";
 // @ts-ignore
-import { HeadingLarge } from '../components/ui'
+import { HeadingLarge } from "../components/ui";
 
 export default function Index() {
   return (
@@ -9,5 +9,5 @@ export default function Index() {
       <LeftHalf />
       <RightHalf />
     </HeadingLarge>
-  )
+  );
 }
diff --git a/examples/nested-components/components/paragraph.tsx b/examples/nested-components/components/paragraph.tsx
index f6be66c4e0..f92085a6f1 100644
--- a/examples/nested-components/components/paragraph.tsx
+++ b/examples/nested-components/components/paragraph.tsx
@@ -1,6 +1,6 @@
 type ParagraphProps = {
-  children: React.ReactNode
-}
+  children: React.ReactNode;
+};
 
 export default function Paragraph({ children }: ParagraphProps) {
   return (
@@ -13,5 +13,5 @@ export default function Paragraph({ children }: ParagraphProps) {
         }
       `}</style>
     </p>
-  )
+  );
 }
diff --git a/examples/nested-components/components/post.tsx b/examples/nested-components/components/post.tsx
index 737713aa0e..7a4388408c 100644
--- a/examples/nested-components/components/post.tsx
+++ b/examples/nested-components/components/post.tsx
@@ -1,7 +1,7 @@
 type PostProps = {
-  title: string
-  children: React.ReactNode
-}
+  title: string;
+  children: React.ReactNode;
+};
 
 export default function Post({ title, children }: PostProps) {
   return (
@@ -22,5 +22,5 @@ export default function Post({ title, children }: PostProps) {
         }
       `}</style>
     </div>
-  )
+  );
 }
diff --git a/examples/nested-components/pages/index.tsx b/examples/nested-components/pages/index.tsx
index 54eb82ad6d..52d1c8d69d 100644
--- a/examples/nested-components/pages/index.tsx
+++ b/examples/nested-components/pages/index.tsx
@@ -1,5 +1,5 @@
-import P from '../components/paragraph'
-import Post from '../components/post'
+import P from "../components/paragraph";
+import Post from "../components/post";
 
 export default function Home() {
   return (
@@ -38,10 +38,10 @@ export default function Home() {
         }
 
         hr::before {
-          content: '***';
+          content: "***";
           color: #ccc;
         }
       `}</style>
     </div>
-  )
+  );
 }
diff --git a/examples/next-css/component/hello-world.tsx b/examples/next-css/component/hello-world.tsx
index a1841e96c5..8ecbf5bec3 100644
--- a/examples/next-css/component/hello-world.tsx
+++ b/examples/next-css/component/hello-world.tsx
@@ -1,9 +1,9 @@
-import css from './hello-world.module.css'
+import css from "./hello-world.module.css";
 
 export default function HelloWorld() {
   return (
     <div className={css.hello}>
       Hello World, I am being styled using CSS Modules!
     </div>
-  )
+  );
 }
diff --git a/examples/next-css/pages/_app.tsx b/examples/next-css/pages/_app.tsx
index bf25d22d46..e25136e3fa 100644
--- a/examples/next-css/pages/_app.tsx
+++ b/examples/next-css/pages/_app.tsx
@@ -1,6 +1,6 @@
-import { AppProps } from 'next/app'
-import '../style.css'
+import { AppProps } from "next/app";
+import "../style.css";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/next-css/pages/index.tsx b/examples/next-css/pages/index.tsx
index 788b6517ce..4a07d0f4e1 100644
--- a/examples/next-css/pages/index.tsx
+++ b/examples/next-css/pages/index.tsx
@@ -1,9 +1,9 @@
-import HelloWorld from '../component/hello-world'
+import HelloWorld from "../component/hello-world";
 
 export default function Home() {
   return (
     <div className="example">
       <HelloWorld />
     </div>
-  )
+  );
 }
diff --git a/examples/next-forms/app/actions.ts b/examples/next-forms/app/actions.ts
index d4ef39309b..dee0d8ca3f 100644
--- a/examples/next-forms/app/actions.ts
+++ b/examples/next-forms/app/actions.ts
@@ -1,12 +1,12 @@
-'use server'
+"use server";
 
-import { revalidatePath } from 'next/cache'
-import postgres from 'postgres'
-import { z } from 'zod'
+import { revalidatePath } from "next/cache";
+import postgres from "postgres";
+import { z } from "zod";
 
 let sql = postgres(process.env.DATABASE_URL || process.env.POSTGRES_URL!, {
-  ssl: 'allow',
-})
+  ssl: "allow",
+});
 
 // CREATE TABLE todos (
 //   id SERIAL PRIMARY KEY,
@@ -15,60 +15,60 @@ let sql = postgres(process.env.DATABASE_URL || process.env.POSTGRES_URL!, {
 
 export async function createTodo(
   prevState: {
-    message: string
+    message: string;
   },
-  formData: FormData
+  formData: FormData,
 ) {
   const schema = z.object({
     todo: z.string().min(1),
-  })
+  });
   const parse = schema.safeParse({
-    todo: formData.get('todo'),
-  })
+    todo: formData.get("todo"),
+  });
 
   if (!parse.success) {
-    return { message: 'Failed to create todo' }
+    return { message: "Failed to create todo" };
   }
 
-  const data = parse.data
+  const data = parse.data;
 
   try {
     await sql`
       INSERT INTO todos (text)
       VALUES (${data.todo})
-    `
+    `;
 
-    revalidatePath('/')
-    return { message: `Added todo ${data.todo}` }
+    revalidatePath("/");
+    return { message: `Added todo ${data.todo}` };
   } catch (e) {
-    return { message: 'Failed to create todo' }
+    return { message: "Failed to create todo" };
   }
 }
 
 export async function deleteTodo(
   prevState: {
-    message: string
+    message: string;
   },
-  formData: FormData
+  formData: FormData,
 ) {
   const schema = z.object({
     id: z.string().min(1),
     todo: z.string().min(1),
-  })
+  });
   const data = schema.parse({
-    id: formData.get('id'),
-    todo: formData.get('todo'),
-  })
+    id: formData.get("id"),
+    todo: formData.get("todo"),
+  });
 
   try {
     await sql`
       DELETE FROM todos
       WHERE id = ${data.id};
-    `
+    `;
 
-    revalidatePath('/')
-    return { message: `Deleted todo ${data.todo}` }
+    revalidatePath("/");
+    return { message: `Deleted todo ${data.todo}` };
   } catch (e) {
-    return { message: 'Failed to delete todo' }
+    return { message: "Failed to delete todo" };
   }
 }
diff --git a/examples/next-forms/app/add-form.tsx b/examples/next-forms/app/add-form.tsx
index 3f57db3039..61c7cba56e 100644
--- a/examples/next-forms/app/add-form.tsx
+++ b/examples/next-forms/app/add-form.tsx
@@ -1,25 +1,25 @@
-'use client'
+"use client";
 
-import { useFormState } from 'react-dom'
-import { useFormStatus } from 'react-dom'
-import { createTodo } from '@/app/actions'
+import { useFormState } from "react-dom";
+import { useFormStatus } from "react-dom";
+import { createTodo } from "@/app/actions";
 
 const initialState = {
-  message: '',
-}
+  message: "",
+};
 
 function SubmitButton() {
-  const { pending } = useFormStatus()
+  const { pending } = useFormStatus();
 
   return (
     <button type="submit" aria-disabled={pending}>
       Add
     </button>
-  )
+  );
 }
 
 export function AddForm() {
-  const [state, formAction] = useFormState(createTodo, initialState)
+  const [state, formAction] = useFormState(createTodo, initialState);
 
   return (
     <form action={formAction}>
@@ -30,5 +30,5 @@ export function AddForm() {
         {state?.message}
       </p>
     </form>
-  )
+  );
 }
diff --git a/examples/next-forms/app/delete-form.tsx b/examples/next-forms/app/delete-form.tsx
index 5d776b42b7..acc633e972 100644
--- a/examples/next-forms/app/delete-form.tsx
+++ b/examples/next-forms/app/delete-form.tsx
@@ -1,24 +1,24 @@
-'use client'
+"use client";
 
-import { useFormState, useFormStatus } from 'react-dom'
-import { deleteTodo } from '@/app/actions'
+import { useFormState, useFormStatus } from "react-dom";
+import { deleteTodo } from "@/app/actions";
 
 const initialState = {
-  message: '',
-}
+  message: "",
+};
 
 function DeleteButton() {
-  const { pending } = useFormStatus()
+  const { pending } = useFormStatus();
 
   return (
     <button type="submit" aria-disabled={pending}>
       Delete
     </button>
-  )
+  );
 }
 
 export function DeleteForm({ id, todo }: { id: number; todo: string }) {
-  const [state, formAction] = useFormState(deleteTodo, initialState)
+  const [state, formAction] = useFormState(deleteTodo, initialState);
 
   return (
     <form action={formAction}>
@@ -29,5 +29,5 @@ export function DeleteForm({ id, todo }: { id: number; todo: string }) {
         {state?.message}
       </p>
     </form>
-  )
+  );
 }
diff --git a/examples/next-forms/app/global.css b/examples/next-forms/app/global.css
index e32f3a1b03..e2d761774d 100644
--- a/examples/next-forms/app/global.css
+++ b/examples/next-forms/app/global.css
@@ -1,6 +1,6 @@
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -16,7 +16,7 @@ label {
   margin-bottom: 5px;
 }
 
-input[type='text'] {
+input[type="text"] {
   border: 1px solid #ccc;
   padding: 10px;
   font-size: 16px;
@@ -43,7 +43,7 @@ button:hover {
   opacity: 0.8;
 }
 
-button[aria-disabled='true'] {
+button[aria-disabled="true"] {
   opacity: 0.5;
   cursor: not-allowed;
 }
diff --git a/examples/next-forms/app/layout.tsx b/examples/next-forms/app/layout.tsx
index 193d648997..5921f43cd1 100644
--- a/examples/next-forms/app/layout.tsx
+++ b/examples/next-forms/app/layout.tsx
@@ -1,18 +1,18 @@
-import './global.css'
+import "./global.css";
 
 export const metadata = {
-  title: 'Next.js Forms Example',
-  description: 'Example application with forms and Postgres.',
-}
+  title: "Next.js Forms Example",
+  description: "Example application with forms and Postgres.",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/next-forms/app/page.tsx b/examples/next-forms/app/page.tsx
index 63c054b25b..e2ab76951f 100644
--- a/examples/next-forms/app/page.tsx
+++ b/examples/next-forms/app/page.tsx
@@ -1,14 +1,14 @@
-import postgres from 'postgres'
+import postgres from "postgres";
 
-import { AddForm } from '@/app/add-form'
-import { DeleteForm } from '@/app/delete-form'
+import { AddForm } from "@/app/add-form";
+import { DeleteForm } from "@/app/delete-form";
 
 let sql = postgres(process.env.DATABASE_URL || process.env.POSTGRES_URL!, {
-  ssl: 'allow',
-})
+  ssl: "allow",
+});
 
 export default async function Home() {
-  let todos = await sql`SELECT * FROM todos`
+  let todos = await sql`SELECT * FROM todos`;
 
   return (
     <main>
@@ -23,5 +23,5 @@ export default async function Home() {
         ))}
       </ul>
     </main>
-  )
+  );
 }
diff --git a/examples/next-offline/next.config.js b/examples/next-offline/next.config.js
index 98c654d709..60875335b6 100644
--- a/examples/next-offline/next.config.js
+++ b/examples/next-offline/next.config.js
@@ -1,5 +1,5 @@
 // @ts-check
-const withOffline = require('next-offline')
+const withOffline = require("next-offline");
 
 /**
  * @type {import('next').NextConfig}
@@ -7,14 +7,14 @@ const withOffline = require('next-offline')
 const nextConfig = {
   workboxOpts: {
     swDest: process.env.NEXT_EXPORT
-      ? 'service-worker.js'
-      : 'static/service-worker.js',
+      ? "service-worker.js"
+      : "static/service-worker.js",
     runtimeCaching: [
       {
         urlPattern: /^https?.*/,
-        handler: 'NetworkFirst',
+        handler: "NetworkFirst",
         options: {
-          cacheName: 'offlineCache',
+          cacheName: "offlineCache",
           expiration: {
             maxEntries: 200,
           },
@@ -25,11 +25,11 @@ const nextConfig = {
   async rewrites() {
     return [
       {
-        source: '/service-worker.js',
-        destination: '/_next/static/service-worker.js',
+        source: "/service-worker.js",
+        destination: "/_next/static/service-worker.js",
       },
-    ]
+    ];
   },
-}
+};
 
-module.exports = withOffline(nextConfig)
+module.exports = withOffline(nextConfig);
diff --git a/examples/next-offline/pages/_document.tsx b/examples/next-offline/pages/_document.tsx
index e0395fc09e..6a20d4c22b 100644
--- a/examples/next-offline/pages/_document.tsx
+++ b/examples/next-offline/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function MyDocument() {
   return (
@@ -11,5 +11,5 @@ export default function MyDocument() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/next-offline/pages/index.tsx b/examples/next-offline/pages/index.tsx
index f1462bba22..9b2a8259cd 100644
--- a/examples/next-offline/pages/index.tsx
+++ b/examples/next-offline/pages/index.tsx
@@ -1,3 +1,3 @@
 export default function Home() {
-  return <div>Next-Offline Example, try to install app via chrome</div>
+  return <div>Next-Offline Example, try to install app via chrome</div>;
 }
diff --git a/examples/panda-css/app/components/link-with-atomic-recipe.tsx b/examples/panda-css/app/components/link-with-atomic-recipe.tsx
index 5328b7c2ec..f19f11a743 100644
--- a/examples/panda-css/app/components/link-with-atomic-recipe.tsx
+++ b/examples/panda-css/app/components/link-with-atomic-recipe.tsx
@@ -1,23 +1,23 @@
-import { cva } from '@/styled-system/css'
+import { cva } from "@/styled-system/css";
 
 const styles = cva({
   base: {
     color: {
-      _default: 'gray.800',
-      _osDark: 'gray.100',
+      _default: "gray.800",
+      _osDark: "gray.100",
     },
-    fontFamily: 'inter',
+    fontFamily: "inter",
   },
   variants: {
     size: {
-      sm: { fontSize: 'sm' },
-      lg: { fontSize: 'lg' },
+      sm: { fontSize: "sm" },
+      lg: { fontSize: "lg" },
     },
   },
   defaultVariants: {
-    size: 'lg',
+    size: "lg",
   },
-})
+});
 
 /**
  * Link with atomic recipe
@@ -26,7 +26,7 @@ const styles = cva({
 export default function LinkWithAtomicRecipe() {
   return (
     <a
-      className={styles({ size: 'lg' })}
+      className={styles({ size: "lg" })}
       href="https://panda-css.com/docs/concepts/recipes#atomic-recipe-or-cva"
       target="_blank"
       rel="noreferrer"
@@ -34,5 +34,5 @@ export default function LinkWithAtomicRecipe() {
       Link with <b>atomic recipe</b>
       <span className="icon">-&gt;</span>
     </a>
-  )
+  );
 }
diff --git a/examples/panda-css/app/components/link-with-atomic-style.tsx b/examples/panda-css/app/components/link-with-atomic-style.tsx
index db27891bc4..b15a919f42 100644
--- a/examples/panda-css/app/components/link-with-atomic-style.tsx
+++ b/examples/panda-css/app/components/link-with-atomic-style.tsx
@@ -1,13 +1,13 @@
-import { css } from '@/styled-system/css'
+import { css } from "@/styled-system/css";
 
 const styles = css({
-  fontSize: 'lg',
+  fontSize: "lg",
   color: {
-    _default: 'gray.800',
-    _osDark: 'gray.100',
+    _default: "gray.800",
+    _osDark: "gray.100",
   },
-  fontFamily: 'inter',
-})
+  fontFamily: "inter",
+});
 
 /**
  * Link with atomic styles
@@ -24,5 +24,5 @@ export default function LinkWithAtomicStyle() {
       Link with <b>atomic style</b>
       <span className="icon">-&gt;</span>
     </a>
-  )
+  );
 }
diff --git a/examples/panda-css/app/components/link-with-config-recipe.tsx b/examples/panda-css/app/components/link-with-config-recipe.tsx
index 6c107170ba..00ab58a1a7 100644
--- a/examples/panda-css/app/components/link-with-config-recipe.tsx
+++ b/examples/panda-css/app/components/link-with-config-recipe.tsx
@@ -1,4 +1,4 @@
-import { link } from '@/styled-system/recipes'
+import { link } from "@/styled-system/recipes";
 
 /**
  * Link with config recipe
@@ -7,7 +7,7 @@ import { link } from '@/styled-system/recipes'
 export default function LinkWithConfigRecipe() {
   return (
     <a
-      className={link({ size: 'lg' })}
+      className={link({ size: "lg" })}
       href="https://panda-css.com/docs/concepts/recipes#config-recipe"
       target="_blank"
       rel="noreferrer"
@@ -15,5 +15,5 @@ export default function LinkWithConfigRecipe() {
       Link with <b>config recipe</b>
       <span className="icon">-&gt;</span>
     </a>
-  )
+  );
 }
diff --git a/examples/panda-css/app/components/link-with-text-styles.tsx b/examples/panda-css/app/components/link-with-text-styles.tsx
index 67fa9efc36..b164325a7e 100644
--- a/examples/panda-css/app/components/link-with-text-styles.tsx
+++ b/examples/panda-css/app/components/link-with-text-styles.tsx
@@ -1,12 +1,12 @@
-import { css } from '@/styled-system/css'
+import { css } from "@/styled-system/css";
 
 const styles = css({
-  textStyle: 'link',
+  textStyle: "link",
   color: {
-    _default: 'gray.800',
-    _osDark: 'gray.100',
+    _default: "gray.800",
+    _osDark: "gray.100",
   },
-})
+});
 
 /**
  * Link with text styles
@@ -23,5 +23,5 @@ export default function LinkWithTextStyles() {
       Link with <b>text styles</b>
       <span className="icon">-&gt;</span>
     </a>
-  )
+  );
 }
diff --git a/examples/panda-css/app/layout.tsx b/examples/panda-css/app/layout.tsx
index 5401d9ec89..3d623df583 100644
--- a/examples/panda-css/app/layout.tsx
+++ b/examples/panda-css/app/layout.tsx
@@ -1,28 +1,28 @@
-import './global.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import "./global.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
 
 // https://panda-css.com/docs/guides/fonts#setup
 const InterFont = Inter({
-  weight: ['400', '500', '700'],
-  display: 'swap',
-  subsets: ['latin'],
-  variable: '--font-inter',
-})
+  weight: ["400", "500", "700"],
+  display: "swap",
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
 
 export const metadata: Metadata = {
-  title: 'Create Next App with Panda CSS',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App with Panda CSS",
+  description: "Generated by create next app",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en" className={`${InterFont.variable}`}>
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/panda-css/app/page.tsx b/examples/panda-css/app/page.tsx
index 4d37f6d0d9..dc0ae83c91 100644
--- a/examples/panda-css/app/page.tsx
+++ b/examples/panda-css/app/page.tsx
@@ -1,17 +1,17 @@
-import { css } from '@/styled-system/css'
-import LinkWithAtomicStyle from '@/app/components/link-with-atomic-style'
-import LinkWithAtomicRecipe from '@/app/components/link-with-atomic-recipe'
-import LinkWithConfigRecipe from '@/app/components/link-with-config-recipe'
-import LinkWithTextStyles from '@/app/components/link-with-text-styles'
+import { css } from "@/styled-system/css";
+import LinkWithAtomicStyle from "@/app/components/link-with-atomic-style";
+import LinkWithAtomicRecipe from "@/app/components/link-with-atomic-recipe";
+import LinkWithConfigRecipe from "@/app/components/link-with-config-recipe";
+import LinkWithTextStyles from "@/app/components/link-with-text-styles";
 
 const styles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: '2rem',
-  p: '6rem',
-  minH: '100vh',
-})
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: "2rem",
+  p: "6rem",
+  minH: "100vh",
+});
 
 export default function Home() {
   return (
@@ -21,5 +21,5 @@ export default function Home() {
       <LinkWithConfigRecipe />
       <LinkWithTextStyles />
     </main>
-  )
+  );
 }
diff --git a/examples/panda-css/next.config.js b/examples/panda-css/next.config.js
index 767719fc4f..658404ac69 100644
--- a/examples/panda-css/next.config.js
+++ b/examples/panda-css/next.config.js
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/panda-css/panda.config.ts b/examples/panda-css/panda.config.ts
index 2306a6f647..f8f56137b9 100644
--- a/examples/panda-css/panda.config.ts
+++ b/examples/panda-css/panda.config.ts
@@ -3,55 +3,55 @@ import {
   defineGlobalStyles,
   defineRecipe,
   defineTextStyles,
-} from '@pandacss/dev'
+} from "@pandacss/dev";
 
 // https://panda-css.com/docs/theming/text-styles#defining-text-styles
 export const textStyles = defineTextStyles({
   link: {
-    description: 'The classic link text style - used in demo links',
+    description: "The classic link text style - used in demo links",
     value: {
-      fontSize: 'lg',
-      fontFamily: 'inter',
+      fontSize: "lg",
+      fontFamily: "inter",
     },
   },
-})
+});
 
 // https://panda-css.com/docs/concepts/recipes#config-recipe
 export const linkRecipe = defineRecipe({
-  className: 'link',
-  description: 'The styles for the link component',
+  className: "link",
+  description: "The styles for the link component",
   base: {
     color: {
-      _default: 'gray.800',
-      _osDark: 'gray.100',
+      _default: "gray.800",
+      _osDark: "gray.100",
     },
-    fontFamily: 'inter',
+    fontFamily: "inter",
   },
   variants: {
     size: {
-      sm: { fontSize: 'sm' },
-      lg: { fontSize: 'lg' },
+      sm: { fontSize: "sm" },
+      lg: { fontSize: "lg" },
     },
   },
   defaultVariants: {
-    size: 'lg',
+    size: "lg",
   },
-})
+});
 
 // https://panda-css.com/docs/concepts/writing-styles#global-styles
 const globalCss = defineGlobalStyles({
   html: {
     bg: {
-      _default: 'white',
-      _osDark: 'black',
+      _default: "white",
+      _osDark: "black",
     },
-    '& .icon': {
+    "& .icon": {
       ml: 2,
-      fontSize: 'lg',
+      fontSize: "lg",
       fontWeight: 700,
     },
   },
-})
+});
 
 // https://panda-css.com/docs/references/config
 export default defineConfig({
@@ -59,7 +59,7 @@ export default defineConfig({
   preflight: true,
 
   // Where to look for your css declarations
-  include: ['./app/**/*.{js,jsx,ts,tsx}'],
+  include: ["./app/**/*.{js,jsx,ts,tsx}"],
 
   // Files to exclude
   exclude: [],
@@ -69,7 +69,7 @@ export default defineConfig({
     extend: {
       tokens: {
         fonts: {
-          inter: { value: 'var(--font-inter)' },
+          inter: { value: "var(--font-inter)" },
         },
       },
       recipes: {
@@ -80,8 +80,8 @@ export default defineConfig({
   },
 
   // The output directory for your css system
-  outdir: 'styled-system',
+  outdir: "styled-system",
 
   // Global styles
   globalCss,
-})
+});
diff --git a/examples/panda-css/postcss.config.js b/examples/panda-css/postcss.config.js
index fb018ee173..1bfc8f1deb 100644
--- a/examples/panda-css/postcss.config.js
+++ b/examples/panda-css/postcss.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   plugins: {
-    '@pandacss/dev/postcss': {},
+    "@pandacss/dev/postcss": {},
   },
-}
+};
diff --git a/examples/progressive-web-app/next.config.js b/examples/progressive-web-app/next.config.js
index 31809c9caa..b8450c5398 100644
--- a/examples/progressive-web-app/next.config.js
+++ b/examples/progressive-web-app/next.config.js
@@ -1,8 +1,8 @@
 /** @type {import('next').NextConfig} */
-const withPWA = require('next-pwa')({
-  dest: 'public',
-})
+const withPWA = require("next-pwa")({
+  dest: "public",
+});
 
 module.exports = withPWA({
   // config
-})
+});
diff --git a/examples/progressive-web-app/pages/_app.tsx b/examples/progressive-web-app/pages/_app.tsx
index 3601ddfa98..7b0717884d 100644
--- a/examples/progressive-web-app/pages/_app.tsx
+++ b/examples/progressive-web-app/pages/_app.tsx
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import '../styles/globals.css'
-import { AppProps } from 'next/app'
+import Head from "next/head";
+import "../styles/globals.css";
+import { AppProps } from "next/app";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -34,5 +34,5 @@ export default function MyApp({ Component, pageProps }: AppProps) {
       </Head>
       <Component {...pageProps} />
     </>
-  )
+  );
 }
diff --git a/examples/progressive-web-app/pages/api/hello.ts b/examples/progressive-web-app/pages/api/hello.ts
index a42f4634c2..4c45d5c90d 100644
--- a/examples/progressive-web-app/pages/api/hello.ts
+++ b/examples/progressive-web-app/pages/api/hello.ts
@@ -1,8 +1,8 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import { NextApiRequest, NextApiResponse } from 'next'
+import { NextApiRequest, NextApiResponse } from "next";
 
 const hello = (req: NextApiRequest, res: NextApiResponse) => {
-  res.status(200).json({ name: 'John Doe' })
-}
+  res.status(200).json({ name: "John Doe" });
+};
 
-export default hello
+export default hello;
diff --git a/examples/progressive-web-app/pages/index.tsx b/examples/progressive-web-app/pages/index.tsx
index 4ee04e47ce..860fd4b3a7 100644
--- a/examples/progressive-web-app/pages/index.tsx
+++ b/examples/progressive-web-app/pages/index.tsx
@@ -1,4 +1,4 @@
-import styles from '../styles/Home.module.css'
+import styles from "../styles/Home.module.css";
 
 export default function Home() {
   return (
@@ -9,7 +9,7 @@ export default function Home() {
         </h1>
 
         <p className={styles.description}>
-          Get started by editing{' '}
+          Get started by editing{" "}
           <code className={styles.code}>pages/index.js</code>
         </p>
 
@@ -52,10 +52,10 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/radix-ui/pages/_app.tsx b/examples/radix-ui/pages/_app.tsx
index 70a3fbbda0..3844f96512 100644
--- a/examples/radix-ui/pages/_app.tsx
+++ b/examples/radix-ui/pages/_app.tsx
@@ -1,5 +1,5 @@
-import '../styles/globals.css'
+import "../styles/globals.css";
 
 export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/radix-ui/pages/index.tsx b/examples/radix-ui/pages/index.tsx
index aa209bff37..eb04fd5b0c 100644
--- a/examples/radix-ui/pages/index.tsx
+++ b/examples/radix-ui/pages/index.tsx
@@ -1,18 +1,18 @@
-import { useState } from 'react'
+import { useState } from "react";
 import {
   HamburgerMenuIcon,
   DotFilledIcon,
   CheckIcon,
   ChevronRightIcon,
-} from '@radix-ui/react-icons'
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+} from "@radix-ui/react-icons";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 
 function RightSlot({ children }) {
   return (
     <div className="ml-auto pl-4 text-gray-500 group-hover:text-gray-200">
       {children}
     </div>
-  )
+  );
 }
 
 function DropdownMenuItem({ children, ...props }) {
@@ -20,13 +20,13 @@ function DropdownMenuItem({ children, ...props }) {
     <DropdownMenu.Item
       {...props}
       className={
-        'group bg-white hover:bg-gray-700 hover:text-gray-200 text-xs rounded flex items-center h-6 px-1 pl-6 relative select-none' +
-        (props.disabled ? ' text-gray-500' : '')
+        "group bg-white hover:bg-gray-700 hover:text-gray-200 text-xs rounded flex items-center h-6 px-1 pl-6 relative select-none" +
+        (props.disabled ? " text-gray-500" : "")
       }
     >
       {children}
     </DropdownMenu.Item>
-  )
+  );
 }
 
 function DropdownMenuCheckboxItem({ children, ...props }) {
@@ -37,7 +37,7 @@ function DropdownMenuCheckboxItem({ children, ...props }) {
     >
       {children}
     </DropdownMenu.CheckboxItem>
-  )
+  );
 }
 
 function DropdownMenuItemIndicator({ children, ...props }) {
@@ -48,19 +48,19 @@ function DropdownMenuItemIndicator({ children, ...props }) {
     >
       {children}
     </DropdownMenu.ItemIndicator>
-  )
+  );
 }
 
 function Separator() {
-  return <DropdownMenu.Separator className="h-[1px] bg-gray-300 m-1" />
+  return <DropdownMenu.Separator className="h-[1px] bg-gray-300 m-1" />;
 }
 
 function DropdownMenuRadioItem({
   children,
   ...props
 }: {
-  children: React.ReactNode
-  value: string
+  children: React.ReactNode;
+  value: string;
 }) {
   return (
     <DropdownMenu.RadioItem
@@ -69,13 +69,13 @@ function DropdownMenuRadioItem({
     >
       {children}
     </DropdownMenu.RadioItem>
-  )
+  );
 }
 
 export default function Home() {
-  const [bookmarksChecked, setBookmarksChecked] = useState(true)
-  const [urlsChecked, setUrlsChecked] = useState(false)
-  const [person, setPerson] = useState('pedro')
+  const [bookmarksChecked, setBookmarksChecked] = useState(true);
+  const [urlsChecked, setUrlsChecked] = useState(false);
+  const [person, setPerson] = useState("pedro");
   return (
     <div className="h-screen w-full flex flex-col space-y-4 items-center justify-center bg-gradient-to-r from-cyan-500 to-blue-500">
       <h1 className="text-6xl text-white font-semibold">
@@ -171,5 +171,5 @@ export default function Home() {
         </DropdownMenu.Content>
       </DropdownMenu.Root>
     </div>
-  )
+  );
 }
diff --git a/examples/radix-ui/postcss.config.js b/examples/radix-ui/postcss.config.js
index 33ad091d26..12a703d900 100644
--- a/examples/radix-ui/postcss.config.js
+++ b/examples/radix-ui/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/radix-ui/tailwind.config.js b/examples/radix-ui/tailwind.config.js
index 9affdc3a71..95b3e1bb10 100644
--- a/examples/radix-ui/tailwind.config.js
+++ b/examples/radix-ui/tailwind.config.js
@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./pages/**/*.{js,ts,jsx,tsx}'],
+  content: ["./pages/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {},
   },
   plugins: [],
-}
+};
diff --git a/examples/react-remove-properties/next.config.js b/examples/react-remove-properties/next.config.js
index f7027ccd40..94646590b1 100644
--- a/examples/react-remove-properties/next.config.js
+++ b/examples/react-remove-properties/next.config.js
@@ -11,6 +11,6 @@ const nextConfig = {
     // JavaScript `RegExp`s. See https://docs.rs/regex.
     // reactRemoveProperties: { properties: ['^data-custom$'] },
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/react-remove-properties/pages/index.tsx b/examples/react-remove-properties/pages/index.tsx
index 3adab6e52d..efb36a4d6e 100644
--- a/examples/react-remove-properties/pages/index.tsx
+++ b/examples/react-remove-properties/pages/index.tsx
@@ -5,5 +5,5 @@ export default function Index() {
         <h1 data-testid="3">Hello World!</h1>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/redirects/components/Code.tsx b/examples/redirects/components/Code.tsx
index 070d744be0..f395fce0a5 100644
--- a/examples/redirects/components/Code.tsx
+++ b/examples/redirects/components/Code.tsx
@@ -1,9 +1,9 @@
-import styles from '../styles.module.css'
+import styles from "../styles.module.css";
 
 type CodeProps = {
-  children: React.ReactNode
-}
+  children: React.ReactNode;
+};
 
 export default function Code({ children }: CodeProps) {
-  return <code className={styles.inlineCode}>{children}</code>
+  return <code className={styles.inlineCode}>{children}</code>;
 }
diff --git a/examples/redirects/next.config.js b/examples/redirects/next.config.js
index 3c8025f651..26781aa144 100644
--- a/examples/redirects/next.config.js
+++ b/examples/redirects/next.config.js
@@ -12,30 +12,30 @@ const nextConfig = {
   async redirects() {
     return [
       {
-        source: '/team',
-        destination: '/about',
+        source: "/team",
+        destination: "/about",
         permanent: false,
       },
       // Path Matching - will match `/old-blog/a`, but not `/old-blog/a/b`
       {
-        source: '/old-blog/:slug',
-        destination: '/news/:slug',
+        source: "/old-blog/:slug",
+        destination: "/news/:slug",
         permanent: false,
       },
       // Wildcard Path Matching - will match `/blog/a` and `/blog/a/b`
       {
-        source: '/blog/:slug*',
-        destination: '/news/:slug*',
+        source: "/blog/:slug*",
+        destination: "/news/:slug*",
         permanent: false,
       },
       // Regex Path Matching - The regex below will match `/post/123` but not `/post/abc`
       {
-        source: '/post/:slug(\\d{1,})',
-        destination: '/news/:slug',
+        source: "/post/:slug(\\d{1,})",
+        destination: "/news/:slug",
         permanent: false,
       },
-    ]
+    ];
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/redirects/pages/about.tsx b/examples/redirects/pages/about.tsx
index 2bce16328b..82f3a2e7bf 100644
--- a/examples/redirects/pages/about.tsx
+++ b/examples/redirects/pages/about.tsx
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import styles from '../styles.module.css'
+import Link from "next/link";
+import styles from "../styles.module.css";
 
 export default function About() {
   return (
@@ -10,5 +10,5 @@ export default function About() {
         <Link href="/">&larr; Back home</Link>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/redirects/pages/index.tsx b/examples/redirects/pages/index.tsx
index db177fafab..c98fe2e4fa 100644
--- a/examples/redirects/pages/index.tsx
+++ b/examples/redirects/pages/index.tsx
@@ -1,6 +1,6 @@
-import styles from '../styles.module.css'
-import Link from 'next/link'
-import Code from '../components/Code'
+import styles from "../styles.module.css";
+import Link from "next/link";
+import Code from "../components/Code";
 
 export default function Index() {
   return (
@@ -9,7 +9,7 @@ export default function Index() {
         <h1>Redirects with Next.js</h1>
         <hr className={styles.hr} />
         <p>
-          The links below are{' '}
+          The links below are{" "}
           <Link
             href="https://nextjs.org/docs/api-reference/next.config.js/redirects"
             legacyBehavior
@@ -17,7 +17,7 @@ export default function Index() {
             <>
               custom <Code>redirects</Code>
             </>
-          </Link>{' '}
+          </Link>{" "}
           that redirect an incoming request path to a different destination
           path.
         </p>
@@ -50,5 +50,5 @@ export default function Index() {
         <hr className={styles.hr} />
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/redirects/pages/news/[...slug].tsx b/examples/redirects/pages/news/[...slug].tsx
index 363e06448c..6c2a768dbf 100644
--- a/examples/redirects/pages/news/[...slug].tsx
+++ b/examples/redirects/pages/news/[...slug].tsx
@@ -1,10 +1,10 @@
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import styles from '../../styles.module.css'
-import Code from '../../components/Code'
+import { useRouter } from "next/router";
+import Link from "next/link";
+import styles from "../../styles.module.css";
+import Code from "../../components/Code";
 
 export default function News() {
-  const { asPath, route, query } = useRouter()
+  const { asPath, route, query } = useRouter();
 
   return (
     <div className={styles.container}>
@@ -15,11 +15,11 @@ export default function News() {
           This page was rendered by <Code>{`pages${route}.tsx`}</Code>.
         </p>
         <p>
-          The query <Code>slug</Code> for this page is:{' '}
+          The query <Code>slug</Code> for this page is:{" "}
           <Code>{JSON.stringify(query.slug)}</Code>
         </p>
         <Link href="/">&larr; Back home</Link>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/redirects/styles.module.css b/examples/redirects/styles.module.css
index cd7bec9b86..c75c982a7c 100644
--- a/examples/redirects/styles.module.css
+++ b/examples/redirects/styles.module.css
@@ -24,7 +24,7 @@
 
 .inlineCode::before,
 .inlineCode::after {
-  content: '`';
+  content: "`";
 }
 
 .hr {
@@ -44,7 +44,7 @@
 }
 
 .list li:before {
-  content: '-';
+  content: "-";
   color: #999999;
   position: absolute;
   margin-left: -1rem;
diff --git a/examples/remove-console/next.config.js b/examples/remove-console/next.config.js
index 95991d7948..a25a89d104 100644
--- a/examples/remove-console/next.config.js
+++ b/examples/remove-console/next.config.js
@@ -7,11 +7,11 @@ const nextConfig = {
   compiler: {
     // Remove `console.*` output except `console.error`
     removeConsole: {
-      exclude: ['error'],
+      exclude: ["error"],
     },
     // Uncomment this to suppress all logs.
     // removeConsole: true,
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/remove-console/pages/index.tsx b/examples/remove-console/pages/index.tsx
index ff010f9e43..3f7ab43e13 100644
--- a/examples/remove-console/pages/index.tsx
+++ b/examples/remove-console/pages/index.tsx
@@ -3,8 +3,8 @@ export default function Index() {
     <div>
       <p>The console should be empty.</p>
     </div>
-  )
+  );
 }
 
-console.log('log from index.js')
-console.error('error log from index.js')
+console.log("log from index.js");
+console.error("error log from index.js");
diff --git a/examples/reproduction-template-pages/next.config.js b/examples/reproduction-template-pages/next.config.js
index 4e2b4c7328..37ddbdb8fa 100644
--- a/examples/reproduction-template-pages/next.config.js
+++ b/examples/reproduction-template-pages/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import("next").NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/reproduction-template-pages/pages/index.tsx b/examples/reproduction-template-pages/pages/index.tsx
index b19de6e8aa..8021c1e682 100644
--- a/examples/reproduction-template-pages/pages/index.tsx
+++ b/examples/reproduction-template-pages/pages/index.tsx
@@ -1,4 +1,4 @@
 /** Add your relevant code here for the issue to reproduce */
 export default function Home() {
-  return null
+  return null;
 }
diff --git a/examples/reproduction-template/app/layout.tsx b/examples/reproduction-template/app/layout.tsx
index 6d7e1ed585..78cbcf1c7e 100644
--- a/examples/reproduction-template/app/layout.tsx
+++ b/examples/reproduction-template/app/layout.tsx
@@ -4,5 +4,5 @@ export default function RootLayout({ children }) {
       <head />
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/reproduction-template/app/page.tsx b/examples/reproduction-template/app/page.tsx
index b19de6e8aa..8021c1e682 100644
--- a/examples/reproduction-template/app/page.tsx
+++ b/examples/reproduction-template/app/page.tsx
@@ -1,4 +1,4 @@
 /** Add your relevant code here for the issue to reproduce */
 export default function Home() {
-  return null
+  return null;
 }
diff --git a/examples/reproduction-template/next.config.js b/examples/reproduction-template/next.config.js
index 4e2b4c7328..37ddbdb8fa 100644
--- a/examples/reproduction-template/next.config.js
+++ b/examples/reproduction-template/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import("next").NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/rewrites/components/Code.tsx b/examples/rewrites/components/Code.tsx
index 070d744be0..f395fce0a5 100644
--- a/examples/rewrites/components/Code.tsx
+++ b/examples/rewrites/components/Code.tsx
@@ -1,9 +1,9 @@
-import styles from '../styles.module.css'
+import styles from "../styles.module.css";
 
 type CodeProps = {
-  children: React.ReactNode
-}
+  children: React.ReactNode;
+};
 
 export default function Code({ children }: CodeProps) {
-  return <code className={styles.inlineCode}>{children}</code>
+  return <code className={styles.inlineCode}>{children}</code>;
 }
diff --git a/examples/rewrites/next.config.js b/examples/rewrites/next.config.js
index ec74206855..7d57fd8e49 100644
--- a/examples/rewrites/next.config.js
+++ b/examples/rewrites/next.config.js
@@ -7,30 +7,30 @@ const nextConfig = {
   async rewrites() {
     return [
       {
-        source: '/team',
-        destination: '/about',
+        source: "/team",
+        destination: "/about",
       },
       {
-        source: '/about-us',
-        destination: '/about',
+        source: "/about-us",
+        destination: "/about",
       },
       // Path Matching - will match `/post/a` but not `/post/a/b`
       {
-        source: '/post/:slug',
-        destination: '/news/:slug',
+        source: "/post/:slug",
+        destination: "/news/:slug",
       },
       // Wildcard Path Matching - will match `/blog/a` and `/blog/a/b`
       {
-        source: '/blog/:slug*',
-        destination: '/news/:slug*',
+        source: "/blog/:slug*",
+        destination: "/news/:slug*",
       },
       // Rewriting to an external URL
       {
-        source: '/docs/:slug',
-        destination: 'http://example.com/docs/:slug',
+        source: "/docs/:slug",
+        destination: "http://example.com/docs/:slug",
       },
-    ]
+    ];
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/rewrites/pages/about.tsx b/examples/rewrites/pages/about.tsx
index 6f52baedb5..5470b194e4 100644
--- a/examples/rewrites/pages/about.tsx
+++ b/examples/rewrites/pages/about.tsx
@@ -1,17 +1,17 @@
-import { useState, useEffect } from 'react'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import styles from '../styles.module.css'
-import Code from '../components/Code'
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import styles from "../styles.module.css";
+import Code from "../components/Code";
 
 export default function About() {
-  const { asPath, route } = useRouter()
-  const [path, setPath] = useState<string | null>(null)
+  const { asPath, route } = useRouter();
+  const [path, setPath] = useState<string | null>(null);
 
   // `asPath` is always `/about` in Node.js (server render), because the page is statically generated
   // so we wait for the browser to load, and use the updated `asPath`, which may be a path
   // other than `/about` when using a rewrite. This way we can avoid a content mismatch
-  useEffect(() => setPath(asPath), [asPath])
+  useEffect(() => setPath(asPath), [asPath]);
 
   return (
     <div className={styles.container}>
@@ -19,11 +19,11 @@ export default function About() {
         <h1>Path: {path}</h1>
         <hr className={styles.hr} />
         <p>
-          {' '}
+          {" "}
           This page was rendered by <Code>{`pages${route}.js`}</Code>.
         </p>
         <Link href="/">&larr; Back home</Link>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/rewrites/pages/index.tsx b/examples/rewrites/pages/index.tsx
index da30190ba7..c2669ebcb8 100644
--- a/examples/rewrites/pages/index.tsx
+++ b/examples/rewrites/pages/index.tsx
@@ -1,6 +1,6 @@
-import styles from '../styles.module.css'
-import Link from 'next/link'
-import Code from '../components/Code'
+import styles from "../styles.module.css";
+import Link from "next/link";
+import Code from "../components/Code";
 
 export default function Index() {
   return (
@@ -9,7 +9,7 @@ export default function Index() {
         <h1>Rewrites with Next.js</h1>
         <hr className={styles.hr} />
         <p>
-          The links below are{' '}
+          The links below are{" "}
           <Link
             href="https://nextjs.org/docs/api-reference/next.config.js/rewrites"
             legacyBehavior
@@ -17,7 +17,7 @@ export default function Index() {
             <>
               custom <Code>rewrites</Code>
             </>
-          </Link>{' '}
+          </Link>{" "}
           that map an incoming request path to a different destination path.
         </p>
         <nav>
@@ -52,5 +52,5 @@ export default function Index() {
         <hr className={styles.hr} />
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/rewrites/pages/news/[...slug].tsx b/examples/rewrites/pages/news/[...slug].tsx
index 8cd5c9b113..6b6c264e73 100644
--- a/examples/rewrites/pages/news/[...slug].tsx
+++ b/examples/rewrites/pages/news/[...slug].tsx
@@ -1,10 +1,10 @@
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import styles from '../../styles.module.css'
-import Code from '../../components/Code'
+import { useRouter } from "next/router";
+import Link from "next/link";
+import styles from "../../styles.module.css";
+import Code from "../../components/Code";
 
 export default function News() {
-  const { asPath, route, query } = useRouter()
+  const { asPath, route, query } = useRouter();
 
   return (
     <div className={styles.container}>
@@ -15,18 +15,18 @@ export default function News() {
           This page was rendered by <Code>{`pages${route}.js`}</Code>.
         </p>
         <p>
-          The query <Code>slug</Code> for this page is:{' '}
+          The query <Code>slug</Code> for this page is:{" "}
           <Code>{JSON.stringify(query.slug)}</Code>
         </p>
         <Link href="/">&larr; Back home</Link>
       </div>
     </div>
-  )
+  );
 }
 
 // Use SSR for this page as currently rewrites don't work with dynamic pages without SSR
 export async function getServerSideProps() {
   return {
     props: {},
-  }
+  };
 }
diff --git a/examples/rewrites/styles.module.css b/examples/rewrites/styles.module.css
index cd7bec9b86..c75c982a7c 100644
--- a/examples/rewrites/styles.module.css
+++ b/examples/rewrites/styles.module.css
@@ -24,7 +24,7 @@
 
 .inlineCode::before,
 .inlineCode::after {
-  content: '`';
+  content: "`";
 }
 
 .hr {
@@ -44,7 +44,7 @@
 }
 
 .list li:before {
-  content: '-';
+  content: "-";
   color: #999999;
   position: absolute;
   margin-left: -1rem;
diff --git a/examples/script-component/globals.d.ts b/examples/script-component/globals.d.ts
index 40c736b1b1..91041c11c0 100644
--- a/examples/script-component/globals.d.ts
+++ b/examples/script-component/globals.d.ts
@@ -1,8 +1,8 @@
 declare global {
   interface Window {
-    Stripe: (apiKey: string) => stripe.Stripe
+    Stripe: (apiKey: string) => stripe.Stripe;
   }
 }
 
 // Flag as module for TypeScript
-export {}
+export {};
diff --git a/examples/script-component/pages/_app.tsx b/examples/script-component/pages/_app.tsx
index 7bca4f1da0..61ff1bdf49 100644
--- a/examples/script-component/pages/_app.tsx
+++ b/examples/script-component/pages/_app.tsx
@@ -1,17 +1,17 @@
-import { AppProps } from 'next/app'
-import Link from 'next/link'
+import { AppProps } from "next/app";
+import Link from "next/link";
 
-import '../styles/global.css'
+import "../styles/global.css";
 
 const MyApp = ({ Component, pageProps, router }: AppProps) => {
-  const pathname = router.pathname
+  const pathname = router.pathname;
 
   return (
     <>
       <Component {...pageProps} />
-      {pathname !== '/' && <Link href="/">See all examples</Link>}
+      {pathname !== "/" && <Link href="/">See all examples</Link>}
     </>
-  )
-}
+  );
+};
 
-export default MyApp
+export default MyApp;
diff --git a/examples/script-component/pages/attributes.tsx b/examples/script-component/pages/attributes.tsx
index 5c7260e9ff..ad55b95e59 100644
--- a/examples/script-component/pages/attributes.tsx
+++ b/examples/script-component/pages/attributes.tsx
@@ -1,4 +1,4 @@
-import Script from 'next/script'
+import Script from "next/script";
 
 export default function Inline() {
   return (
@@ -18,5 +18,5 @@ export default function Inline() {
         </h5>
       </main>
     </>
-  )
+  );
 }
diff --git a/examples/script-component/pages/index.tsx b/examples/script-component/pages/index.tsx
index 6c376634e8..43a1ffa964 100644
--- a/examples/script-component/pages/index.tsx
+++ b/examples/script-component/pages/index.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Index() {
   return (
@@ -22,5 +22,5 @@ export default function Index() {
         </li>
       </ul>
     </main>
-  )
+  );
 }
diff --git a/examples/script-component/pages/inline.tsx b/examples/script-component/pages/inline.tsx
index 3626f1c6c8..f69196e26c 100644
--- a/examples/script-component/pages/inline.tsx
+++ b/examples/script-component/pages/inline.tsx
@@ -1,4 +1,4 @@
-import Script from 'next/script'
+import Script from "next/script";
 
 export default function Inline() {
   return (
@@ -25,5 +25,5 @@ export default function Inline() {
         </h5>
       </main>
     </>
-  )
+  );
 }
diff --git a/examples/script-component/pages/lazy.tsx b/examples/script-component/pages/lazy.tsx
index 2049b74202..64e602ad08 100644
--- a/examples/script-component/pages/lazy.tsx
+++ b/examples/script-component/pages/lazy.tsx
@@ -1,19 +1,19 @@
-import { useCallback, useEffect, useState } from 'react'
-import Script from 'next/script'
+import { useCallback, useEffect, useState } from "react";
+import Script from "next/script";
 
 export default function Lazyload() {
-  const [log, setLog] = useState<{ time: Date; text: string }[]>([])
+  const [log, setLog] = useState<{ time: Date; text: string }[]>([]);
 
   const addLog = useCallback(
     (text: string) => {
-      setLog((log) => log.concat({ time: new Date(), text }))
+      setLog((log) => log.concat({ time: new Date(), text }));
     },
-    [setLog]
-  )
+    [setLog],
+  );
 
   useEffect(() => {
-    addLog(`Page loaded window.FB is undefined`)
-  }, [addLog])
+    addLog(`Page loaded window.FB is undefined`);
+  }, [addLog]);
 
   return (
     <>
@@ -38,5 +38,5 @@ export default function Lazyload() {
         </ul>
       </main>
     </>
-  )
+  );
 }
diff --git a/examples/script-component/pages/onload.tsx b/examples/script-component/pages/onload.tsx
index 7642e1202d..509b1d579f 100644
--- a/examples/script-component/pages/onload.tsx
+++ b/examples/script-component/pages/onload.tsx
@@ -1,26 +1,26 @@
-import { useMemo, useState } from 'react'
-import Script from 'next/script'
+import { useMemo, useState } from "react";
+import Script from "next/script";
 
 export default function Onload() {
   const [stripe, setStripe] = useState<{ stripe: typeof window.Stripe } | null>(
-    null
-  )
+    null,
+  );
   const methods = useMemo(
     () =>
       stripe
         ? Object.entries(stripe.stripe).filter(
-            ([_key, value]) => typeof value === 'function'
+            ([_key, value]) => typeof value === "function",
           )
         : [],
-    [stripe]
-  )
+    [stripe],
+  );
 
   function handleLoad() {
-    const stripe = window.Stripe('pk_test_1234')
+    const stripe = window.Stripe("pk_test_1234");
 
-    console.log('Stripe loaded: ', stripe)
+    console.log("Stripe loaded: ", stripe);
 
-    setStripe({ stripe })
+    setStripe({ stripe });
   }
 
   return (
@@ -44,5 +44,5 @@ export default function Onload() {
         </div>
       </main>
     </>
-  )
+  );
 }
diff --git a/examples/script-component/pages/polyfill.tsx b/examples/script-component/pages/polyfill.tsx
index 90c217d119..bee31995b5 100644
--- a/examples/script-component/pages/polyfill.tsx
+++ b/examples/script-component/pages/polyfill.tsx
@@ -1,32 +1,32 @@
-import { useEffect, useRef, useState } from 'react'
-import Script from 'next/script'
+import { useEffect, useRef, useState } from "react";
+import Script from "next/script";
 
-import s from '../styles/polyfill.module.css'
+import s from "../styles/polyfill.module.css";
 
 export default function Polyfill() {
-  const ref = useRef<HTMLSpanElement>(null)
-  const [lastIntersection, setIntersection] = useState(new Date())
+  const ref = useRef<HTMLSpanElement>(null);
+  const [lastIntersection, setIntersection] = useState(new Date());
 
   useEffect(() => {
     const observer = new IntersectionObserver(
       (intersections) => {
-        const isIntersecting = intersections[0]?.isIntersecting
+        const isIntersecting = intersections[0]?.isIntersecting;
 
         if (isIntersecting) {
-          setIntersection(new Date())
+          setIntersection(new Date());
         }
       },
       {
-        rootMargin: '45px',
-      }
-    )
+        rootMargin: "45px",
+      },
+    );
 
     if (ref.current) {
-      observer.observe(ref.current)
+      observer.observe(ref.current);
     }
 
-    return () => observer.disconnect()
-  }, [])
+    return () => observer.disconnect();
+  }, []);
 
   return (
     <>
@@ -46,5 +46,5 @@ export default function Polyfill() {
         </section>
       </main>
     </>
-  )
+  );
 }
diff --git a/examples/server-actions-upload/app/action.ts b/examples/server-actions-upload/app/action.ts
index 7221401c74..2f72218a76 100644
--- a/examples/server-actions-upload/app/action.ts
+++ b/examples/server-actions-upload/app/action.ts
@@ -1,22 +1,22 @@
-'use server'
+"use server";
 
-import fs from 'fs'
-import path from 'path'
-import { promisify } from 'util'
+import fs from "fs";
+import path from "path";
+import { promisify } from "util";
 
-const writeFile = promisify(fs.writeFile)
+const writeFile = promisify(fs.writeFile);
 
 export async function saveData(formData: FormData) {
-  const file = formData.get('file') as File
-  const fileBuffer = await file.arrayBuffer()
-  const filePath = path.join(`/tmp/${file.name}`)
-  await writeFile(filePath, Buffer.from(fileBuffer))
+  const file = formData.get("file") as File;
+  const fileBuffer = await file.arrayBuffer();
+  const filePath = path.join(`/tmp/${file.name}`);
+  await writeFile(filePath, Buffer.from(fileBuffer));
 
   const payload = {
-    email: formData.get('email'),
-  }
+    email: formData.get("email"),
+  };
 
-  console.log('payload', payload)
+  console.log("payload", payload);
 
-  return payload
+  return payload;
 }
diff --git a/examples/server-actions-upload/app/layout.tsx b/examples/server-actions-upload/app/layout.tsx
index 73c0a4bca1..bf4fc28121 100644
--- a/examples/server-actions-upload/app/layout.tsx
+++ b/examples/server-actions-upload/app/layout.tsx
@@ -1,21 +1,21 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/server-actions-upload/app/page.tsx b/examples/server-actions-upload/app/page.tsx
index f0ec99baf7..eec5a9b3a3 100644
--- a/examples/server-actions-upload/app/page.tsx
+++ b/examples/server-actions-upload/app/page.tsx
@@ -1,5 +1,5 @@
-import UploadForm from './upload-form'
+import UploadForm from "./upload-form";
 
 export default function Home() {
-  return <UploadForm />
+  return <UploadForm />;
 }
diff --git a/examples/server-actions-upload/app/upload-form.tsx b/examples/server-actions-upload/app/upload-form.tsx
index 3fecc42c3a..bbe82d475e 100644
--- a/examples/server-actions-upload/app/upload-form.tsx
+++ b/examples/server-actions-upload/app/upload-form.tsx
@@ -1,21 +1,23 @@
-'use client'
+"use client";
 
-import { useFormStatus } from 'react-dom'
-import { saveData } from './action'
-import { useRef } from 'react'
+import { useFormStatus } from "react-dom";
+import { saveData } from "./action";
+import { useRef } from "react";
 
 function Submit() {
-  const { pending } = useFormStatus()
-  return <button disabled={pending}>{pending ? 'Submitting' : 'Submit'}</button>
+  const { pending } = useFormStatus();
+  return (
+    <button disabled={pending}>{pending ? "Submitting" : "Submit"}</button>
+  );
 }
 
 export default function UploadForm() {
-  const formRef = useRef<HTMLFormElement | null>(null)
+  const formRef = useRef<HTMLFormElement | null>(null);
 
   async function formAction(formData: FormData) {
-    await saveData(formData)
-    formRef.current?.reset()
-    alert('Save success!')
+    await saveData(formData);
+    formRef.current?.reset();
+    alert("Save success!");
   }
 
   return (
@@ -34,5 +36,5 @@ export default function UploadForm() {
       <br />
       <Submit />
     </form>
-  )
+  );
 }
diff --git a/examples/server-actions-upload/next.config.js b/examples/server-actions-upload/next.config.js
index 767719fc4f..658404ac69 100644
--- a/examples/server-actions-upload/next.config.js
+++ b/examples/server-actions-upload/next.config.js
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/ssr-caching/pages/index.tsx b/examples/ssr-caching/pages/index.tsx
index 10a617758d..5a732d9887 100644
--- a/examples/ssr-caching/pages/index.tsx
+++ b/examples/ssr-caching/pages/index.tsx
@@ -1,4 +1,4 @@
-import { GetServerSideProps, InferGetServerSidePropsType } from 'next'
+import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 
 export default function Index({
   time,
@@ -8,20 +8,20 @@ export default function Index({
       <h1>SSR Caching with Next.js</h1>
       <time dateTime={time}>{time}</time>
     </main>
-  )
+  );
 }
 
 export const getServerSideProps: GetServerSideProps<{ time: string }> = async ({
   res,
 }) => {
   res.setHeader(
-    'Cache-Control',
-    'public, s-maxage=10, stale-while-revalidate=59'
-  )
+    "Cache-Control",
+    "public, s-maxage=10, stale-while-revalidate=59",
+  );
 
   return {
     props: {
       time: new Date().toISOString(),
     },
-  }
-}
+  };
+};
diff --git a/examples/svg-components/next.config.js b/examples/svg-components/next.config.js
index 10c102e8f9..5d4080b3e3 100644
--- a/examples/svg-components/next.config.js
+++ b/examples/svg-components/next.config.js
@@ -5,9 +5,9 @@ module.exports = {
     config.module.rules.push({
       test: /\.svg$/i,
       issuer: /\.[jt]sx?$/,
-      use: ['@svgr/webpack'],
-    })
+      use: ["@svgr/webpack"],
+    });
 
-    return config
+    return config;
   },
-}
+};
diff --git a/examples/svg-components/pages/index.tsx b/examples/svg-components/pages/index.tsx
index 85a9ddfe2d..9b7d6b615f 100644
--- a/examples/svg-components/pages/index.tsx
+++ b/examples/svg-components/pages/index.tsx
@@ -1,10 +1,10 @@
-import Cat from '&/svgs/cat.svg'
-import styles from '&/styles/index.module.css'
+import Cat from "&/svgs/cat.svg";
+import styles from "&/styles/index.module.css";
 
 export default function Home() {
   return (
     <div className={styles.container}>
       <Cat />
     </div>
-  )
+  );
 }
diff --git a/examples/with-ably/README.md b/examples/with-ably/README.md
index 0625782298..bf9c2a68a4 100644
--- a/examples/with-ably/README.md
+++ b/examples/with-ably/README.md
@@ -68,23 +68,23 @@ API_ROOT=http://localhost:3000
 [pages/\_app.js](pages/_app.js) is where the Ably SDK is configured:
 
 ```js
-import { configureAbly } from '@ably-labs/react-hooks'
+import { configureAbly } from "@ably-labs/react-hooks";
 
-const prefix = process.env.API_ROOT || ''
+const prefix = process.env.API_ROOT || "";
 const clientId =
   Math.random().toString(36).substring(2, 15) +
-  Math.random().toString(36).substring(2, 15)
+  Math.random().toString(36).substring(2, 15);
 
 configureAbly({
   authUrl: `${prefix}/api/createTokenRequest?clientId=${clientId}`,
   clientId: clientId,
-})
+});
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
 ```
 
 `configureAbly` matches the method signature of the Ably SDK - and requires either a string or a [AblyClientOptions](https://ably.com/docs/api/realtime-sdk#client-options) object. You can use this configuration object to setup your [tokenAuthentication](https://ably.com/docs/core-features/authentication#token-authentication). If you want to use the usePresence function, you'll need to explicitly provide a `clientId`.
@@ -96,13 +96,13 @@ You can do this anywhere in your code before the rest of the library is used.
 The `useChannel` hook lets you subscribe to a channel and receive messages from it:
 
 ```js
-import { useState } from 'react'
-import { useChannel } from '@ably-labs/react-hooks'
+import { useState } from "react";
+import { useChannel } from "@ably-labs/react-hooks";
 
 export default function Home() {
-  const [channel] = useChannel('your-channel', async (message) => {
-    console.log('Received Ably message', message)
-  })
+  const [channel] = useChannel("your-channel", async (message) => {
+    console.log("Received Ably message", message);
+  });
 }
 ```
 
@@ -113,7 +113,7 @@ Every time a message is sent to `your-channel` it will be logged to the console.
 The `channel` instance returned by `useChannel` can be used to send messages to the channel. It is a regular Ably JavaScript SDK `channel` instance.
 
 ```javascript
-channel.publish('test-message', { text: 'message text' })
+channel.publish("test-message", { text: "message text" });
 ```
 
 #### usePresence
@@ -121,19 +121,19 @@ channel.publish('test-message', { text: 'message text' })
 The `usePresence` hook lets you subscribe to presence events on a channel - this will allow you to get notified when a user joins or leaves the channel. The presence data is automatically updated and your component re-rendered when presence changes:
 
 ```js
-import { useState } from 'react'
-import { usePresence } from '@ably-labs/react-hooks'
+import { useState } from "react";
+import { usePresence } from "@ably-labs/react-hooks";
 
 export default function Home() {
-  const [presenceData, updateStatus] = usePresence('your-channel-name')
+  const [presenceData, updateStatus] = usePresence("your-channel-name");
 
   const presentClients = presenceData.map((msg, index) => (
     <li key={index}>
       {msg.clientId}: {msg.data}
     </li>
-  ))
+  ));
 
-  return <ul>{presentClients}</ul>
+  return <ul>{presentClients}</ul>;
 }
 ```
 
diff --git a/examples/with-ably/pages/_app.tsx b/examples/with-ably/pages/_app.tsx
index 8e38db20d7..2d20661e9a 100644
--- a/examples/with-ably/pages/_app.tsx
+++ b/examples/with-ably/pages/_app.tsx
@@ -1,18 +1,18 @@
-import '../styles/globals.css'
-import { configureAbly } from '@ably-labs/react-hooks'
+import "../styles/globals.css";
+import { configureAbly } from "@ably-labs/react-hooks";
 
-const prefix = process.env.API_ROOT || ''
+const prefix = process.env.API_ROOT || "";
 const clientId =
   Math.random().toString(36).substring(2, 15) +
-  Math.random().toString(36).substring(2, 15)
+  Math.random().toString(36).substring(2, 15);
 
 configureAbly({
   authUrl: `${prefix}/api/createTokenRequest?clientId=${clientId}`,
   clientId: clientId,
-})
+});
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-ably/pages/api/createTokenRequest.ts b/examples/with-ably/pages/api/createTokenRequest.ts
index 3ea4b7ec87..b0778a766b 100644
--- a/examples/with-ably/pages/api/createTokenRequest.ts
+++ b/examples/with-ably/pages/api/createTokenRequest.ts
@@ -1,13 +1,13 @@
-import Ably from 'ably/promises'
-import type { NextApiRequest, NextApiResponse } from 'next'
+import Ably from "ably/promises";
+import type { NextApiRequest, NextApiResponse } from "next";
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  const client = new Ably.Realtime(process.env.ABLY_API_KEY)
+  const client = new Ably.Realtime(process.env.ABLY_API_KEY);
   const tokenRequestData = await client.auth.createTokenRequest({
     clientId: req.query.clientId as string,
-  })
-  res.status(200).json(tokenRequestData)
+  });
+  res.status(200).json(tokenRequestData);
 }
diff --git a/examples/with-ably/pages/api/send-message.ts b/examples/with-ably/pages/api/send-message.ts
index d4392ab370..34833c0afe 100644
--- a/examples/with-ably/pages/api/send-message.ts
+++ b/examples/with-ably/pages/api/send-message.ts
@@ -1,19 +1,19 @@
-import Ably from 'ably/promises'
-import type { NextApiRequest, NextApiResponse } from 'next/types'
-import type { TextMessage } from '../../types'
+import Ably from "ably/promises";
+import type { NextApiRequest, NextApiResponse } from "next/types";
+import type { TextMessage } from "../../types";
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  const client = new Ably.Realtime(process.env.ABLY_API_KEY)
+  const client = new Ably.Realtime(process.env.ABLY_API_KEY);
 
-  const channel = client.channels.get('some-channel-name')
+  const channel = client.channels.get("some-channel-name");
 
   const message: TextMessage = {
     text: `Server sent a message on behalf of ${req.body.sender}`,
-  }
-  channel.publish('test-message', message)
+  };
+  channel.publish("test-message", message);
 
-  res.status(200)
+  res.status(200);
 }
diff --git a/examples/with-ably/pages/index.tsx b/examples/with-ably/pages/index.tsx
index c2f7248fd0..fbbc89454b 100644
--- a/examples/with-ably/pages/index.tsx
+++ b/examples/with-ably/pages/index.tsx
@@ -1,34 +1,34 @@
-import { useState } from 'react'
-import { useChannel, usePresence } from '@ably-labs/react-hooks'
-import type { Types } from 'ably'
-import type { ProxyMessage, TextMessage } from '../types'
+import { useState } from "react";
+import { useChannel, usePresence } from "@ably-labs/react-hooks";
+import type { Types } from "ably";
+import type { ProxyMessage, TextMessage } from "../types";
 
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
+import Head from "next/head";
+import Image from "next/image";
+import styles from "../styles/Home.module.css";
 
 export default function Home() {
-  const [messages, setMessages] = useState<TextMessage[]>([])
+  const [messages, setMessages] = useState<TextMessage[]>([]);
 
   const [channel, ably] = useChannel(
-    'some-channel-name',
+    "some-channel-name",
     async (message: Types.Message) => {
-      console.log('Received Ably message', message)
-      setMessages((messages) => [...messages, message.data])
-    }
-  )
+      console.log("Received Ably message", message);
+      setMessages((messages) => [...messages, message.data]);
+    },
+  );
 
-  const [presenceData, updateStatus] = usePresence('your-channel-name')
+  const [presenceData, updateStatus] = usePresence("your-channel-name");
 
   const messageList = messages.map((message, index) => {
-    return <li key={index}>{message.text}</li>
-  })
+    return <li key={index}>{message.text}</li>;
+  });
 
   const presentClients = presenceData.map((msg, index) => (
     <li key={index}>
       {msg.clientId}: {msg.data}
     </li>
-  ))
+  ));
 
   return (
     <div className={styles.container}>
@@ -48,7 +48,7 @@ export default function Home() {
         <h2>Present Clients</h2>
         <button
           onClick={() => {
-            updateStatus('hello')
+            updateStatus("hello");
           }}
         >
           Update status to hello
@@ -61,8 +61,8 @@ export default function Home() {
           onClick={() => {
             const message: TextMessage = {
               text: `${ably.auth.clientId} sent a message`,
-            }
-            channel.publish('test-message', message)
+            };
+            channel.publish("test-message", message);
           }}
         >
           Send A Message
@@ -72,15 +72,15 @@ export default function Home() {
           onClick={() => {
             const proxyMessage: ProxyMessage = {
               sender: `${ably.auth.clientId}`,
-            }
+            };
 
-            fetch('/api/send-message', {
-              method: 'POST',
+            fetch("/api/send-message", {
+              method: "POST",
               headers: {
-                'Content-Type': 'application/json',
+                "Content-Type": "application/json",
               },
               body: JSON.stringify(proxyMessage),
-            })
+            });
           }}
         >
           Send A Message From the Server
@@ -110,5 +110,5 @@ export default function Home() {
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-ably/types.d.ts b/examples/with-ably/types.d.ts
index 17e1b0d17b..cae1d8ede3 100644
--- a/examples/with-ably/types.d.ts
+++ b/examples/with-ably/types.d.ts
@@ -1,2 +1,2 @@
-export type TextMessage = { text: string }
-export type ProxyMessage = { sender: string }
+export type TextMessage = { text: string };
+export type ProxyMessage = { sender: string };
diff --git a/examples/with-absolute-imports/README.md b/examples/with-absolute-imports/README.md
index 2726adaf33..4c5555bfba 100644
--- a/examples/with-absolute-imports/README.md
+++ b/examples/with-absolute-imports/README.md
@@ -5,19 +5,19 @@ This example shows how to configure [Absolute imports and Module path aliases](h
 If you’re working on a large project, your relative import statements might suffer from `../../../` spaghetti:
 
 ```tsx
-import Button from '../../../components/button'
+import Button from "../../../components/button";
 ```
 
 In such cases, we might want to setup absolute imports using the `baseUrl` option, for clearer and shorter imports:
 
 ```tsx
-import Button from 'components/button'
+import Button from "components/button";
 ```
 
 Furthermore, TypeScript also supports the `paths` option, which allows you to configure custom module aliases. You can then use your alias like so:
 
 ```tsx
-import Button from '@/components/button'
+import Button from "@/components/button";
 ```
 
 ## Deploy your own
diff --git a/examples/with-absolute-imports/components/button.tsx b/examples/with-absolute-imports/components/button.tsx
index 1deaded462..ba468121fb 100644
--- a/examples/with-absolute-imports/components/button.tsx
+++ b/examples/with-absolute-imports/components/button.tsx
@@ -1,3 +1,3 @@
 export default function Button() {
-  return <button>👋 Hello</button>
+  return <button>👋 Hello</button>;
 }
diff --git a/examples/with-absolute-imports/components/header.tsx b/examples/with-absolute-imports/components/header.tsx
index 362f53bc73..5c02934e54 100644
--- a/examples/with-absolute-imports/components/header.tsx
+++ b/examples/with-absolute-imports/components/header.tsx
@@ -3,5 +3,5 @@ export default function Header() {
     <header>
       <h1>Hello world!</h1>
     </header>
-  )
+  );
 }
diff --git a/examples/with-absolute-imports/pages/index.tsx b/examples/with-absolute-imports/pages/index.tsx
index 47f057a3b4..7163909745 100644
--- a/examples/with-absolute-imports/pages/index.tsx
+++ b/examples/with-absolute-imports/pages/index.tsx
@@ -1,5 +1,5 @@
-import Header from 'components/header'
-import Button from '@/components/button'
+import Header from "components/header";
+import Button from "@/components/button";
 
 export default function Home() {
   return (
@@ -7,5 +7,5 @@ export default function Home() {
       <Header />
       <Button />
     </>
-  )
+  );
 }
diff --git a/examples/with-algolia-react-instantsearch/app/layout.tsx b/examples/with-algolia-react-instantsearch/app/layout.tsx
index c7c1f813fd..78d9695dfe 100644
--- a/examples/with-algolia-react-instantsearch/app/layout.tsx
+++ b/examples/with-algolia-react-instantsearch/app/layout.tsx
@@ -1,21 +1,21 @@
-import React from 'react'
+import React from "react";
 
-import '../styles/global.css'
-import 'instantsearch.css/themes/satellite-min.css'
+import "../styles/global.css";
+import "instantsearch.css/themes/satellite-min.css";
 
 export const metadata = {
-  title: 'Next.js with Algolia React InstantSearch',
-  description: 'Generated by Next.js',
-}
+  title: "Next.js with Algolia React InstantSearch",
+  description: "Generated by Next.js",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-algolia-react-instantsearch/app/page.tsx b/examples/with-algolia-react-instantsearch/app/page.tsx
index 7c4f053b75..68c6e0b37e 100644
--- a/examples/with-algolia-react-instantsearch/app/page.tsx
+++ b/examples/with-algolia-react-instantsearch/app/page.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import React from "react";
 
-import Search from '../components/Search'
+import Search from "../components/Search";
 
-export const dynamic = 'force-dynamic'
+export const dynamic = "force-dynamic";
 
 export default function Page() {
-  return <Search />
+  return <Search />;
 }
diff --git a/examples/with-algolia-react-instantsearch/components/Panel.tsx b/examples/with-algolia-react-instantsearch/components/Panel.tsx
index 937187d6b3..e77ac888e6 100644
--- a/examples/with-algolia-react-instantsearch/components/Panel.tsx
+++ b/examples/with-algolia-react-instantsearch/components/Panel.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
+import React from "react";
 
 export function Panel({
   children,
   header,
   footer,
 }: {
-  children: React.ReactNode
-  header?: React.ReactNode
-  footer?: React.ReactNode
+  children: React.ReactNode;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
 }) {
   return (
     <div className="ais-Panel">
@@ -15,5 +15,5 @@ export function Panel({
       <div className="ais-Panel-body">{children}</div>
       {footer && <div className="ais-Panel-footer">{footer}</div>}
     </div>
-  )
+  );
 }
diff --git a/examples/with-algolia-react-instantsearch/components/Search.tsx b/examples/with-algolia-react-instantsearch/components/Search.tsx
index a90e40cc96..2d630ef2df 100644
--- a/examples/with-algolia-react-instantsearch/components/Search.tsx
+++ b/examples/with-algolia-react-instantsearch/components/Search.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client";
 
-import algoliasearch from 'algoliasearch/lite'
-import type { Hit as AlgoliaHit } from 'instantsearch.js'
-import React from 'react'
+import algoliasearch from "algoliasearch/lite";
+import type { Hit as AlgoliaHit } from "instantsearch.js";
+import React from "react";
 import {
   Configure,
   Highlight,
@@ -10,24 +10,24 @@ import {
   Pagination,
   RefinementList,
   SearchBox,
-} from 'react-instantsearch'
-import { InstantSearchNext } from 'react-instantsearch-nextjs'
+} from "react-instantsearch";
+import { InstantSearchNext } from "react-instantsearch-nextjs";
 
-import { Panel } from './Panel'
+import { Panel } from "./Panel";
 
 type HitProps = {
   hit: AlgoliaHit<{
-    name: string
-    description: string
-    price: number
-  }>
-}
+    name: string;
+    description: string;
+    price: number;
+  }>;
+};
 
-const APP_ID = 'latency'
-const API_KEY = '6be0576ff61c053d5f9a3225e2a90f76'
-const INDEX_NAME = 'instant_search'
+const APP_ID = "latency";
+const API_KEY = "6be0576ff61c053d5f9a3225e2a90f76";
+const INDEX_NAME = "instant_search";
 
-const searchClient = algoliasearch(APP_ID, API_KEY)
+const searchClient = algoliasearch(APP_ID, API_KEY);
 
 function Hit({ hit }: HitProps) {
   return (
@@ -35,7 +35,7 @@ function Hit({ hit }: HitProps) {
       <Highlight hit={hit} attribute="name" className="Hit-label" />
       <span className="Hit-price">${hit.price}</span>
     </>
-  )
+  );
 }
 
 export default function Search() {
@@ -62,5 +62,5 @@ export default function Search() {
         </div>
       </main>
     </InstantSearchNext>
-  )
+  );
 }
diff --git a/examples/with-ant-design/app/AntdRegistry.tsx b/examples/with-ant-design/app/AntdRegistry.tsx
index 1dd6cdb84d..97db78091a 100644
--- a/examples/with-ant-design/app/AntdRegistry.tsx
+++ b/examples/with-ant-design/app/AntdRegistry.tsx
@@ -1,23 +1,23 @@
-'use client'
+"use client";
 
-import React from 'react'
-import { useServerInsertedHTML } from 'next/navigation'
-import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'
-import type Entity from '@ant-design/cssinjs/es/Cache'
+import React from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import { StyleProvider, createCache, extractStyle } from "@ant-design/cssinjs";
+import type Entity from "@ant-design/cssinjs/es/Cache";
 
 interface StyledRegistryProps {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 const StyledComponentsRegistry = ({ children }: StyledRegistryProps) => {
-  const cache = React.useMemo<Entity>(() => createCache(), [])
+  const cache = React.useMemo<Entity>(() => createCache(), []);
   useServerInsertedHTML(() => (
     <style
       id="antd"
       dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }}
     />
-  ))
-  return <StyleProvider cache={cache}>{children}</StyleProvider>
-}
+  ));
+  return <StyleProvider cache={cache}>{children}</StyleProvider>;
+};
 
-export default StyledComponentsRegistry
+export default StyledComponentsRegistry;
diff --git a/examples/with-ant-design/app/layout.tsx b/examples/with-ant-design/app/layout.tsx
index a527469c17..2e12993a72 100644
--- a/examples/with-ant-design/app/layout.tsx
+++ b/examples/with-ant-design/app/layout.tsx
@@ -1,18 +1,18 @@
-import React from 'react'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import StyledComponentsRegistry from './AntdRegistry'
-import './globals.css'
+import React from "react";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import StyledComponentsRegistry from "./AntdRegistry";
+import "./globals.css";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
 
 interface RootLayoutProps {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 function RootLayout({ children }: RootLayoutProps) {
@@ -22,7 +22,7 @@ function RootLayout({ children }: RootLayoutProps) {
         <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
       </body>
     </html>
-  )
+  );
 }
 
-export default RootLayout
+export default RootLayout;
diff --git a/examples/with-ant-design/app/page.tsx b/examples/with-ant-design/app/page.tsx
index 8654fe01ea..c3ae654c0c 100644
--- a/examples/with-ant-design/app/page.tsx
+++ b/examples/with-ant-design/app/page.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client";
 
-import React from 'react'
-import Link from 'next/link'
-import { SmileFilled } from '@ant-design/icons'
+import React from "react";
+import Link from "next/link";
+import { SmileFilled } from "@ant-design/icons";
 import {
   Button,
   DatePicker,
@@ -12,12 +12,12 @@ import {
   Slider,
   Switch,
   ConfigProvider,
-} from 'antd'
-import theme from './themeConfig'
+} from "antd";
+import theme from "./themeConfig";
 
 const HomePage = () => (
   <ConfigProvider theme={theme}>
-    <div style={{ padding: 100, height: '100vh' }}>
+    <div style={{ padding: 100, height: "100vh" }}>
       <div className="text-center mb-5">
         <Link href="#" className="logo mr-0">
           <SmileFilled style={{ fontSize: 48 }} />
@@ -27,7 +27,7 @@ const HomePage = () => (
       <div>
         <Form
           layout="horizontal"
-          size={'large'}
+          size={"large"}
           labelCol={{ span: 8 }}
           wrapperCol={{ span: 8 }}
         >
@@ -51,11 +51,11 @@ const HomePage = () => (
               defaultValue="lucy"
               style={{ width: 192 }}
               options={[
-                { value: 'jack', label: 'Jack' },
-                { value: 'lucy', label: 'Lucy' },
-                { value: 'Yiminghe', label: 'yiminghe' },
-                { value: 'lijianan', label: 'lijianan' },
-                { value: 'disabled', label: 'Disabled', disabled: true },
+                { value: "jack", label: "Jack" },
+                { value: "lucy", label: "Lucy" },
+                { value: "Yiminghe", label: "yiminghe" },
+                { value: "lijianan", label: "lijianan" },
+                { value: "disabled", label: "Disabled", disabled: true },
               ]}
             />
           </Form.Item>
@@ -72,6 +72,6 @@ const HomePage = () => (
       </div>
     </div>
   </ConfigProvider>
-)
+);
 
-export default HomePage
+export default HomePage;
diff --git a/examples/with-ant-design/app/themeConfig.ts b/examples/with-ant-design/app/themeConfig.ts
index d1205bbac9..8a9b4d2b7d 100644
--- a/examples/with-ant-design/app/themeConfig.ts
+++ b/examples/with-ant-design/app/themeConfig.ts
@@ -1,10 +1,10 @@
-import type { ThemeConfig } from 'antd'
+import type { ThemeConfig } from "antd";
 
 const theme: ThemeConfig = {
   token: {
     fontSize: 16,
-    colorPrimary: '#52c41a',
+    colorPrimary: "#52c41a",
   },
-}
+};
 
-export default theme
+export default theme;
diff --git a/examples/with-ant-design/next.config.js b/examples/with-ant-design/next.config.js
index a843cbee09..91ef62f0db 100644
--- a/examples/with-ant-design/next.config.js
+++ b/examples/with-ant-design/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-apivideo/components/Card/index.tsx b/examples/with-apivideo/components/Card/index.tsx
index d15d9ab88a..72f22c0413 100644
--- a/examples/with-apivideo/components/Card/index.tsx
+++ b/examples/with-apivideo/components/Card/index.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
-import Image from 'next/image'
-import styles from './Card.module.css'
+import React from "react";
+import Image from "next/image";
+import styles from "./Card.module.css";
 
 interface ICardProps {
-  content: string
-  url: string
-  method: 'get' | 'post'
+  content: string;
+  url: string;
+  method: "get" | "post";
 }
 
 const Card: React.FC<ICardProps> = ({ content, url, method }): JSX.Element => (
   <a className={styles.container} target="_blank" href={url} rel="noreferrer">
-    <div className={`${method === 'get' ? styles.get : styles.post}`}>
+    <div className={`${method === "get" ? styles.get : styles.post}`}>
       {method.toUpperCase()}
     </div>
     <p>{content}</p>
@@ -19,6 +19,6 @@ const Card: React.FC<ICardProps> = ({ content, url, method }): JSX.Element => (
       <p>Try it out with our API!</p>
     </div>
   </a>
-)
+);
 
-export default Card
+export default Card;
diff --git a/examples/with-apivideo/components/Loader/index.tsx b/examples/with-apivideo/components/Loader/index.tsx
index 058eee8e35..ccb049479f 100644
--- a/examples/with-apivideo/components/Loader/index.tsx
+++ b/examples/with-apivideo/components/Loader/index.tsx
@@ -1,15 +1,15 @@
-import Image from 'next/image'
-import React from 'react'
-import styles from './Loader.module.css'
+import Image from "next/image";
+import React from "react";
+import styles from "./Loader.module.css";
 
 interface ILoaderProps {
-  done: boolean
+  done: boolean;
 }
 const Loader: React.FC<ILoaderProps> = ({ done }): JSX.Element =>
   done ? (
     <Image src="/check.png" alt="Loader" width={30} height={30} />
   ) : (
     <div className={styles.spinner} />
-  )
+  );
 
-export default Loader
+export default Loader;
diff --git a/examples/with-apivideo/components/Status/index.tsx b/examples/with-apivideo/components/Status/index.tsx
index 57d52260dc..9d04242cfd 100644
--- a/examples/with-apivideo/components/Status/index.tsx
+++ b/examples/with-apivideo/components/Status/index.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
-import Loader from '../Loader'
-import styles from './Status.module.css'
+import React from "react";
+import Loader from "../Loader";
+import styles from "./Status.module.css";
 
 interface IStatusProps {
-  done: boolean
-  title: string
+  done: boolean;
+  title: string;
 }
 const Status: React.FC<IStatusProps> = ({ done, title }): JSX.Element => (
   <div className={styles.container}>
     <p>{title}</p>
     <Loader done={done} />
   </div>
-)
+);
 
-export default Status
+export default Status;
diff --git a/examples/with-apivideo/next.config.js b/examples/with-apivideo/next.config.js
index f738e06f43..f386fca5c9 100644
--- a/examples/with-apivideo/next.config.js
+++ b/examples/with-apivideo/next.config.js
@@ -6,13 +6,13 @@ const nextConfig = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'vod.api.video',
-        port: '',
-        pathname: '/my-account/**',
+        protocol: "https",
+        hostname: "vod.api.video",
+        port: "",
+        pathname: "/my-account/**",
       },
     ],
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-apivideo/pages/_app.tsx b/examples/with-apivideo/pages/_app.tsx
index 3f67d34a14..b62aa6429f 100644
--- a/examples/with-apivideo/pages/_app.tsx
+++ b/examples/with-apivideo/pages/_app.tsx
@@ -1,8 +1,8 @@
-import '../style/index.css'
-import '../style/common.css'
+import "../style/index.css";
+import "../style/common.css";
 
 function MyApp({ Component, pageProps }: any) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-apivideo/pages/api/[videoId].ts b/examples/with-apivideo/pages/api/[videoId].ts
index 683fec00e0..26b1406a04 100644
--- a/examples/with-apivideo/pages/api/[videoId].ts
+++ b/examples/with-apivideo/pages/api/[videoId].ts
@@ -1,15 +1,15 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import ApiVideoClient from '@api.video/nodejs-client'
+import type { NextApiRequest, NextApiResponse } from "next";
+import ApiVideoClient from "@api.video/nodejs-client";
 
 const getVideoStatus = async (req: NextApiRequest, res: NextApiResponse) => {
   try {
-    const { videoId } = req.query
-    const client = new ApiVideoClient({ apiKey: process.env.API_KEY })
-    const status = await client.videos.getStatus(videoId as string)
-    res.status(200).json({ status })
+    const { videoId } = req.query;
+    const client = new ApiVideoClient({ apiKey: process.env.API_KEY });
+    const status = await client.videos.getStatus(videoId as string);
+    res.status(200).json({ status });
   } catch (error) {
-    res.status(400).end()
+    res.status(400).end();
   }
-}
+};
 
-export default getVideoStatus
+export default getVideoStatus;
diff --git a/examples/with-apivideo/pages/api/uploadToken.ts b/examples/with-apivideo/pages/api/uploadToken.ts
index 81cde847d9..01a9f7bc4d 100644
--- a/examples/with-apivideo/pages/api/uploadToken.ts
+++ b/examples/with-apivideo/pages/api/uploadToken.ts
@@ -1,14 +1,14 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import ApiVideoClient from '@api.video/nodejs-client'
+import type { NextApiRequest, NextApiResponse } from "next";
+import ApiVideoClient from "@api.video/nodejs-client";
 
 const getUploadToken = async (req: NextApiRequest, res: NextApiResponse) => {
   try {
-    const client = new ApiVideoClient({ apiKey: process.env.API_KEY })
-    const uploadToken = await client.uploadTokens.createToken()
-    res.status(200).json(uploadToken)
+    const client = new ApiVideoClient({ apiKey: process.env.API_KEY });
+    const uploadToken = await client.uploadTokens.createToken();
+    res.status(200).json(uploadToken);
   } catch (error) {
-    res.status(400).end()
+    res.status(400).end();
   }
-}
+};
 
-export default getUploadToken
+export default getUploadToken;
diff --git a/examples/with-apivideo/pages/api/videos.ts b/examples/with-apivideo/pages/api/videos.ts
index d12aa8631e..fd46a0ab90 100644
--- a/examples/with-apivideo/pages/api/videos.ts
+++ b/examples/with-apivideo/pages/api/videos.ts
@@ -1,14 +1,14 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import ApiVideoClient from '@api.video/nodejs-client'
+import type { NextApiRequest, NextApiResponse } from "next";
+import ApiVideoClient from "@api.video/nodejs-client";
 
 const getVideoStatus = async (req: NextApiRequest, res: NextApiResponse) => {
   try {
-    const client = new ApiVideoClient({ apiKey: process.env.API_KEY })
-    const videos = await client.videos.list()
-    res.status(200).json({ videos })
+    const client = new ApiVideoClient({ apiKey: process.env.API_KEY });
+    const videos = await client.videos.list();
+    res.status(200).json({ videos });
   } catch (error) {
-    res.status(400).end()
+    res.status(400).end();
   }
-}
+};
 
-export default getVideoStatus
+export default getVideoStatus;
diff --git a/examples/with-apivideo/pages/index.tsx b/examples/with-apivideo/pages/index.tsx
index 032fcf6b26..6d58f2543b 100644
--- a/examples/with-apivideo/pages/index.tsx
+++ b/examples/with-apivideo/pages/index.tsx
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import React from 'react'
+import Head from "next/head";
+import Image from "next/image";
+import React from "react";
 
 export default function Home() {
   return (
@@ -22,21 +22,21 @@ export default function Home() {
         <div className="texts-container">
           <p>
             Hey fellow dev! 👋 <br />
-            In this basic sample app, you will find{' '}
+            In this basic sample app, you will find{" "}
             <a
               href="https://api.video"
               target="_blank"
               rel="noopener noreferrer"
             >
               api.video
-            </a>{' '}
-            features examples such as <a href="/uploader">video uploader</a>,{' '}
+            </a>{" "}
+            features examples such as <a href="/uploader">video uploader</a>,{" "}
             <a href="/videos">videos list</a> and player components.
           </p>
           <p>
             api.video provides APIs and clients to handle all your video needs.
             <br />
-            This app is built with the api.video{' '}
+            This app is built with the api.video{" "}
             <a
               href="https://github.com/apivideo/api.video-nodejs-client"
               target="_blank"
@@ -44,15 +44,15 @@ export default function Home() {
             >
               Node.js client
             </a>
-            ,{' '}
+            ,{" "}
             <a
               href="https://github.com/apivideo/api.video-typescript-uploader"
               target="_blank"
               rel="noopener noreferrer"
             >
               Typescript uploader
-            </a>{' '}
-            and{' '}
+            </a>{" "}
+            and{" "}
             <a
               target="_blank"
               rel="noopener noreferrer"
@@ -63,7 +63,7 @@ export default function Home() {
             .
           </p>
           <p>
-            You can{' '}
+            You can{" "}
             <a
               href="https://github.com/vercel/next.js/tree/canary/examples/with-apivideo"
               target="_blank"
@@ -92,7 +92,7 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <span>
             <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
           </span>
@@ -103,5 +103,5 @@ export default function Home() {
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-apivideo/pages/uploader/index.tsx b/examples/with-apivideo/pages/uploader/index.tsx
index 210308652f..81ecd3c3d8 100644
--- a/examples/with-apivideo/pages/uploader/index.tsx
+++ b/examples/with-apivideo/pages/uploader/index.tsx
@@ -1,63 +1,65 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import React, { ChangeEvent, useEffect, useRef, useState } from 'react'
-import Card from '../../components/Card'
-import { VideoUploader, VideoUploadResponse } from '@api.video/video-uploader'
-import Status from '../../components/Status'
-import { useRouter } from 'next/router'
+import Head from "next/head";
+import Image from "next/image";
+import React, { ChangeEvent, useEffect, useRef, useState } from "react";
+import Card from "../../components/Card";
+import { VideoUploader, VideoUploadResponse } from "@api.video/video-uploader";
+import Status from "../../components/Status";
+import { useRouter } from "next/router";
 
 export default function Uploader() {
   const [uploadToken, setUploadToken] = useState<{ token: string } | undefined>(
-    undefined
-  )
+    undefined,
+  );
   const [uploadProgress, setUploadProgress] = useState<number | undefined>(
-    undefined
-  )
-  const [video, setVideo] = useState<VideoUploadResponse | undefined>(undefined)
-  const [ready, setReady] = useState<boolean>(false)
-  const [playable, setPlayable] = useState<boolean>(false)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const router = useRouter()
+    undefined,
+  );
+  const [video, setVideo] = useState<VideoUploadResponse | undefined>(
+    undefined,
+  );
+  const [ready, setReady] = useState<boolean>(false);
+  const [playable, setPlayable] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const router = useRouter();
 
   useEffect(() => {
-    fetch('/api/uploadToken')
+    fetch("/api/uploadToken")
       .then((res) => res.json())
-      .then((res) => setUploadToken(res))
-  }, [])
+      .then((res) => setUploadToken(res));
+  }, []);
 
   const handleSelectFile = async (
-    e: ChangeEvent<HTMLInputElement>
+    e: ChangeEvent<HTMLInputElement>,
   ): Promise<void> => {
-    e.preventDefault()
-    if (!uploadToken || !uploadToken.token) return
+    e.preventDefault();
+    if (!uploadToken || !uploadToken.token) return;
     const clearState = (): void => {
-      setReady(false)
-      setPlayable(false)
-      setVideo(undefined)
-      setUploadProgress(undefined)
-    }
-    clearState()
-    if (!e.target.files || !uploadToken) return
-    const file = e.target.files[0]
+      setReady(false);
+      setPlayable(false);
+      setVideo(undefined);
+      setUploadProgress(undefined);
+    };
+    clearState();
+    if (!e.target.files || !uploadToken) return;
+    const file = e.target.files[0];
     const uploader = new VideoUploader({
       file,
       uploadToken: uploadToken.token,
-    })
+    });
     uploader.onProgress((e) =>
-      setUploadProgress(Math.round((e.uploadedBytes * 100) / e.totalBytes))
-    )
+      setUploadProgress(Math.round((e.uploadedBytes * 100) / e.totalBytes)),
+    );
     uploader.onPlayable(() => {
-      setPlayable(true)
-      setReady(true)
-    })
-    const video = await uploader.upload()
-    setVideo(video)
-  }
+      setPlayable(true);
+      setReady(true);
+    });
+    const video = await uploader.upload();
+    setVideo(video);
+  };
 
   const handleNavigate = (): void => {
-    if (!video) return
-    router.push(`/videos/${video.videoId}?uploaded=1`)
-  }
+    if (!video) return;
+    router.push(`/videos/${video.videoId}?uploaded=1`);
+  };
 
   return (
     <div className="global-container">
@@ -78,15 +80,15 @@ export default function Uploader() {
         <div className="texts-container">
           <p>
             Hey fellow dev! 👋 <br />
-            Welcome to this basic example of video uploader provided by{' '}
+            Welcome to this basic example of video uploader provided by{" "}
             <a
               href="https://api.video"
               target="_blank"
               rel="noopener noreferrer"
             >
               api.video
-            </a>{' '}
-            and powered by{' '}
+            </a>{" "}
+            and powered by{" "}
             <a
               href="https://nextjs.org/"
               target="_blank"
@@ -99,15 +101,15 @@ export default function Uploader() {
           <p>
             api.video provides APIs and clients to handle all your video needs.
             <br />
-            This app is built with the{' '}
+            This app is built with the{" "}
             <a
               href="https://github.com/apivideo/api.video-nodejs-client"
               target="_blank"
               rel="noopener noreferrer"
             >
               api.video Node.js client
-            </a>{' '}
-            and the{' '}
+            </a>{" "}
+            and the{" "}
             <a
               href="https://github.com/apivideo/api.video-typescript-uploader"
               target="_blank"
@@ -118,7 +120,7 @@ export default function Uploader() {
             .
           </p>
           <p>
-            You can{' '}
+            You can{" "}
             <a
               href="https://github.com/vercel/next.js/tree/canary/examples/with-apivideo-upload"
               target="_blank"
@@ -180,7 +182,7 @@ export default function Uploader() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <span>
             <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
           </span>
@@ -191,5 +193,5 @@ export default function Uploader() {
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-apivideo/pages/videos/[videoId].tsx b/examples/with-apivideo/pages/videos/[videoId].tsx
index 78109b5b61..43d35ec6bd 100644
--- a/examples/with-apivideo/pages/videos/[videoId].tsx
+++ b/examples/with-apivideo/pages/videos/[videoId].tsx
@@ -1,31 +1,31 @@
-import { GetServerSideProps, NextPage } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
-import { useRouter } from 'next/router'
-import React, { ChangeEvent, useState } from 'react'
-import ApiVideoPlayer, { PlayerTheme } from '@api.video/react-player'
+import { GetServerSideProps, NextPage } from "next";
+import Head from "next/head";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import React, { ChangeEvent, useState } from "react";
+import ApiVideoPlayer, { PlayerTheme } from "@api.video/react-player";
 
 interface IVideoViewProps {
-  children: React.ReactNode
-  videoId: string
-  uploaded: string
+  children: React.ReactNode;
+  videoId: string;
+  uploaded: string;
 }
 const VideoView: NextPage<IVideoViewProps> = ({
   videoId,
   uploaded,
 }): JSX.Element => {
   const [playerTheme, setPlayerTheme] = useState<PlayerTheme>({
-    link: 'rgb(235, 137, 82)',
-    linkHover: 'rgb(240, 95, 12)',
-  })
-  const [hideControls, setHideControls] = useState<boolean>(false)
-  const router = useRouter()
+    link: "rgb(235, 137, 82)",
+    linkHover: "rgb(240, 95, 12)",
+  });
+  const [hideControls, setHideControls] = useState<boolean>(false);
+  const router = useRouter();
 
   const handleChangeSetting = (e: ChangeEvent<HTMLInputElement>) =>
     setPlayerTheme({
       ...playerTheme,
       [e.currentTarget.id]: e.currentTarget.value,
-    })
+    });
 
   return (
     <div className="global-container">
@@ -52,7 +52,7 @@ const VideoView: NextPage<IVideoViewProps> = ({
       <main>
         <div className="texts-container">
           <p>
-            This player is generated by the{' '}
+            This player is generated by the{" "}
             <a
               target="_blank"
               rel="noopener noreferrer"
@@ -92,7 +92,7 @@ const VideoView: NextPage<IVideoViewProps> = ({
               type="checkbox"
               checked={hideControls}
               onChange={(e) => {
-                setHideControls(e.currentTarget.checked)
+                setHideControls(e.currentTarget.checked);
               }}
             />
             <label>Hide controls</label>
@@ -100,16 +100,16 @@ const VideoView: NextPage<IVideoViewProps> = ({
         </div>
         <ApiVideoPlayer
           video={{ id: videoId }}
-          style={{ width: '75%', height: 300 }}
+          style={{ width: "75%", height: 300 }}
           theme={playerTheme}
           chromeless={hideControls}
         />
 
         <button
           className="upload"
-          onClick={() => router.push(uploaded ? '/uploader' : '/videos')}
+          onClick={() => router.push(uploaded ? "/uploader" : "/videos")}
         >
-          {uploaded ? 'Another video?' : 'Videos list'}
+          {uploaded ? "Another video?" : "Videos list"}
         </button>
       </main>
 
@@ -119,7 +119,7 @@ const VideoView: NextPage<IVideoViewProps> = ({
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <span>
             <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
           </span>
@@ -130,12 +130,12 @@ const VideoView: NextPage<IVideoViewProps> = ({
         </a>
       </footer>
     </div>
-  )
-}
+  );
+};
 
-export default VideoView
+export default VideoView;
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const { videoId, uploaded } = context.query
-  return { props: { videoId, uploaded: uploaded ?? null } }
-}
+  const { videoId, uploaded } = context.query;
+  return { props: { videoId, uploaded: uploaded ?? null } };
+};
diff --git a/examples/with-apivideo/pages/videos/index.tsx b/examples/with-apivideo/pages/videos/index.tsx
index 1d6f2c83ac..3e2843e8dd 100644
--- a/examples/with-apivideo/pages/videos/index.tsx
+++ b/examples/with-apivideo/pages/videos/index.tsx
@@ -1,21 +1,21 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import React, { useEffect, useState } from 'react'
-import VideosListResponse from '@api.video/nodejs-client/lib/model/VideosListResponse'
+import Head from "next/head";
+import Image from "next/image";
+import React, { useEffect, useState } from "react";
+import VideosListResponse from "@api.video/nodejs-client/lib/model/VideosListResponse";
 
 export default function Videos() {
   const [videosResponse, setVideosResponse] = useState<
     VideosListResponse | undefined
-  >(undefined)
-  const [error, setError] = useState<boolean>(false)
+  >(undefined);
+  const [error, setError] = useState<boolean>(false);
   useEffect(() => {
-    fetch('/api/videos')
+    fetch("/api/videos")
       .then((res) => res.json())
       .then((res: { videos: VideosListResponse }) =>
-        setVideosResponse(res.videos)
+        setVideosResponse(res.videos),
       )
-      .catch((_) => setError(true))
-  }, [])
+      .catch((_) => setError(true));
+  }, []);
 
   return (
     <div className="global-container">
@@ -35,7 +35,7 @@ export default function Videos() {
       <main>
         <div className="texts-container">
           <p>
-            Welcome to this basic example of videos list provided by{' '}
+            Welcome to this basic example of videos list provided by{" "}
             <a
               href="https://api.video"
               target="_blank"
@@ -68,7 +68,7 @@ export default function Videos() {
               >
                 <h3>{video.title}</h3>
                 <Image
-                  src={video.assets?.thumbnail ?? '/vercel.svg'}
+                  src={video.assets?.thumbnail ?? "/vercel.svg"}
                   alt="Video thumbmail"
                   width={150}
                   height={80}
@@ -93,7 +93,7 @@ export default function Videos() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <span>
             <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
           </span>
@@ -104,5 +104,5 @@ export default function Videos() {
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-apollo-and-redux/components/Clock.js b/examples/with-apollo-and-redux/components/Clock.js
index 3f73635344..6ab02251a4 100644
--- a/examples/with-apollo-and-redux/components/Clock.js
+++ b/examples/with-apollo-and-redux/components/Clock.js
@@ -1,4 +1,4 @@
-import { useSelector, shallowEqual } from 'react-redux'
+import { useSelector, shallowEqual } from "react-redux";
 
 const useClock = () => {
   return useSelector(
@@ -6,19 +6,19 @@ const useClock = () => {
       lastUpdate: state.lastUpdate,
       light: state.light,
     }),
-    shallowEqual
-  )
-}
+    shallowEqual,
+  );
+};
 
 const formatTime = (time) => {
   // cut off except hh:mm:ss
-  return new Date(time).toJSON().slice(11, 19)
-}
+  return new Date(time).toJSON().slice(11, 19);
+};
 
 const Clock = () => {
-  const { lastUpdate, light } = useClock()
+  const { lastUpdate, light } = useClock();
   return (
-    <div className={light ? 'light' : ''}>
+    <div className={light ? "light" : ""}>
       {formatTime(lastUpdate)}
       <style jsx>{`
         div {
@@ -33,7 +33,7 @@ const Clock = () => {
         }
       `}</style>
     </div>
-  )
-}
+  );
+};
 
-export default Clock
+export default Clock;
diff --git a/examples/with-apollo-and-redux/components/Counter.js b/examples/with-apollo-and-redux/components/Counter.js
index 12cecc8861..4c5aff8e5b 100644
--- a/examples/with-apollo-and-redux/components/Counter.js
+++ b/examples/with-apollo-and-redux/components/Counter.js
@@ -1,25 +1,25 @@
-import { useSelector, useDispatch } from 'react-redux'
+import { useSelector, useDispatch } from "react-redux";
 
 const useCounter = () => {
-  const count = useSelector((state) => state.count)
-  const dispatch = useDispatch()
+  const count = useSelector((state) => state.count);
+  const dispatch = useDispatch();
   const increment = () =>
     dispatch({
-      type: 'INCREMENT',
-    })
+      type: "INCREMENT",
+    });
   const decrement = () =>
     dispatch({
-      type: 'DECREMENT',
-    })
+      type: "DECREMENT",
+    });
   const reset = () =>
     dispatch({
-      type: 'RESET',
-    })
-  return { count, increment, decrement, reset }
-}
+      type: "RESET",
+    });
+  return { count, increment, decrement, reset };
+};
 
 const Counter = () => {
-  const { count, increment, decrement, reset } = useCounter()
+  const { count, increment, decrement, reset } = useCounter();
   return (
     <div>
       <h1>
@@ -29,7 +29,7 @@ const Counter = () => {
       <button onClick={decrement}>-1</button>
       <button onClick={reset}>Reset</button>
     </div>
-  )
-}
+  );
+};
 
-export default Counter
+export default Counter;
diff --git a/examples/with-apollo-and-redux/components/ErrorMessage.js b/examples/with-apollo-and-redux/components/ErrorMessage.js
index 36be7ca498..937bb46898 100644
--- a/examples/with-apollo-and-redux/components/ErrorMessage.js
+++ b/examples/with-apollo-and-redux/components/ErrorMessage.js
@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import PropTypes from "prop-types";
 
 const ErrorMessage = ({ message }) => (
   <aside>
@@ -12,10 +12,10 @@ const ErrorMessage = ({ message }) => (
       }
     `}</style>
   </aside>
-)
+);
 
 ErrorMessage.propTypes = {
   message: PropTypes.string.isRequired,
-}
+};
 
-export default ErrorMessage
+export default ErrorMessage;
diff --git a/examples/with-apollo-and-redux/components/Layout.js b/examples/with-apollo-and-redux/components/Layout.js
index 44bd44ed8d..c8ca7f7088 100644
--- a/examples/with-apollo-and-redux/components/Layout.js
+++ b/examples/with-apollo-and-redux/components/Layout.js
@@ -1,5 +1,5 @@
-import Nav from './Nav'
-import PropTypes from 'prop-types'
+import Nav from "./Nav";
+import PropTypes from "prop-types";
 
 const Layout = ({ children }) => (
   <main>
@@ -7,8 +7,8 @@ const Layout = ({ children }) => (
     {children}
     <style jsx global>{`
       * {
-        font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
-          'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New',
+        font-family: Menlo, Monaco, "Lucida Console", "Liberation Mono",
+          "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New",
           monospace, serif;
       }
       body {
@@ -51,10 +51,10 @@ const Layout = ({ children }) => (
       }
     `}</style>
   </main>
-)
+);
 
 Layout.propTypes = {
   children: PropTypes.node.isRequired,
-}
+};
 
-export default Layout
+export default Layout;
diff --git a/examples/with-apollo-and-redux/components/Nav.js b/examples/with-apollo-and-redux/components/Nav.js
index f0009daecd..0af325ae3d 100644
--- a/examples/with-apollo-and-redux/components/Nav.js
+++ b/examples/with-apollo-and-redux/components/Nav.js
@@ -1,19 +1,19 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
+import Link from "next/link";
+import { useRouter } from "next/router";
 
 export default function Nav() {
-  const { pathname } = useRouter()
+  const { pathname } = useRouter();
 
   return (
     <header>
       <Link href="/" legacyBehavior>
-        <a className={pathname === '/' ? 'is-active' : ''}>Home</a>
+        <a className={pathname === "/" ? "is-active" : ""}>Home</a>
       </Link>
       <Link href="/apollo" legacyBehavior>
-        <a className={pathname === '/apollo' ? 'is-active' : ''}>Apollo</a>
+        <a className={pathname === "/apollo" ? "is-active" : ""}>Apollo</a>
       </Link>
       <Link href="/redux" legacyBehavior>
-        <a className={pathname === '/redux' ? 'is-active' : ''}>Redux</a>
+        <a className={pathname === "/redux" ? "is-active" : ""}>Redux</a>
       </Link>
       <style jsx>{`
         header {
@@ -29,5 +29,5 @@ export default function Nav() {
         }
       `}</style>
     </header>
-  )
+  );
 }
diff --git a/examples/with-apollo-and-redux/components/PostList.js b/examples/with-apollo-and-redux/components/PostList.js
index a0eee23090..a6ddcdb01c 100644
--- a/examples/with-apollo-and-redux/components/PostList.js
+++ b/examples/with-apollo-and-redux/components/PostList.js
@@ -1,6 +1,6 @@
-import { gql, useQuery, NetworkStatus } from '@apollo/client'
-import ErrorMessage from './ErrorMessage'
-import PostUpvoter from './PostUpvoter'
+import { gql, useQuery, NetworkStatus } from "@apollo/client";
+import ErrorMessage from "./ErrorMessage";
+import PostUpvoter from "./PostUpvoter";
 
 export const ALL_POSTS_QUERY = gql`
   query allPosts($first: Int!, $skip: Int!) {
@@ -15,11 +15,11 @@ export const ALL_POSTS_QUERY = gql`
       count
     }
   }
-`
+`;
 export const allPostsQueryVars = {
   skip: 0,
   first: 10,
-}
+};
 
 export default function PostList() {
   const { loading, error, data, fetchMore, networkStatus } = useQuery(
@@ -30,25 +30,25 @@ export default function PostList() {
       // the "networkStatus" changes, so we are able to know if it is fetching
       // more data
       notifyOnNetworkStatusChange: true,
-    }
-  )
+    },
+  );
 
-  const loadingMorePosts = networkStatus === NetworkStatus.fetchMore
+  const loadingMorePosts = networkStatus === NetworkStatus.fetchMore;
 
-  const { allPosts, _allPostsMeta } = data
+  const { allPosts, _allPostsMeta } = data;
 
   const loadMorePosts = () => {
     fetchMore({
       variables: {
         skip: allPosts.length,
       },
-    })
-  }
+    });
+  };
 
-  if (error) return <ErrorMessage message="Error loading posts." />
-  if (loading && !loadingMorePosts) return <div>Loading</div>
+  if (error) return <ErrorMessage message="Error loading posts." />;
+  if (loading && !loadingMorePosts) return <div>Loading</div>;
 
-  const areMorePosts = allPosts.length < _allPostsMeta.count
+  const areMorePosts = allPosts.length < _allPostsMeta.count;
 
   return (
     <section>
@@ -65,7 +65,7 @@ export default function PostList() {
       </ul>
       {areMorePosts && (
         <button onClick={() => loadMorePosts()} disabled={loadingMorePosts}>
-          {loadingMorePosts ? 'Loading...' : 'Show More'}
+          {loadingMorePosts ? "Loading..." : "Show More"}
         </button>
       )}
       <style jsx>{`
@@ -100,12 +100,12 @@ export default function PostList() {
           border-style: solid;
           border-width: 6px 4px 0 4px;
           border-color: #ffffff transparent transparent transparent;
-          content: '';
+          content: "";
           height: 0;
           margin-right: 5px;
           width: 0;
         }
       `}</style>
     </section>
-  )
+  );
 }
diff --git a/examples/with-apollo-and-redux/components/PostUpvoter.js b/examples/with-apollo-and-redux/components/PostUpvoter.js
index a34d697113..db5cb06a9a 100644
--- a/examples/with-apollo-and-redux/components/PostUpvoter.js
+++ b/examples/with-apollo-and-redux/components/PostUpvoter.js
@@ -1,5 +1,5 @@
-import { gql, useMutation } from '@apollo/client'
-import PropTypes from 'prop-types'
+import { gql, useMutation } from "@apollo/client";
+import PropTypes from "prop-types";
 
 const VOTE_POST = gql`
   mutation votePost($id: String!) {
@@ -9,10 +9,10 @@ const VOTE_POST = gql`
       votes
     }
   }
-`
+`;
 
 const PostUpvoter = ({ votes, id }) => {
-  const [votePost] = useMutation(VOTE_POST)
+  const [votePost] = useMutation(VOTE_POST);
 
   const upvotePost = () => {
     votePost({
@@ -20,15 +20,15 @@ const PostUpvoter = ({ votes, id }) => {
         id,
       },
       optimisticResponse: {
-        __typename: 'Mutation',
+        __typename: "Mutation",
         updatePost: {
-          __typename: 'Post',
+          __typename: "Post",
           id,
           votes: votes + 1,
         },
       },
-    })
-  }
+    });
+  };
 
   return (
     <button onClick={() => upvotePost()}>
@@ -47,19 +47,19 @@ const PostUpvoter = ({ votes, id }) => {
           border-color: transparent transparent #000000 transparent;
           border-style: solid;
           border-width: 0 4px 6px 4px;
-          content: '';
+          content: "";
           height: 0;
           margin-right: 5px;
           width: 0;
         }
       `}</style>
     </button>
-  )
-}
+  );
+};
 
 PostUpvoter.propTypes = {
   id: PropTypes.string.isRequired,
   votes: PropTypes.number.isRequired,
-}
+};
 
-export default PostUpvoter
+export default PostUpvoter;
diff --git a/examples/with-apollo-and-redux/components/Submit.js b/examples/with-apollo-and-redux/components/Submit.js
index 5b0cd4b17b..7021bb8313 100644
--- a/examples/with-apollo-and-redux/components/Submit.js
+++ b/examples/with-apollo-and-redux/components/Submit.js
@@ -1,4 +1,4 @@
-import { gql, useMutation } from '@apollo/client'
+import { gql, useMutation } from "@apollo/client";
 
 const CREATE_POST_MUTATION = gql`
   mutation createPost($title: String!, $url: String!) {
@@ -10,18 +10,18 @@ const CREATE_POST_MUTATION = gql`
       createdAt
     }
   }
-`
+`;
 
 const Submit = () => {
-  const [createPost, { loading }] = useMutation(CREATE_POST_MUTATION)
+  const [createPost, { loading }] = useMutation(CREATE_POST_MUTATION);
 
   const handleSubmit = (event) => {
-    event.preventDefault()
-    const form = event.target
-    const formData = new window.FormData(form)
-    const title = formData.get('title')
-    const url = formData.get('url')
-    form.reset()
+    event.preventDefault();
+    const form = event.target;
+    const formData = new window.FormData(form);
+    const title = formData.get("title");
+    const url = formData.get("url");
+    form.reset();
 
     createPost({
       variables: { title, url },
@@ -37,14 +37,14 @@ const Submit = () => {
                     type
                   }
                 `,
-              })
-              return [newPostRef, ...existingPosts]
+              });
+              return [newPostRef, ...existingPosts];
             },
           },
-        })
+        });
       },
-    })
-  }
+    });
+  };
 
   return (
     <form onSubmit={handleSubmit}>
@@ -68,7 +68,7 @@ const Submit = () => {
         }
       `}</style>
     </form>
-  )
-}
+  );
+};
 
-export default Submit
+export default Submit;
diff --git a/examples/with-apollo-and-redux/lib/apollo.js b/examples/with-apollo-and-redux/lib/apollo.js
index eaa4831c71..81dc9a41e1 100644
--- a/examples/with-apollo-and-redux/lib/apollo.js
+++ b/examples/with-apollo-and-redux/lib/apollo.js
@@ -1,17 +1,17 @@
-import { useMemo } from 'react'
-import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
-import { concatPagination } from '@apollo/client/utilities'
-import merge from 'deepmerge'
-import isEqual from 'lodash/isEqual'
+import { useMemo } from "react";
+import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
+import { concatPagination } from "@apollo/client/utilities";
+import merge from "deepmerge";
+import isEqual from "lodash/isEqual";
 
-let apolloClient
+let apolloClient;
 
 function createApolloClient() {
   return new ApolloClient({
-    ssrMode: typeof window === 'undefined',
+    ssrMode: typeof window === "undefined",
     link: new HttpLink({
-      uri: 'https://nextjs-graphql-with-prisma-simple-foo.vercel.app/api', // Server URL (must be absolute)
-      credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
+      uri: "https://nextjs-graphql-with-prisma-simple-foo.vercel.app/api", // Server URL (must be absolute)
+      credentials: "same-origin", // Additional fetch() options like `credentials` or `headers`
     }),
     cache: new InMemoryCache({
       typePolicies: {
@@ -22,17 +22,17 @@ function createApolloClient() {
         },
       },
     }),
-  })
+  });
 }
 
 export function initializeApollo(initialState = null) {
-  const _apolloClient = apolloClient ?? createApolloClient()
+  const _apolloClient = apolloClient ?? createApolloClient();
 
   // If your page has Next.js data fetching methods that use Apollo Client, the initial state
   // get hydrated here
   if (initialState) {
     // Get existing cache, loaded during client side data fetching
-    const existingCache = _apolloClient.extract()
+    const existingCache = _apolloClient.extract();
 
     // Merge the existing cache into data passed from getStaticProps/getServerSideProps
     const data = merge(initialState, existingCache, {
@@ -40,23 +40,23 @@ export function initializeApollo(initialState = null) {
       arrayMerge: (destinationArray, sourceArray) => [
         ...sourceArray,
         ...destinationArray.filter((d) =>
-          sourceArray.every((s) => !isEqual(d, s))
+          sourceArray.every((s) => !isEqual(d, s)),
         ),
       ],
-    })
+    });
 
     // Restore the cache with the merged data
-    _apolloClient.cache.restore(data)
+    _apolloClient.cache.restore(data);
   }
   // For SSG and SSR always create a new Apollo Client
-  if (typeof window === 'undefined') return _apolloClient
+  if (typeof window === "undefined") return _apolloClient;
   // Create the Apollo Client once in the client
-  if (!apolloClient) apolloClient = _apolloClient
+  if (!apolloClient) apolloClient = _apolloClient;
 
-  return _apolloClient
+  return _apolloClient;
 }
 
 export function useApollo(initialState) {
-  const store = useMemo(() => initializeApollo(initialState), [initialState])
-  return store
+  const store = useMemo(() => initializeApollo(initialState), [initialState]);
+  return store;
 }
diff --git a/examples/with-apollo-and-redux/lib/redux.js b/examples/with-apollo-and-redux/lib/redux.js
index 69432e4d55..138dc82db8 100644
--- a/examples/with-apollo-and-redux/lib/redux.js
+++ b/examples/with-apollo-and-redux/lib/redux.js
@@ -1,53 +1,53 @@
-import { useMemo } from 'react'
-import { createStore, applyMiddleware } from 'redux'
-import { composeWithDevTools } from 'redux-devtools-extension'
+import { useMemo } from "react";
+import { createStore, applyMiddleware } from "redux";
+import { composeWithDevTools } from "redux-devtools-extension";
 
-let store
+let store;
 
 const initialState = {
   lastUpdate: 0,
   light: false,
   count: 0,
-}
+};
 
 const reducer = (state = initialState, action) => {
   switch (action.type) {
-    case 'TICK':
+    case "TICK":
       return {
         ...state,
         lastUpdate: action.lastUpdate,
         light: !!action.light,
-      }
-    case 'INCREMENT':
+      };
+    case "INCREMENT":
       return {
         ...state,
         count: state.count + 1,
-      }
-    case 'DECREMENT':
+      };
+    case "DECREMENT":
       return {
         ...state,
         count: state.count - 1,
-      }
-    case 'RESET':
+      };
+    case "RESET":
       return {
         ...state,
         count: initialState.count,
-      }
+      };
     default:
-      return state
+      return state;
   }
-}
+};
 
 function initStore(preloadedState = initialState) {
   return createStore(
     reducer,
     preloadedState,
-    composeWithDevTools(applyMiddleware())
-  )
+    composeWithDevTools(applyMiddleware()),
+  );
 }
 
 export const initializeStore = (preloadedState) => {
-  let _store = store ?? initStore(preloadedState)
+  let _store = store ?? initStore(preloadedState);
 
   // After navigating to a page with an initial Redux state, merge that state
   // with the current state in the store, and create a new store
@@ -55,20 +55,20 @@ export const initializeStore = (preloadedState) => {
     _store = initStore({
       ...store.getState(),
       ...preloadedState,
-    })
+    });
     // Reset the current store
-    store = undefined
+    store = undefined;
   }
 
   // For SSG and SSR always create a new store
-  if (typeof window === 'undefined') return _store
+  if (typeof window === "undefined") return _store;
   // Create the store once in the client
-  if (!store) store = _store
+  if (!store) store = _store;
 
-  return _store
-}
+  return _store;
+};
 
 export function useStore(initialState) {
-  const store = useMemo(() => initializeStore(initialState), [initialState])
-  return store
+  const store = useMemo(() => initializeStore(initialState), [initialState]);
+  return store;
 }
diff --git a/examples/with-apollo-and-redux/lib/useInterval.js b/examples/with-apollo-and-redux/lib/useInterval.js
index 0bfb631018..ced12a7c80 100644
--- a/examples/with-apollo-and-redux/lib/useInterval.js
+++ b/examples/with-apollo-and-redux/lib/useInterval.js
@@ -1,21 +1,21 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef } from "react";
 
 // https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 const useInterval = (callback, delay) => {
-  const savedCallback = useRef()
+  const savedCallback = useRef();
 
   useEffect(() => {
-    savedCallback.current = callback
-  }, [callback])
+    savedCallback.current = callback;
+  }, [callback]);
 
   useEffect(() => {
-    const handler = (...args) => savedCallback.current(...args)
+    const handler = (...args) => savedCallback.current(...args);
 
     if (delay !== null) {
-      const id = setInterval(handler, delay)
-      return () => clearInterval(id)
+      const id = setInterval(handler, delay);
+      return () => clearInterval(id);
     }
-  }, [delay])
-}
+  }, [delay]);
+};
 
-export default useInterval
+export default useInterval;
diff --git a/examples/with-apollo-and-redux/pages/_app.js b/examples/with-apollo-and-redux/pages/_app.js
index fb8024a833..782ba4bc71 100644
--- a/examples/with-apollo-and-redux/pages/_app.js
+++ b/examples/with-apollo-and-redux/pages/_app.js
@@ -1,11 +1,11 @@
-import { ApolloProvider } from '@apollo/client'
-import { Provider } from 'react-redux'
-import { useStore } from '../lib/redux'
-import { useApollo } from '../lib/apollo'
+import { ApolloProvider } from "@apollo/client";
+import { Provider } from "react-redux";
+import { useStore } from "../lib/redux";
+import { useApollo } from "../lib/apollo";
 
 export default function App({ Component, pageProps }) {
-  const store = useStore(pageProps.initialReduxState)
-  const apolloClient = useApollo(pageProps.initialApolloState)
+  const store = useStore(pageProps.initialReduxState);
+  const apolloClient = useApollo(pageProps.initialApolloState);
 
   return (
     <Provider store={store}>
@@ -13,5 +13,5 @@ export default function App({ Component, pageProps }) {
         <Component {...pageProps} />
       </ApolloProvider>
     </Provider>
-  )
+  );
 }
diff --git a/examples/with-apollo-and-redux/pages/apollo.js b/examples/with-apollo-and-redux/pages/apollo.js
index 8c46d66494..8fb9c44e83 100644
--- a/examples/with-apollo-and-redux/pages/apollo.js
+++ b/examples/with-apollo-and-redux/pages/apollo.js
@@ -1,32 +1,32 @@
-import { initializeApollo } from '../lib/apollo'
-import Layout from '../components/Layout'
-import Submit from '../components/Submit'
+import { initializeApollo } from "../lib/apollo";
+import Layout from "../components/Layout";
+import Submit from "../components/Submit";
 import PostList, {
   ALL_POSTS_QUERY,
   allPostsQueryVars,
-} from '../components/PostList'
+} from "../components/PostList";
 
 const ApolloPage = () => (
   <Layout>
     <Submit />
     <PostList />
   </Layout>
-)
+);
 
 export async function getStaticProps() {
-  const apolloClient = initializeApollo()
+  const apolloClient = initializeApollo();
 
   await apolloClient.query({
     query: ALL_POSTS_QUERY,
     variables: allPostsQueryVars,
-  })
+  });
 
   return {
     props: {
       initialApolloState: apolloClient.cache.extract(),
     },
     revalidate: 1,
-  }
+  };
 }
 
-export default ApolloPage
+export default ApolloPage;
diff --git a/examples/with-apollo-and-redux/pages/index.js b/examples/with-apollo-and-redux/pages/index.js
index a0ae296b30..684355ca4d 100644
--- a/examples/with-apollo-and-redux/pages/index.js
+++ b/examples/with-apollo-and-redux/pages/index.js
@@ -1,27 +1,27 @@
-import { useDispatch } from 'react-redux'
-import { initializeStore } from '../lib/redux'
-import { initializeApollo } from '../lib/apollo'
-import useInterval from '../lib/useInterval'
-import Layout from '../components/Layout'
-import Clock from '../components/Clock'
-import Counter from '../components/Counter'
-import Submit from '../components/Submit'
+import { useDispatch } from "react-redux";
+import { initializeStore } from "../lib/redux";
+import { initializeApollo } from "../lib/apollo";
+import useInterval from "../lib/useInterval";
+import Layout from "../components/Layout";
+import Clock from "../components/Clock";
+import Counter from "../components/Counter";
+import Submit from "../components/Submit";
 import PostList, {
   ALL_POSTS_QUERY,
   allPostsQueryVars,
-} from '../components/PostList'
+} from "../components/PostList";
 
 const IndexPage = () => {
   // Tick the time every second
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
   useInterval(() => {
     dispatch({
-      type: 'TICK',
+      type: "TICK",
       light: true,
       lastUpdate: Date.now(),
-    })
-  }, 1000)
+    });
+  }, 1000);
 
   return (
     <Layout>
@@ -33,24 +33,24 @@ const IndexPage = () => {
       <Submit />
       <PostList />
     </Layout>
-  )
-}
+  );
+};
 
 export async function getStaticProps() {
-  const reduxStore = initializeStore()
-  const apolloClient = initializeApollo()
-  const { dispatch } = reduxStore
+  const reduxStore = initializeStore();
+  const apolloClient = initializeApollo();
+  const { dispatch } = reduxStore;
 
   dispatch({
-    type: 'TICK',
+    type: "TICK",
     light: true,
     lastUpdate: Date.now(),
-  })
+  });
 
   await apolloClient.query({
     query: ALL_POSTS_QUERY,
     variables: allPostsQueryVars,
-  })
+  });
 
   return {
     props: {
@@ -58,7 +58,7 @@ export async function getStaticProps() {
       initialApolloState: apolloClient.cache.extract(),
     },
     revalidate: 1,
-  }
+  };
 }
 
-export default IndexPage
+export default IndexPage;
diff --git a/examples/with-apollo-and-redux/pages/redux.js b/examples/with-apollo-and-redux/pages/redux.js
index 41c373bb13..da3aaa6d59 100644
--- a/examples/with-apollo-and-redux/pages/redux.js
+++ b/examples/with-apollo-and-redux/pages/redux.js
@@ -1,46 +1,46 @@
-import { useDispatch } from 'react-redux'
-import { initializeStore } from '../lib/redux'
-import useInterval from '../lib/useInterval'
-import Layout from '../components/Layout'
-import Clock from '../components/Clock'
-import Counter from '../components/Counter'
+import { useDispatch } from "react-redux";
+import { initializeStore } from "../lib/redux";
+import useInterval from "../lib/useInterval";
+import Layout from "../components/Layout";
+import Clock from "../components/Clock";
+import Counter from "../components/Counter";
 
 const ReduxPage = () => {
   // Tick the time every second
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
   useInterval(() => {
     dispatch({
-      type: 'TICK',
+      type: "TICK",
       light: true,
       lastUpdate: Date.now(),
-    })
-  }, 1000)
+    });
+  }, 1000);
 
   return (
     <Layout>
       <Clock />
       <Counter />
     </Layout>
-  )
-}
+  );
+};
 
 export async function getStaticProps() {
-  const reduxStore = initializeStore()
-  const { dispatch } = reduxStore
+  const reduxStore = initializeStore();
+  const { dispatch } = reduxStore;
 
   dispatch({
-    type: 'TICK',
+    type: "TICK",
     light: true,
     lastUpdate: Date.now(),
-  })
+  });
 
   return {
     props: {
       initialReduxState: reduxStore.getState(),
     },
     revalidate: 1,
-  }
+  };
 }
 
-export default ReduxPage
+export default ReduxPage;
diff --git a/examples/with-apollo/components/App.js b/examples/with-apollo/components/App.js
index eff22fc71b..c2cabd1946 100644
--- a/examples/with-apollo/components/App.js
+++ b/examples/with-apollo/components/App.js
@@ -4,8 +4,8 @@ export default function App({ children }) {
       {children}
       <style jsx global>{`
         * {
-          font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
-            'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New',
+          font-family: Menlo, Monaco, "Lucida Console", "Liberation Mono",
+            "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New",
             monospace, serif;
         }
         body {
@@ -43,5 +43,5 @@ export default function App({ children }) {
         }
       `}</style>
     </main>
-  )
+  );
 }
diff --git a/examples/with-apollo/components/ErrorMessage.js b/examples/with-apollo/components/ErrorMessage.js
index d8cc91e950..8782366812 100644
--- a/examples/with-apollo/components/ErrorMessage.js
+++ b/examples/with-apollo/components/ErrorMessage.js
@@ -11,5 +11,5 @@ export default function ErrorMessage({ message }) {
         }
       `}</style>
     </aside>
-  )
+  );
 }
diff --git a/examples/with-apollo/components/Header.js b/examples/with-apollo/components/Header.js
index bd81490972..2bb7aac723 100644
--- a/examples/with-apollo/components/Header.js
+++ b/examples/with-apollo/components/Header.js
@@ -1,24 +1,24 @@
-import { useRouter } from 'next/router'
-import Link from 'next/link'
+import { useRouter } from "next/router";
+import Link from "next/link";
 
 export default function Header() {
-  const { pathname } = useRouter()
+  const { pathname } = useRouter();
 
   return (
     <header>
       <Link href="/" legacyBehavior>
-        <a className={pathname === '/' ? 'is-active' : ''}>Home</a>
+        <a className={pathname === "/" ? "is-active" : ""}>Home</a>
       </Link>
       <Link href="/about" legacyBehavior>
-        <a className={pathname === '/about' ? 'is-active' : ''}>About</a>
+        <a className={pathname === "/about" ? "is-active" : ""}>About</a>
       </Link>
       <Link href="/client-only" legacyBehavior>
-        <a className={pathname === '/client-only' ? 'is-active' : ''}>
+        <a className={pathname === "/client-only" ? "is-active" : ""}>
           Client-Only
         </a>
       </Link>
       <Link href="/ssr" legacyBehavior>
-        <a className={pathname === '/ssr' ? 'is-active' : ''}>SSR</a>
+        <a className={pathname === "/ssr" ? "is-active" : ""}>SSR</a>
       </Link>
       <style jsx>{`
         header {
@@ -34,5 +34,5 @@ export default function Header() {
         }
       `}</style>
     </header>
-  )
+  );
 }
diff --git a/examples/with-apollo/components/InfoBox.js b/examples/with-apollo/components/InfoBox.js
index e17888bac9..49b4828bc8 100644
--- a/examples/with-apollo/components/InfoBox.js
+++ b/examples/with-apollo/components/InfoBox.js
@@ -12,6 +12,6 @@ const InfoBox = ({ children }) => (
     `}</style>
     {children}
   </div>
-)
+);
 
-export default InfoBox
+export default InfoBox;
diff --git a/examples/with-apollo/components/PostList.js b/examples/with-apollo/components/PostList.js
index 381c156e81..66e294532c 100644
--- a/examples/with-apollo/components/PostList.js
+++ b/examples/with-apollo/components/PostList.js
@@ -1,6 +1,6 @@
-import { gql, useQuery, NetworkStatus } from '@apollo/client'
-import ErrorMessage from './ErrorMessage'
-import PostUpvoter from './PostUpvoter'
+import { gql, useQuery, NetworkStatus } from "@apollo/client";
+import ErrorMessage from "./ErrorMessage";
+import PostUpvoter from "./PostUpvoter";
 
 export const ALL_POSTS_QUERY = gql`
   query allPosts($first: Int!, $skip: Int!) {
@@ -15,12 +15,12 @@ export const ALL_POSTS_QUERY = gql`
       count
     }
   }
-`
+`;
 
 export const allPostsQueryVars = {
   skip: 0,
   first: 10,
-}
+};
 
 export default function PostList() {
   const { loading, error, data, fetchMore, networkStatus } = useQuery(
@@ -31,24 +31,24 @@ export default function PostList() {
       // the "networkStatus" changes, so we are able to know if it is fetching
       // more data
       notifyOnNetworkStatusChange: true,
-    }
-  )
+    },
+  );
 
-  const loadingMorePosts = networkStatus === NetworkStatus.fetchMore
-  const { allPosts, _allPostsMeta } = data
+  const loadingMorePosts = networkStatus === NetworkStatus.fetchMore;
+  const { allPosts, _allPostsMeta } = data;
 
   const loadMorePosts = () => {
     fetchMore({
       variables: {
         skip: allPosts.length,
       },
-    })
-  }
+    });
+  };
 
-  if (error) return <ErrorMessage message="Error loading posts." />
-  if (loading && !loadingMorePosts) return <div>Loading</div>
+  if (error) return <ErrorMessage message="Error loading posts." />;
+  if (loading && !loadingMorePosts) return <div>Loading</div>;
 
-  const areMorePosts = allPosts.length < _allPostsMeta.count
+  const areMorePosts = allPosts.length < _allPostsMeta.count;
 
   return (
     <section>
@@ -65,7 +65,7 @@ export default function PostList() {
       </ul>
       {areMorePosts && (
         <button onClick={() => loadMorePosts()} disabled={loadingMorePosts}>
-          {loadingMorePosts ? 'Loading...' : 'Show More'}
+          {loadingMorePosts ? "Loading..." : "Show More"}
         </button>
       )}
       <style jsx>{`
@@ -100,12 +100,12 @@ export default function PostList() {
           border-style: solid;
           border-width: 6px 4px 0 4px;
           border-color: #ffffff transparent transparent transparent;
-          content: '';
+          content: "";
           height: 0;
           margin-right: 5px;
           width: 0;
         }
       `}</style>
     </section>
-  )
+  );
 }
diff --git a/examples/with-apollo/components/PostUpvoter.js b/examples/with-apollo/components/PostUpvoter.js
index a91f57820a..738ce57f5b 100644
--- a/examples/with-apollo/components/PostUpvoter.js
+++ b/examples/with-apollo/components/PostUpvoter.js
@@ -1,4 +1,4 @@
-import { gql, useMutation } from '@apollo/client'
+import { gql, useMutation } from "@apollo/client";
 
 const UPDATE_POST_MUTATION = gql`
   mutation votePost($id: String!) {
@@ -8,10 +8,10 @@ const UPDATE_POST_MUTATION = gql`
       __typename
     }
   }
-`
+`;
 
 export default function PostUpvoter({ votes, id }) {
-  const [updatePost] = useMutation(UPDATE_POST_MUTATION)
+  const [updatePost] = useMutation(UPDATE_POST_MUTATION);
 
   const upvotePost = () => {
     updatePost({
@@ -19,15 +19,15 @@ export default function PostUpvoter({ votes, id }) {
         id,
       },
       optimisticResponse: {
-        __typename: 'Mutation',
+        __typename: "Mutation",
         votePost: {
-          __typename: 'Post',
+          __typename: "Post",
           id,
           votes: votes + 1,
         },
       },
-    })
-  }
+    });
+  };
 
   return (
     <button onClick={() => upvotePost()}>
@@ -46,12 +46,12 @@ export default function PostUpvoter({ votes, id }) {
           border-color: transparent transparent #000000 transparent;
           border-style: solid;
           border-width: 0 4px 6px 4px;
-          content: '';
+          content: "";
           height: 0;
           margin-right: 5px;
           width: 0;
         }
       `}</style>
     </button>
-  )
+  );
 }
diff --git a/examples/with-apollo/components/Submit.js b/examples/with-apollo/components/Submit.js
index 8aa1d13265..d7785b74b0 100644
--- a/examples/with-apollo/components/Submit.js
+++ b/examples/with-apollo/components/Submit.js
@@ -1,4 +1,4 @@
-import { gql, useMutation } from '@apollo/client'
+import { gql, useMutation } from "@apollo/client";
 
 const CREATE_POST_MUTATION = gql`
   mutation createPost($title: String!, $url: String!) {
@@ -10,18 +10,18 @@ const CREATE_POST_MUTATION = gql`
       createdAt
     }
   }
-`
+`;
 
 export default function Submit() {
-  const [createPost, { loading }] = useMutation(CREATE_POST_MUTATION)
+  const [createPost, { loading }] = useMutation(CREATE_POST_MUTATION);
 
   const handleSubmit = (event) => {
-    event.preventDefault()
-    const form = event.target
-    const formData = new window.FormData(form)
-    const title = formData.get('title')
-    const url = formData.get('url')
-    form.reset()
+    event.preventDefault();
+    const form = event.target;
+    const formData = new window.FormData(form);
+    const title = formData.get("title");
+    const url = formData.get("url");
+    form.reset();
 
     createPost({
       variables: { title, url },
@@ -37,14 +37,14 @@ export default function Submit() {
                     type
                   }
                 `,
-              })
-              return [newPostRef, ...existingPosts]
+              });
+              return [newPostRef, ...existingPosts];
             },
           },
-        })
+        });
       },
-    })
-  }
+    });
+  };
 
   return (
     <form onSubmit={handleSubmit}>
@@ -69,5 +69,5 @@ export default function Submit() {
         }
       `}</style>
     </form>
-  )
+  );
 }
diff --git a/examples/with-apollo/lib/apolloClient.js b/examples/with-apollo/lib/apolloClient.js
index 5a9335f81b..9fa9dab097 100644
--- a/examples/with-apollo/lib/apolloClient.js
+++ b/examples/with-apollo/lib/apolloClient.js
@@ -1,32 +1,32 @@
-import { useMemo } from 'react'
-import { ApolloClient, HttpLink, InMemoryCache, from } from '@apollo/client'
-import { onError } from '@apollo/client/link/error'
-import { concatPagination } from '@apollo/client/utilities'
-import merge from 'deepmerge'
-import isEqual from 'lodash/isEqual'
+import { useMemo } from "react";
+import { ApolloClient, HttpLink, InMemoryCache, from } from "@apollo/client";
+import { onError } from "@apollo/client/link/error";
+import { concatPagination } from "@apollo/client/utilities";
+import merge from "deepmerge";
+import isEqual from "lodash/isEqual";
 
-export const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__'
+export const APOLLO_STATE_PROP_NAME = "__APOLLO_STATE__";
 
-let apolloClient
+let apolloClient;
 
 const errorLink = onError(({ graphQLErrors, networkError }) => {
   if (graphQLErrors)
     graphQLErrors.forEach(({ message, locations, path }) =>
       console.log(
-        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
-      )
-    )
-  if (networkError) console.log(`[Network error]: ${networkError}`)
-})
+        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
+      ),
+    );
+  if (networkError) console.log(`[Network error]: ${networkError}`);
+});
 
 const httpLink = new HttpLink({
-  uri: 'https://nextjs-graphql-with-prisma-simple.vercel.app/api', // Server URL (must be absolute)
-  credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
-})
+  uri: "https://nextjs-graphql-with-prisma-simple.vercel.app/api", // Server URL (must be absolute)
+  credentials: "same-origin", // Additional fetch() options like `credentials` or `headers`
+});
 
 function createApolloClient() {
   return new ApolloClient({
-    ssrMode: typeof window === 'undefined',
+    ssrMode: typeof window === "undefined",
     link: from([errorLink, httpLink]),
     cache: new InMemoryCache({
       typePolicies: {
@@ -37,17 +37,17 @@ function createApolloClient() {
         },
       },
     }),
-  })
+  });
 }
 
 export function initializeApollo(initialState = null) {
-  const _apolloClient = apolloClient ?? createApolloClient()
+  const _apolloClient = apolloClient ?? createApolloClient();
 
   // If your page has Next.js data fetching methods that use Apollo Client, the initial state
   // gets hydrated here
   if (initialState) {
     // Get existing cache, loaded during client side data fetching
-    const existingCache = _apolloClient.extract()
+    const existingCache = _apolloClient.extract();
 
     // Merge the initialState from getStaticProps/getServerSideProps in the existing cache
     const data = merge(existingCache, initialState, {
@@ -55,32 +55,32 @@ export function initializeApollo(initialState = null) {
       arrayMerge: (destinationArray, sourceArray) => [
         ...sourceArray,
         ...destinationArray.filter((d) =>
-          sourceArray.every((s) => !isEqual(d, s))
+          sourceArray.every((s) => !isEqual(d, s)),
         ),
       ],
-    })
+    });
 
     // Restore the cache with the merged data
-    _apolloClient.cache.restore(data)
+    _apolloClient.cache.restore(data);
   }
   // For SSG and SSR always create a new Apollo Client
-  if (typeof window === 'undefined') return _apolloClient
+  if (typeof window === "undefined") return _apolloClient;
   // Create the Apollo Client once in the client
-  if (!apolloClient) apolloClient = _apolloClient
+  if (!apolloClient) apolloClient = _apolloClient;
 
-  return _apolloClient
+  return _apolloClient;
 }
 
 export function addApolloState(client, pageProps) {
   if (pageProps?.props) {
-    pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract()
+    pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract();
   }
 
-  return pageProps
+  return pageProps;
 }
 
 export function useApollo(pageProps) {
-  const state = pageProps[APOLLO_STATE_PROP_NAME]
-  const store = useMemo(() => initializeApollo(state), [state])
-  return store
+  const state = pageProps[APOLLO_STATE_PROP_NAME];
+  const store = useMemo(() => initializeApollo(state), [state]);
+  return store;
 }
diff --git a/examples/with-apollo/pages/_app.js b/examples/with-apollo/pages/_app.js
index 269a798b0c..17ede95a60 100644
--- a/examples/with-apollo/pages/_app.js
+++ b/examples/with-apollo/pages/_app.js
@@ -1,12 +1,12 @@
-import { ApolloProvider } from '@apollo/client'
-import { useApollo } from '../lib/apolloClient'
+import { ApolloProvider } from "@apollo/client";
+import { useApollo } from "../lib/apolloClient";
 
 export default function App({ Component, pageProps }) {
-  const apolloClient = useApollo(pageProps)
+  const apolloClient = useApollo(pageProps);
 
   return (
     <ApolloProvider client={apolloClient}>
       <Component {...pageProps} />
     </ApolloProvider>
-  )
+  );
 }
diff --git a/examples/with-apollo/pages/about.js b/examples/with-apollo/pages/about.js
index 0390f8a8ec..f2c5f35bae 100644
--- a/examples/with-apollo/pages/about.js
+++ b/examples/with-apollo/pages/about.js
@@ -1,5 +1,5 @@
-import App from '../components/App'
-import Header from '../components/Header'
+import App from "../components/App";
+import Header from "../components/Header";
 
 const AboutPage = () => (
   <App>
@@ -15,17 +15,17 @@ const AboutPage = () => (
         are run, fetching more results from the server.
       </p>
       <p>
-        In this simple example, we integrate Apollo seamlessly with{' '}
-        <a href="https://github.com/vercel/next.js">Next</a> by calling{' '}
+        In this simple example, we integrate Apollo seamlessly with{" "}
+        <a href="https://github.com/vercel/next.js">Next</a> by calling{" "}
         <a href="https://nextjs.org/docs/basic-features/data-fetching/get-static-props">
           getStaticProps
-        </a>{' '}
+        </a>{" "}
         at our Page component. This approach lets us opt out of getInitialProps
-        and let us use all the niceties provided by{' '}
+        and let us use all the niceties provided by{" "}
         <a href="https://github.com/vercel/next.js">Next</a>.
       </p>
       <p>
-        On initial page load, while on the server and inside{' '}
+        On initial page load, while on the server and inside{" "}
         <a href="https://nextjs.org/docs/basic-features/data-fetching/get-static-props">
           getStaticProps
         </a>
@@ -40,6 +40,6 @@ const AboutPage = () => (
       </p>
     </article>
   </App>
-)
+);
 
-export default AboutPage
+export default AboutPage;
diff --git a/examples/with-apollo/pages/client-only.js b/examples/with-apollo/pages/client-only.js
index d61675d3ed..148db19d11 100644
--- a/examples/with-apollo/pages/client-only.js
+++ b/examples/with-apollo/pages/client-only.js
@@ -1,14 +1,14 @@
-import App from '../components/App'
-import InfoBox from '../components/InfoBox'
-import Header from '../components/Header'
-import Submit from '../components/Submit'
-import PostList from '../components/PostList'
+import App from "../components/App";
+import InfoBox from "../components/InfoBox";
+import Header from "../components/Header";
+import Submit from "../components/Submit";
+import PostList from "../components/PostList";
 
 const ClientOnlyPage = (props) => (
   <App>
     <Header />
     <InfoBox>
-      ℹ️ This page shows how to use Apollo only in the client. If you{' '}
+      ℹ️ This page shows how to use Apollo only in the client. If you{" "}
       <a href="/client-only">reload</a> this page, you will see a loader since
       Apollo didn't fetch any data on the server. This is useful when the page
       doesn't have SEO requirements or blocking data fetching requirements.
@@ -16,6 +16,6 @@ const ClientOnlyPage = (props) => (
     <Submit />
     <PostList />
   </App>
-)
+);
 
-export default ClientOnlyPage
+export default ClientOnlyPage;
diff --git a/examples/with-apollo/pages/index.js b/examples/with-apollo/pages/index.js
index bce81b095e..f6f9dfef26 100644
--- a/examples/with-apollo/pages/index.js
+++ b/examples/with-apollo/pages/index.js
@@ -1,12 +1,12 @@
-import App from '../components/App'
-import InfoBox from '../components/InfoBox'
-import Header from '../components/Header'
-import Submit from '../components/Submit'
+import App from "../components/App";
+import InfoBox from "../components/InfoBox";
+import Header from "../components/Header";
+import Submit from "../components/Submit";
 import PostList, {
   ALL_POSTS_QUERY,
   allPostsQueryVars,
-} from '../components/PostList'
-import { initializeApollo, addApolloState } from '../lib/apolloClient'
+} from "../components/PostList";
+import { initializeApollo, addApolloState } from "../lib/apolloClient";
 
 const IndexPage = () => (
   <App>
@@ -15,20 +15,20 @@ const IndexPage = () => (
     <Submit />
     <PostList />
   </App>
-)
+);
 
 export async function getStaticProps() {
-  const apolloClient = initializeApollo()
+  const apolloClient = initializeApollo();
 
   await apolloClient.query({
     query: ALL_POSTS_QUERY,
     variables: allPostsQueryVars,
-  })
+  });
 
   return addApolloState(apolloClient, {
     props: {},
     revalidate: 1,
-  })
+  });
 }
 
-export default IndexPage
+export default IndexPage;
diff --git a/examples/with-apollo/pages/ssr.js b/examples/with-apollo/pages/ssr.js
index 0d95565ecd..dd02ecb2ed 100644
--- a/examples/with-apollo/pages/ssr.js
+++ b/examples/with-apollo/pages/ssr.js
@@ -1,12 +1,12 @@
-import App from '../components/App'
-import InfoBox from '../components/InfoBox'
-import Header from '../components/Header'
-import Submit from '../components/Submit'
+import App from "../components/App";
+import InfoBox from "../components/InfoBox";
+import Header from "../components/Header";
+import Submit from "../components/Submit";
 import PostList, {
   ALL_POSTS_QUERY,
   allPostsQueryVars,
-} from '../components/PostList'
-import { initializeApollo, addApolloState } from '../lib/apolloClient'
+} from "../components/PostList";
+import { initializeApollo, addApolloState } from "../lib/apolloClient";
 
 const SSRPage = () => (
   <App>
@@ -15,19 +15,19 @@ const SSRPage = () => (
     <Submit />
     <PostList />
   </App>
-)
+);
 
 export async function getServerSideProps() {
-  const apolloClient = initializeApollo()
+  const apolloClient = initializeApollo();
 
   await apolloClient.query({
     query: ALL_POSTS_QUERY,
     variables: allPostsQueryVars,
-  })
+  });
 
   return addApolloState(apolloClient, {
     props: {},
-  })
+  });
 }
 
-export default SSRPage
+export default SSRPage;
diff --git a/examples/with-axiom/middleware.ts b/examples/with-axiom/middleware.ts
index 9c2833a5b8..9d78cdd8d3 100644
--- a/examples/with-axiom/middleware.ts
+++ b/examples/with-axiom/middleware.ts
@@ -1,9 +1,9 @@
-import { NextResponse } from 'next/server'
-import { log, withAxiom } from 'next-axiom'
+import { NextResponse } from "next/server";
+import { log, withAxiom } from "next-axiom";
 
 async function middleware() {
-  log.info('Hello from middleware', { bar: 'baz' })
-  return NextResponse.next()
+  log.info("Hello from middleware", { bar: "baz" });
+  return NextResponse.next();
 }
 
-export default withAxiom(middleware)
+export default withAxiom(middleware);
diff --git a/examples/with-axiom/next.config.js b/examples/with-axiom/next.config.js
index 4ddf957b07..21bd1c5976 100644
--- a/examples/with-axiom/next.config.js
+++ b/examples/with-axiom/next.config.js
@@ -1,8 +1,8 @@
-const { withAxiom } = require('next-axiom')
+const { withAxiom } = require("next-axiom");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = withAxiom({
   reactStrictMode: true,
-})
+});
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-axiom/pages/_app.tsx b/examples/with-axiom/pages/_app.tsx
index 27fd9af825..74e4052554 100644
--- a/examples/with-axiom/pages/_app.tsx
+++ b/examples/with-axiom/pages/_app.tsx
@@ -1,11 +1,11 @@
-import { log } from 'next-axiom'
-import { AppProps } from 'next/app'
-export { reportWebVitals } from 'next-axiom'
+import { log } from "next-axiom";
+import { AppProps } from "next/app";
+export { reportWebVitals } from "next-axiom";
 
-log.info('Hello from frontend', { foo: 'bar' })
+log.info("Hello from frontend", { foo: "bar" });
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
-  return <Component {...pageProps} />
-}
+  return <Component {...pageProps} />;
+};
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-axiom/pages/api/hello.ts b/examples/with-axiom/pages/api/hello.ts
index 3515f82ab1..b91a6d2318 100644
--- a/examples/with-axiom/pages/api/hello.ts
+++ b/examples/with-axiom/pages/api/hello.ts
@@ -1,10 +1,10 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { log, withAxiom } from 'next-axiom'
+import type { NextApiRequest, NextApiResponse } from "next";
+import { log, withAxiom } from "next-axiom";
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-  log.info('Hello from function', { url: req.url })
-  res.status(200).json({ name: 'John Doe' })
+  log.info("Hello from function", { url: req.url });
+  res.status(200).json({ name: "John Doe" });
 }
 
-export default withAxiom(handler)
+export default withAxiom(handler);
diff --git a/examples/with-axiom/pages/index.tsx b/examples/with-axiom/pages/index.tsx
index 230ac54de9..a8f84f0097 100644
--- a/examples/with-axiom/pages/index.tsx
+++ b/examples/with-axiom/pages/index.tsx
@@ -1,31 +1,31 @@
-import { GetStaticPropsContext } from 'next'
-import { log } from 'next-axiom'
-import useSWR from 'swr'
+import { GetStaticPropsContext } from "next";
+import { log } from "next-axiom";
+import useSWR from "swr";
 
 export const getStaticProps = async (ctx: GetStaticPropsContext) => {
-  log.info('Hello from SSR', { ctx })
+  log.info("Hello from SSR", { ctx });
   return {
     props: {},
-  }
-}
+  };
+};
 
 const fetcher = async (...args: any[]) => {
-  log.info('Hello from SWR', { args })
-  const res = await fetch.apply(null, [...args])
-  return await res.json()
-}
+  log.info("Hello from SWR", { args });
+  const res = await fetch.apply(null, [...args]);
+  return await res.json();
+};
 
 const Home = () => {
-  const { data, error } = useSWR('/api/hello', fetcher)
+  const { data, error } = useSWR("/api/hello", fetcher);
 
-  if (error) return <div>Failed to load</div>
-  if (!data) return <div>Loading...</div>
+  if (error) return <div>Failed to load</div>;
+  if (!data) return <div>Loading...</div>;
 
   return (
     <div>
       <h1>{data.name}</h1>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/examples/with-azure-cosmos/lib/cosmosdb.ts b/examples/with-azure-cosmos/lib/cosmosdb.ts
index 23b0c5dae6..9636585734 100644
--- a/examples/with-azure-cosmos/lib/cosmosdb.ts
+++ b/examples/with-azure-cosmos/lib/cosmosdb.ts
@@ -1,57 +1,57 @@
-import { Container, CosmosClient, Database } from '@azure/cosmos'
+import { Container, CosmosClient, Database } from "@azure/cosmos";
 
 export type Cosmos = {
-  connected: boolean
-  client?: CosmosClient
-  database?: Database
-  container?: Container
-}
+  connected: boolean;
+  client?: CosmosClient;
+  database?: Database;
+  container?: Container;
+};
 
 if (!process.env.COSMOSDB_CONNECTION_STRING) {
   throw new Error(
-    'Invalid/Missing environment variable: "COSMOSDB_CONNECTION_STRING"'
-  )
+    'Invalid/Missing environment variable: "COSMOSDB_CONNECTION_STRING"',
+  );
 }
 
 if (!process.env.COSMOSDB_DATABASE_NAME) {
   throw new Error(
-    'Invalid/Missing environment variable: "COSMOSDB_DATABASE_NAME"'
-  )
+    'Invalid/Missing environment variable: "COSMOSDB_DATABASE_NAME"',
+  );
 }
 
 if (!process.env.COSMOSDB_CONTAINER_NAME) {
   throw new Error(
-    'Invalid/Missing environment variable: "COSMOSDB_CONTAINER_NAME"'
-  )
+    'Invalid/Missing environment variable: "COSMOSDB_CONTAINER_NAME"',
+  );
 }
 
-const connectionString = process.env.COSMOSDB_CONNECTION_STRING
-const databaseName = process.env.COSMOSDB_DATABASE_NAME
-const containerName = process.env.COSMOSDB_CONTAINER_NAME
+const connectionString = process.env.COSMOSDB_CONNECTION_STRING;
+const databaseName = process.env.COSMOSDB_DATABASE_NAME;
+const containerName = process.env.COSMOSDB_CONTAINER_NAME;
 
-let client
-let database
-let container
+let client;
+let database;
+let container;
 
 const cosmos: Cosmos = {
   connected: true,
   client,
   database,
   container,
-}
+};
 
 try {
-  client = new CosmosClient(connectionString)
-  database = client.database(databaseName)
-  container = database.container(containerName)
+  client = new CosmosClient(connectionString);
+  database = client.database(databaseName);
+  container = database.container(containerName);
 
-  cosmos.connected = true
-  cosmos.client = client
-  cosmos.database = database
-  cosmos.container = container
+  cosmos.connected = true;
+  cosmos.client = client;
+  cosmos.database = database;
+  cosmos.container = container;
 } catch (err) {
-  cosmos.connected = false
-  console.log(err)
+  cosmos.connected = false;
+  console.log(err);
 }
 
-export default cosmos
+export default cosmos;
diff --git a/examples/with-azure-cosmos/pages/index.tsx b/examples/with-azure-cosmos/pages/index.tsx
index fc326be472..c1b91d0b31 100644
--- a/examples/with-azure-cosmos/pages/index.tsx
+++ b/examples/with-azure-cosmos/pages/index.tsx
@@ -1,19 +1,19 @@
-import Head from 'next/head'
-import { GetServerSideProps } from 'next'
-import cosmos from '../lib/cosmosdb'
+import Head from "next/head";
+import { GetServerSideProps } from "next";
+import cosmos from "../lib/cosmosdb";
 
 export type Props = {
-  isConnected: boolean
+  isConnected: boolean;
   database?: {
-    name?: string
-    isConnected: boolean
-    numOfContainers?: number
-  }
+    name?: string;
+    isConnected: boolean;
+    numOfContainers?: number;
+  };
   container?: {
-    isConnected: boolean
-    name?: string
-  }
-}
+    isConnected: boolean;
+    name?: string;
+  };
+};
 
 const Home = (props: Props) => {
   return (
@@ -29,7 +29,7 @@ const Home = (props: Props) => {
         <h2 className="subtitle">You are connected to CosmosDB</h2>
       ) : (
         <h2 className="subtitle">
-          You are NOT connected to CosmosDB. Check the <code>README.md</code>{' '}
+          You are NOT connected to CosmosDB. Check the <code>README.md</code>{" "}
           for instructions.
         </h2>
       )}
@@ -46,14 +46,14 @@ const Home = (props: Props) => {
               <p>Name: {props.database?.name}</p>
               <div>{`Number of Containers : ${props.database?.numOfContainers}`}</div>
               <div>{`Status : ${
-                props.database?.isConnected ? 'Connected' : 'Not Connected'
+                props.database?.isConnected ? "Connected" : "Not Connected"
               }`}</div>
             </div>
             <div className="card">
               <h3>Container</h3>
               <p>Name: {props.container?.name}</p>
               <div>{`Status : ${
-                props.database?.isConnected ? 'Connected' : 'Not Connected'
+                props.database?.isConnected ? "Connected" : "Not Connected"
               }`}</div>
             </div>
           </div>
@@ -142,47 +142,47 @@ const Home = (props: Props) => {
         }
       `}</style>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
 
 export const getServerSideProps: GetServerSideProps<Props> = async () => {
   const props: Props = {
     isConnected: false,
-  }
+  };
 
   if (cosmos.connected) {
-    props.isConnected = true
+    props.isConnected = true;
     try {
-      const { resource: database } = await cosmos.database!.read()
+      const { resource: database } = await cosmos.database!.read();
       const containerIterator = cosmos.database!.containers.query({
-        query: 'SELECT * from p',
-      })
-      const { resources: containers } = await containerIterator.fetchAll()
+        query: "SELECT * from p",
+      });
+      const { resources: containers } = await containerIterator.fetchAll();
       props.database = {
         isConnected: true,
         name: database?.id,
         numOfContainers: containers.length,
-      }
+      };
     } catch {
       props.database = {
         isConnected: false,
-      }
+      };
     }
     try {
-      const { resource: container } = await cosmos.container!.read()
+      const { resource: container } = await cosmos.container!.read();
       props.container = {
         isConnected: true,
         name: container?.id,
-      }
+      };
     } catch {
       props.database = {
         isConnected: false,
-      }
+      };
     }
   }
   return {
     props,
-  }
-}
+  };
+};
diff --git a/examples/with-babel-macros/pages/_document.js b/examples/with-babel-macros/pages/_document.js
index eb39cf4e4f..5047e342d8 100644
--- a/examples/with-babel-macros/pages/_document.js
+++ b/examples/with-babel-macros/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document({ css }) {
   return (
@@ -11,5 +11,5 @@ export default function Document({ css }) {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/with-babel-macros/pages/index.js b/examples/with-babel-macros/pages/index.js
index 0a0b2d5d6d..285027178b 100644
--- a/examples/with-babel-macros/pages/index.js
+++ b/examples/with-babel-macros/pages/index.js
@@ -1,16 +1,16 @@
-import preval from 'preval.macro'
+import preval from "preval.macro";
 
 const whoami = preval`
   const userInfo = require('os').userInfo()
   module.exports = userInfo.username
-`
+`;
 
 export default function WhoAmI() {
   return (
-    <div style={{ display: 'flex', justifyContent: 'center' }}>
+    <div style={{ display: "flex", justifyContent: "center" }}>
       <h1>
         <pre>whoami: {whoami}</pre>
       </h1>
     </div>
-  )
+  );
 }
diff --git a/examples/with-chakra-ui/src/components/CTA.tsx b/examples/with-chakra-ui/src/components/CTA.tsx
index 86faa94f0c..af679654ff 100644
--- a/examples/with-chakra-ui/src/components/CTA.tsx
+++ b/examples/with-chakra-ui/src/components/CTA.tsx
@@ -1,6 +1,6 @@
-import { Link as ChakraLink, Button } from '@chakra-ui/react'
+import { Link as ChakraLink, Button } from "@chakra-ui/react";
 
-import { Container } from './Container'
+import { Container } from "./Container";
 
 export const CTA = () => (
   <Container
@@ -38,4 +38,4 @@ export const CTA = () => (
       View Repo
     </Button>
   </Container>
-)
+);
diff --git a/examples/with-chakra-ui/src/components/Container.tsx b/examples/with-chakra-ui/src/components/Container.tsx
index 1ee74495aa..5ab7ca9a71 100644
--- a/examples/with-chakra-ui/src/components/Container.tsx
+++ b/examples/with-chakra-ui/src/components/Container.tsx
@@ -1,4 +1,4 @@
-import { Flex, FlexProps } from '@chakra-ui/react'
+import { Flex, FlexProps } from "@chakra-ui/react";
 
 export const Container = (props: FlexProps) => (
   <Flex
@@ -8,10 +8,10 @@ export const Container = (props: FlexProps) => (
     bg="gray.50"
     color="black"
     _dark={{
-      bg: 'gray.900',
-      color: 'white',
+      bg: "gray.900",
+      color: "white",
     }}
     transition="all 0.15s ease-out"
     {...props}
   />
-)
+);
diff --git a/examples/with-chakra-ui/src/components/DarkModeSwitch.tsx b/examples/with-chakra-ui/src/components/DarkModeSwitch.tsx
index 4e91c3b624..c3aa6e96d0 100644
--- a/examples/with-chakra-ui/src/components/DarkModeSwitch.tsx
+++ b/examples/with-chakra-ui/src/components/DarkModeSwitch.tsx
@@ -1,9 +1,9 @@
-import { useColorMode, IconButton } from '@chakra-ui/react'
-import { SunIcon, MoonIcon } from '@chakra-ui/icons'
+import { useColorMode, IconButton } from "@chakra-ui/react";
+import { SunIcon, MoonIcon } from "@chakra-ui/icons";
 
 export const DarkModeSwitch = () => {
-  const { colorMode, toggleColorMode } = useColorMode()
-  const isDark = colorMode === 'dark'
+  const { colorMode, toggleColorMode } = useColorMode();
+  const isDark = colorMode === "dark";
   return (
     <IconButton
       position="fixed"
@@ -14,5 +14,5 @@ export const DarkModeSwitch = () => {
       colorScheme="green"
       onClick={toggleColorMode}
     />
-  )
-}
+  );
+};
diff --git a/examples/with-chakra-ui/src/components/Footer.tsx b/examples/with-chakra-ui/src/components/Footer.tsx
index aff2b4ccc7..11343275b9 100644
--- a/examples/with-chakra-ui/src/components/Footer.tsx
+++ b/examples/with-chakra-ui/src/components/Footer.tsx
@@ -1,5 +1,5 @@
-import { Flex, FlexProps } from '@chakra-ui/react'
+import { Flex, FlexProps } from "@chakra-ui/react";
 
 export const Footer = (props: FlexProps) => (
   <Flex as="footer" py="8rem" {...props} />
-)
+);
diff --git a/examples/with-chakra-ui/src/components/Hero.tsx b/examples/with-chakra-ui/src/components/Hero.tsx
index 3ec7364c31..8e91403952 100644
--- a/examples/with-chakra-ui/src/components/Hero.tsx
+++ b/examples/with-chakra-ui/src/components/Hero.tsx
@@ -1,4 +1,4 @@
-import { Flex, Heading } from '@chakra-ui/react'
+import { Flex, Heading } from "@chakra-ui/react";
 
 export const Hero = ({ title }: { title: string }) => (
   <Flex
@@ -10,8 +10,8 @@ export const Hero = ({ title }: { title: string }) => (
   >
     <Heading fontSize="6vw">{title}</Heading>
   </Flex>
-)
+);
 
 Hero.defaultProps = {
-  title: 'with-chakra-ui-typescript',
-}
+  title: "with-chakra-ui-typescript",
+};
diff --git a/examples/with-chakra-ui/src/components/Main.tsx b/examples/with-chakra-ui/src/components/Main.tsx
index 6591f7f1e4..3f08ab9d41 100644
--- a/examples/with-chakra-ui/src/components/Main.tsx
+++ b/examples/with-chakra-ui/src/components/Main.tsx
@@ -1,4 +1,4 @@
-import { Stack, StackProps } from '@chakra-ui/react'
+import { Stack, StackProps } from "@chakra-ui/react";
 
 export const Main = (props: StackProps) => (
   <Stack
@@ -10,4 +10,4 @@ export const Main = (props: StackProps) => (
     px="1rem"
     {...props}
   />
-)
+);
diff --git a/examples/with-chakra-ui/src/pages/_app.tsx b/examples/with-chakra-ui/src/pages/_app.tsx
index 2fa551361b..3e48621c57 100644
--- a/examples/with-chakra-ui/src/pages/_app.tsx
+++ b/examples/with-chakra-ui/src/pages/_app.tsx
@@ -1,14 +1,14 @@
-import { ChakraProvider } from '@chakra-ui/react'
+import { ChakraProvider } from "@chakra-ui/react";
 
-import theme from '../theme'
-import { AppProps } from 'next/app'
+import theme from "../theme";
+import { AppProps } from "next/app";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <ChakraProvider theme={theme}>
       <Component {...pageProps} />
     </ChakraProvider>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-chakra-ui/src/pages/_document.tsx b/examples/with-chakra-ui/src/pages/_document.tsx
index 2b8b5740ba..542c4d02fc 100644
--- a/examples/with-chakra-ui/src/pages/_document.tsx
+++ b/examples/with-chakra-ui/src/pages/_document.tsx
@@ -1,5 +1,5 @@
-import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
-import { ColorModeScript } from '@chakra-ui/react'
+import NextDocument, { Html, Head, Main, NextScript } from "next/document";
+import { ColorModeScript } from "@chakra-ui/react";
 
 export default class Document extends NextDocument {
   render() {
@@ -13,6 +13,6 @@ export default class Document extends NextDocument {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
diff --git a/examples/with-chakra-ui/src/pages/index.tsx b/examples/with-chakra-ui/src/pages/index.tsx
index 2cb151cd99..1b71375764 100644
--- a/examples/with-chakra-ui/src/pages/index.tsx
+++ b/examples/with-chakra-ui/src/pages/index.tsx
@@ -5,22 +5,22 @@ import {
   List,
   ListIcon,
   ListItem,
-} from '@chakra-ui/react'
-import { CheckCircleIcon, LinkIcon } from '@chakra-ui/icons'
+} from "@chakra-ui/react";
+import { CheckCircleIcon, LinkIcon } from "@chakra-ui/icons";
 
-import { Hero } from '../components/Hero'
-import { Container } from '../components/Container'
-import { Main } from '../components/Main'
-import { DarkModeSwitch } from '../components/DarkModeSwitch'
-import { CTA } from '../components/CTA'
-import { Footer } from '../components/Footer'
+import { Hero } from "../components/Hero";
+import { Container } from "../components/Container";
+import { Main } from "../components/Main";
+import { DarkModeSwitch } from "../components/DarkModeSwitch";
+import { CTA } from "../components/CTA";
+import { Footer } from "../components/Footer";
 
 const Index = () => (
   <Container height="100vh">
     <Hero />
     <Main>
       <Text color="text">
-        Example repository of <Code>Next.js</Code> + <Code>chakra-ui</Code> +{' '}
+        Example repository of <Code>Next.js</Code> + <Code>chakra-ui</Code> +{" "}
         <Code>TypeScript</Code>.
       </Text>
 
@@ -51,6 +51,6 @@ const Index = () => (
     </Footer>
     <CTA />
   </Container>
-)
+);
 
-export default Index
+export default Index;
diff --git a/examples/with-chakra-ui/src/theme.tsx b/examples/with-chakra-ui/src/theme.tsx
index adcac6101d..c8e30fa30f 100644
--- a/examples/with-chakra-ui/src/theme.tsx
+++ b/examples/with-chakra-ui/src/theme.tsx
@@ -1,39 +1,39 @@
-import { extendTheme } from '@chakra-ui/react'
+import { extendTheme } from "@chakra-ui/react";
 
-const fonts = { mono: `'Menlo', monospace` }
+const fonts = { mono: `'Menlo', monospace` };
 
 const breakpoints = {
-  sm: '40em',
-  md: '52em',
-  lg: '64em',
-  xl: '80em',
-}
+  sm: "40em",
+  md: "52em",
+  lg: "64em",
+  xl: "80em",
+};
 
 const theme = extendTheme({
   semanticTokens: {
     colors: {
       text: {
-        default: '#16161D',
-        _dark: '#ade3b8',
+        default: "#16161D",
+        _dark: "#ade3b8",
       },
       heroGradientStart: {
-        default: '#7928CA',
-        _dark: '#e3a7f9',
+        default: "#7928CA",
+        _dark: "#e3a7f9",
       },
       heroGradientEnd: {
-        default: '#FF0080',
-        _dark: '#fbec8f',
+        default: "#FF0080",
+        _dark: "#fbec8f",
       },
     },
     radii: {
-      button: '12px',
+      button: "12px",
     },
   },
   colors: {
-    black: '#16161D',
+    black: "#16161D",
   },
   fonts,
   breakpoints,
-})
+});
 
-export default theme
+export default theme;
diff --git a/examples/with-clerk/app/api-request.tsx b/examples/with-clerk/app/api-request.tsx
index c4329972d0..a904b2ee47 100644
--- a/examples/with-clerk/app/api-request.tsx
+++ b/examples/with-clerk/app/api-request.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client";
 
-import { SignedIn, SignedOut } from '@clerk/nextjs'
-import { useEffect, useState } from 'react'
-import styles from '../styles/Home.module.css'
-import '../styles/prism.css'
+import { SignedIn, SignedOut } from "@clerk/nextjs";
+import { useEffect, useState } from "react";
+import styles from "../styles/Home.module.css";
+import "../styles/prism.css";
 
 declare global {
   interface Window {
-    Prism: any
+    Prism: any;
   }
 }
 
@@ -20,30 +20,30 @@ export async function GET(request: Request) {
     return NextResponse.json({ id: null }, { status: 401 })
   }
   return NextResponse.json({ id: userId }, { status: 200 })
-}`
+}`;
 
 export const APIRequest = () => {
   useEffect(() => {
     if (window.Prism) {
-      window.Prism.highlightAll()
+      window.Prism.highlightAll();
     }
-  })
+  });
 
-  const [response, setResponse] = useState('// Click above to run the request')
+  const [response, setResponse] = useState("// Click above to run the request");
 
   const makeRequest = async () => {
-    setResponse('// Loading...')
+    setResponse("// Loading...");
 
     try {
-      const res = await fetch('/api/getAuthenticatedUserId')
-      const body = await res.json()
-      setResponse(JSON.stringify(body, null, '  '))
+      const res = await fetch("/api/getAuthenticatedUserId");
+      const body = await res.json();
+      setResponse(JSON.stringify(body, null, "  "));
     } catch (e) {
       setResponse(
-        '// There was an error with the request. Please contact support@clerk.dev'
-      )
+        "// There was an error with the request. Please contact support@clerk.dev",
+      );
     }
-  }
+  };
 
   return (
     <div className={styles.backend}>
@@ -86,5 +86,5 @@ export const APIRequest = () => {
         <code className="language-js">{apiSample}</code>
       </pre>
     </div>
-  )
-}
+  );
+};
diff --git a/examples/with-clerk/app/api/getAuthenticatedUserId/route.ts b/examples/with-clerk/app/api/getAuthenticatedUserId/route.ts
index 1f5bfb4ba6..d3c57bf16a 100644
--- a/examples/with-clerk/app/api/getAuthenticatedUserId/route.ts
+++ b/examples/with-clerk/app/api/getAuthenticatedUserId/route.ts
@@ -1,10 +1,10 @@
-import { auth } from '@clerk/nextjs'
-import { NextResponse } from 'next/server'
+import { auth } from "@clerk/nextjs";
+import { NextResponse } from "next/server";
 
 export async function GET(request: Request) {
-  const { userId, sessionId } = auth()
+  const { userId, sessionId } = auth();
   if (!sessionId) {
-    return NextResponse.json({ id: null }, { status: 401 })
+    return NextResponse.json({ id: null }, { status: 401 });
   }
-  return NextResponse.json({ id: userId }, { status: 200 })
+  return NextResponse.json({ id: userId }, { status: 200 });
 }
diff --git a/examples/with-clerk/app/layout.tsx b/examples/with-clerk/app/layout.tsx
index 39e28879e7..151e165454 100644
--- a/examples/with-clerk/app/layout.tsx
+++ b/examples/with-clerk/app/layout.tsx
@@ -1,18 +1,18 @@
-import '../styles/globals.css'
-import { ClerkProvider, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
-import { Inter } from 'next/font/google'
-import Image from 'next/image'
-import Script from 'next/script'
-import styles from '../styles/Header.module.css'
-import Link from 'next/link'
-import type { Metadata } from 'next'
+import "../styles/globals.css";
+import { ClerkProvider, SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
+import { Inter } from "next/font/google";
+import Image from "next/image";
+import Script from "next/script";
+import styles from "../styles/Header.module.css";
+import Link from "next/link";
+import type { Metadata } from "next";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Clerk with App Router',
-  description: 'Power your Next.js application with Clerk ',
-}
+  title: "Clerk with App Router",
+  description: "Power your Next.js application with Clerk ",
+};
 
 const Header = () => (
   <header className={styles.header}>
@@ -31,12 +31,12 @@ const Header = () => (
       </SignedIn>
     </div>
   </header>
-)
+);
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
@@ -49,5 +49,5 @@ export default function RootLayout({
       <Script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-core.min.js" />
       <Script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js" />
     </html>
-  )
+  );
 }
diff --git a/examples/with-clerk/app/page.tsx b/examples/with-clerk/app/page.tsx
index 351c2e8323..137edab8c7 100644
--- a/examples/with-clerk/app/page.tsx
+++ b/examples/with-clerk/app/page.tsx
@@ -1,7 +1,7 @@
-import { SignedIn, SignedOut } from '@clerk/nextjs'
-import styles from '../styles/Home.module.css'
-import Link from 'next/link'
-import { APIRequest } from './api-request'
+import { SignedIn, SignedOut } from "@clerk/nextjs";
+import styles from "../styles/Home.module.css";
+import Link from "next/link";
+import { APIRequest } from "./api-request";
 
 const ClerkFeatures = () => (
   <Link href="/user" className={styles.cardContent}>
@@ -17,7 +17,7 @@ const ClerkFeatures = () => (
       <img src="/icons/arrow-right.svg" />
     </div>
   </Link>
-)
+);
 
 const SignupLink = () => (
   <Link href="/sign-up" className={styles.cardContent}>
@@ -33,7 +33,7 @@ const SignupLink = () => (
       <img src="/icons/arrow-right.svg" />
     </div>
   </Link>
-)
+);
 
 // Main component using <SignedIn> & <SignedOut>.
 //
@@ -99,12 +99,12 @@ const Main = () => (
       </Link>
     </div>
   </main>
-)
+);
 
 // Footer component
 const Footer = () => (
   <footer className={styles.footer}>
-    Powered by{' '}
+    Powered by{" "}
     <a href="https://clerk.dev" target="_blank" rel="noopener noreferrer">
       <img src="/clerk.svg" alt="Clerk.dev" className={styles.logo} />
     </a>
@@ -113,7 +113,7 @@ const Footer = () => (
       <img src="/nextjs.svg" alt="Next.js" className={styles.logo} />
     </a>
   </footer>
-)
+);
 
 export default function Home() {
   return (
@@ -121,5 +121,5 @@ export default function Home() {
       <Main />
       <Footer />
     </div>
-  )
+  );
 }
diff --git a/examples/with-clerk/app/sign-in/[[...sign-in]]/page.tsx b/examples/with-clerk/app/sign-in/[[...sign-in]]/page.tsx
index 802a78ed57..3f9cc677a9 100644
--- a/examples/with-clerk/app/sign-in/[[...sign-in]]/page.tsx
+++ b/examples/with-clerk/app/sign-in/[[...sign-in]]/page.tsx
@@ -1,10 +1,10 @@
-import { SignIn } from '@clerk/nextjs'
-import styles from '../../../styles/Auth.module.css'
+import { SignIn } from "@clerk/nextjs";
+import styles from "../../../styles/Auth.module.css";
 
 export default function Page() {
   return (
     <div className={styles.auth}>
       <SignIn />
     </div>
-  )
+  );
 }
diff --git a/examples/with-clerk/app/sign-up/[[...sign-up]]/page.tsx b/examples/with-clerk/app/sign-up/[[...sign-up]]/page.tsx
index 63199bd1c0..ae823effe8 100644
--- a/examples/with-clerk/app/sign-up/[[...sign-up]]/page.tsx
+++ b/examples/with-clerk/app/sign-up/[[...sign-up]]/page.tsx
@@ -1,10 +1,10 @@
-import { SignUp } from '@clerk/nextjs'
-import styles from '../../../styles/Auth.module.css'
+import { SignUp } from "@clerk/nextjs";
+import styles from "../../../styles/Auth.module.css";
 
 export default function Page() {
   return (
     <div className={styles.auth}>
       <SignUp />
     </div>
-  )
+  );
 }
diff --git a/examples/with-clerk/app/user/[[...index]]/page.tsx b/examples/with-clerk/app/user/[[...index]]/page.tsx
index 97b12bab7c..689f2f6cbf 100644
--- a/examples/with-clerk/app/user/[[...index]]/page.tsx
+++ b/examples/with-clerk/app/user/[[...index]]/page.tsx
@@ -1,10 +1,10 @@
-import { UserProfile } from '@clerk/nextjs'
-import styles from '../../../styles/User.module.css'
+import { UserProfile } from "@clerk/nextjs";
+import styles from "../../../styles/User.module.css";
 
 export default function Page() {
   return (
     <div className={styles.user}>
       <UserProfile />
     </div>
-  )
+  );
 }
diff --git a/examples/with-clerk/middleware.ts b/examples/with-clerk/middleware.ts
index 42fbcd6ae8..a5e92b44ca 100644
--- a/examples/with-clerk/middleware.ts
+++ b/examples/with-clerk/middleware.ts
@@ -1,9 +1,9 @@
-import { authMiddleware } from '@clerk/nextjs'
+import { authMiddleware } from "@clerk/nextjs";
 
 export default authMiddleware({
-  publicRoutes: ['/', '/api/getAuthenticatedUserId'],
-})
+  publicRoutes: ["/", "/api/getAuthenticatedUserId"],
+});
 
 export const config = {
-  matcher: ['/((?!.*\\..*|_next).*)', '/'],
-}
+  matcher: ["/((?!.*\\..*|_next).*)", "/"],
+};
diff --git a/examples/with-clerk/next.config.js b/examples/with-clerk/next.config.js
index 767719fc4f..658404ac69 100644
--- a/examples/with-clerk/next.config.js
+++ b/examples/with-clerk/next.config.js
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-clerk/styles/globals.css b/examples/with-clerk/styles/globals.css
index a21f2833ca..c866b767d5 100644
--- a/examples/with-clerk/styles/globals.css
+++ b/examples/with-clerk/styles/globals.css
@@ -1,6 +1,6 @@
 html,
 body {
-  font-family: 'Source Sans Pro', sans-serif;
+  font-family: "Source Sans Pro", sans-serif;
   font-size: 16px;
   font-weight: 400;
   line-height: 20px;
diff --git a/examples/with-clerk/styles/prism.css b/examples/with-clerk/styles/prism.css
index e67f8275f7..54d02ce99d 100644
--- a/examples/with-clerk/styles/prism.css
+++ b/examples/with-clerk/styles/prism.css
@@ -4,12 +4,12 @@
  * @author Lea Verou
  */
 
-code[class*='language-'],
-pre[class*='language-'] {
+code[class*="language-"],
+pre[class*="language-"] {
   color: black;
   background: none;
   text-shadow: 0 1px white;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
   font-size: 1em;
   text-align: left;
   white-space: pre;
@@ -28,43 +28,43 @@ pre[class*='language-'] {
   hyphens: none;
 }
 
-pre[class*='language-']::-moz-selection,
-pre[class*='language-'] ::-moz-selection,
-code[class*='language-']::-moz-selection,
-code[class*='language-'] ::-moz-selection {
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
   text-shadow: none;
   background: #b3d4fc;
 }
 
-pre[class*='language-']::selection,
-pre[class*='language-'] ::selection,
-code[class*='language-']::selection,
-code[class*='language-'] ::selection {
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
   text-shadow: none;
   background: #b3d4fc;
 }
 
 @media print {
-  code[class*='language-'],
-  pre[class*='language-'] {
+  code[class*="language-"],
+  pre[class*="language-"] {
     text-shadow: none;
   }
 }
 
 /* Code blocks */
-pre[class*='language-'] {
+pre[class*="language-"] {
   padding: 1em;
   margin: 0.5em 0;
   overflow: auto;
 }
 
-:not(pre) > code[class*='language-'],
-pre[class*='language-'] {
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
   background: #f5f2f0;
 }
 
 /* Inline code */
-:not(pre) > code[class*='language-'] {
+:not(pre) > code[class*="language-"] {
   padding: 0.1em;
   border-radius: 0.3em;
   white-space: normal;
diff --git a/examples/with-cloudinary/components/Carousel.tsx b/examples/with-cloudinary/components/Carousel.tsx
index 3dc61b90db..4d59f9c749 100644
--- a/examples/with-cloudinary/components/Carousel.tsx
+++ b/examples/with-cloudinary/components/Carousel.tsx
@@ -1,32 +1,32 @@
-import Image from 'next/image'
-import { useRouter } from 'next/router'
-import useKeypress from 'react-use-keypress'
-import type { ImageProps } from '../utils/types'
-import { useLastViewedPhoto } from '../utils/useLastViewedPhoto'
-import SharedModal from './SharedModal'
+import Image from "next/image";
+import { useRouter } from "next/router";
+import useKeypress from "react-use-keypress";
+import type { ImageProps } from "../utils/types";
+import { useLastViewedPhoto } from "../utils/useLastViewedPhoto";
+import SharedModal from "./SharedModal";
 
 export default function Carousel({
   index,
   currentPhoto,
 }: {
-  index: number
-  currentPhoto: ImageProps
+  index: number;
+  currentPhoto: ImageProps;
 }) {
-  const router = useRouter()
-  const [, setLastViewedPhoto] = useLastViewedPhoto()
+  const router = useRouter();
+  const [, setLastViewedPhoto] = useLastViewedPhoto();
 
   function closeModal() {
-    setLastViewedPhoto(currentPhoto.id)
-    router.push('/', undefined, { shallow: true })
+    setLastViewedPhoto(currentPhoto.id);
+    router.push("/", undefined, { shallow: true });
   }
 
   function changePhotoId(newVal: number) {
-    return newVal
+    return newVal;
   }
 
-  useKeypress('Escape', () => {
-    closeModal()
-  })
+  useKeypress("Escape", () => {
+    closeModal();
+  });
 
   return (
     <div className="fixed inset-0 flex items-center justify-center">
@@ -50,5 +50,5 @@ export default function Carousel({
         navigation={false}
       />
     </div>
-  )
+  );
 }
diff --git a/examples/with-cloudinary/components/Icons/Bridge.tsx b/examples/with-cloudinary/components/Icons/Bridge.tsx
index 0e326cd8f0..fa33be894d 100644
--- a/examples/with-cloudinary/components/Icons/Bridge.tsx
+++ b/examples/with-cloudinary/components/Icons/Bridge.tsx
@@ -122,5 +122,5 @@ export default function Bridge() {
       <path d="M553 261L553 322" stroke="currentColor" />
       <path d="M571 282L571 325" stroke="currentColor" />
     </svg>
-  )
+  );
 }
diff --git a/examples/with-cloudinary/components/Icons/Logo.tsx b/examples/with-cloudinary/components/Icons/Logo.tsx
index 9c6a2d6108..c305944a7b 100644
--- a/examples/with-cloudinary/components/Icons/Logo.tsx
+++ b/examples/with-cloudinary/components/Icons/Logo.tsx
@@ -67,5 +67,5 @@ export default function Logo() {
         y2="0.65"
       ></line>
     </svg>
-  )
+  );
 }
diff --git a/examples/with-cloudinary/components/Icons/Twitter.tsx b/examples/with-cloudinary/components/Icons/Twitter.tsx
index 76f42ee760..8444e3e9eb 100644
--- a/examples/with-cloudinary/components/Icons/Twitter.tsx
+++ b/examples/with-cloudinary/components/Icons/Twitter.tsx
@@ -15,5 +15,5 @@ export default function Twitter(props: any) {
     >
       <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
     </svg>
-  )
+  );
 }
diff --git a/examples/with-cloudinary/components/Modal.tsx b/examples/with-cloudinary/components/Modal.tsx
index a4c24e54e5..f4b54e3278 100644
--- a/examples/with-cloudinary/components/Modal.tsx
+++ b/examples/with-cloudinary/components/Modal.tsx
@@ -1,59 +1,59 @@
-import { Dialog } from '@headlessui/react'
-import { motion } from 'framer-motion'
-import { useRouter } from 'next/router'
-import { useRef, useState } from 'react'
-import useKeypress from 'react-use-keypress'
-import type { ImageProps } from '../utils/types'
-import SharedModal from './SharedModal'
+import { Dialog } from "@headlessui/react";
+import { motion } from "framer-motion";
+import { useRouter } from "next/router";
+import { useRef, useState } from "react";
+import useKeypress from "react-use-keypress";
+import type { ImageProps } from "../utils/types";
+import SharedModal from "./SharedModal";
 
 export default function Modal({
   images,
   onClose,
 }: {
-  images: ImageProps[]
-  onClose?: () => void
+  images: ImageProps[];
+  onClose?: () => void;
 }) {
-  let overlayRef = useRef()
-  const router = useRouter()
+  let overlayRef = useRef();
+  const router = useRouter();
 
-  const { photoId } = router.query
-  let index = Number(photoId)
+  const { photoId } = router.query;
+  let index = Number(photoId);
 
-  const [direction, setDirection] = useState(0)
-  const [curIndex, setCurIndex] = useState(index)
+  const [direction, setDirection] = useState(0);
+  const [curIndex, setCurIndex] = useState(index);
 
   function handleClose() {
-    router.push('/', undefined, { shallow: true })
-    onClose()
+    router.push("/", undefined, { shallow: true });
+    onClose();
   }
 
   function changePhotoId(newVal: number) {
     if (newVal > index) {
-      setDirection(1)
+      setDirection(1);
     } else {
-      setDirection(-1)
+      setDirection(-1);
     }
-    setCurIndex(newVal)
+    setCurIndex(newVal);
     router.push(
       {
         query: { photoId: newVal },
       },
       `/p/${newVal}`,
-      { shallow: true }
-    )
+      { shallow: true },
+    );
   }
 
-  useKeypress('ArrowRight', () => {
+  useKeypress("ArrowRight", () => {
     if (index + 1 < images.length) {
-      changePhotoId(index + 1)
+      changePhotoId(index + 1);
     }
-  })
+  });
 
-  useKeypress('ArrowLeft', () => {
+  useKeypress("ArrowLeft", () => {
     if (index > 0) {
-      changePhotoId(index - 1)
+      changePhotoId(index - 1);
     }
-  })
+  });
 
   return (
     <Dialog
@@ -80,5 +80,5 @@ export default function Modal({
         navigation={true}
       />
     </Dialog>
-  )
+  );
 }
diff --git a/examples/with-cloudinary/components/SharedModal.tsx b/examples/with-cloudinary/components/SharedModal.tsx
index 42f102dd50..6346ba19ef 100644
--- a/examples/with-cloudinary/components/SharedModal.tsx
+++ b/examples/with-cloudinary/components/SharedModal.tsx
@@ -5,16 +5,16 @@ import {
   ChevronLeftIcon,
   ChevronRightIcon,
   XMarkIcon,
-} from '@heroicons/react/24/outline'
-import { AnimatePresence, motion, MotionConfig } from 'framer-motion'
-import Image from 'next/image'
-import { useState } from 'react'
-import { useSwipeable } from 'react-swipeable'
-import { variants } from '../utils/animationVariants'
-import downloadPhoto from '../utils/downloadPhoto'
-import { range } from '../utils/range'
-import type { ImageProps, SharedModalProps } from '../utils/types'
-import Twitter from './Icons/Twitter'
+} from "@heroicons/react/24/outline";
+import { AnimatePresence, motion, MotionConfig } from "framer-motion";
+import Image from "next/image";
+import { useState } from "react";
+import { useSwipeable } from "react-swipeable";
+import { variants } from "../utils/animationVariants";
+import downloadPhoto from "../utils/downloadPhoto";
+import { range } from "../utils/range";
+import type { ImageProps, SharedModalProps } from "../utils/types";
+import Twitter from "./Icons/Twitter";
 
 export default function SharedModal({
   index,
@@ -25,32 +25,32 @@ export default function SharedModal({
   currentPhoto,
   direction,
 }: SharedModalProps) {
-  const [loaded, setLoaded] = useState(false)
+  const [loaded, setLoaded] = useState(false);
 
   let filteredImages = images?.filter((img: ImageProps) =>
-    range(index - 15, index + 15).includes(img.id)
-  )
+    range(index - 15, index + 15).includes(img.id),
+  );
 
   const handlers = useSwipeable({
     onSwipedLeft: () => {
       if (index < images?.length - 1) {
-        changePhotoId(index + 1)
+        changePhotoId(index + 1);
       }
     },
     onSwipedRight: () => {
       if (index > 0) {
-        changePhotoId(index - 1)
+        changePhotoId(index - 1);
       }
     },
     trackMouse: true,
-  })
+  });
 
-  let currentImage = images ? images[index] : currentPhoto
+  let currentImage = images ? images[index] : currentPhoto;
 
   return (
     <MotionConfig
       transition={{
-        x: { type: 'spring', stiffness: 300, damping: 30 },
+        x: { type: "spring", stiffness: 300, damping: 30 },
         opacity: { duration: 0.2 },
       }}
     >
@@ -74,7 +74,7 @@ export default function SharedModal({
                 <Image
                   src={`https://res.cloudinary.com/${
                     process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
-                  }/image/upload/c_scale,${navigation ? 'w_1280' : 'w_1920'}/${
+                  }/image/upload/c_scale,${navigation ? "w_1280" : "w_1920"}/${
                     currentImage.public_id
                   }.${currentImage.format}`}
                   width={navigation ? 1280 : 1920}
@@ -98,7 +98,7 @@ export default function SharedModal({
                   {index > 0 && (
                     <button
                       className="absolute left-3 top-[calc(50%-16px)] rounded-full bg-black/50 p-3 text-white/75 backdrop-blur-lg transition hover:bg-black/75 hover:text-white focus:outline-none"
-                      style={{ transform: 'translate3d(0, 0, 0)' }}
+                      style={{ transform: "translate3d(0, 0, 0)" }}
                       onClick={() => changePhotoId(index - 1)}
                     >
                       <ChevronLeftIcon className="h-6 w-6" />
@@ -107,7 +107,7 @@ export default function SharedModal({
                   {index + 1 < images.length && (
                     <button
                       className="absolute right-3 top-[calc(50%-16px)] rounded-full bg-black/50 p-3 text-white/75 backdrop-blur-lg transition hover:bg-black/75 hover:text-white focus:outline-none"
-                      style={{ transform: 'translate3d(0, 0, 0)' }}
+                      style={{ transform: "translate3d(0, 0, 0)" }}
                       onClick={() => changePhotoId(index + 1)}
                     >
                       <ChevronRightIcon className="h-6 w-6" />
@@ -141,7 +141,7 @@ export default function SharedModal({
                   onClick={() =>
                     downloadPhoto(
                       `https://res.cloudinary.com/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload/${currentImage.public_id}.${currentImage.format}`,
-                      `${index}.jpg`
+                      `${index}.jpg`,
                     )
                   }
                   className="rounded-full bg-black/50 p-2 text-white/75 backdrop-blur-lg transition hover:bg-black/75 hover:text-white"
@@ -175,23 +175,23 @@ export default function SharedModal({
                   {filteredImages.map(({ public_id, format, id }) => (
                     <motion.button
                       initial={{
-                        width: '0%',
+                        width: "0%",
                         x: `${Math.max((index - 1) * -100, 15 * -100)}%`,
                       }}
                       animate={{
                         scale: id === index ? 1.25 : 1,
-                        width: '100%',
+                        width: "100%",
                         x: `${Math.max(index * -100, 15 * -100)}%`,
                       }}
-                      exit={{ width: '0%' }}
+                      exit={{ width: "0%" }}
                       onClick={() => changePhotoId(id)}
                       key={id}
                       className={`${
                         id === index
-                          ? 'z-20 rounded-md shadow shadow-black/50'
-                          : 'z-10'
-                      } ${id === 0 ? 'rounded-l-md' : ''} ${
-                        id === images.length - 1 ? 'rounded-r-md' : ''
+                          ? "z-20 rounded-md shadow shadow-black/50"
+                          : "z-10"
+                      } ${id === 0 ? "rounded-l-md" : ""} ${
+                        id === images.length - 1 ? "rounded-r-md" : ""
                       } relative inline-block w-full shrink-0 transform-gpu overflow-hidden focus:outline-none`}
                     >
                       <Image
@@ -200,8 +200,8 @@ export default function SharedModal({
                         height={120}
                         className={`${
                           id === index
-                            ? 'brightness-110 hover:brightness-110'
-                            : 'brightness-50 contrast-125 hover:brightness-75'
+                            ? "brightness-110 hover:brightness-110"
+                            : "brightness-50 contrast-125 hover:brightness-75"
                         } h-full transform object-cover transition`}
                         src={`https://res.cloudinary.com/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload/c_scale,w_180/${public_id}.${format}`}
                       />
@@ -214,5 +214,5 @@ export default function SharedModal({
         </div>
       </div>
     </MotionConfig>
-  )
+  );
 }
diff --git a/examples/with-cloudinary/next.config.js b/examples/with-cloudinary/next.config.js
index daf383499b..64a3f631c6 100644
--- a/examples/with-cloudinary/next.config.js
+++ b/examples/with-cloudinary/next.config.js
@@ -1,13 +1,13 @@
 module.exports = {
   images: {
-    formats: ['image/avif', 'image/webp'],
+    formats: ["image/avif", "image/webp"],
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'res.cloudinary.com',
-        port: '',
-        pathname: '/my-account/**',
+        protocol: "https",
+        hostname: "res.cloudinary.com",
+        port: "",
+        pathname: "/my-account/**",
       },
     ],
   },
-}
+};
diff --git a/examples/with-cloudinary/pages/_app.tsx b/examples/with-cloudinary/pages/_app.tsx
index e9bc82183e..0f0cb91372 100644
--- a/examples/with-cloudinary/pages/_app.tsx
+++ b/examples/with-cloudinary/pages/_app.tsx
@@ -1,6 +1,6 @@
-import type { AppProps } from 'next/app'
-import '../styles/index.css'
+import type { AppProps } from "next/app";
+import "../styles/index.css";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-cloudinary/pages/_document.tsx b/examples/with-cloudinary/pages/_document.tsx
index 1c9aff5b2a..43fe7031c0 100644
--- a/examples/with-cloudinary/pages/_document.tsx
+++ b/examples/with-cloudinary/pages/_document.tsx
@@ -1,4 +1,4 @@
-import Document, { Head, Html, Main, NextScript } from 'next/document'
+import Document, { Head, Html, Main, NextScript } from "next/document";
 
 class MyDocument extends Document {
   render() {
@@ -28,8 +28,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
 
-export default MyDocument
+export default MyDocument;
diff --git a/examples/with-cloudinary/pages/index.tsx b/examples/with-cloudinary/pages/index.tsx
index cac529054a..3856f51a5c 100644
--- a/examples/with-cloudinary/pages/index.tsx
+++ b/examples/with-cloudinary/pages/index.tsx
@@ -1,31 +1,31 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useEffect, useRef } from 'react'
-import Bridge from '../components/Icons/Bridge'
-import Logo from '../components/Icons/Logo'
-import Modal from '../components/Modal'
-import cloudinary from '../utils/cloudinary'
-import getBase64ImageUrl from '../utils/generateBlurPlaceholder'
-import type { ImageProps } from '../utils/types'
-import { useLastViewedPhoto } from '../utils/useLastViewedPhoto'
+import type { NextPage } from "next";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useRef } from "react";
+import Bridge from "../components/Icons/Bridge";
+import Logo from "../components/Icons/Logo";
+import Modal from "../components/Modal";
+import cloudinary from "../utils/cloudinary";
+import getBase64ImageUrl from "../utils/generateBlurPlaceholder";
+import type { ImageProps } from "../utils/types";
+import { useLastViewedPhoto } from "../utils/useLastViewedPhoto";
 
 const Home: NextPage = ({ images }: { images: ImageProps[] }) => {
-  const router = useRouter()
-  const { photoId } = router.query
-  const [lastViewedPhoto, setLastViewedPhoto] = useLastViewedPhoto()
+  const router = useRouter();
+  const { photoId } = router.query;
+  const [lastViewedPhoto, setLastViewedPhoto] = useLastViewedPhoto();
 
-  const lastViewedPhotoRef = useRef<HTMLAnchorElement>(null)
+  const lastViewedPhotoRef = useRef<HTMLAnchorElement>(null);
 
   useEffect(() => {
     // This effect keeps track of the last viewed photo in the modal to keep the index page in sync when the user navigates back
     if (lastViewedPhoto && !photoId) {
-      lastViewedPhotoRef.current.scrollIntoView({ block: 'center' })
-      setLastViewedPhoto(null)
+      lastViewedPhotoRef.current.scrollIntoView({ block: "center" });
+      setLastViewedPhoto(null);
     }
-  }, [photoId, lastViewedPhoto, setLastViewedPhoto])
+  }, [photoId, lastViewedPhoto, setLastViewedPhoto]);
 
   return (
     <>
@@ -45,7 +45,7 @@ const Home: NextPage = ({ images }: { images: ImageProps[] }) => {
           <Modal
             images={images}
             onClose={() => {
-              setLastViewedPhoto(photoId)
+              setLastViewedPhoto(photoId);
             }}
           />
         )}
@@ -86,7 +86,7 @@ const Home: NextPage = ({ images }: { images: ImageProps[] }) => {
               <Image
                 alt="Next.js Conf photo"
                 className="transform rounded-lg brightness-90 transition will-change-auto group-hover:brightness-110"
-                style={{ transform: 'translate3d(0, 0, 0)' }}
+                style={{ transform: "translate3d(0, 0, 0)" }}
                 placeholder="blur"
                 blurDataURL={blurDataUrl}
                 src={`https://res.cloudinary.com/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload/c_scale,w_720/${public_id}.${format}`}
@@ -102,7 +102,7 @@ const Home: NextPage = ({ images }: { images: ImageProps[] }) => {
         </div>
       </main>
       <footer className="p-6 text-center text-white/80 sm:p-12">
-        Thank you to{' '}
+        Thank you to{" "}
         <a
           href="https://edelsonphotography.com/"
           target="_blank"
@@ -111,7 +111,7 @@ const Home: NextPage = ({ images }: { images: ImageProps[] }) => {
         >
           Josh Edelson
         </a>
-        ,{' '}
+        ,{" "}
         <a
           href="https://www.newrevmedia.com/"
           target="_blank"
@@ -120,7 +120,7 @@ const Home: NextPage = ({ images }: { images: ImageProps[] }) => {
         >
           Jenny Morgan
         </a>
-        , and{' '}
+        , and{" "}
         <a
           href="https://www.garysextonphotography.com/"
           target="_blank"
@@ -128,24 +128,24 @@ const Home: NextPage = ({ images }: { images: ImageProps[] }) => {
           rel="noreferrer"
         >
           Gary Sexton
-        </a>{' '}
+        </a>{" "}
         for the pictures.
       </footer>
     </>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
 
 export async function getStaticProps() {
   const results = await cloudinary.v2.search
     .expression(`folder:${process.env.CLOUDINARY_FOLDER}/*`)
-    .sort_by('public_id', 'desc')
+    .sort_by("public_id", "desc")
     .max_results(400)
-    .execute()
-  let reducedResults: ImageProps[] = []
+    .execute();
+  let reducedResults: ImageProps[] = [];
 
-  let i = 0
+  let i = 0;
   for (let result of results.resources) {
     reducedResults.push({
       id: i,
@@ -153,22 +153,22 @@ export async function getStaticProps() {
       width: result.width,
       public_id: result.public_id,
       format: result.format,
-    })
-    i++
+    });
+    i++;
   }
 
   const blurImagePromises = results.resources.map((image: ImageProps) => {
-    return getBase64ImageUrl(image)
-  })
-  const imagesWithBlurDataUrls = await Promise.all(blurImagePromises)
+    return getBase64ImageUrl(image);
+  });
+  const imagesWithBlurDataUrls = await Promise.all(blurImagePromises);
 
   for (let i = 0; i < reducedResults.length; i++) {
-    reducedResults[i].blurDataUrl = imagesWithBlurDataUrls[i]
+    reducedResults[i].blurDataUrl = imagesWithBlurDataUrls[i];
   }
 
   return {
     props: {
       images: reducedResults,
     },
-  }
+  };
 }
diff --git a/examples/with-cloudinary/pages/p/[photoId].tsx b/examples/with-cloudinary/pages/p/[photoId].tsx
index 8fdb9dd494..043e6846de 100644
--- a/examples/with-cloudinary/pages/p/[photoId].tsx
+++ b/examples/with-cloudinary/pages/p/[photoId].tsx
@@ -1,18 +1,18 @@
-import type { GetStaticProps, NextPage } from 'next'
-import Head from 'next/head'
-import { useRouter } from 'next/router'
-import Carousel from '../../components/Carousel'
-import getResults from '../../utils/cachedImages'
-import cloudinary from '../../utils/cloudinary'
-import getBase64ImageUrl from '../../utils/generateBlurPlaceholder'
-import type { ImageProps } from '../../utils/types'
+import type { GetStaticProps, NextPage } from "next";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import Carousel from "../../components/Carousel";
+import getResults from "../../utils/cachedImages";
+import cloudinary from "../../utils/cloudinary";
+import getBase64ImageUrl from "../../utils/generateBlurPlaceholder";
+import type { ImageProps } from "../../utils/types";
 
 const Home: NextPage = ({ currentPhoto }: { currentPhoto: ImageProps }) => {
-  const router = useRouter()
-  const { photoId } = router.query
-  let index = Number(photoId)
+  const router = useRouter();
+  const { photoId } = router.query;
+  let index = Number(photoId);
 
-  const currentPhotoUrl = `https://res.cloudinary.com/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload/c_scale,w_2560/${currentPhoto.public_id}.${currentPhoto.format}`
+  const currentPhotoUrl = `https://res.cloudinary.com/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload/c_scale,w_2560/${currentPhoto.public_id}.${currentPhoto.format}`;
 
   return (
     <>
@@ -25,16 +25,16 @@ const Home: NextPage = ({ currentPhoto }: { currentPhoto: ImageProps }) => {
         <Carousel currentPhoto={currentPhoto} index={index} />
       </main>
     </>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  const results = await getResults()
+  const results = await getResults();
 
-  let reducedResults: ImageProps[] = []
-  let i = 0
+  let reducedResults: ImageProps[] = [];
+  let i = 0;
   for (let result of results.resources) {
     reducedResults.push({
       id: i,
@@ -42,36 +42,36 @@ export const getStaticProps: GetStaticProps = async (context) => {
       width: result.width,
       public_id: result.public_id,
       format: result.format,
-    })
-    i++
+    });
+    i++;
   }
 
   const currentPhoto = reducedResults.find(
-    (img) => img.id === Number(context.params.photoId)
-  )
-  currentPhoto.blurDataUrl = await getBase64ImageUrl(currentPhoto)
+    (img) => img.id === Number(context.params.photoId),
+  );
+  currentPhoto.blurDataUrl = await getBase64ImageUrl(currentPhoto);
 
   return {
     props: {
       currentPhoto: currentPhoto,
     },
-  }
-}
+  };
+};
 
 export async function getStaticPaths() {
   const results = await cloudinary.v2.search
     .expression(`folder:${process.env.CLOUDINARY_FOLDER}/*`)
-    .sort_by('public_id', 'desc')
+    .sort_by("public_id", "desc")
     .max_results(400)
-    .execute()
+    .execute();
 
-  let fullPaths = []
+  let fullPaths = [];
   for (let i = 0; i < results.resources.length; i++) {
-    fullPaths.push({ params: { photoId: i.toString() } })
+    fullPaths.push({ params: { photoId: i.toString() } });
   }
 
   return {
     paths: fullPaths,
     fallback: false,
-  }
+  };
 }
diff --git a/examples/with-cloudinary/postcss.config.js b/examples/with-cloudinary/postcss.config.js
index 33ad091d26..12a703d900 100644
--- a/examples/with-cloudinary/postcss.config.js
+++ b/examples/with-cloudinary/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/with-cloudinary/styles/index.css b/examples/with-cloudinary/styles/index.css
index c0eca5423c..73aceecedc 100644
--- a/examples/with-cloudinary/styles/index.css
+++ b/examples/with-cloudinary/styles/index.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 @supports (font: -apple-system-body) and (-webkit-appearance: none) {
-  img[loading='lazy'] {
+  img[loading="lazy"] {
     clip-path: inset(0.6px);
   }
 }
diff --git a/examples/with-cloudinary/tailwind.config.js b/examples/with-cloudinary/tailwind.config.js
index d470945ffa..682ccf06e5 100644
--- a/examples/with-cloudinary/tailwind.config.js
+++ b/examples/with-cloudinary/tailwind.config.js
@@ -4,21 +4,21 @@ module.exports = {
     hoverOnlyWhenSupported: true,
   },
   content: [
-    './app/**/*.{js,ts,jsx,tsx}',
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       boxShadow: {
-        highlight: 'inset 0 0 0 1px rgba(255, 255, 255, 0.05)',
+        highlight: "inset 0 0 0 1px rgba(255, 255, 255, 0.05)",
       },
       screens: {
-        narrow: { raw: '(max-aspect-ratio: 3 / 2)' },
-        wide: { raw: '(min-aspect-ratio: 3 / 2)' },
-        'taller-than-854': { raw: '(min-height: 854px)' },
+        narrow: { raw: "(max-aspect-ratio: 3 / 2)" },
+        wide: { raw: "(min-aspect-ratio: 3 / 2)" },
+        "taller-than-854": { raw: "(min-height: 854px)" },
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/with-cloudinary/utils/animationVariants.ts b/examples/with-cloudinary/utils/animationVariants.ts
index 096736fea0..930d16ccc6 100644
--- a/examples/with-cloudinary/utils/animationVariants.ts
+++ b/examples/with-cloudinary/utils/animationVariants.ts
@@ -3,7 +3,7 @@ export const variants = {
     return {
       x: direction > 0 ? 1000 : -1000,
       opacity: 0,
-    }
+    };
   },
   center: {
     x: 0,
@@ -13,6 +13,6 @@ export const variants = {
     return {
       x: direction < 0 ? 1000 : -1000,
       opacity: 0,
-    }
+    };
   },
-}
+};
diff --git a/examples/with-cloudinary/utils/cachedImages.ts b/examples/with-cloudinary/utils/cachedImages.ts
index b9c42b0167..c675418da2 100644
--- a/examples/with-cloudinary/utils/cachedImages.ts
+++ b/examples/with-cloudinary/utils/cachedImages.ts
@@ -1,17 +1,17 @@
-import cloudinary from './cloudinary'
+import cloudinary from "./cloudinary";
 
-let cachedResults
+let cachedResults;
 
 export default async function getResults() {
   if (!cachedResults) {
     const fetchedResults = await cloudinary.v2.search
       .expression(`folder:${process.env.CLOUDINARY_FOLDER}/*`)
-      .sort_by('public_id', 'desc')
+      .sort_by("public_id", "desc")
       .max_results(400)
-      .execute()
+      .execute();
 
-    cachedResults = fetchedResults
+    cachedResults = fetchedResults;
   }
 
-  return cachedResults
+  return cachedResults;
 }
diff --git a/examples/with-cloudinary/utils/cloudinary.ts b/examples/with-cloudinary/utils/cloudinary.ts
index 5c696b8466..17f81a3aff 100644
--- a/examples/with-cloudinary/utils/cloudinary.ts
+++ b/examples/with-cloudinary/utils/cloudinary.ts
@@ -1,10 +1,10 @@
-import cloudinary from 'cloudinary'
+import cloudinary from "cloudinary";
 
 cloudinary.v2.config({
   cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
   api_key: process.env.CLOUDINARY_API_KEY,
   api_secret: process.env.CLOUDINARY_API_SECRET,
   secure: true,
-})
+});
 
-export default cloudinary
+export default cloudinary;
diff --git a/examples/with-cloudinary/utils/downloadPhoto.ts b/examples/with-cloudinary/utils/downloadPhoto.ts
index 60d88902ed..257abd39e7 100644
--- a/examples/with-cloudinary/utils/downloadPhoto.ts
+++ b/examples/with-cloudinary/utils/downloadPhoto.ts
@@ -1,24 +1,24 @@
 function forceDownload(blobUrl: string, filename: string) {
-  let a: any = document.createElement('a')
-  a.download = filename
-  a.href = blobUrl
-  document.body.appendChild(a)
-  a.click()
-  a.remove()
+  let a: any = document.createElement("a");
+  a.download = filename;
+  a.href = blobUrl;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
 }
 
 export default function downloadPhoto(url: string, filename: string) {
-  if (!filename) filename = url.split('\\').pop().split('/').pop()
+  if (!filename) filename = url.split("\\").pop().split("/").pop();
   fetch(url, {
     headers: new Headers({
       Origin: location.origin,
     }),
-    mode: 'cors',
+    mode: "cors",
   })
     .then((response) => response.blob())
     .then((blob) => {
-      let blobUrl = window.URL.createObjectURL(blob)
-      forceDownload(blobUrl, filename)
+      let blobUrl = window.URL.createObjectURL(blob);
+      forceDownload(blobUrl, filename);
     })
-    .catch((e) => console.error(e))
+    .catch((e) => console.error(e));
 }
diff --git a/examples/with-cloudinary/utils/generateBlurPlaceholder.ts b/examples/with-cloudinary/utils/generateBlurPlaceholder.ts
index f6577bcaeb..bb5bfeb864 100644
--- a/examples/with-cloudinary/utils/generateBlurPlaceholder.ts
+++ b/examples/with-cloudinary/utils/generateBlurPlaceholder.ts
@@ -1,25 +1,25 @@
-import imagemin from 'imagemin'
-import imageminJpegtran from 'imagemin-jpegtran'
-import type { ImageProps } from './types'
+import imagemin from "imagemin";
+import imageminJpegtran from "imagemin-jpegtran";
+import type { ImageProps } from "./types";
 
-const cache = new Map<ImageProps, string>()
+const cache = new Map<ImageProps, string>();
 
 export default async function getBase64ImageUrl(
-  image: ImageProps
+  image: ImageProps,
 ): Promise<string> {
-  let url = cache.get(image)
+  let url = cache.get(image);
   if (url) {
-    return url
+    return url;
   }
   const response = await fetch(
-    `https://res.cloudinary.com/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload/f_jpg,w_8,q_70/${image.public_id}.${image.format}`
-  )
-  const buffer = await response.arrayBuffer()
+    `https://res.cloudinary.com/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload/f_jpg,w_8,q_70/${image.public_id}.${image.format}`,
+  );
+  const buffer = await response.arrayBuffer();
   const minified = await imagemin.buffer(Buffer.from(buffer), {
     plugins: [imageminJpegtran()],
-  })
+  });
 
-  url = `data:image/jpeg;base64,${Buffer.from(minified).toString('base64')}`
-  cache.set(image, url)
-  return url
+  url = `data:image/jpeg;base64,${Buffer.from(minified).toString("base64")}`;
+  cache.set(image, url);
+  return url;
 }
diff --git a/examples/with-cloudinary/utils/range.ts b/examples/with-cloudinary/utils/range.ts
index 36d5651ee1..7596b116d8 100644
--- a/examples/with-cloudinary/utils/range.ts
+++ b/examples/with-cloudinary/utils/range.ts
@@ -1,11 +1,11 @@
 export const range = (start: number, end: number) => {
-  let output = []
-  if (typeof end === 'undefined') {
-    end = start
-    start = 0
+  let output = [];
+  if (typeof end === "undefined") {
+    end = start;
+    start = 0;
   }
   for (let i = start; i < end; i += 1) {
-    output.push(i)
+    output.push(i);
   }
-  return output
-}
+  return output;
+};
diff --git a/examples/with-cloudinary/utils/types.ts b/examples/with-cloudinary/utils/types.ts
index 720ae500fb..933664f52e 100644
--- a/examples/with-cloudinary/utils/types.ts
+++ b/examples/with-cloudinary/utils/types.ts
@@ -1,19 +1,19 @@
 /* eslint-disable no-unused-vars */
 export interface ImageProps {
-  id: number
-  height: string
-  width: string
-  public_id: string
-  format: string
-  blurDataUrl?: string
+  id: number;
+  height: string;
+  width: string;
+  public_id: string;
+  format: string;
+  blurDataUrl?: string;
 }
 
 export interface SharedModalProps {
-  index: number
-  images?: ImageProps[]
-  currentPhoto?: ImageProps
-  changePhotoId: (newVal: number) => void
-  closeModal: () => void
-  navigation: boolean
-  direction?: number
+  index: number;
+  images?: ImageProps[];
+  currentPhoto?: ImageProps;
+  changePhotoId: (newVal: number) => void;
+  closeModal: () => void;
+  navigation: boolean;
+  direction?: number;
 }
diff --git a/examples/with-cloudinary/utils/useLastViewedPhoto.ts b/examples/with-cloudinary/utils/useLastViewedPhoto.ts
index 7f4927233c..97a2492c51 100644
--- a/examples/with-cloudinary/utils/useLastViewedPhoto.ts
+++ b/examples/with-cloudinary/utils/useLastViewedPhoto.ts
@@ -1,8 +1,8 @@
-import { createGlobalState } from 'react-hooks-global-state'
+import { createGlobalState } from "react-hooks-global-state";
 
-const initialState = { photoToScrollTo: null }
-const { useGlobalState } = createGlobalState(initialState)
+const initialState = { photoToScrollTo: null };
+const { useGlobalState } = createGlobalState(initialState);
 
 export const useLastViewedPhoto = () => {
-  return useGlobalState('photoToScrollTo')
-}
+  return useGlobalState("photoToScrollTo");
+};
diff --git a/examples/with-compiled-css/components/class-names-box.js b/examples/with-compiled-css/components/class-names-box.js
index 67658c1220..64f001d6c4 100644
--- a/examples/with-compiled-css/components/class-names-box.js
+++ b/examples/with-compiled-css/components/class-names-box.js
@@ -1,5 +1,5 @@
-import { ClassNames } from '@compiled/react'
-import { error } from '../style/colors'
+import { ClassNames } from "@compiled/react";
+import { error } from "../style/colors";
 
 export const BoxStyles = ({ children }) => (
   <ClassNames>
@@ -16,4 +16,4 @@ export const BoxStyles = ({ children }) => (
       })
     }
   </ClassNames>
-)
+);
diff --git a/examples/with-compiled-css/components/styled-button.js b/examples/with-compiled-css/components/styled-button.js
index bc3a2c5812..6900ec332f 100644
--- a/examples/with-compiled-css/components/styled-button.js
+++ b/examples/with-compiled-css/components/styled-button.js
@@ -1,4 +1,4 @@
-import { styled } from '@compiled/react'
+import { styled } from "@compiled/react";
 
 export const Button = styled.button`
   color: ${(props) => props.color};
@@ -8,4 +8,4 @@ export const Button = styled.button`
   width: 100%;
   font-family: sans-serif;
   border: 1px solid ${(props) => props.color};
-`
+`;
diff --git a/examples/with-compiled-css/next.config.js b/examples/with-compiled-css/next.config.js
index 72d5cd33f7..faafd2b7f5 100644
--- a/examples/with-compiled-css/next.config.js
+++ b/examples/with-compiled-css/next.config.js
@@ -3,9 +3,9 @@ module.exports = {
   webpack: (config) => {
     config.module.rules.push({
       test: /\.js$/,
-      use: ['@compiled/webpack-loader'],
-    })
+      use: ["@compiled/webpack-loader"],
+    });
 
-    return config
+    return config;
   },
-}
+};
diff --git a/examples/with-compiled-css/pages/index.js b/examples/with-compiled-css/pages/index.js
index 3befff44a8..658dd1c382 100644
--- a/examples/with-compiled-css/pages/index.js
+++ b/examples/with-compiled-css/pages/index.js
@@ -1,7 +1,7 @@
-import '@compiled/react'
-import { BoxStyles } from '../components/class-names-box'
-import { Button } from '../components/styled-button'
-import { secondary, primary } from '../style/colors'
+import "@compiled/react";
+import { BoxStyles } from "../components/class-names-box";
+import { Button } from "../components/styled-button";
+import { secondary, primary } from "../style/colors";
 
 const IndexPage = () => (
   <BoxStyles>
@@ -13,11 +13,11 @@ const IndexPage = () => (
           css={{
             marginTop: 8,
             flexGrow: 1,
-            height: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontFamily: 'sans-serif',
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontFamily: "sans-serif",
             color: primary,
             border: `1px solid ${primary}`,
           }}
@@ -27,6 +27,6 @@ const IndexPage = () => (
       </div>
     )}
   </BoxStyles>
-)
+);
 
-export default IndexPage
+export default IndexPage;
diff --git a/examples/with-compiled-css/style/colors.js b/examples/with-compiled-css/style/colors.js
index 727481b475..715a745c45 100644
--- a/examples/with-compiled-css/style/colors.js
+++ b/examples/with-compiled-css/style/colors.js
@@ -1,3 +1,3 @@
-export const primary = 'blue'
-export const secondary = 'purple'
-export const error = 'red'
+export const primary = "blue";
+export const secondary = "purple";
+export const error = "red";
diff --git a/examples/with-contentlayer/contentlayer.config.js b/examples/with-contentlayer/contentlayer.config.js
index 95d50c8d8b..568a34669c 100644
--- a/examples/with-contentlayer/contentlayer.config.js
+++ b/examples/with-contentlayer/contentlayer.config.js
@@ -1,23 +1,23 @@
-import { defineDocumentType, makeSource } from 'contentlayer/source-files'
+import { defineDocumentType, makeSource } from "contentlayer/source-files";
 
 const computedFields = {
   slug: {
-    type: 'string',
-    resolve: (doc) => doc._raw.sourceFileName.replace(/\.md$/, ''),
+    type: "string",
+    resolve: (doc) => doc._raw.sourceFileName.replace(/\.md$/, ""),
   },
-}
+};
 
 export const Post = defineDocumentType(() => ({
-  name: 'Post',
+  name: "Post",
   filePathPattern: `**/*.md`,
   fields: {
-    title: { type: 'string', required: true },
-    date: { type: 'string', required: true },
+    title: { type: "string", required: true },
+    date: { type: "string", required: true },
   },
   computedFields,
-}))
+}));
 
 export default makeSource({
-  contentDirPath: 'posts',
+  contentDirPath: "posts",
   documentTypes: [Post],
-})
+});
diff --git a/examples/with-contentlayer/next.config.js b/examples/with-contentlayer/next.config.js
index 8e05d98917..6e49fa07ea 100644
--- a/examples/with-contentlayer/next.config.js
+++ b/examples/with-contentlayer/next.config.js
@@ -1,3 +1,3 @@
-const { withContentlayer } = require('next-contentlayer')
+const { withContentlayer } = require("next-contentlayer");
 
-module.exports = withContentlayer({})
+module.exports = withContentlayer({});
diff --git a/examples/with-contentlayer/pages/_app.js b/examples/with-contentlayer/pages/_app.js
index 1e1cec9242..2fc3e07009 100644
--- a/examples/with-contentlayer/pages/_app.js
+++ b/examples/with-contentlayer/pages/_app.js
@@ -1,7 +1,7 @@
-import '../styles/globals.css'
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-contentlayer/pages/index.js b/examples/with-contentlayer/pages/index.js
index 89a8d49487..60b1fba3f8 100644
--- a/examples/with-contentlayer/pages/index.js
+++ b/examples/with-contentlayer/pages/index.js
@@ -1,8 +1,8 @@
-import Link from 'next/link'
-import Head from 'next/head'
-import { allPosts } from 'contentlayer/generated'
-import { pick } from '@contentlayer/client'
-import utilStyles from '../styles/utils.module.css'
+import Link from "next/link";
+import Head from "next/head";
+import { allPosts } from "contentlayer/generated";
+import { pick } from "@contentlayer/client";
+import utilStyles from "../styles/utils.module.css";
 
 export default function Home({ posts }) {
   return (
@@ -24,11 +24,11 @@ export default function Home({ posts }) {
         </ul>
       </section>
     </>
-  )
+  );
 }
 
 export async function getStaticProps() {
-  const posts = allPosts.map((post) => pick(post, ['title', 'date', 'slug']))
+  const posts = allPosts.map((post) => pick(post, ["title", "date", "slug"]));
 
-  return { props: { posts } }
+  return { props: { posts } };
 }
diff --git a/examples/with-contentlayer/pages/posts/[id].js b/examples/with-contentlayer/pages/posts/[id].js
index fbda603f64..005a099097 100644
--- a/examples/with-contentlayer/pages/posts/[id].js
+++ b/examples/with-contentlayer/pages/posts/[id].js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import { allPosts } from 'contentlayer/generated'
-import utilStyles from '../../styles/utils.module.css'
+import Head from "next/head";
+import { allPosts } from "contentlayer/generated";
+import utilStyles from "../../styles/utils.module.css";
 
 export default function Post({ post }) {
   return (
@@ -16,18 +16,18 @@ export default function Post({ post }) {
         <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
       </article>
     </>
-  )
+  );
 }
 
 export async function getStaticPaths() {
   return {
     paths: allPosts.map((p) => ({ params: { id: p.slug } })),
     fallback: false,
-  }
+  };
 }
 
 export async function getStaticProps({ params }) {
-  const post = allPosts.find((post) => post.slug === params?.id)
+  const post = allPosts.find((post) => post.slug === params?.id);
 
-  return { props: { post } }
+  return { props: { post } };
 }
diff --git a/examples/with-contentlayer/posts/pre-rendering.md b/examples/with-contentlayer/posts/pre-rendering.md
index 343f05db16..33cfdae1bc 100644
--- a/examples/with-contentlayer/posts/pre-rendering.md
+++ b/examples/with-contentlayer/posts/pre-rendering.md
@@ -1,6 +1,6 @@
 ---
-title: 'Two Forms of Pre-rendering'
-date: '2020-01-01'
+title: "Two Forms of Pre-rendering"
+date: "2020-01-01"
 ---
 
 Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.
diff --git a/examples/with-contentlayer/posts/ssg-ssr.md b/examples/with-contentlayer/posts/ssg-ssr.md
index e8d5b6ba69..3a57dcfebf 100644
--- a/examples/with-contentlayer/posts/ssg-ssr.md
+++ b/examples/with-contentlayer/posts/ssg-ssr.md
@@ -1,6 +1,6 @@
 ---
-title: 'When to Use Static Generation vs Server-side Rendering'
-date: '2020-01-02'
+title: "When to Use Static Generation vs Server-side Rendering"
+date: "2020-01-02"
 ---
 
 We recommend using **Static Generation** (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.
diff --git a/examples/with-context-api/components/Counter.tsx b/examples/with-context-api/components/Counter.tsx
index 0f8eae3351..b5b75d0832 100644
--- a/examples/with-context-api/components/Counter.tsx
+++ b/examples/with-context-api/components/Counter.tsx
@@ -4,54 +4,54 @@ import {
   createContext,
   ReactNode,
   Dispatch,
-} from 'react'
+} from "react";
 
-type CounterState = number
+type CounterState = number;
 type CounterAction =
   | {
-      type: 'INCREASE' | 'DECREASE'
+      type: "INCREASE" | "DECREASE";
     }
   | {
-      type: 'INCREASE_BY'
-      payload: number
-    }
+      type: "INCREASE_BY";
+      payload: number;
+    };
 
-const CounterStateContext = createContext<CounterState>(0)
+const CounterStateContext = createContext<CounterState>(0);
 const CounterDispatchContext = createContext<Dispatch<CounterAction>>(
-  () => null
-)
+  () => null,
+);
 
 const reducer = (state: CounterState, action: CounterAction) => {
   switch (action.type) {
-    case 'INCREASE':
-      return state + 1
-    case 'DECREASE':
-      return state - 1
-    case 'INCREASE_BY':
-      return state + action.payload
+    case "INCREASE":
+      return state + 1;
+    case "DECREASE":
+      return state - 1;
+    case "INCREASE_BY":
+      return state + action.payload;
     default:
-      throw new Error(`Unknown action: ${JSON.stringify(action)}`)
+      throw new Error(`Unknown action: ${JSON.stringify(action)}`);
   }
-}
+};
 
 type CounterProviderProps = {
-  children: ReactNode
-  initialValue?: number
-}
+  children: ReactNode;
+  initialValue?: number;
+};
 
 export const CounterProvider = ({
   children,
   initialValue = 0,
 }: CounterProviderProps) => {
-  const [state, dispatch] = useReducer(reducer, initialValue)
+  const [state, dispatch] = useReducer(reducer, initialValue);
   return (
     <CounterDispatchContext.Provider value={dispatch}>
       <CounterStateContext.Provider value={state}>
         {children}
       </CounterStateContext.Provider>
     </CounterDispatchContext.Provider>
-  )
-}
+  );
+};
 
-export const useCount = () => useContext(CounterStateContext)
-export const useDispatchCount = () => useContext(CounterDispatchContext)
+export const useCount = () => useContext(CounterStateContext);
+export const useDispatchCount = () => useContext(CounterDispatchContext);
diff --git a/examples/with-context-api/pages/_app.tsx b/examples/with-context-api/pages/_app.tsx
index 6f852027a9..882a881f3b 100644
--- a/examples/with-context-api/pages/_app.tsx
+++ b/examples/with-context-api/pages/_app.tsx
@@ -1,10 +1,10 @@
-import type { AppProps } from 'next/app'
-import { CounterProvider } from '../components/Counter'
+import type { AppProps } from "next/app";
+import { CounterProvider } from "../components/Counter";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (
     <CounterProvider>
       <Component {...pageProps} />
     </CounterProvider>
-  )
+  );
 }
diff --git a/examples/with-context-api/pages/about.tsx b/examples/with-context-api/pages/about.tsx
index 34fddc71a8..6ce744b236 100644
--- a/examples/with-context-api/pages/about.tsx
+++ b/examples/with-context-api/pages/about.tsx
@@ -1,20 +1,20 @@
-import type { MouseEvent } from 'react'
-import Link from 'next/link'
-import { useCount, useDispatchCount } from '../components/Counter'
+import type { MouseEvent } from "react";
+import Link from "next/link";
+import { useCount, useDispatchCount } from "../components/Counter";
 
 const AboutPage = () => {
-  const count = useCount()
-  const dispatch = useDispatchCount()
+  const count = useCount();
+  const dispatch = useDispatchCount();
 
   const handleIncrease = (event: MouseEvent<HTMLButtonElement>) =>
     dispatch({
-      type: 'INCREASE',
-    })
+      type: "INCREASE",
+    });
   const handleIncrease15 = (event: MouseEvent<HTMLButtonElement>) =>
     dispatch({
-      type: 'INCREASE_BY',
+      type: "INCREASE_BY",
       payload: 15,
-    })
+    });
 
   return (
     <>
@@ -26,7 +26,7 @@ const AboutPage = () => {
         <Link href="/">Home</Link>
       </p>
     </>
-  )
-}
+  );
+};
 
-export default AboutPage
+export default AboutPage;
diff --git a/examples/with-context-api/pages/index.tsx b/examples/with-context-api/pages/index.tsx
index a1d5b0e25a..18802635a5 100644
--- a/examples/with-context-api/pages/index.tsx
+++ b/examples/with-context-api/pages/index.tsx
@@ -1,19 +1,19 @@
-import type { MouseEvent } from 'react'
-import Link from 'next/link'
-import { useCount, useDispatchCount } from '../components/Counter'
+import type { MouseEvent } from "react";
+import Link from "next/link";
+import { useCount, useDispatchCount } from "../components/Counter";
 
 const IndexPage = () => {
-  const count = useCount()
-  const dispatch = useDispatchCount()
+  const count = useCount();
+  const dispatch = useDispatchCount();
 
   const handleIncrease = (event: MouseEvent<HTMLButtonElement>) =>
     dispatch({
-      type: 'INCREASE',
-    })
+      type: "INCREASE",
+    });
   const handleDecrease = (event: MouseEvent<HTMLButtonElement>) =>
     dispatch({
-      type: 'DECREASE',
-    })
+      type: "DECREASE",
+    });
 
   return (
     <>
@@ -25,7 +25,7 @@ const IndexPage = () => {
         <Link href="/about">About</Link>
       </p>
     </>
-  )
-}
+  );
+};
 
-export default IndexPage
+export default IndexPage;
diff --git a/examples/with-cookies-next/pages/api/get-api-cookie.ts b/examples/with-cookies-next/pages/api/get-api-cookie.ts
index 393d59d0e8..65ad23c9db 100644
--- a/examples/with-cookies-next/pages/api/get-api-cookie.ts
+++ b/examples/with-cookies-next/pages/api/get-api-cookie.ts
@@ -1,18 +1,18 @@
-import { getCookie, getCookies } from 'cookies-next'
-import { NextApiRequest, NextApiResponse } from 'next'
+import { getCookie, getCookies } from "cookies-next";
+import { NextApiRequest, NextApiResponse } from "next";
 
 export default async function getApiCookie(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
   try {
-    const currentCookie = getCookie('api-cookie', { req, res })
-    const allCookies = getCookies({ req, res })
+    const currentCookie = getCookie("api-cookie", { req, res });
+    const allCookies = getCookies({ req, res });
 
-    console.log('currentCookie: ', currentCookie)
-    console.log('allCookies: ', allCookies)
-    res.status(200).send('get api cookies')
+    console.log("currentCookie: ", currentCookie);
+    console.log("allCookies: ", allCookies);
+    res.status(200).send("get api cookies");
   } catch (error) {
-    res.status(400).send(error.message)
+    res.status(400).send(error.message);
   }
 }
diff --git a/examples/with-cookies-next/pages/api/remove-api-cookie.ts b/examples/with-cookies-next/pages/api/remove-api-cookie.ts
index d261f94029..181165b633 100644
--- a/examples/with-cookies-next/pages/api/remove-api-cookie.ts
+++ b/examples/with-cookies-next/pages/api/remove-api-cookie.ts
@@ -1,10 +1,10 @@
-import { deleteCookie } from 'cookies-next'
+import { deleteCookie } from "cookies-next";
 
 export default async function setApiCookie(req, res) {
   try {
-    deleteCookie('api-cookie', { req, res })
-    res.status(200).send('remove api cookies')
+    deleteCookie("api-cookie", { req, res });
+    res.status(200).send("remove api cookies");
   } catch (error) {
-    res.status(400).send(error.message)
+    res.status(400).send(error.message);
   }
 }
diff --git a/examples/with-cookies-next/pages/api/set-api-cookie.ts b/examples/with-cookies-next/pages/api/set-api-cookie.ts
index f770e65043..a594bcb255 100644
--- a/examples/with-cookies-next/pages/api/set-api-cookie.ts
+++ b/examples/with-cookies-next/pages/api/set-api-cookie.ts
@@ -1,10 +1,10 @@
-import { setCookie } from 'cookies-next'
+import { setCookie } from "cookies-next";
 
 export default async function setApiCookie(req, res) {
   try {
-    setCookie('api-cookie', 'mock-value', { req, res, maxAge: 60 * 60 * 24 })
-    res.status(200).send('set api cookies')
+    setCookie("api-cookie", "mock-value", { req, res, maxAge: 60 * 60 * 24 });
+    res.status(200).send("set api cookies");
   } catch (error) {
-    res.status(400).send(error.message)
+    res.status(400).send(error.message);
   }
 }
diff --git a/examples/with-cookies-next/pages/index.tsx b/examples/with-cookies-next/pages/index.tsx
index f48f150dfb..7fcbedbd95 100644
--- a/examples/with-cookies-next/pages/index.tsx
+++ b/examples/with-cookies-next/pages/index.tsx
@@ -1,18 +1,18 @@
-import React from 'react'
+import React from "react";
 import {
   setCookie,
   getCookies,
   getCookie,
   deleteCookie,
   hasCookie,
-} from 'cookies-next'
+} from "cookies-next";
 
 const Home = () => {
-  const handleSetCookie = () => setCookie('client-cookie', 'mock client value')
-  const handleCheckCookie = () => console.log(hasCookie('client-cookie'))
-  const handleGetCookie = () => console.log(getCookie('client-cookie'))
-  const handleGetCookies = () => console.log(getCookies())
-  const handleDeleteCookies = () => deleteCookie('client-cookie')
+  const handleSetCookie = () => setCookie("client-cookie", "mock client value");
+  const handleCheckCookie = () => console.log(hasCookie("client-cookie"));
+  const handleGetCookie = () => console.log(getCookie("client-cookie"));
+  const handleGetCookies = () => console.log(getCookies());
+  const handleDeleteCookies = () => deleteCookie("client-cookie");
 
   return (
     <div>
@@ -28,7 +28,7 @@ const Home = () => {
       <br />
       <button onClick={handleDeleteCookies}>Remove Cookies</button>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/examples/with-cookies-next/pages/ssr-cookies.tsx b/examples/with-cookies-next/pages/ssr-cookies.tsx
index 2b7a41a173..b0a46a461d 100644
--- a/examples/with-cookies-next/pages/ssr-cookies.tsx
+++ b/examples/with-cookies-next/pages/ssr-cookies.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
-import { getCookies, getCookie, setCookies, removeCookies } from 'cookies-next'
+import React from "react";
+import { getCookies, getCookie, setCookies, removeCookies } from "cookies-next";
 
 const SsrCookies = () => {
-  return <div>SSR Cookies</div>
-}
+  return <div>SSR Cookies</div>;
+};
 
 export const getServerSideProps = ({ req, res }) => {
-  setCookies('ssr-cookie', 'mock-ssr-value', { req, res, maxAge: 60 * 6 * 24 })
-  getCookie('client-cookie', { req, res })
-  getCookies({ req, res })
-  removeCookies('client-cookie', { req, res })
-  return { props: {} }
-}
+  setCookies("ssr-cookie", "mock-ssr-value", { req, res, maxAge: 60 * 6 * 24 });
+  getCookie("client-cookie", { req, res });
+  getCookies({ req, res });
+  removeCookies("client-cookie", { req, res });
+  return { props: {} };
+};
 
-export default SsrCookies
+export default SsrCookies;
diff --git a/examples/with-couchbase/pages/_app.js b/examples/with-couchbase/pages/_app.js
index 1e1cec9242..2fc3e07009 100644
--- a/examples/with-couchbase/pages/_app.js
+++ b/examples/with-couchbase/pages/_app.js
@@ -1,7 +1,7 @@
-import '../styles/globals.css'
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-couchbase/pages/index.js b/examples/with-couchbase/pages/index.js
index a50b899f74..d6cffc3e3c 100644
--- a/examples/with-couchbase/pages/index.js
+++ b/examples/with-couchbase/pages/index.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
-import { connectToDatabase } from '../util/couchbase'
+import Head from "next/head";
+import styles from "../styles/Home.module.css";
+import { connectToDatabase } from "../util/couchbase";
 
 export default function Home({ isConnected }) {
   return (
@@ -35,7 +35,7 @@ export default function Home({ isConnected }) {
         )}
 
         <p className={styles.description}>
-          Get started by editing{' '}
+          Get started by editing{" "}
           <code className={styles.code}>pages/index.js</code>
         </p>
       </main>
@@ -46,33 +46,33 @@ export default function Home({ isConnected }) {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
         </a>
       </footer>
     </div>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
-  let connection = await connectToDatabase()
+  let connection = await connectToDatabase();
 
-  const { collection } = connection
+  const { collection } = connection;
 
   // Check connection with a KV GET operation for a key that doesnt exist
-  let isConnected = false
+  let isConnected = false;
   try {
-    await collection.get('testingConnectionKey')
+    await collection.get("testingConnectionKey");
   } catch (err) {
     // error message will return 'document not found' if and only if we are connected
     // (but this document is not present, we're only trying to test the connection here)
-    if (err.message === 'document not found') {
-      isConnected = true
+    if (err.message === "document not found") {
+      isConnected = true;
     }
     // if the error message is anything OTHER THAN 'document not found', the connection is broken
   }
 
   return {
     props: { isConnected },
-  }
+  };
 }
diff --git a/examples/with-couchbase/util/couchbase.js b/examples/with-couchbase/util/couchbase.js
index f1a683cd76..e9edf1acdd 100644
--- a/examples/with-couchbase/util/couchbase.js
+++ b/examples/with-couchbase/util/couchbase.js
@@ -1,21 +1,21 @@
-import * as couchbase from 'couchbase'
+import * as couchbase from "couchbase";
 
-const COUCHBASE_USER = process.env.COUCHBASE_USER
-const COUCHBASE_PASSWORD = process.env.COUCHBASE_PASSWORD
-const COUCHBASE_ENDPOINT = process.env.COUCHBASE_ENDPOINT || 'localhost'
-const COUCHBASE_BUCKET = process.env.COUCHBASE_BUCKET || 'travel-sample'
-let IS_CLOUD_INSTANCE = process.env.IS_CLOUD_INSTANCE || 'false'
+const COUCHBASE_USER = process.env.COUCHBASE_USER;
+const COUCHBASE_PASSWORD = process.env.COUCHBASE_PASSWORD;
+const COUCHBASE_ENDPOINT = process.env.COUCHBASE_ENDPOINT || "localhost";
+const COUCHBASE_BUCKET = process.env.COUCHBASE_BUCKET || "travel-sample";
+let IS_CLOUD_INSTANCE = process.env.IS_CLOUD_INSTANCE || "false";
 
 if (!COUCHBASE_USER) {
   throw new Error(
-    'Please define the COUCHBASE_USER environment variable inside .env.local'
-  )
+    "Please define the COUCHBASE_USER environment variable inside .env.local",
+  );
 }
 
 if (!COUCHBASE_PASSWORD) {
   throw new Error(
-    'Please define the COUCHBASE_PASSWORD environment variable inside .env.local'
-  )
+    "Please define the COUCHBASE_PASSWORD environment variable inside .env.local",
+  );
 }
 
 /**
@@ -23,43 +23,43 @@ if (!COUCHBASE_PASSWORD) {
  * in development. This prevents connections growing exponentially
  * during API Route usage.
  */
-let cached = global.couchbase
+let cached = global.couchbase;
 
 if (!cached) {
-  cached = global.couchbase = { conn: null }
+  cached = global.couchbase = { conn: null };
 }
 
 async function createCouchbaseCluster() {
   if (cached.conn) {
-    return cached.conn
+    return cached.conn;
   }
 
   cached.conn = await couchbase.connect(
-    'couchbase://' +
+    "couchbase://" +
       COUCHBASE_ENDPOINT +
-      (IS_CLOUD_INSTANCE === 'true'
-        ? '?ssl=no_verify&console_log_level=5'
-        : ''),
+      (IS_CLOUD_INSTANCE === "true"
+        ? "?ssl=no_verify&console_log_level=5"
+        : ""),
     {
       username: COUCHBASE_USER,
       password: COUCHBASE_PASSWORD,
-    }
-  )
+    },
+  );
 
-  return cached.conn
+  return cached.conn;
 }
 
 export async function connectToDatabase() {
-  const cluster = await createCouchbaseCluster()
+  const cluster = await createCouchbaseCluster();
 
-  const bucket = cluster.bucket(COUCHBASE_BUCKET)
-  const collection = bucket.defaultCollection()
+  const bucket = cluster.bucket(COUCHBASE_BUCKET);
+  const collection = bucket.defaultCollection();
 
   let dbConnection = {
     cluster,
     bucket,
     collection,
-  }
+  };
 
-  return dbConnection
+  return dbConnection;
 }
diff --git a/examples/with-cssed/lib/theme.ts b/examples/with-cssed/lib/theme.ts
index 368b046f1a..976f97bc9c 100644
--- a/examples/with-cssed/lib/theme.ts
+++ b/examples/with-cssed/lib/theme.ts
@@ -1,2 +1,2 @@
-export const dark = '#333'
-export const light = '#ddd'
+export const dark = "#333";
+export const light = "#ddd";
diff --git a/examples/with-cssed/pages/index.tsx b/examples/with-cssed/pages/index.tsx
index 54b0cbefb3..c46044f2e3 100644
--- a/examples/with-cssed/pages/index.tsx
+++ b/examples/with-cssed/pages/index.tsx
@@ -1,8 +1,8 @@
-import { css } from 'cssed/macro'
-import Head from 'next/head'
-import { useState } from 'react'
+import { css } from "cssed/macro";
+import Head from "next/head";
+import { useState } from "react";
 
-import { dark, light } from '../lib/theme'
+import { dark, light } from "../lib/theme";
 
 const styles = css`
   .box {
@@ -19,18 +19,18 @@ const styles = css`
     background-color: ${dark};
   }
   .dark::before {
-    content: '🌚';
+    content: "🌚";
   }
   .light {
     background-color: ${light};
   }
   .light::before {
-    content: '🌞';
+    content: "🌞";
   }
-`
+`;
 
 export default function Home() {
-  const [isDark, setDark] = useState(false)
+  const [isDark, setDark] = useState(false);
 
   return (
     <>
@@ -39,10 +39,10 @@ export default function Home() {
       </Head>
       <div
         onClick={() => setDark((prevState) => !prevState)}
-        className={styles.box + ' ' + (isDark ? styles.dark : styles.light)}
+        className={styles.box + " " + (isDark ? styles.dark : styles.light)}
       >
         Cssed demo
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/with-custom-babel-config/pages/index.js b/examples/with-custom-babel-config/pages/index.js
index c0e2ba1427..87a4863b7c 100644
--- a/examples/with-custom-babel-config/pages/index.js
+++ b/examples/with-custom-babel-config/pages/index.js
@@ -1,37 +1,37 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from "react";
 
 const MyLuckNo = () => {
-  const [randomNumber, setRandomNumber] = useState(null)
+  const [randomNumber, setRandomNumber] = useState(null);
 
   const recalculate = () => {
-    setRandomNumber(Math.ceil(Math.random() * 100))
-  }
+    setRandomNumber(Math.ceil(Math.random() * 100));
+  };
 
   useEffect(() => {
-    recalculate()
-  }, [])
+    recalculate();
+  }, []);
 
   const message = do {
     if (randomNumber < 30) {
       // eslint-disable-next-line no-unused-expressions
-      ;('Do not give up. Try again.')
+      ("Do not give up. Try again.");
     } else if (randomNumber < 60) {
       // eslint-disable-next-line no-unused-expressions
-      ;('You are a lucky guy')
+      ("You are a lucky guy");
     } else {
       // eslint-disable-next-line no-unused-expressions
-      ;('You are soooo lucky!')
+      ("You are soooo lucky!");
     }
-  }
+  };
 
-  if (randomNumber === null) return <p>Please wait..</p>
+  if (randomNumber === null) return <p>Please wait..</p>;
   return (
     <div>
       <h3>Your Lucky number is: "{randomNumber}"</h3>
       <p>{message}</p>
       <button onClick={() => recalculate()}>Try Again</button>
     </div>
-  )
-}
+  );
+};
 
-export default MyLuckNo
+export default MyLuckNo;
diff --git a/examples/with-cxs/pages/_document.tsx b/examples/with-cxs/pages/_document.tsx
index 9a299395f3..550b401381 100644
--- a/examples/with-cxs/pages/_document.tsx
+++ b/examples/with-cxs/pages/_document.tsx
@@ -1,14 +1,14 @@
-import type { DocumentContext, DocumentInitialProps } from 'next/document'
-import Document, { Html, Head, Main, NextScript } from 'next/document'
-import cxs from 'cxs'
+import type { DocumentContext, DocumentInitialProps } from "next/document";
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import cxs from "cxs";
 
 export default class MyDocument extends Document {
   static async getInitialProps(
-    ctx: DocumentContext
+    ctx: DocumentContext,
   ): Promise<DocumentInitialProps> {
-    const initialProps = await Document.getInitialProps(ctx)
-    const styles = cxs.css()
-    cxs.reset()
+    const initialProps = await Document.getInitialProps(ctx);
+    const styles = cxs.css();
+    cxs.reset();
 
     return {
       ...initialProps,
@@ -18,7 +18,7 @@ export default class MyDocument extends Document {
           <style dangerouslySetInnerHTML={{ __html: styles }} />
         </>
       ),
-    }
+    };
   }
 
   render() {
@@ -30,6 +30,6 @@ export default class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
diff --git a/examples/with-cxs/pages/index.tsx b/examples/with-cxs/pages/index.tsx
index 9944f733e8..bbe150b3b2 100644
--- a/examples/with-cxs/pages/index.tsx
+++ b/examples/with-cxs/pages/index.tsx
@@ -1,29 +1,29 @@
-import cxs from 'cxs'
+import cxs from "cxs";
 
 const cx = {
   root: cxs({
     width: 80,
     height: 60,
-    background: 'white',
-    ':hover': {
-      background: 'black',
+    background: "white",
+    ":hover": {
+      background: "black",
     },
   }),
 
   title: cxs({
     marginLeft: 5,
-    color: 'black',
+    color: "black",
     fontSize: 22,
-    ':hover': {
-      color: 'white',
+    ":hover": {
+      color: "white",
     },
   }),
-}
+};
 
 export default function Home() {
   return (
     <div className={cx.root}>
       <h1 className={cx.title}>My page</h1>
     </div>
-  )
+  );
 }
diff --git a/examples/with-cypress/app/about/page.tsx b/examples/with-cypress/app/about/page.tsx
index 97a39ab3f3..cfa69ffe5c 100644
--- a/examples/with-cypress/app/about/page.tsx
+++ b/examples/with-cypress/app/about/page.tsx
@@ -1,5 +1,5 @@
-import AboutComponent from '../../components/about-component'
-import styles from '../../styles/Home.module.css'
+import AboutComponent from "../../components/about-component";
+import styles from "../../styles/Home.module.css";
 
 export default function About() {
   return (
@@ -8,5 +8,5 @@ export default function About() {
         <AboutComponent />
       </main>
     </div>
-  )
+  );
 }
diff --git a/examples/with-cypress/app/layout.tsx b/examples/with-cypress/app/layout.tsx
index 1736211d59..6070da76fd 100644
--- a/examples/with-cypress/app/layout.tsx
+++ b/examples/with-cypress/app/layout.tsx
@@ -1,22 +1,22 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import '../styles/globals.css'
-import { ReactNode } from 'react'
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "../styles/globals.css";
+import { ReactNode } from "react";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Next.js with Cypress',
-  description: 'Next.js with Cypress',
+  title: "Next.js with Cypress",
+  description: "Next.js with Cypress",
   icons: {
-    icon: '/favicon.ico',
+    icon: "/favicon.ico",
   },
-}
+};
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-cypress/app/page.tsx b/examples/with-cypress/app/page.tsx
index c87503b776..d71c51453d 100644
--- a/examples/with-cypress/app/page.tsx
+++ b/examples/with-cypress/app/page.tsx
@@ -1,6 +1,6 @@
-import Image from 'next/image'
-import Link from 'next/link'
-import styles from '../styles/Home.module.css'
+import Image from "next/image";
+import Link from "next/link";
+import styles from "../styles/Home.module.css";
 
 export default function Home() {
   return (
@@ -11,7 +11,7 @@ export default function Home() {
         </h1>
 
         <p className={styles.description}>
-          Get started by editing{' '}
+          Get started by editing{" "}
           <code className={styles.code}>pages/index.js</code>
         </p>
 
@@ -59,12 +59,12 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <span className={styles.logo}>
             <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
           </span>
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-cypress/components/about-component.cy.tsx b/examples/with-cypress/components/about-component.cy.tsx
index 54a31e5c13..837d380baa 100644
--- a/examples/with-cypress/components/about-component.cy.tsx
+++ b/examples/with-cypress/components/about-component.cy.tsx
@@ -1,23 +1,23 @@
-import AboutComponent from './components/about-component'
+import AboutComponent from "./components/about-component";
 /* eslint-disable */
 // Disable ESLint to prevent failing linting inside the Next.js repo.
 // If you're using ESLint on your project, we recommend installing the ESLint Cypress plugin instead:
 // https://github.com/cypress-io/eslint-plugin-cypress
 
 // Cypress Component Test
-describe('<AboutComponent />', () => {
-  it('should render and display expected content in a Client Component', () => {
+describe("<AboutComponent />", () => {
+  it("should render and display expected content in a Client Component", () => {
     // Mount the React component for the About page
-    cy.mount(<AboutComponent />)
+    cy.mount(<AboutComponent />);
 
     // The new page should contain an h1 with "About page"
-    cy.get('h1').contains('About Page')
+    cy.get("h1").contains("About Page");
 
     // Validate that a link with the expected URL is present
     // *Following* the link is better suited to an E2E test
-    cy.get('a[href="/"]').should('be.visible')
-  })
-})
+    cy.get('a[href="/"]').should("be.visible");
+  });
+});
 
 // Prevent TypeScript from reading file as legacy script
-export {}
+export {};
diff --git a/examples/with-cypress/components/about-component.tsx b/examples/with-cypress/components/about-component.tsx
index 98ee2a1f7f..277ad41eb5 100644
--- a/examples/with-cypress/components/about-component.tsx
+++ b/examples/with-cypress/components/about-component.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client";
 
-import Link from 'next/link'
-import React from 'react'
-import styles from '../styles/Home.module.css'
+import Link from "next/link";
+import React from "react";
+import styles from "../styles/Home.module.css";
 
 export default function AboutComponent() {
   return (
@@ -12,5 +12,5 @@ export default function AboutComponent() {
         <Link href="/">&larr; Go Back</Link>
       </p>
     </>
-  )
+  );
 }
diff --git a/examples/with-cypress/cypress.config.ts b/examples/with-cypress/cypress.config.ts
index d2d191ac50..7fda3a73a3 100644
--- a/examples/with-cypress/cypress.config.ts
+++ b/examples/with-cypress/cypress.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig } from 'cypress'
+import { defineConfig } from "cypress";
 
 export default defineConfig({
   e2e: {
@@ -6,8 +6,8 @@ export default defineConfig({
   },
   component: {
     devServer: {
-      framework: 'next',
-      bundler: 'webpack',
+      framework: "next",
+      bundler: "webpack",
     },
   },
-})
+});
diff --git a/examples/with-cypress/cypress/e2e/app.cy.ts b/examples/with-cypress/cypress/e2e/app.cy.ts
index f30f800940..91a087f7ac 100644
--- a/examples/with-cypress/cypress/e2e/app.cy.ts
+++ b/examples/with-cypress/cypress/e2e/app.cy.ts
@@ -4,21 +4,21 @@
 // https://github.com/cypress-io/eslint-plugin-cypress
 
 // Cypress E2E Test
-describe('Navigation', () => {
-  it('should navigate to the about page', () => {
+describe("Navigation", () => {
+  it("should navigate to the about page", () => {
     // Start from the index page
-    cy.visit('http://localhost:3000')
+    cy.visit("http://localhost:3000");
 
     // Find a link with an href attribute containing "about" and click it
-    cy.get('a[href*="about"]').click()
+    cy.get('a[href*="about"]').click();
 
     // The new url should include "/about"
-    cy.url().should('include', '/about')
+    cy.url().should("include", "/about");
 
     // The new page should contain an h1 with "About page"
-    cy.get('h1').contains('About Page')
-  })
-})
+    cy.get("h1").contains("About Page");
+  });
+});
 
 // Prevent TypeScript from reading file as legacy script
-export {}
+export {};
diff --git a/examples/with-cypress/cypress/e2e/pages.cy.ts b/examples/with-cypress/cypress/e2e/pages.cy.ts
index c22d2c7cd9..af357fbabe 100644
--- a/examples/with-cypress/cypress/e2e/pages.cy.ts
+++ b/examples/with-cypress/cypress/e2e/pages.cy.ts
@@ -3,18 +3,18 @@
 // If you're using ESLint on your project, we recommend installing the ESLint Cypress plugin instead:
 // https://github.com/cypress-io/eslint-plugin-cypress
 
-describe('Navigation', () => {
-  it('should navigate to the about page', () => {
+describe("Navigation", () => {
+  it("should navigate to the about page", () => {
     // Start from the index page
-    cy.visit('http://localhost:3000/home')
+    cy.visit("http://localhost:3000/home");
 
     // Find a link with an href attribute containing "about" and click it
-    cy.get('a[href*="about"]').click()
+    cy.get('a[href*="about"]').click();
 
     // The new url should include "/home/about"
-    cy.url().should('include', '/home/about')
+    cy.url().should("include", "/home/about");
 
     // The new page should contain an h1 with "About"
-    cy.get('h1').contains('About')
-  })
-})
+    cy.get("h1").contains("About");
+  });
+});
diff --git a/examples/with-cypress/cypress/support/commands.ts b/examples/with-cypress/cypress/support/commands.ts
index 1183dc9509..0b5ebbcefc 100644
--- a/examples/with-cypress/cypress/support/commands.ts
+++ b/examples/with-cypress/cypress/support/commands.ts
@@ -37,4 +37,4 @@
 // }
 
 // Prevent TypeScript from reading file as legacy script
-export {}
+export {};
diff --git a/examples/with-cypress/cypress/support/component.ts b/examples/with-cypress/cypress/support/component.ts
index 26e8d74cb7..9d7b637b97 100644
--- a/examples/with-cypress/cypress/support/component.ts
+++ b/examples/with-cypress/cypress/support/component.ts
@@ -15,12 +15,12 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import { mount } from 'cypress/react18'
+import { mount } from "cypress/react18";
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -29,12 +29,12 @@ import { mount } from 'cypress/react18'
 declare global {
   namespace Cypress {
     interface Chainable {
-      mount: typeof mount
+      mount: typeof mount;
     }
   }
 }
 
-Cypress.Commands.add('mount', mount)
+Cypress.Commands.add("mount", mount);
 
 // Example use:
 // cy.mount(<MyComponent />)
diff --git a/examples/with-cypress/cypress/support/e2e.ts b/examples/with-cypress/cypress/support/e2e.ts
index ed5730de11..6a173d6fcb 100644
--- a/examples/with-cypress/cypress/support/e2e.ts
+++ b/examples/with-cypress/cypress/support/e2e.ts
@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
diff --git a/examples/with-cypress/pages/_app.tsx b/examples/with-cypress/pages/_app.tsx
index 1e1cec9242..2fc3e07009 100644
--- a/examples/with-cypress/pages/_app.tsx
+++ b/examples/with-cypress/pages/_app.tsx
@@ -1,7 +1,7 @@
-import '../styles/globals.css'
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-cypress/pages/home/about.tsx b/examples/with-cypress/pages/home/about.tsx
index 5300559f8c..99c6bf8dd8 100644
--- a/examples/with-cypress/pages/home/about.tsx
+++ b/examples/with-cypress/pages/home/about.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function About() {
   return (
@@ -6,5 +6,5 @@ export default function About() {
       <h1>About</h1>
       <Link href="/home">Home</Link>
     </div>
-  )
+  );
 }
diff --git a/examples/with-cypress/pages/home/index.tsx b/examples/with-cypress/pages/home/index.tsx
index b846690983..24cdde4dc4 100644
--- a/examples/with-cypress/pages/home/index.tsx
+++ b/examples/with-cypress/pages/home/index.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Home() {
   return (
@@ -6,5 +6,5 @@ export default function Home() {
       <h1>Home</h1>
       <Link href="/home/about">About</Link>
     </div>
-  )
+  );
 }
diff --git a/examples/with-docker-compose/docker-compose.dev.yml b/examples/with-docker-compose/docker-compose.dev.yml
index 2e5c0234c6..747e9c166c 100644
--- a/examples/with-docker-compose/docker-compose.dev.yml
+++ b/examples/with-docker-compose/docker-compose.dev.yml
@@ -1,4 +1,4 @@
-version: '3'
+version: "3"
 
 services:
   next-app:
diff --git a/examples/with-docker-compose/docker-compose.prod-without-multistage.yml b/examples/with-docker-compose/docker-compose.prod-without-multistage.yml
index 8732defdc7..908347c85c 100644
--- a/examples/with-docker-compose/docker-compose.prod-without-multistage.yml
+++ b/examples/with-docker-compose/docker-compose.prod-without-multistage.yml
@@ -1,4 +1,4 @@
-version: '3'
+version: "3"
 
 services:
   next-app:
diff --git a/examples/with-docker-compose/docker-compose.prod.yml b/examples/with-docker-compose/docker-compose.prod.yml
index adfb425d98..01b7e9b876 100644
--- a/examples/with-docker-compose/docker-compose.prod.yml
+++ b/examples/with-docker-compose/docker-compose.prod.yml
@@ -1,4 +1,4 @@
-version: '3'
+version: "3"
 
 services:
   next-app:
diff --git a/examples/with-docker-compose/next-app/next.config.js b/examples/with-docker-compose/next-app/next.config.js
index 5cd8cc341f..c10e07d959 100644
--- a/examples/with-docker-compose/next-app/next.config.js
+++ b/examples/with-docker-compose/next-app/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: 'standalone',
-}
+  output: "standalone",
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-docker-compose/next-app/src/pages/_app.tsx b/examples/with-docker-compose/next-app/src/pages/_app.tsx
index 33da2fce54..42e2aed31d 100644
--- a/examples/with-docker-compose/next-app/src/pages/_app.tsx
+++ b/examples/with-docker-compose/next-app/src/pages/_app.tsx
@@ -1,6 +1,6 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-docker-compose/next-app/src/pages/index.tsx b/examples/with-docker-compose/next-app/src/pages/index.tsx
index e6a00dac07..10b7287a1f 100644
--- a/examples/with-docker-compose/next-app/src/pages/index.tsx
+++ b/examples/with-docker-compose/next-app/src/pages/index.tsx
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
+import Head from "next/head";
+import Image from "next/image";
+import styles from "../styles/Home.module.css";
 
 export default function Home() {
   return (
@@ -16,7 +16,7 @@ export default function Home() {
         </h1>
 
         <p className={styles.description}>
-          Get started by editing{' '}
+          Get started by editing{" "}
           <code className={styles.code}>pages/index.tsx</code>
         </p>
 
@@ -59,12 +59,12 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <span className={styles.logo}>
             <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
           </span>
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-docker-multi-env/docker/development/docker-compose.yml b/examples/with-docker-multi-env/docker/development/docker-compose.yml
index cdf32d5e95..2a9c2d4a42 100644
--- a/examples/with-docker-multi-env/docker/development/docker-compose.yml
+++ b/examples/with-docker-multi-env/docker/development/docker-compose.yml
@@ -1,4 +1,4 @@
-version: '3'
+version: "3"
 
 services:
   with-docker-multi-env-development:
@@ -7,4 +7,4 @@ services:
       dockerfile: docker/development/Dockerfile
     image: with-docker-multi-env-development
     ports:
-      - '3001:3000'
+      - "3001:3000"
diff --git a/examples/with-docker-multi-env/docker/production/docker-compose.yml b/examples/with-docker-multi-env/docker/production/docker-compose.yml
index b903f1ddd8..4607e54450 100644
--- a/examples/with-docker-multi-env/docker/production/docker-compose.yml
+++ b/examples/with-docker-multi-env/docker/production/docker-compose.yml
@@ -1,4 +1,4 @@
-version: '3'
+version: "3"
 
 services:
   with-docker-multi-env-production:
@@ -7,4 +7,4 @@ services:
       dockerfile: docker/production/Dockerfile
     image: with-docker-multi-env-production
     ports:
-      - '3003:3000'
+      - "3003:3000"
diff --git a/examples/with-docker-multi-env/docker/staging/docker-compose.yml b/examples/with-docker-multi-env/docker/staging/docker-compose.yml
index 231ef1e61a..66bc42e26f 100644
--- a/examples/with-docker-multi-env/docker/staging/docker-compose.yml
+++ b/examples/with-docker-multi-env/docker/staging/docker-compose.yml
@@ -1,4 +1,4 @@
-version: '3'
+version: "3"
 
 services:
   with-docker-multi-env-staging:
@@ -7,4 +7,4 @@ services:
       dockerfile: docker/staging/Dockerfile
     image: with-docker-multi-env-staging
     ports:
-      - '3002:3000'
+      - "3002:3000"
diff --git a/examples/with-docker-multi-env/next.config.js b/examples/with-docker-multi-env/next.config.js
index b6b4bc39ee..b9f289635e 100644
--- a/examples/with-docker-multi-env/next.config.js
+++ b/examples/with-docker-multi-env/next.config.js
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
-  output: 'standalone',
-}
+  output: "standalone",
+};
diff --git a/examples/with-docker-multi-env/pages/_app.js b/examples/with-docker-multi-env/pages/_app.js
index 1e1cec9242..2fc3e07009 100644
--- a/examples/with-docker-multi-env/pages/_app.js
+++ b/examples/with-docker-multi-env/pages/_app.js
@@ -1,7 +1,7 @@
-import '../styles/globals.css'
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-docker-multi-env/pages/api/hello.js b/examples/with-docker-multi-env/pages/api/hello.js
index 441a0a1006..ba6cf4ffc4 100644
--- a/examples/with-docker-multi-env/pages/api/hello.js
+++ b/examples/with-docker-multi-env/pages/api/hello.js
@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default function hello(req, res) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: "John Doe" });
 }
diff --git a/examples/with-docker-multi-env/pages/index.js b/examples/with-docker-multi-env/pages/index.js
index 8e57d8b033..12a04fda8b 100644
--- a/examples/with-docker-multi-env/pages/index.js
+++ b/examples/with-docker-multi-env/pages/index.js
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
+import Head from "next/head";
+import styles from "../styles/Home.module.css";
 
 export default function Home() {
   return (
@@ -16,7 +16,7 @@ export default function Home() {
         <h2 className={styles.title}>with Multiple Deployment Environments</h2>
         <h3>API_URL: {process.env.NEXT_PUBLIC_API_URL}</h3>
         <p className={styles.description}>
-          Get started by editing{' '}
+          Get started by editing{" "}
           <code className={styles.code}>pages/index.js</code>
         </p>
 
@@ -59,10 +59,10 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-docker/README.md b/examples/with-docker/README.md
index 1554a7894a..1906eccc59 100644
--- a/examples/with-docker/README.md
+++ b/examples/with-docker/README.md
@@ -30,8 +30,8 @@ To add support for Docker to an existing project, just copy the [`Dockerfile`](h
 // next.config.js
 module.exports = {
   // ... rest of the configuration.
-  output: 'standalone',
-}
+  output: "standalone",
+};
 ```
 
 This will build the project as a standalone app inside the Docker image.
diff --git a/examples/with-docker/next.config.js b/examples/with-docker/next.config.js
index b6b4bc39ee..b9f289635e 100644
--- a/examples/with-docker/next.config.js
+++ b/examples/with-docker/next.config.js
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
-  output: 'standalone',
-}
+  output: "standalone",
+};
diff --git a/examples/with-docker/pages/_app.js b/examples/with-docker/pages/_app.js
index 1e1cec9242..2fc3e07009 100644
--- a/examples/with-docker/pages/_app.js
+++ b/examples/with-docker/pages/_app.js
@@ -1,7 +1,7 @@
-import '../styles/globals.css'
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-docker/pages/api/hello.js b/examples/with-docker/pages/api/hello.js
index 441a0a1006..ba6cf4ffc4 100644
--- a/examples/with-docker/pages/api/hello.js
+++ b/examples/with-docker/pages/api/hello.js
@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default function hello(req, res) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: "John Doe" });
 }
diff --git a/examples/with-docker/pages/index.js b/examples/with-docker/pages/index.js
index 55ad6fe773..93d4fbbb64 100644
--- a/examples/with-docker/pages/index.js
+++ b/examples/with-docker/pages/index.js
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
+import Head from "next/head";
+import styles from "../styles/Home.module.css";
 
 export default function Home() {
   return (
@@ -15,7 +15,7 @@ export default function Home() {
         </h1>
 
         <p className={styles.description}>
-          Get started by editing{' '}
+          Get started by editing{" "}
           <code className={styles.code}>pages/index.js</code>
         </p>
 
@@ -58,10 +58,10 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-draft-js/pages/index.js b/examples/with-draft-js/pages/index.js
index 3185ad29e7..987d2ac469 100644
--- a/examples/with-draft-js/pages/index.js
+++ b/examples/with-draft-js/pages/index.js
@@ -1,90 +1,90 @@
-import { Component } from 'react'
+import { Component } from "react";
 import {
   Editor,
   EditorState,
   RichUtils,
   convertToRaw,
   convertFromRaw,
-} from 'draft-js'
+} from "draft-js";
 
 const initialData = {
   blocks: [
     {
-      key: '16d0k',
-      text: 'You can edit this text.',
-      type: 'unstyled',
+      key: "16d0k",
+      text: "You can edit this text.",
+      type: "unstyled",
       depth: 0,
-      inlineStyleRanges: [{ offset: 0, length: 23, style: 'BOLD' }],
+      inlineStyleRanges: [{ offset: 0, length: 23, style: "BOLD" }],
       entityRanges: [],
       data: {},
     },
     {
-      key: '98peq',
-      text: '',
-      type: 'unstyled',
+      key: "98peq",
+      text: "",
+      type: "unstyled",
       depth: 0,
       inlineStyleRanges: [],
       entityRanges: [],
       data: {},
     },
     {
-      key: 'ecmnc',
-      text: 'Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.',
-      type: 'unstyled',
+      key: "ecmnc",
+      text: "Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.",
+      type: "unstyled",
       depth: 0,
       inlineStyleRanges: [
-        { offset: 0, length: 14, style: 'BOLD' },
-        { offset: 133, length: 9, style: 'BOLD' },
+        { offset: 0, length: 14, style: "BOLD" },
+        { offset: 133, length: 9, style: "BOLD" },
       ],
       entityRanges: [],
       data: {},
     },
     {
-      key: 'fe2gn',
-      text: '',
-      type: 'unstyled',
+      key: "fe2gn",
+      text: "",
+      type: "unstyled",
       depth: 0,
       inlineStyleRanges: [],
       entityRanges: [],
       data: {},
     },
     {
-      key: '4481k',
-      text: 'With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.',
-      type: 'unstyled',
+      key: "4481k",
+      text: "With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.",
+      type: "unstyled",
       depth: 0,
       inlineStyleRanges: [
-        { offset: 34, length: 19, style: 'BOLD' },
-        { offset: 117, length: 4, style: 'BOLD' },
-        { offset: 68, length: 10, style: 'ANYCUSTOMSTYLE' },
+        { offset: 34, length: 19, style: "BOLD" },
+        { offset: 117, length: 4, style: "BOLD" },
+        { offset: 68, length: 10, style: "ANYCUSTOMSTYLE" },
       ],
       entityRanges: [],
       data: {},
     },
   ],
   entityMap: {},
-}
+};
 
 // Custom overrides for each style
 const styleMap = {
   CODE: {
-    backgroundColor: 'rgba(0, 0, 0, 0.05)',
+    backgroundColor: "rgba(0, 0, 0, 0.05)",
     fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
     fontSize: 16,
     padding: 4,
   },
   BOLD: {
-    color: '#395296',
-    fontWeight: 'bold',
+    color: "#395296",
+    fontWeight: "bold",
   },
   ANYCUSTOMSTYLE: {
-    color: '#00e400',
+    color: "#00e400",
   },
-}
+};
 
 export default class App extends Component {
   constructor(props) {
-    super(props)
+    super(props);
     this.state = {
       editorState: EditorState.createWithContent(convertFromRaw(initialData)),
       showToolbar: false,
@@ -106,37 +106,37 @@ export default class App extends Component {
         y: 0,
       },
       showRawData: false,
-    }
+    };
 
-    this.focus = () => this.editor.focus()
-    this.onChange = (editorState) => this.setState({ editorState })
+    this.focus = () => this.editor.focus();
+    this.onChange = (editorState) => this.setState({ editorState });
   }
 
   onClickEditor = () => {
-    this.focus()
-    this.checkSelectedText()
-  }
+    this.focus();
+    this.checkSelectedText();
+  };
 
   // 1- Check if some text is selected
   checkSelectedText = () => {
-    if (typeof window !== 'undefined') {
-      const text = window.getSelection().toString()
-      if (text !== '') {
+    if (typeof window !== "undefined") {
+      const text = window.getSelection().toString();
+      if (text !== "") {
         // 1-a Define the selection coordinates
-        this.setSelectionXY()
+        this.setSelectionXY();
       } else {
         // Hide the toolbar if nothing is selected
         this.setState({
           showToolbar: false,
-        })
+        });
       }
     }
-  }
+  };
 
   // 2- Identify the selection coordinates
   setSelectionXY = () => {
-    var r = window.getSelection().getRangeAt(0).getBoundingClientRect()
-    var relative = document.body.parentNode.getBoundingClientRect()
+    var r = window.getSelection().getRangeAt(0).getBoundingClientRect();
+    var relative = document.body.parentNode.getBoundingClientRect();
     // 2-a Set the selection coordinates in the state
     this.setState(
       {
@@ -147,9 +147,9 @@ export default class App extends Component {
           h: r.height,
         },
       },
-      () => this.showToolbar()
-    )
-  }
+      () => this.showToolbar(),
+    );
+  };
 
   // 3- Show the toolbar
   showToolbar = () => {
@@ -157,9 +157,9 @@ export default class App extends Component {
       {
         showToolbar: true,
       },
-      () => this.measureToolbar()
-    )
-  }
+      () => this.measureToolbar(),
+    );
+  };
 
   // 4- The toolbar was hidden until now
   measureToolbar = () => {
@@ -171,97 +171,97 @@ export default class App extends Component {
           h: this.elemHeight,
         },
       },
-      () => this.setToolbarXY()
-    )
-  }
+      () => this.setToolbarXY(),
+    );
+  };
 
   // 5- Now that we have all measures, define toolbar coordinates
   setToolbarXY = () => {
-    let coordinates = {}
+    let coordinates = {};
 
     const {
       selectionMeasures,
       selectionCoordinates,
       toolbarMeasures,
       windowWidth,
-    } = this.state
+    } = this.state;
 
-    const hiddenTop = selectionCoordinates.y < toolbarMeasures.h
+    const hiddenTop = selectionCoordinates.y < toolbarMeasures.h;
     const hiddenRight =
-      windowWidth - selectionCoordinates.x < toolbarMeasures.w / 2
-    const hiddenLeft = selectionCoordinates.x < toolbarMeasures.w / 2
+      windowWidth - selectionCoordinates.x < toolbarMeasures.w / 2;
+    const hiddenLeft = selectionCoordinates.x < toolbarMeasures.w / 2;
 
     const normalX =
-      selectionCoordinates.x - toolbarMeasures.w / 2 + selectionMeasures.w / 2
-    const normalY = selectionCoordinates.y - toolbarMeasures.h
+      selectionCoordinates.x - toolbarMeasures.w / 2 + selectionMeasures.w / 2;
+    const normalY = selectionCoordinates.y - toolbarMeasures.h;
 
-    const invertedY = selectionCoordinates.y + selectionMeasures.h
-    const moveXToLeft = windowWidth - toolbarMeasures.w
-    const moveXToRight = 0
+    const invertedY = selectionCoordinates.y + selectionMeasures.h;
+    const moveXToLeft = windowWidth - toolbarMeasures.w;
+    const moveXToRight = 0;
 
     coordinates = {
       x: normalX,
       y: normalY,
-    }
+    };
 
     if (hiddenTop) {
-      coordinates.y = invertedY
+      coordinates.y = invertedY;
     }
 
     if (hiddenRight) {
-      coordinates.x = moveXToLeft
+      coordinates.x = moveXToLeft;
     }
 
     if (hiddenLeft) {
-      coordinates.x = moveXToRight
+      coordinates.x = moveXToRight;
     }
 
     this.setState({
       toolbarCoordinates: coordinates,
-    })
-  }
+    });
+  };
 
   handleKeyCommand = (command) => {
-    const { editorState } = this.state
-    const newState = RichUtils.handleKeyCommand(editorState, command)
+    const { editorState } = this.state;
+    const newState = RichUtils.handleKeyCommand(editorState, command);
     if (newState) {
-      this.onChange(newState)
-      return true
+      this.onChange(newState);
+      return true;
     }
-    return false
-  }
+    return false;
+  };
 
   toggleToolbar = (inlineStyle) => {
     this.onChange(
-      RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle)
-    )
-  }
+      RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle),
+    );
+  };
 
   render() {
-    const { editorState } = this.state
+    const { editorState } = this.state;
     // Make sure we're not on the ssr
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       // Let's stick the toolbar to the selection
       // when the window is resized
-      window.addEventListener('resize', this.checkSelectedText)
+      window.addEventListener("resize", this.checkSelectedText);
     }
 
     const toolbarStyle = {
-      display: this.state.showToolbar ? 'block' : 'none',
-      backgroundColor: 'black',
-      color: 'white',
-      position: 'absolute',
+      display: this.state.showToolbar ? "block" : "none",
+      backgroundColor: "black",
+      color: "white",
+      position: "absolute",
       left: this.state.toolbarCoordinates.x,
       top: this.state.toolbarCoordinates.y,
       zIndex: 999,
       padding: 10,
-    }
+    };
     return (
       <div>
         <div
           ref={(elem) => {
-            this.elemWidth = elem ? elem.clientWidth : 0
-            this.elemHeight = elem ? elem.clientHeight : 0
+            this.elemWidth = elem ? elem.clientWidth : 0;
+            this.elemHeight = elem ? elem.clientHeight : 0;
           }}
           style={toolbarStyle}
         >
@@ -277,7 +277,7 @@ export default class App extends Component {
             editorKey="foobar"
             spellCheck={false}
             ref={(element) => {
-              this.editor = element
+              this.editor = element;
             }}
           />
         </div>
@@ -287,48 +287,48 @@ export default class App extends Component {
               this.setState({ showRawData: !this.state.showRawData })
             }
           >
-            {!this.state.showRawData ? 'Show' : 'Hide'} Raw Data
+            {!this.state.showRawData ? "Show" : "Hide"} Raw Data
           </button>
           <br />
           {this.state.showRawData &&
             JSON.stringify(convertToRaw(editorState.getCurrentContent()))}
         </div>
       </div>
-    )
+    );
   }
 }
 
 class ToolbarButton extends Component {
   constructor() {
-    super()
+    super();
     this.onToggle = (e) => {
-      e.preventDefault()
-      this.props.onToggle(this.props.style)
-    }
+      e.preventDefault();
+      this.props.onToggle(this.props.style);
+    };
   }
 
   render() {
     const buttonStyle = {
       padding: 10,
-    }
+    };
     return (
       <span onMouseDown={this.onToggle} style={buttonStyle}>
         {this.props.label}
       </span>
-    )
+    );
   }
 }
 
 var toolbarItems = [
-  { label: 'Bold', style: 'BOLD' },
-  { label: 'Italic', style: 'ITALIC' },
-  { label: 'Underline', style: 'UNDERLINE' },
-  { label: 'Code', style: 'CODE' },
-  { label: 'Surprise', style: 'ANYCUSTOMSTYLE' },
-]
+  { label: "Bold", style: "BOLD" },
+  { label: "Italic", style: "ITALIC" },
+  { label: "Underline", style: "UNDERLINE" },
+  { label: "Code", style: "CODE" },
+  { label: "Surprise", style: "ANYCUSTOMSTYLE" },
+];
 
 const ToolBar = (props) => {
-  var currentStyle = props.editorState.getCurrentInlineStyle()
+  var currentStyle = props.editorState.getCurrentInlineStyle();
   return (
     <div>
       {toolbarItems.map((toolbarItem) => (
@@ -341,5 +341,5 @@ const ToolBar = (props) => {
         />
       ))}
     </div>
-  )
-}
+  );
+};
diff --git a/examples/with-dynamic-import/components/Header.tsx b/examples/with-dynamic-import/components/Header.tsx
index 83c47755e6..7357caade4 100644
--- a/examples/with-dynamic-import/components/Header.tsx
+++ b/examples/with-dynamic-import/components/Header.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -11,5 +11,5 @@ export default function Header() {
         About
       </Link>
     </div>
-  )
+  );
 }
diff --git a/examples/with-dynamic-import/components/hello1.tsx b/examples/with-dynamic-import/components/hello1.tsx
index cc323ac454..91cf9b844a 100644
--- a/examples/with-dynamic-import/components/hello1.tsx
+++ b/examples/with-dynamic-import/components/hello1.tsx
@@ -1,3 +1,3 @@
 export default function Hello1() {
-  return <p>Hello World 1 (imported dynamically) </p>
+  return <p>Hello World 1 (imported dynamically) </p>;
 }
diff --git a/examples/with-dynamic-import/components/hello2.tsx b/examples/with-dynamic-import/components/hello2.tsx
index 4efb8ff5d6..3e4bcd8a22 100644
--- a/examples/with-dynamic-import/components/hello2.tsx
+++ b/examples/with-dynamic-import/components/hello2.tsx
@@ -1,3 +1,3 @@
 export default function Hello2() {
-  return <p>Hello World 2 (imported dynamically) </p>
+  return <p>Hello World 2 (imported dynamically) </p>;
 }
diff --git a/examples/with-dynamic-import/components/hello3.tsx b/examples/with-dynamic-import/components/hello3.tsx
index 7b7c737dcd..5a50e43f35 100644
--- a/examples/with-dynamic-import/components/hello3.tsx
+++ b/examples/with-dynamic-import/components/hello3.tsx
@@ -1,3 +1,3 @@
 export default function Hello3() {
-  return <p>Hello World 3 (imported dynamically) </p>
+  return <p>Hello World 3 (imported dynamically) </p>;
 }
diff --git a/examples/with-dynamic-import/components/hello4.tsx b/examples/with-dynamic-import/components/hello4.tsx
index 9c256f640a..57a5eb37e4 100644
--- a/examples/with-dynamic-import/components/hello4.tsx
+++ b/examples/with-dynamic-import/components/hello4.tsx
@@ -1,3 +1,3 @@
 export default function Hello4() {
-  return <p>Hello World 4 (imported dynamically) </p>
+  return <p>Hello World 4 (imported dynamically) </p>;
 }
diff --git a/examples/with-dynamic-import/components/hello5.tsx b/examples/with-dynamic-import/components/hello5.tsx
index 4cbe8c06dc..e6cdf3739f 100644
--- a/examples/with-dynamic-import/components/hello5.tsx
+++ b/examples/with-dynamic-import/components/hello5.tsx
@@ -1,3 +1,3 @@
 export default function Hello5() {
-  return <p>Hello World 5 (imported dynamically) </p>
+  return <p>Hello World 5 (imported dynamically) </p>;
 }
diff --git a/examples/with-dynamic-import/pages/index.tsx b/examples/with-dynamic-import/pages/index.tsx
index ec04c5878a..f923e6bea3 100644
--- a/examples/with-dynamic-import/pages/index.tsx
+++ b/examples/with-dynamic-import/pages/index.tsx
@@ -1,29 +1,29 @@
-import { useState } from 'react'
-import Header from '../components/Header'
-import dynamic from 'next/dynamic'
+import { useState } from "react";
+import Header from "../components/Header";
+import dynamic from "next/dynamic";
 
-const DynamicComponent1 = dynamic(() => import('../components/hello1'))
+const DynamicComponent1 = dynamic(() => import("../components/hello1"));
 
 const DynamicComponent2WithCustomLoading = dynamic(
-  () => import('../components/hello2'),
-  { loading: () => <p>Loading caused by client page transition ...</p> }
-)
+  () => import("../components/hello2"),
+  { loading: () => <p>Loading caused by client page transition ...</p> },
+);
 
 const DynamicComponent3WithNoSSR = dynamic(
-  () => import('../components/hello3'),
-  { loading: () => <p>Loading ...</p>, ssr: false }
-)
+  () => import("../components/hello3"),
+  { loading: () => <p>Loading ...</p>, ssr: false },
+);
 
-const DynamicComponent4 = dynamic(() => import('../components/hello4'))
+const DynamicComponent4 = dynamic(() => import("../components/hello4"));
 
-const DynamicComponent5 = dynamic(() => import('../components/hello5'))
+const DynamicComponent5 = dynamic(() => import("../components/hello5"));
 
-const names = ['Tim', 'Joe', 'Bel', 'Max', 'Lee']
+const names = ["Tim", "Joe", "Bel", "Max", "Lee"];
 
 const IndexPage = () => {
-  const [showMore, setShowMore] = useState(false)
-  const [falsyField] = useState(false)
-  const [results, setResults] = useState()
+  const [showMore, setShowMore] = useState(false);
+  const [falsyField] = useState(false);
+  const [results, setResults] = useState();
 
   return (
     <div>
@@ -46,23 +46,23 @@ const IndexPage = () => {
       <button onClick={() => setShowMore(!showMore)}>Toggle Show More</button>
 
       {/* Load library on demand */}
-      <div style={{ marginTop: '1rem' }}>
+      <div style={{ marginTop: "1rem" }}>
         <input
           type="text"
           placeholder="Search"
           onChange={async (e) => {
-            const { value } = e.currentTarget
+            const { value } = e.currentTarget;
             // Dynamically load fuse.js
-            const Fuse = (await import('fuse.js')).default
-            const fuse = new Fuse(names)
+            const Fuse = (await import("fuse.js")).default;
+            const fuse = new Fuse(names);
 
-            setResults(fuse.search(value))
+            setResults(fuse.search(value));
           }}
         />
         <pre>Results: {JSON.stringify(results, null, 2)}</pre>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default IndexPage
+export default IndexPage;
diff --git a/examples/with-edgedb/README.md b/examples/with-edgedb/README.md
index 6812250095..a901bda95a 100644
--- a/examples/with-edgedb/README.md
+++ b/examples/with-edgedb/README.md
@@ -75,7 +75,7 @@ $ npx edgeql-js
 The query builder consists of several files that are generated into the `dbschema/edgeql-js` directory. Import it like so:
 
 ```ts
-import e from './dbschema/edgeql-js'
+import e from "./dbschema/edgeql-js";
 ```
 
 ### Seed the database
diff --git a/examples/with-edgedb/client.ts b/examples/with-edgedb/client.ts
index 4cb2a65302..889f2988f8 100644
--- a/examples/with-edgedb/client.ts
+++ b/examples/with-edgedb/client.ts
@@ -1,9 +1,9 @@
-import { createClient } from 'edgedb'
-import e from './dbschema/edgeql-js'
+import { createClient } from "edgedb";
+import e from "./dbschema/edgeql-js";
 
 // reads value of EDGEDB_DSN automatically
 export const client = createClient({
   // TLS configuration is beyond the scope of this example project
-  tlsSecurity: 'insecure',
-})
-export { e }
+  tlsSecurity: "insecure",
+});
+export { e };
diff --git a/examples/with-edgedb/components/Header.tsx b/examples/with-edgedb/components/Header.tsx
index 139fae02ad..567546188b 100644
--- a/examples/with-edgedb/components/Header.tsx
+++ b/examples/with-edgedb/components/Header.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import Link from 'next/link'
+import React from "react";
+import Link from "next/link";
 
 const Header: React.FC = () => {
   return (
@@ -49,7 +49,7 @@ const Header: React.FC = () => {
         }
       `}</style>
     </nav>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;
diff --git a/examples/with-edgedb/components/Layout.tsx b/examples/with-edgedb/components/Layout.tsx
index 2ccd1e6831..c0fa19c8af 100644
--- a/examples/with-edgedb/components/Layout.tsx
+++ b/examples/with-edgedb/components/Layout.tsx
@@ -1,12 +1,12 @@
-import React, { ReactNode } from 'react'
-import Header from './Header'
+import React, { ReactNode } from "react";
+import Header from "./Header";
 
 type Props = {
-  children: ReactNode
-}
+  children: ReactNode;
+};
 
 const Layout: React.FC<Props> = (props) => (
-  <div style={{ paddingBottom: '30px' }}>
+  <div style={{ paddingBottom: "30px" }}>
     <Header />
     <div className="layout">{props.children}</div>
     <style jsx global>{`
@@ -24,9 +24,9 @@ const Layout: React.FC<Props> = (props) => (
         margin: 0;
         padding: 0;
         font-size: 16px;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-          Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-          'Segoe UI Symbol';
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+          "Segoe UI Symbol";
         background: rgba(0, 0, 0, 0);
       }
 
@@ -46,6 +46,6 @@ const Layout: React.FC<Props> = (props) => (
       }
     `}</style>
   </div>
-)
+);
 
-export default Layout
+export default Layout;
diff --git a/examples/with-edgedb/components/Post.tsx b/examples/with-edgedb/components/Post.tsx
index 04459d18b0..608cc63418 100644
--- a/examples/with-edgedb/components/Post.tsx
+++ b/examples/with-edgedb/components/Post.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-import ReactMarkdown from 'react-markdown'
-import Link from 'next/link'
-import { PostProps } from '../pages/blog/[id]'
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import Link from "next/link";
+import { PostProps } from "../pages/blog/[id]";
 
 const Post: React.FC<{ post: PostProps }> = ({ post }) => {
   return (
@@ -11,8 +11,8 @@ const Post: React.FC<{ post: PostProps }> = ({ post }) => {
         <small>By {post.authorName}</small>
         <br />
         <br />
-        <ReactMarkdown className={'react-markdown'}>
-          {post.content || ''}
+        <ReactMarkdown className={"react-markdown"}>
+          {post.content || ""}
         </ReactMarkdown>
         <style jsx>{`
           div {
@@ -34,7 +34,7 @@ const Post: React.FC<{ post: PostProps }> = ({ post }) => {
         `}</style>
       </div>
     </Link>
-  )
-}
+  );
+};
 
-export default Post
+export default Post;
diff --git a/examples/with-edgedb/pages/api/post/[id].ts b/examples/with-edgedb/pages/api/post/[id].ts
index a1971a52bc..14aff9c149 100644
--- a/examples/with-edgedb/pages/api/post/[id].ts
+++ b/examples/with-edgedb/pages/api/post/[id].ts
@@ -1,44 +1,44 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { client, e } from '../../../client'
+import type { NextApiRequest, NextApiResponse } from "next";
+import { client, e } from "../../../client";
 
 // PATCH /api/post/:id
 async function updatePost(
   postId: string,
-  data: { title?: string; content?: string }
+  data: { title?: string; content?: string },
 ) {
   return await e
     .update(e.Post, (post) => ({
-      filter: e.op(post.id, '=', e.uuid(postId)),
+      filter: e.op(post.id, "=", e.uuid(postId)),
       set: {
         title: data.title,
         content: data.content,
       },
     }))
-    .run(client)
+    .run(client);
 }
 
 // DELETE /api/post/:id
 async function deletePost(postId: string) {
   return await e
     .delete(e.Post, (post) => ({
-      filter: e.op(post.id, '=', e.uuid(postId)),
+      filter: e.op(post.id, "=", e.uuid(postId)),
     }))
-    .run(client)
+    .run(client);
 }
 
 export default async function handle(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  const postId = req.query.id as string
+  const postId = req.query.id as string;
 
-  if (req.method === 'DELETE') {
-    res.json(await deletePost(postId))
-  } else if (req.method === 'PATCH') {
-    res.json(await updatePost(postId, req.body))
+  if (req.method === "DELETE") {
+    res.json(await deletePost(postId));
+  } else if (req.method === "PATCH") {
+    res.json(await updatePost(postId, req.body));
   } else {
     throw new Error(
-      `The HTTP ${req.method} method is not supported at this route.`
-    )
+      `The HTTP ${req.method} method is not supported at this route.`,
+    );
   }
 }
diff --git a/examples/with-edgedb/pages/api/post/index.ts b/examples/with-edgedb/pages/api/post/index.ts
index 2c073d10e3..9894c30bfc 100644
--- a/examples/with-edgedb/pages/api/post/index.ts
+++ b/examples/with-edgedb/pages/api/post/index.ts
@@ -1,13 +1,13 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { client, e } from '../../../client'
+import type { NextApiRequest, NextApiResponse } from "next";
+import { client, e } from "../../../client";
 
 // POST /api/post
 // body {title: string; content: string; authorName: string}
 export default async function handle(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  const { title, content, authorName } = req.body
+  const { title, content, authorName } = req.body;
 
   const result = await e
     .insert(e.Post, {
@@ -15,6 +15,6 @@ export default async function handle(
       content,
       authorName,
     })
-    .run(client)
-  res.json(result)
+    .run(client);
+  res.json(result);
 }
diff --git a/examples/with-edgedb/pages/api/publish/[id].ts b/examples/with-edgedb/pages/api/publish/[id].ts
index accb4bc9bf..e28b84abdd 100644
--- a/examples/with-edgedb/pages/api/publish/[id].ts
+++ b/examples/with-edgedb/pages/api/publish/[id].ts
@@ -1,19 +1,19 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { client, e } from '../../../client'
+import type { NextApiRequest, NextApiResponse } from "next";
+import { client, e } from "../../../client";
 
 // PUT /api/publish/:id
 export default async function handle(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  const postId = req.query.id as string
+  const postId = req.query.id as string;
   const post = await e
     .update(e.Post, (post) => ({
-      filter: e.op(post.id, '=', e.uuid(postId)),
+      filter: e.op(post.id, "=", e.uuid(postId)),
       set: {
         published: e.std.datetime_of_statement(),
       },
     }))
-    .run(client)
-  res.json(post)
+    .run(client);
+  res.json(post);
 }
diff --git a/examples/with-edgedb/pages/blog/[id].tsx b/examples/with-edgedb/pages/blog/[id].tsx
index f9d0b79e53..837a80c522 100644
--- a/examples/with-edgedb/pages/blog/[id].tsx
+++ b/examples/with-edgedb/pages/blog/[id].tsx
@@ -1,113 +1,113 @@
-import React, { useState } from 'react'
-import { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next'
-import Layout from '../../components/Layout'
-import Router from 'next/router'
-import { client, e } from '../../client'
+import React, { useState } from "react";
+import { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
+import Layout from "../../components/Layout";
+import Router from "next/router";
+import { client, e } from "../../client";
 
-import ReactMarkdown from 'react-markdown'
+import ReactMarkdown from "react-markdown";
 
 async function update(
   id: string,
-  data: { title?: string; content?: string }
+  data: { title?: string; content?: string },
 ): Promise<void> {
   await fetch(`/api/post/${id}`, {
-    method: 'PATCH',
-    headers: { 'Content-Type': 'application/json' },
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
     body: JSON.stringify(data),
-  })
-  alert('Draft saved!')
+  });
+  alert("Draft saved!");
 }
 
 async function publish(id: string): Promise<void> {
   await fetch(`/api/publish/${id}`, {
-    method: 'PUT',
-  })
-  await Router.push(`/blog/${id}`)
+    method: "PUT",
+  });
+  await Router.push(`/blog/${id}`);
 }
 
 async function destroy(id: string): Promise<void> {
   await fetch(`/api/post/${id}`, {
-    method: 'DELETE',
-  })
-  await Router.push('/')
+    method: "DELETE",
+  });
+  await Router.push("/");
 }
 
 const Post: React.FC<PostProps> = (props) => {
   const [patch, setPatch] = useState<{
-    title?: string
-    content?: string
+    title?: string;
+    content?: string;
   }>({
     title: props.title,
     content: props.content || undefined,
-  })
+  });
 
   if (props.publishedISO) {
     return (
       <Layout>
         <div
           style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'stretch',
-            margin: 'auto',
-            maxWidth: '600px',
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            margin: "auto",
+            maxWidth: "600px",
           }}
         >
-          <h1 style={{ paddingTop: '100px', margin: 0, paddingBottom: '8px' }}>
+          <h1 style={{ paddingTop: "100px", margin: 0, paddingBottom: "8px" }}>
             {props.title}
           </h1>
-          <p style={{ fontSize: '14pt', margin: 0, color: '#888' }}>
+          <p style={{ fontSize: "14pt", margin: 0, color: "#888" }}>
             By {props.authorName}
           </p>
           <br />
           <br />
-          <ReactMarkdown>{props.content || ''}</ReactMarkdown>
+          <ReactMarkdown>{props.content || ""}</ReactMarkdown>
         </div>
       </Layout>
-    )
+    );
   }
 
   return (
     <Layout>
       <div
         style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'stretch',
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "stretch",
         }}
       >
         <input
           value={patch.title}
           onChange={(e) => {
-            setPatch({ ...patch, title: e.target.value })
+            setPatch({ ...patch, title: e.target.value });
           }}
         />
 
         <textarea
           rows={25}
-          value={patch.content || ''}
+          value={patch.content || ""}
           onChange={(e) => {
-            setPatch({ ...patch, content: e.target.value })
+            setPatch({ ...patch, content: e.target.value });
           }}
         />
 
-        <div style={{ display: 'flex', flexDirection: 'row' }}>
+        <div style={{ display: "flex", flexDirection: "row" }}>
           <button
-            style={{ backgroundColor: '#0E61FE', color: 'white' }}
+            style={{ backgroundColor: "#0E61FE", color: "white" }}
             onClick={() => update(props.id, patch)}
           >
-            {props.publishedISO ? 'Update' : 'Save draft'}
+            {props.publishedISO ? "Update" : "Save draft"}
           </button>
           {!props.publishedISO && (
             <button
-              style={{ backgroundColor: '#0E61FE', color: 'white' }}
+              style={{ backgroundColor: "#0E61FE", color: "white" }}
               onClick={() => publish(props.id)}
             >
               Publish
             </button>
           )}
           <button
-            style={{ border: '2px solid red', color: 'red' }}
+            style={{ border: "2px solid red", color: "red" }}
             onClick={() => destroy(props.id)}
           >
             Delete
@@ -148,11 +148,11 @@ const Post: React.FC<PostProps> = (props) => {
         }
       `}</style>
     </Layout>
-  )
-}
+  );
+};
 
 export const getServerSideProps = async (
-  context?: GetServerSidePropsContext
+  context?: GetServerSidePropsContext,
 ) => {
   const post = await e
     .select(e.Post, (post) => ({
@@ -161,12 +161,12 @@ export const getServerSideProps = async (
       content: true,
       publishedISO: true,
       authorName: true,
-      filter: e.op(post.id, '=', e.uuid(context!.params!.id as string)),
+      filter: e.op(post.id, "=", e.uuid(context!.params!.id as string)),
     }))
-    .run(client)
+    .run(client);
 
-  return { props: post! }
-}
+  return { props: post! };
+};
 
-export type PostProps = InferGetServerSidePropsType<typeof getServerSideProps>
-export default Post
+export type PostProps = InferGetServerSidePropsType<typeof getServerSideProps>;
+export default Post;
diff --git a/examples/with-edgedb/pages/create.tsx b/examples/with-edgedb/pages/create.tsx
index 3a204348d3..b8c12f09a7 100644
--- a/examples/with-edgedb/pages/create.tsx
+++ b/examples/with-edgedb/pages/create.tsx
@@ -1,28 +1,28 @@
-import React, { useState } from 'react'
-import Layout from '../components/Layout'
-import Router from 'next/router'
-import Link from 'next/link'
+import React, { useState } from "react";
+import Layout from "../components/Layout";
+import Router from "next/router";
+import Link from "next/link";
 
 const Draft: React.FC = () => {
-  const [title, setTitle] = useState('')
-  const [content, setContent] = useState('')
-  const [authorName, setAuthorName] = useState('')
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [authorName, setAuthorName] = useState("");
 
   const submitData = async (e: React.SyntheticEvent) => {
-    e.preventDefault()
+    e.preventDefault();
     try {
-      const body = { title, content, authorName }
+      const body = { title, content, authorName };
       const result = await fetch(`/api/post`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify(body),
-      })
-      await result.json()
-      await Router.push('/drafts')
+      });
+      await result.json();
+      await Router.push("/drafts");
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-  }
+  };
 
   return (
     <Layout>
@@ -68,7 +68,7 @@ const Draft: React.FC = () => {
           align-items: center;
         }
 
-        input[type='text'],
+        input[type="text"],
         textarea {
           width: 100%;
           padding: 0.5rem;
@@ -77,7 +77,7 @@ const Draft: React.FC = () => {
           border: 0.125rem solid rgba(0, 0, 0, 0.2);
         }
 
-        input[type='submit'] {
+        input[type="submit"] {
           cursor: pointer;
           border: 2px solid transparent;
           border-radius: 4px;
@@ -91,7 +91,7 @@ const Draft: React.FC = () => {
         }
       `}</style>
     </Layout>
-  )
-}
+  );
+};
 
-export default Draft
+export default Draft;
diff --git a/examples/with-edgedb/pages/drafts.tsx b/examples/with-edgedb/pages/drafts.tsx
index 1cd8683c53..c07fc66528 100644
--- a/examples/with-edgedb/pages/drafts.tsx
+++ b/examples/with-edgedb/pages/drafts.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
-import { GetServerSideProps } from 'next'
-import Layout from '../components/Layout'
-import Post from '../components/Post'
-import { PostProps } from './blog/[id]'
-import { client, e } from '../client'
+import React from "react";
+import { GetServerSideProps } from "next";
+import Layout from "../components/Layout";
+import Post from "../components/Post";
+import { PostProps } from "./blog/[id]";
+import { client, e } from "../client";
 
 type Props = {
-  drafts: PostProps[]
-}
+  drafts: PostProps[];
+};
 
 const Drafts: React.FC<Props> = (props) => {
   return (
@@ -21,7 +21,7 @@ const Drafts: React.FC<Props> = (props) => {
                   <Post post={post} />
                 </div>
               ))
-            : 'No drafts yet.'}
+            : "No drafts yet."}
         </main>
       </div>
       <style jsx>{`
@@ -41,8 +41,8 @@ const Drafts: React.FC<Props> = (props) => {
         }
       `}</style>
     </Layout>
-  )
-}
+  );
+};
 
 export const getServerSideProps: GetServerSideProps = async () => {
   const drafts = await e
@@ -51,12 +51,12 @@ export const getServerSideProps: GetServerSideProps = async () => {
       title: true,
       content: true,
       authorName: true,
-      filter: e.op('not', e.op('exists', post.published)),
+      filter: e.op("not", e.op("exists", post.published)),
     }))
-    .run(client)
+    .run(client);
   return {
     props: { drafts },
-  }
-}
+  };
+};
 
-export default Drafts
+export default Drafts;
diff --git a/examples/with-edgedb/pages/index.tsx b/examples/with-edgedb/pages/index.tsx
index 677cb732c6..5d946c2913 100644
--- a/examples/with-edgedb/pages/index.tsx
+++ b/examples/with-edgedb/pages/index.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
-import { GetServerSideProps } from 'next'
-import Layout from '../components/Layout'
-import Post from '../components/Post'
-import { PostProps } from './blog/[id]'
-import { client, e } from '../client'
+import React from "react";
+import { GetServerSideProps } from "next";
+import Layout from "../components/Layout";
+import Post from "../components/Post";
+import { PostProps } from "./blog/[id]";
+import { client, e } from "../client";
 
 type Props = {
-  feed: PostProps[]
-}
+  feed: PostProps[];
+};
 
 const Blog: React.FC<Props> = (props) => {
   return (
@@ -43,8 +43,8 @@ const Blog: React.FC<Props> = (props) => {
         }
       `}</style>
     </Layout>
-  )
-}
+  );
+};
 
 export const getServerSideProps: GetServerSideProps = async () => {
   const feed = await e
@@ -54,12 +54,12 @@ export const getServerSideProps: GetServerSideProps = async () => {
       content: true,
       authorName: true,
       publishedISO: true,
-      filter: e.op('exists', post.published),
+      filter: e.op("exists", post.published),
     }))
-    .run(client)
+    .run(client);
   return {
     props: { feed },
-  }
-}
+  };
+};
 
-export default Blog
+export default Blog;
diff --git a/examples/with-edgedb/seed.ts b/examples/with-edgedb/seed.ts
index 87f940d7d5..366c6add56 100644
--- a/examples/with-edgedb/seed.ts
+++ b/examples/with-edgedb/seed.ts
@@ -1,36 +1,36 @@
-import { client, e } from './client'
+import { client, e } from "./client";
 
 const posts = [
   {
-    title: 'Join the EdgeDB Discord',
-    content: 'Just follow [this link](https://edgedb.com/p/discord).',
+    title: "Join the EdgeDB Discord",
+    content: "Just follow [this link](https://edgedb.com/p/discord).",
     published: true,
-    authorName: 'Bobby',
+    authorName: "Bobby",
   },
   {
-    title: 'Follow EdgeDB on Twitter',
+    title: "Follow EdgeDB on Twitter",
     content: "We're [@edgedatabase](https://www.twitter.com/edgedatabase).",
     published: true,
-    authorName: 'Sally',
+    authorName: "Sally",
   },
   {
-    title: 'Star EdgeDB on GitHub',
+    title: "Star EdgeDB on GitHub",
     content:
-      'The repo is at [github.com/edgedb/edgedb](https://www.github.com/edgedb/edgedb).',
+      "The repo is at [github.com/edgedb/edgedb](https://www.github.com/edgedb/edgedb).",
     published: true,
-    authorName: 'Polly',
+    authorName: "Polly",
   },
   {
-    title: 'Try the EdgeDB query builder for TypeScript',
+    title: "Try the EdgeDB query builder for TypeScript",
     content:
-      'The docs are [here](https://www.edgedb.com/docs/clients/01_js/index).',
+      "The docs are [here](https://www.edgedb.com/docs/clients/01_js/index).",
     published: false,
-    authorName: 'Polly',
+    authorName: "Polly",
   },
-]
+];
 
 async function main() {
-  console.log(`Start seeding...`)
+  console.log(`Start seeding...`);
 
   for (const post of posts) {
     const newPost = await e
@@ -38,14 +38,14 @@ async function main() {
         ...post,
         published: post.published ? e.std.datetime_current() : null,
       })
-      .run(client)
+      .run(client);
 
-    console.log(`Created Post ${newPost.id}`)
+    console.log(`Created Post ${newPost.id}`);
   }
-  console.log(`Seeding complete!`)
+  console.log(`Seeding complete!`);
 }
 
 main().catch((e) => {
-  console.error(e)
-  process.exit(1)
-})
+  console.error(e);
+  process.exit(1);
+});
diff --git a/examples/with-elasticsearch/lib/elasticsearch.ts b/examples/with-elasticsearch/lib/elasticsearch.ts
index cd5e21661c..76ba2389a7 100644
--- a/examples/with-elasticsearch/lib/elasticsearch.ts
+++ b/examples/with-elasticsearch/lib/elasticsearch.ts
@@ -1,12 +1,12 @@
-import { Client } from '@elastic/elasticsearch'
+import { Client } from "@elastic/elasticsearch";
 
 export async function connectToElasticsearch() {
-  const ESS_CLOUD_ID = process.env.ESS_CLOUD_ID
-  const ESS_CLOUD_USERNAME = process.env.ESS_CLOUD_USERNAME
-  const ESS_CLOUD_PASSWORD = process.env.ESS_CLOUD_PASSWORD
+  const ESS_CLOUD_ID = process.env.ESS_CLOUD_ID;
+  const ESS_CLOUD_USERNAME = process.env.ESS_CLOUD_USERNAME;
+  const ESS_CLOUD_PASSWORD = process.env.ESS_CLOUD_PASSWORD;
 
   if (!ESS_CLOUD_ID || !ESS_CLOUD_USERNAME || !ESS_CLOUD_PASSWORD) {
-    return 'ERR_ENV_NOT_DEFINED'
+    return "ERR_ENV_NOT_DEFINED";
   }
 
   return new Client({
@@ -17,5 +17,5 @@ export async function connectToElasticsearch() {
       username: ESS_CLOUD_USERNAME,
       password: ESS_CLOUD_PASSWORD,
     },
-  })
+  });
 }
diff --git a/examples/with-elasticsearch/pages/_app.tsx b/examples/with-elasticsearch/pages/_app.tsx
index 0469e7f0e2..160eac17fa 100644
--- a/examples/with-elasticsearch/pages/_app.tsx
+++ b/examples/with-elasticsearch/pages/_app.tsx
@@ -1,6 +1,6 @@
-import type { AppProps } from 'next/app'
-import '@/styles/globals.css'
+import type { AppProps } from "next/app";
+import "@/styles/globals.css";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-elasticsearch/pages/index.tsx b/examples/with-elasticsearch/pages/index.tsx
index d7edcb071c..ea6d9fe8ff 100644
--- a/examples/with-elasticsearch/pages/index.tsx
+++ b/examples/with-elasticsearch/pages/index.tsx
@@ -1,23 +1,23 @@
-import type { InferGetServerSidePropsType } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '@/styles/Home.module.css'
-import { Inter } from 'next/font/google'
-import { connectToElasticsearch } from '@/lib/elasticsearch'
+import type { InferGetServerSidePropsType } from "next";
+import Head from "next/head";
+import Image from "next/image";
+import styles from "@/styles/Home.module.css";
+import { Inter } from "next/font/google";
+import { connectToElasticsearch } from "@/lib/elasticsearch";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
-type HomePageProps = InferGetServerSidePropsType<typeof getServerSideProps>
+type HomePageProps = InferGetServerSidePropsType<typeof getServerSideProps>;
 
 export default function Home({ isConnected }: HomePageProps) {
   const connectionStatus = isConnected ? (
     <p>You are connected to Elasticsearch</p>
   ) : (
     <p>
-      You are NOT connected to Elasticsearch. Check the{' '}
+      You are NOT connected to Elasticsearch. Check the{" "}
       <code className={styles.code}>README.md</code> for instructions.
     </p>
-  )
+  );
 
   return (
     <>
@@ -39,7 +39,7 @@ export default function Home({ isConnected }: HomePageProps) {
               target="_blank"
               rel="noopener noreferrer"
             >
-              By{' '}
+              By{" "}
               <Image
                 src="/vercel.svg"
                 alt="Vercel Logo"
@@ -143,16 +143,16 @@ export default function Home({ isConnected }: HomePageProps) {
         </div>
       </main>
     </>
-  )
+  );
 }
 
 export const getServerSideProps = async () => {
-  let isConnected: boolean = false
-  const client = await connectToElasticsearch()
-  if (client !== 'ERR_ENV_NOT_DEFINED') {
-    isConnected = true
+  let isConnected: boolean = false;
+  const client = await connectToElasticsearch();
+  if (client !== "ERR_ENV_NOT_DEFINED") {
+    isConnected = true;
   }
   return {
     props: { isConnected },
-  }
-}
+  };
+};
diff --git a/examples/with-elasticsearch/styles/Home.module.css b/examples/with-elasticsearch/styles/Home.module.css
index 96417e1526..8b0335e056 100644
--- a/examples/with-elasticsearch/styles/Home.module.css
+++ b/examples/with-elasticsearch/styles/Home.module.css
@@ -103,7 +103,7 @@
 
 .center::before,
 .center::after {
-  content: '';
+  content: "";
   left: 50%;
   position: absolute;
   filter: blur(45px);
@@ -131,7 +131,7 @@
 
 .thirteen::before,
 .thirteen::after {
-  content: '';
+  content: "";
   position: absolute;
   z-index: -1;
 }
diff --git a/examples/with-elasticsearch/styles/globals.css b/examples/with-elasticsearch/styles/globals.css
index d4f491e152..f4bd77c0cc 100644
--- a/examples/with-elasticsearch/styles/globals.css
+++ b/examples/with-elasticsearch/styles/globals.css
@@ -1,9 +1,9 @@
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
+    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
diff --git a/examples/with-electron-typescript/electron-src/electron-next.d.ts b/examples/with-electron-typescript/electron-src/electron-next.d.ts
index d12b291ece..88fd7aa155 100644
--- a/examples/with-electron-typescript/electron-src/electron-next.d.ts
+++ b/examples/with-electron-typescript/electron-src/electron-next.d.ts
@@ -1,11 +1,11 @@
-declare module 'electron-next' {
+declare module "electron-next" {
   interface Directories {
-    production: string
-    development: string
+    production: string;
+    development: string;
   }
 
   export default function (
     directories: Directories | string,
-    port?: number
-  ): Promise<void>
+    port?: number,
+  ): Promise<void>;
 }
diff --git a/examples/with-electron-typescript/electron-src/index.ts b/examples/with-electron-typescript/electron-src/index.ts
index 13a20750a0..3164a04427 100644
--- a/examples/with-electron-typescript/electron-src/index.ts
+++ b/examples/with-electron-typescript/electron-src/index.ts
@@ -1,15 +1,15 @@
 // Native
-import { join } from 'path'
-import { format } from 'url'
+import { join } from "path";
+import { format } from "url";
 
 // Packages
-import { BrowserWindow, app, ipcMain, IpcMainEvent } from 'electron'
-import isDev from 'electron-is-dev'
-import prepareNext from 'electron-next'
+import { BrowserWindow, app, ipcMain, IpcMainEvent } from "electron";
+import isDev from "electron-is-dev";
+import prepareNext from "electron-next";
 
 // Prepare the renderer once the app is ready
-app.on('ready', async () => {
-  await prepareNext('./renderer')
+app.on("ready", async () => {
+  await prepareNext("./renderer");
 
   const mainWindow = new BrowserWindow({
     width: 800,
@@ -17,26 +17,26 @@ app.on('ready', async () => {
     webPreferences: {
       nodeIntegration: false,
       contextIsolation: true,
-      preload: join(__dirname, 'preload.js'),
+      preload: join(__dirname, "preload.js"),
     },
-  })
+  });
 
   const url = isDev
-    ? 'http://localhost:8000/'
+    ? "http://localhost:8000/"
     : format({
-        pathname: join(__dirname, '../renderer/out/index.html'),
-        protocol: 'file:',
+        pathname: join(__dirname, "../renderer/out/index.html"),
+        protocol: "file:",
         slashes: true,
-      })
+      });
 
-  mainWindow.loadURL(url)
-})
+  mainWindow.loadURL(url);
+});
 
 // Quit the app once all windows are closed
-app.on('window-all-closed', app.quit)
+app.on("window-all-closed", app.quit);
 
 // listen the channel `message` and resend the received message to the renderer process
-ipcMain.on('message', (event: IpcMainEvent, message: any) => {
-  console.log(message)
-  setTimeout(() => event.sender.send('message', 'hi from electron'), 500)
-})
+ipcMain.on("message", (event: IpcMainEvent, message: any) => {
+  console.log(message);
+  setTimeout(() => event.sender.send("message", "hi from electron"), 500);
+});
diff --git a/examples/with-electron-typescript/electron-src/preload.ts b/examples/with-electron-typescript/electron-src/preload.ts
index 926a9a75b9..13099a5b32 100644
--- a/examples/with-electron-typescript/electron-src/preload.ts
+++ b/examples/with-electron-typescript/electron-src/preload.ts
@@ -1,16 +1,16 @@
 /* eslint-disable @typescript-eslint/no-namespace */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { contextBridge, ipcRenderer } from 'electron'
-import { IpcRendererEvent } from 'electron/main'
+import { contextBridge, ipcRenderer } from "electron";
+import { IpcRendererEvent } from "electron/main";
 
 // We are using the context bridge to securely expose NodeAPIs.
 // Please note that many Node APIs grant access to local system resources.
 // Be very cautious about which globals and APIs you expose to untrusted remote content.
-contextBridge.exposeInMainWorld('electron', {
-  sayHello: () => ipcRenderer.send('message', 'hi from next'),
+contextBridge.exposeInMainWorld("electron", {
+  sayHello: () => ipcRenderer.send("message", "hi from next"),
   receiveHello: (handler: (event: IpcRendererEvent, ...args: any[]) => void) =>
-    ipcRenderer.on('message', handler),
+    ipcRenderer.on("message", handler),
   stopReceivingHello: (
-    handler: (event: IpcRendererEvent, ...args: any[]) => void
-  ) => ipcRenderer.removeListener('message', handler),
-})
+    handler: (event: IpcRendererEvent, ...args: any[]) => void,
+  ) => ipcRenderer.removeListener("message", handler),
+});
diff --git a/examples/with-electron-typescript/next.config.js b/examples/with-electron-typescript/next.config.js
index fecf9218a3..9d7c247a58 100644
--- a/examples/with-electron-typescript/next.config.js
+++ b/examples/with-electron-typescript/next.config.js
@@ -2,7 +2,7 @@
  * @type {import('next').NextConfig}
  */
 const nextConfig = {
-  output: 'export',
-}
+  output: "export",
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-electron-typescript/renderer/components/Layout.tsx b/examples/with-electron-typescript/renderer/components/Layout.tsx
index 91d3cc7ddf..f97d4d2ed8 100644
--- a/examples/with-electron-typescript/renderer/components/Layout.tsx
+++ b/examples/with-electron-typescript/renderer/components/Layout.tsx
@@ -1,13 +1,13 @@
-import React, { ReactNode } from 'react'
-import Link from 'next/link'
-import Head from 'next/head'
+import React, { ReactNode } from "react";
+import Link from "next/link";
+import Head from "next/head";
 
 type Props = {
-  children: ReactNode
-  title?: string
-}
+  children: ReactNode;
+  title?: string;
+};
 
-const Layout = ({ children, title = 'This is the default title' }: Props) => (
+const Layout = ({ children, title = "This is the default title" }: Props) => (
   <div>
     <Head>
       <title>{title}</title>
@@ -16,7 +16,7 @@ const Layout = ({ children, title = 'This is the default title' }: Props) => (
     </Head>
     <header>
       <nav>
-        <Link href="/">Home</Link> | <Link href="/about">About</Link> |{' '}
+        <Link href="/">Home</Link> | <Link href="/about">About</Link> |{" "}
         <Link href="/initial-props">With Initial Props</Link>
       </nav>
     </header>
@@ -26,6 +26,6 @@ const Layout = ({ children, title = 'This is the default title' }: Props) => (
       <span>I'm here to stay (Footer)</span>
     </footer>
   </div>
-)
+);
 
-export default Layout
+export default Layout;
diff --git a/examples/with-electron-typescript/renderer/components/List.tsx b/examples/with-electron-typescript/renderer/components/List.tsx
index bdf2a81263..dd0fef1845 100644
--- a/examples/with-electron-typescript/renderer/components/List.tsx
+++ b/examples/with-electron-typescript/renderer/components/List.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import ListItem from './ListItem'
-import { User } from '../interfaces'
+import React from "react";
+import ListItem from "./ListItem";
+import { User } from "../interfaces";
 
 type Props = {
-  items: User[]
-}
+  items: User[];
+};
 
 const List = ({ items }: Props) => (
   <ul>
@@ -14,6 +14,6 @@ const List = ({ items }: Props) => (
       </li>
     ))}
   </ul>
-)
+);
 
-export default List
+export default List;
diff --git a/examples/with-electron-typescript/renderer/components/ListDetail.tsx b/examples/with-electron-typescript/renderer/components/ListDetail.tsx
index fa3f9c3dc8..85ccf9665d 100644
--- a/examples/with-electron-typescript/renderer/components/ListDetail.tsx
+++ b/examples/with-electron-typescript/renderer/components/ListDetail.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react'
+import * as React from "react";
 
-import { User } from '../interfaces'
+import { User } from "../interfaces";
 
 type ListDetailProps = {
-  item: User
-}
+  item: User;
+};
 
 const ListDetail = ({ item: user }: ListDetailProps) => (
   <div>
     <h1>Detail for {user.name}</h1>
     <p>ID: {user.id}</p>
   </div>
-)
+);
 
-export default ListDetail
+export default ListDetail;
diff --git a/examples/with-electron-typescript/renderer/components/ListItem.tsx b/examples/with-electron-typescript/renderer/components/ListItem.tsx
index f34af55f49..dc5edbea43 100644
--- a/examples/with-electron-typescript/renderer/components/ListItem.tsx
+++ b/examples/with-electron-typescript/renderer/components/ListItem.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
-import Link from 'next/link'
+import React from "react";
+import Link from "next/link";
 
-import { User } from '../interfaces'
+import { User } from "../interfaces";
 
 type Props = {
-  data: User
-}
+  data: User;
+};
 
 const ListItem = ({ data }: Props) => (
   <Link href="/detail/[id]" as={`/detail/${data.id}`}>
     {data.id}:{data.name}
   </Link>
-)
+);
 
-export default ListItem
+export default ListItem;
diff --git a/examples/with-electron-typescript/renderer/interfaces/index.ts b/examples/with-electron-typescript/renderer/interfaces/index.ts
index 3179369fb1..ca06390cd1 100644
--- a/examples/with-electron-typescript/renderer/interfaces/index.ts
+++ b/examples/with-electron-typescript/renderer/interfaces/index.ts
@@ -9,14 +9,14 @@ declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   interface Window {
     electron: {
-      sayHello: () => void
-      receiveHello: (handler: (event, args) => void) => void
-      stopReceivingHello: (handler: (event, args) => void) => void
-    }
+      sayHello: () => void;
+      receiveHello: (handler: (event, args) => void) => void;
+      stopReceivingHello: (handler: (event, args) => void) => void;
+    };
   }
 }
 
 export type User = {
-  id: number
-  name: string
-}
+  id: number;
+  name: string;
+};
diff --git a/examples/with-electron-typescript/renderer/pages/about.tsx b/examples/with-electron-typescript/renderer/pages/about.tsx
index 2353a31f47..710780d46e 100644
--- a/examples/with-electron-typescript/renderer/pages/about.tsx
+++ b/examples/with-electron-typescript/renderer/pages/about.tsx
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import Layout from '../components/Layout'
+import Link from "next/link";
+import Layout from "../components/Layout";
 
 const AboutPage = () => (
   <Layout title="About | Next.js + TypeScript + Electron Example">
@@ -9,6 +9,6 @@ const AboutPage = () => (
       <Link href="/">Go home</Link>
     </p>
   </Layout>
-)
+);
 
-export default AboutPage
+export default AboutPage;
diff --git a/examples/with-electron-typescript/renderer/pages/detail/[id].tsx b/examples/with-electron-typescript/renderer/pages/detail/[id].tsx
index 8c249c1dab..539ef21aa5 100644
--- a/examples/with-electron-typescript/renderer/pages/detail/[id].tsx
+++ b/examples/with-electron-typescript/renderer/pages/detail/[id].tsx
@@ -1,62 +1,62 @@
 // import { NextPageContext } from 'next'
-import Layout from '../../components/Layout'
-import { User } from '../../interfaces'
-import { findAll, findData } from '../../utils/sample-api'
-import ListDetail from '../../components/ListDetail'
-import { GetStaticPaths, GetStaticProps } from 'next'
+import Layout from "../../components/Layout";
+import { User } from "../../interfaces";
+import { findAll, findData } from "../../utils/sample-api";
+import ListDetail from "../../components/ListDetail";
+import { GetStaticPaths, GetStaticProps } from "next";
 
 type Params = {
-  id?: string
-}
+  id?: string;
+};
 
 type Props = {
-  item?: User
-  errors?: string
-}
+  item?: User;
+  errors?: string;
+};
 
 const InitialPropsDetail = ({ item, errors }: Props) => {
   if (errors) {
     return (
       <Layout title={`Error | Next.js + TypeScript + Electron Example`}>
         <p>
-          <span style={{ color: 'red' }}>Error:</span> {errors}
+          <span style={{ color: "red" }}>Error:</span> {errors}
         </p>
       </Layout>
-    )
+    );
   }
 
   return (
     <Layout
-      title={`${item ? item.name : 'Detail'} | Next.js + TypeScript Example`}
+      title={`${item ? item.name : "Detail"} | Next.js + TypeScript Example`}
     >
       {item && <ListDetail item={item} />}
     </Layout>
-  )
-}
+  );
+};
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const items: User[] = await findAll()
-  const paths = items.map((item) => `/detail/${item.id}`)
-  return { paths, fallback: false }
-}
+  const items: User[] = await findAll();
+  const paths = items.map((item) => `/detail/${item.id}`);
+  return { paths, fallback: false };
+};
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
-  const { id } = params as Params
+  const { id } = params as Params;
 
   try {
-    const item = await findData(Array.isArray(id) ? id[0] : id)
+    const item = await findData(Array.isArray(id) ? id[0] : id);
     return {
       props: {
         item,
       },
-    }
+    };
   } catch (err) {
     return {
       props: {
         errors: err.message,
       },
-    }
+    };
   }
-}
+};
 
-export default InitialPropsDetail
+export default InitialPropsDetail;
diff --git a/examples/with-electron-typescript/renderer/pages/index.tsx b/examples/with-electron-typescript/renderer/pages/index.tsx
index 8b4303901d..e247b911b7 100644
--- a/examples/with-electron-typescript/renderer/pages/index.tsx
+++ b/examples/with-electron-typescript/renderer/pages/index.tsx
@@ -1,22 +1,22 @@
-import { useEffect } from 'react'
-import Link from 'next/link'
-import Layout from '../components/Layout'
+import { useEffect } from "react";
+import Link from "next/link";
+import Layout from "../components/Layout";
 
 const IndexPage = () => {
   useEffect(() => {
-    const handleMessage = (_event, args) => alert(args)
+    const handleMessage = (_event, args) => alert(args);
 
     // listen to the 'message' channel
-    window.electron.receiveHello(handleMessage)
+    window.electron.receiveHello(handleMessage);
 
     return () => {
-      window.electron.stopReceivingHello(handleMessage)
-    }
-  }, [])
+      window.electron.stopReceivingHello(handleMessage);
+    };
+  }, []);
 
   const onSayHiClick = () => {
-    window.electron.sayHello()
-  }
+    window.electron.sayHello();
+  };
 
   return (
     <Layout title="Home | Next.js + TypeScript + Electron Example">
@@ -26,7 +26,7 @@ const IndexPage = () => {
         <Link href="/about">About</Link>
       </p>
     </Layout>
-  )
-}
+  );
+};
 
-export default IndexPage
+export default IndexPage;
diff --git a/examples/with-electron-typescript/renderer/pages/initial-props.tsx b/examples/with-electron-typescript/renderer/pages/initial-props.tsx
index bc4779b5c1..00015071c6 100644
--- a/examples/with-electron-typescript/renderer/pages/initial-props.tsx
+++ b/examples/with-electron-typescript/renderer/pages/initial-props.tsx
@@ -1,17 +1,17 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import Layout from '../components/Layout'
-import List from '../components/List'
-import { User } from '../interfaces'
-import { findAll } from '../utils/sample-api'
+import Link from "next/link";
+import { useRouter } from "next/router";
+import Layout from "../components/Layout";
+import List from "../components/List";
+import { User } from "../interfaces";
+import { findAll } from "../utils/sample-api";
 
 type Props = {
-  items: User[]
-  pathname: string
-}
+  items: User[];
+  pathname: string;
+};
 
 const WithInitialProps = ({ items }: Props) => {
-  const router = useRouter()
+  const router = useRouter();
   return (
     <Layout title="List Example (as Function Component) | Next.js + TypeScript + Electron Example">
       <h1>List Example (as Function Component)</h1>
@@ -21,13 +21,13 @@ const WithInitialProps = ({ items }: Props) => {
         <Link href="/">Go home</Link>
       </p>
     </Layout>
-  )
-}
+  );
+};
 
 export async function getStaticProps() {
-  const items: User[] = await findAll()
+  const items: User[] = await findAll();
 
-  return { props: { items } }
+  return { props: { items } };
 }
 
-export default WithInitialProps
+export default WithInitialProps;
diff --git a/examples/with-electron-typescript/renderer/utils/sample-api.ts b/examples/with-electron-typescript/renderer/utils/sample-api.ts
index cbdd8efd30..7274f4d540 100644
--- a/examples/with-electron-typescript/renderer/utils/sample-api.ts
+++ b/examples/with-electron-typescript/renderer/utils/sample-api.ts
@@ -1,12 +1,12 @@
-import { User } from '../interfaces'
+import { User } from "../interfaces";
 
 /** Dummy user data. */
 export const dataArray: User[] = [
-  { id: 101, name: 'Alice' },
-  { id: 102, name: 'Bob' },
-  { id: 103, name: 'Caroline' },
-  { id: 104, name: 'Dave' },
-]
+  { id: 101, name: "Alice" },
+  { id: 102, name: "Bob" },
+  { id: 103, name: "Caroline" },
+  { id: 104, name: "Dave" },
+];
 
 /**
  * Calls a mock API which finds a user by ID from the list above.
@@ -14,21 +14,21 @@ export const dataArray: User[] = [
  * Throws an error if not found.
  */
 export async function findData(id: number | string) {
-  const selected = dataArray.find((data) => data.id === Number(id))
+  const selected = dataArray.find((data) => data.id === Number(id));
 
   if (!selected) {
-    throw new Error('Cannot find user')
+    throw new Error("Cannot find user");
   }
 
-  return selected
+  return selected;
 }
 
 /** Calls a mock API which returns the above array to simulate "get all". */
 export async function findAll() {
   // Throw an error, just for example.
   if (!Array.isArray(dataArray)) {
-    throw new Error('Cannot find users')
+    throw new Error("Cannot find users");
   }
 
-  return dataArray
+  return dataArray;
 }
diff --git a/examples/with-electron/main/index.js b/examples/with-electron/main/index.js
index 178b284a7b..07e96b38c3 100644
--- a/examples/with-electron/main/index.js
+++ b/examples/with-electron/main/index.js
@@ -1,40 +1,40 @@
 // Native
-const { join } = require('path')
-const { format } = require('url')
+const { join } = require("path");
+const { format } = require("url");
 
 // Packages
-const { BrowserWindow, app, ipcMain } = require('electron')
-const isDev = require('electron-is-dev')
-const prepareNext = require('electron-next')
+const { BrowserWindow, app, ipcMain } = require("electron");
+const isDev = require("electron-is-dev");
+const prepareNext = require("electron-next");
 
 // Prepare the renderer once the app is ready
-app.on('ready', async () => {
-  await prepareNext('./renderer')
+app.on("ready", async () => {
+  await prepareNext("./renderer");
 
   const mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
     webPreferences: {
       nodeIntegration: false,
-      preload: join(__dirname, 'preload.js'),
+      preload: join(__dirname, "preload.js"),
     },
-  })
+  });
 
   const url = isDev
-    ? 'http://localhost:8000'
+    ? "http://localhost:8000"
     : format({
-        pathname: join(__dirname, '../renderer/out/index.html'),
-        protocol: 'file:',
+        pathname: join(__dirname, "../renderer/out/index.html"),
+        protocol: "file:",
         slashes: true,
-      })
+      });
 
-  mainWindow.loadURL(url)
-})
+  mainWindow.loadURL(url);
+});
 
 // Quit the app once all windows are closed
-app.on('window-all-closed', app.quit)
+app.on("window-all-closed", app.quit);
 
 // listen the channel `message` and resend the received message to the renderer process
-ipcMain.on('message', (event, message) => {
-  event.sender.send('message', message)
-})
+ipcMain.on("message", (event, message) => {
+  event.sender.send("message", message);
+});
diff --git a/examples/with-electron/main/preload.js b/examples/with-electron/main/preload.js
index c636c46f50..16413c387d 100644
--- a/examples/with-electron/main/preload.js
+++ b/examples/with-electron/main/preload.js
@@ -1,9 +1,9 @@
-const { ipcRenderer, contextBridge } = require('electron')
+const { ipcRenderer, contextBridge } = require("electron");
 
-contextBridge.exposeInMainWorld('electron', {
+contextBridge.exposeInMainWorld("electron", {
   message: {
-    send: (payload) => ipcRenderer.send('message', payload),
-    on: (handler) => ipcRenderer.on('message', handler),
-    off: (handler) => ipcRenderer.off('message', handler),
+    send: (payload) => ipcRenderer.send("message", payload),
+    on: (handler) => ipcRenderer.on("message", handler),
+    off: (handler) => ipcRenderer.off("message", handler),
   },
-})
+});
diff --git a/examples/with-electron/next.config.js b/examples/with-electron/next.config.js
index fecf9218a3..9d7c247a58 100644
--- a/examples/with-electron/next.config.js
+++ b/examples/with-electron/next.config.js
@@ -2,7 +2,7 @@
  * @type {import('next').NextConfig}
  */
 const nextConfig = {
-  output: 'export',
-}
+  output: "export",
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-electron/renderer/babel.config.js b/examples/with-electron/renderer/babel.config.js
index d3f7a68fce..abe323427e 100644
--- a/examples/with-electron/renderer/babel.config.js
+++ b/examples/with-electron/renderer/babel.config.js
@@ -1,16 +1,16 @@
-const { devDependencies } = require('../package.json')
+const { devDependencies } = require("../package.json");
 
 module.exports = {
   presets: [
     [
-      'next/babel',
+      "next/babel",
       {
-        'preset-env': {
+        "preset-env": {
           targets: {
-            electron: devDependencies.electron.replace(/^\^|~/, ''),
+            electron: devDependencies.electron.replace(/^\^|~/, ""),
           },
         },
       },
     ],
   ],
-}
+};
diff --git a/examples/with-electron/renderer/pages/index.js b/examples/with-electron/renderer/pages/index.js
index 789baeb6ab..aa878ec500 100644
--- a/examples/with-electron/renderer/pages/index.js
+++ b/examples/with-electron/renderer/pages/index.js
@@ -1,23 +1,23 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from "react";
 
 const Home = () => {
-  const [input, setInput] = useState('')
-  const [message, setMessage] = useState(null)
+  const [input, setInput] = useState("");
+  const [message, setMessage] = useState(null);
 
   useEffect(() => {
-    const handleMessage = (event, message) => setMessage(message)
-    window.electron.message.on(handleMessage)
+    const handleMessage = (event, message) => setMessage(message);
+    window.electron.message.on(handleMessage);
 
     return () => {
-      window.electron.message.off(handleMessage)
-    }
-  }, [])
+      window.electron.message.off(handleMessage);
+    };
+  }, []);
 
   const handleSubmit = (event) => {
-    event.preventDefault()
-    window.electron.message.send(input)
-    setMessage(null)
-  }
+    event.preventDefault();
+    window.electron.message.send(input);
+    setMessage(null);
+  };
 
   return (
     <div>
@@ -40,7 +40,7 @@ const Home = () => {
         }
       `}</style>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/examples/with-emotion-swc/next.config.js b/examples/with-emotion-swc/next.config.js
index 427b30c5aa..cc334f050d 100644
--- a/examples/with-emotion-swc/next.config.js
+++ b/examples/with-emotion-swc/next.config.js
@@ -5,6 +5,6 @@ const nextConfig = {
   compiler: {
     emotion: true,
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-emotion-swc/pages/_app.tsx b/examples/with-emotion-swc/pages/_app.tsx
index 0fe238a5d2..7af093adf2 100644
--- a/examples/with-emotion-swc/pages/_app.tsx
+++ b/examples/with-emotion-swc/pages/_app.tsx
@@ -1,15 +1,15 @@
-import createCache from '@emotion/cache'
-import { CacheProvider } from '@emotion/react'
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
 
-import { globalStyles } from '../shared/styles'
+import { globalStyles } from "../shared/styles";
 
-const cache = createCache({ key: 'next' })
+const cache = createCache({ key: "next" });
 
 const App = ({ Component, pageProps }) => (
   <CacheProvider value={cache}>
     {globalStyles}
     <Component {...pageProps} />
   </CacheProvider>
-)
+);
 
-export default App
+export default App;
diff --git a/examples/with-emotion-swc/pages/index.tsx b/examples/with-emotion-swc/pages/index.tsx
index 048df431d7..f83db6181f 100644
--- a/examples/with-emotion-swc/pages/index.tsx
+++ b/examples/with-emotion-swc/pages/index.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/react'
+import { css } from "@emotion/react";
 import {
   Animated,
   Basic,
@@ -7,7 +7,7 @@ import {
   Pink,
   BasicExtended,
   ComponentSelectorsExtended,
-} from '../shared/styles'
+} from "../shared/styles";
 
 const Home = () => (
   <div
@@ -26,6 +26,6 @@ const Home = () => (
       <BasicExtended>Nested</BasicExtended>
     </ComponentSelectorsExtended>
   </div>
-)
+);
 
-export default Home
+export default Home;
diff --git a/examples/with-emotion-swc/shared/styles.tsx b/examples/with-emotion-swc/shared/styles.tsx
index 4c795e8733..b439559562 100644
--- a/examples/with-emotion-swc/shared/styles.tsx
+++ b/examples/with-emotion-swc/shared/styles.tsx
@@ -1,5 +1,5 @@
-import { css, Global, keyframes, Keyframes } from '@emotion/react'
-import styled from '@emotion/styled'
+import { css, Global, keyframes, Keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
 
 export const globalStyles = (
   <Global
@@ -15,19 +15,19 @@ export const globalStyles = (
       }
     `}
   />
-)
+);
 
 export const basicStyles = css({
-  backgroundColor: 'white',
-  color: 'cornflowerblue',
-  border: '1px solid lightgreen',
-  borderRight: 'none',
-  borderBottom: 'none',
-  boxShadow: '5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow',
-  transition: 'all 0.1s linear',
-  margin: '3rem 0',
-  padding: '1rem 0.5rem',
-})
+  backgroundColor: "white",
+  color: "cornflowerblue",
+  border: "1px solid lightgreen",
+  borderRight: "none",
+  borderBottom: "none",
+  boxShadow: "5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow",
+  transition: "all 0.1s linear",
+  margin: "3rem 0",
+  padding: "1rem 0.5rem",
+});
 
 export const hoverStyles = css`
   &:hover {
@@ -36,7 +36,7 @@ export const hoverStyles = css`
     border-color: aqua;
     box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
   }
-`
+`;
 export const bounce = keyframes`
   from {
     transform: scale(1.01);
@@ -44,11 +44,11 @@ export const bounce = keyframes`
   to {
     transform: scale(0.99);
   }
-`
+`;
 
 export const Basic = styled.div`
   ${basicStyles};
-`
+`;
 
 export const Combined = styled.div`
   ${basicStyles};
@@ -56,22 +56,22 @@ export const Combined = styled.div`
   & code {
     background-color: linen;
   }
-`
+`;
 
 export const Pink = styled(Basic)({
-  color: 'hotpink',
-})
+  color: "hotpink",
+});
 
 export const BasicExtended = styled(Basic, {
-  shouldForwardProp: (propertyName: string) => !propertyName.startsWith('$'),
-})``
+  shouldForwardProp: (propertyName: string) => !propertyName.startsWith("$"),
+})``;
 
 export const ComponentSelectorsExtended = styled.div`
   ${BasicExtended} {
     color: green;
   }
   box-shadow: -5px -5px 0 0 green;
-`
+`;
 
 export const Animated = styled.div<{ animation: Keyframes }>`
   ${basicStyles};
@@ -80,4 +80,4 @@ export const Animated = styled.div<{ animation: Keyframes }>`
     background-color: linen;
   }
   animation: ${({ animation }) => animation} 0.2s infinite ease-in-out alternate;
-`
+`;
diff --git a/examples/with-emotion-vanilla/pages/_document.js b/examples/with-emotion-vanilla/pages/_document.js
index 34ab85def6..51ee8584cd 100644
--- a/examples/with-emotion-vanilla/pages/_document.js
+++ b/examples/with-emotion-vanilla/pages/_document.js
@@ -1,22 +1,22 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
-import * as React from 'react'
-import { renderStatic } from '../shared/renderer'
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import * as React from "react";
+import { renderStatic } from "../shared/renderer";
 export default class AppDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx)
-    const { css, ids } = await renderStatic(initialProps.html)
+    const initialProps = await Document.getInitialProps(ctx);
+    const { css, ids } = await renderStatic(initialProps.html);
     return {
       ...initialProps,
       styles: (
         <React.Fragment>
           {initialProps.styles}
           <style
-            data-emotion={`css ${ids.join(' ')}`}
+            data-emotion={`css ${ids.join(" ")}`}
             dangerouslySetInnerHTML={{ __html: css }}
           />
         </React.Fragment>
       ),
-    }
+    };
   }
 
   render() {
@@ -28,6 +28,6 @@ export default class AppDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
diff --git a/examples/with-emotion-vanilla/pages/index.js b/examples/with-emotion-vanilla/pages/index.js
index 0c3c7b014d..4b48fc6b30 100644
--- a/examples/with-emotion-vanilla/pages/index.js
+++ b/examples/with-emotion-vanilla/pages/index.js
@@ -1,4 +1,4 @@
-import Head from 'next/head'
+import Head from "next/head";
 import {
   basicStyles,
   otherStyles,
@@ -7,7 +7,7 @@ import {
   combinedAsArray,
   cxExample,
   keyframesExample,
-} from '../shared/styles'
+} from "../shared/styles";
 
 const Home = () => (
   <>
@@ -25,6 +25,6 @@ const Home = () => (
       <div className={keyframesExample} />
     </div>
   </>
-)
+);
 
-export default Home
+export default Home;
diff --git a/examples/with-emotion-vanilla/shared/renderer.js b/examples/with-emotion-vanilla/shared/renderer.js
index 6865f1adea..f6157bdaf5 100644
--- a/examples/with-emotion-vanilla/shared/renderer.js
+++ b/examples/with-emotion-vanilla/shared/renderer.js
@@ -1,12 +1,12 @@
-import createEmotionServer from '@emotion/server/create-instance'
-import { cache } from '@emotion/css'
+import createEmotionServer from "@emotion/server/create-instance";
+import { cache } from "@emotion/css";
 
 export const renderStatic = async (html) => {
   if (html === undefined) {
-    throw new Error('did you forget to return html from renderToString?')
+    throw new Error("did you forget to return html from renderToString?");
   }
-  const { extractCritical } = createEmotionServer(cache)
-  const { ids, css } = extractCritical(html)
+  const { extractCritical } = createEmotionServer(cache);
+  const { ids, css } = extractCritical(html);
 
-  return { html, ids, css }
-}
+  return { html, ids, css };
+};
diff --git a/examples/with-emotion-vanilla/shared/styles.js b/examples/with-emotion-vanilla/shared/styles.js
index c2562c032f..29663b066b 100644
--- a/examples/with-emotion-vanilla/shared/styles.js
+++ b/examples/with-emotion-vanilla/shared/styles.js
@@ -1,4 +1,4 @@
-import { css, cx, keyframes, injectGlobal } from '@emotion/css'
+import { css, cx, keyframes, injectGlobal } from "@emotion/css";
 
 injectGlobal`
   * {
@@ -8,7 +8,7 @@ injectGlobal`
     background: #DFCFBE;
     font-family: Helvetica, sans-serif;
   }
-`
+`;
 
 const basicStyles = css`
   background-color: white;
@@ -20,44 +20,44 @@ const basicStyles = css`
   transition: all 0.1s linear;
   margin: 3rem 0;
   padding: 1rem 0.5rem;
-`
+`;
 
 const otherStyles = css`
   background-color: red;
   padding: 10px;
   margin-bottom: 10px;
-`
+`;
 
 const someMoreBasicStyles = css`
   background-color: green;
   color: white;
   margin-bottom: 10px;
   padding: 10px;
-`
+`;
 
 const someCssAsObject = css({
-  background: 'orange',
-  color: 'white',
-  padding: '10px',
-  marginBottom: '10px',
-})
+  background: "orange",
+  color: "white",
+  padding: "10px",
+  marginBottom: "10px",
+});
 
-const combinedAsArray = css([someMoreBasicStyles, someCssAsObject])
+const combinedAsArray = css([someMoreBasicStyles, someCssAsObject]);
 
 const cls1 = css`
   font-size: 20px;
   padding: 5px;
   background: green;
   color: orange;
-`
+`;
 const cls2 = css`
   font-size: 20px;
   padding: 15px;
   background: blue;
   color: white;
-`
+`;
 
-const cxExample = cx(cls1, cls2)
+const cxExample = cx(cls1, cls2);
 
 const bounce = keyframes`
   from, 20%, 53%, 80%, to {
@@ -75,21 +75,21 @@ const bounce = keyframes`
   90% {
     transform: translate3d(0,-4px,0);
   }
-`
+`;
 
 const keyframesExample = css([
   bounce,
   css({
-    marginTop: '50px',
-    width: '20px',
-    height: '20px',
-    background: 'black',
-    borderRadius: '50%',
-    padding: '20px',
+    marginTop: "50px",
+    width: "20px",
+    height: "20px",
+    background: "black",
+    borderRadius: "50%",
+    padding: "20px",
     animation: `${bounce} 1s ease infinite`,
-    transformOrigin: 'center',
+    transformOrigin: "center",
   }),
-])
+]);
 
 export {
   combinedAsArray,
@@ -99,4 +99,4 @@ export {
   someMoreBasicStyles,
   otherStyles,
   basicStyles,
-}
+};
diff --git a/examples/with-emotion/pages/_app.js b/examples/with-emotion/pages/_app.js
index aaa1325721..a60ad9b2e1 100644
--- a/examples/with-emotion/pages/_app.js
+++ b/examples/with-emotion/pages/_app.js
@@ -1,10 +1,10 @@
-import { globalStyles } from '../shared/styles'
+import { globalStyles } from "../shared/styles";
 
 const App = ({ Component, pageProps }) => (
   <>
     {globalStyles}
     <Component {...pageProps} />
   </>
-)
+);
 
-export default App
+export default App;
diff --git a/examples/with-emotion/pages/index.js b/examples/with-emotion/pages/index.js
index 4c3a5685c2..4c158e5914 100644
--- a/examples/with-emotion/pages/index.js
+++ b/examples/with-emotion/pages/index.js
@@ -1,4 +1,4 @@
-import { Animated, Basic, bounce, Combined } from '../shared/styles'
+import { Animated, Basic, bounce, Combined } from "../shared/styles";
 
 const Home = () => (
   <div>
@@ -8,6 +8,6 @@ const Home = () => (
     </Combined>
     <Animated animation={bounce}>Let's bounce.</Animated>
   </div>
-)
+);
 
-export default Home
+export default Home;
diff --git a/examples/with-emotion/shared/styles.js b/examples/with-emotion/shared/styles.js
index 3efd86c503..f7a120ca7f 100644
--- a/examples/with-emotion/shared/styles.js
+++ b/examples/with-emotion/shared/styles.js
@@ -1,5 +1,5 @@
-import { css, Global, keyframes } from '@emotion/react'
-import styled from '@emotion/styled'
+import { css, Global, keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
 
 export const globalStyles = (
   <Global
@@ -15,7 +15,7 @@ export const globalStyles = (
       }
     `}
   />
-)
+);
 
 export const basicStyles = css`
   background-color: white;
@@ -27,7 +27,7 @@ export const basicStyles = css`
   transition: all 0.1s linear;
   margin: 3rem 0;
   padding: 1rem 0.5rem;
-`
+`;
 
 export const hoverStyles = css`
   &:hover {
@@ -36,7 +36,7 @@ export const hoverStyles = css`
     border-color: aqua;
     box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
   }
-`
+`;
 export const bounce = keyframes`
   from {
     transform: scale(1.01);
@@ -44,11 +44,11 @@ export const bounce = keyframes`
   to {
     transform: scale(0.99);
   }
-`
+`;
 
 export const Basic = styled.div`
   ${basicStyles};
-`
+`;
 
 export const Combined = styled.div`
   ${basicStyles};
@@ -56,7 +56,7 @@ export const Combined = styled.div`
   & code {
     background-color: linen;
   }
-`
+`;
 export const Animated = styled.div`
   ${basicStyles};
   ${hoverStyles};
@@ -64,4 +64,4 @@ export const Animated = styled.div`
     background-color: linen;
   }
   animation: ${({ animation }) => animation} 0.2s infinite ease-in-out alternate;
-`
+`;
diff --git a/examples/with-eslint/pages/index.js b/examples/with-eslint/pages/index.js
index a83beb776c..6773620f1f 100644
--- a/examples/with-eslint/pages/index.js
+++ b/examples/with-eslint/pages/index.js
@@ -3,6 +3,6 @@ const Home = () => (
     <script src="https://fake-script.com" />
     <p>Home</p>
   </div>
-)
+);
 
-export default Home
+export default Home;
diff --git a/examples/with-expo-typescript/App.tsx b/examples/with-expo-typescript/App.tsx
index 3bb8520edf..e0a56988cc 100644
--- a/examples/with-expo-typescript/App.tsx
+++ b/examples/with-expo-typescript/App.tsx
@@ -1,3 +1,3 @@
 // Re-export the root component from the Next.js website
 // as the root component for the native React app.
-export { default } from './pages/index'
+export { default } from "./pages/index";
diff --git a/examples/with-expo-typescript/README.md b/examples/with-expo-typescript/README.md
index 5aa5849d27..c33a1e36fd 100644
--- a/examples/with-expo-typescript/README.md
+++ b/examples/with-expo-typescript/README.md
@@ -71,14 +71,14 @@ yarn add -D next-compose-plugins next-transpile-modules
 - Modify the Next.js config `next.config.js`:
 
 ```js
-const { withExpo } = require('@expo/next-adapter')
-const withPlugins = require('next-compose-plugins')
-const withTM = require('next-transpile-modules')([
+const { withExpo } = require("@expo/next-adapter");
+const withPlugins = require("next-compose-plugins");
+const withTM = require("next-transpile-modules")([
   // Add the name of your package here...
-  '@ui-kitten/components',
-])
+  "@ui-kitten/components",
+]);
 
 module.exports = withPlugins([withTM, [withExpo, { projectRoot: __dirname }]], {
   // ...
-})
+});
 ```
diff --git a/examples/with-expo-typescript/babel.config.js b/examples/with-expo-typescript/babel.config.js
index 344f4af109..b8369b148e 100644
--- a/examples/with-expo-typescript/babel.config.js
+++ b/examples/with-expo-typescript/babel.config.js
@@ -1,4 +1,4 @@
 // @generated: @expo/next-adapter@2.1.9
 // Learn more: https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/guides/using-nextjs.md#shared-steps
 
-module.exports = { presets: ['@expo/next-adapter/babel'] }
+module.exports = { presets: ["@expo/next-adapter/babel"] };
diff --git a/examples/with-expo-typescript/next.config.js b/examples/with-expo-typescript/next.config.js
index e6507825ed..6ef68ba6e4 100644
--- a/examples/with-expo-typescript/next.config.js
+++ b/examples/with-expo-typescript/next.config.js
@@ -1,8 +1,8 @@
 // @generated: @expo/next-adapter@2.1.9
 // Learn more: https://github.com/expo/expo/blob/master/docs/pages/guides/using-nextjs.md
 
-const { withExpo } = require('@expo/next-adapter')
+const { withExpo } = require("@expo/next-adapter");
 
 module.exports = withExpo({
   projectRoot: __dirname,
-})
+});
diff --git a/examples/with-expo-typescript/pages/_document.tsx b/examples/with-expo-typescript/pages/_document.tsx
index 888b873efa..7c37c6de8f 100644
--- a/examples/with-expo-typescript/pages/_document.tsx
+++ b/examples/with-expo-typescript/pages/_document.tsx
@@ -1,2 +1,2 @@
 // @generated: @expo/next-adapter@2.1.9
-export { default } from '@expo/next-adapter/document'
+export { default } from "@expo/next-adapter/document";
diff --git a/examples/with-expo-typescript/pages/index.tsx b/examples/with-expo-typescript/pages/index.tsx
index 61d3eba520..74015644bc 100644
--- a/examples/with-expo-typescript/pages/index.tsx
+++ b/examples/with-expo-typescript/pages/index.tsx
@@ -1,22 +1,22 @@
 // @generated: @expo/next-adapter@2.1.9
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
   },
   text: {
     fontSize: 16,
   },
-})
+});
 
 export default function App() {
   return (
     <View style={styles.container}>
       <Text style={styles.text}>Welcome to Expo + Next.js 👋</Text>
     </View>
-  )
+  );
 }
diff --git a/examples/with-facebook-pixel/_pages/_app.js b/examples/with-facebook-pixel/_pages/_app.js
index 98f1c10257..bdab5c4bde 100644
--- a/examples/with-facebook-pixel/_pages/_app.js
+++ b/examples/with-facebook-pixel/_pages/_app.js
@@ -1,24 +1,24 @@
-import { useEffect } from 'react'
-import Script from 'next/script'
-import { useRouter } from 'next/router'
-import * as fbq from '../lib/fpixel'
+import { useEffect } from "react";
+import Script from "next/script";
+import { useRouter } from "next/router";
+import * as fbq from "../lib/fpixel";
 
 function MyApp({ Component, pageProps }) {
-  const router = useRouter()
+  const router = useRouter();
 
   useEffect(() => {
     // This pageview only triggers the first time (it's important for Pixel to have real information)
-    fbq.pageview()
+    fbq.pageview();
 
     const handleRouteChange = () => {
-      fbq.pageview()
-    }
+      fbq.pageview();
+    };
 
-    router.events.on('routeChangeComplete', handleRouteChange)
+    router.events.on("routeChangeComplete", handleRouteChange);
     return () => {
-      router.events.off('routeChangeComplete', handleRouteChange)
-    }
-  }, [router.events])
+      router.events.off("routeChangeComplete", handleRouteChange);
+    };
+  }, [router.events]);
 
   return (
     <>
@@ -42,7 +42,7 @@ function MyApp({ Component, pageProps }) {
       />
       <Component {...pageProps} />
     </>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-facebook-pixel/_pages/_document.js b/examples/with-facebook-pixel/_pages/_document.js
index 9a42bc679a..a2759c6f8f 100644
--- a/examples/with-facebook-pixel/_pages/_document.js
+++ b/examples/with-facebook-pixel/_pages/_document.js
@@ -1,5 +1,5 @@
-import { Html, Head, Main, NextScript } from 'next/document'
-import { FB_PIXEL_ID } from '../lib/fpixel'
+import { Html, Head, Main, NextScript } from "next/document";
+import { FB_PIXEL_ID } from "../lib/fpixel";
 
 export default function Document() {
   return (
@@ -9,7 +9,7 @@ export default function Document() {
           <img
             height="1"
             width="1"
-            style={{ display: 'none' }}
+            style={{ display: "none" }}
             src={`https://www.facebook.com/tr?id=${FB_PIXEL_ID}&ev=PageView&noscript=1`}
           />
         </noscript>
@@ -19,5 +19,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/with-facebook-pixel/_pages/index.js b/examples/with-facebook-pixel/_pages/index.js
index 8aef8bb77c..ae236af798 100644
--- a/examples/with-facebook-pixel/_pages/index.js
+++ b/examples/with-facebook-pixel/_pages/index.js
@@ -1,10 +1,10 @@
-import Link from 'next/link'
-import * as fbq from '../lib/fpixel'
+import Link from "next/link";
+import * as fbq from "../lib/fpixel";
 
 export default function Home() {
   const handleClick = () => {
-    fbq.event('Purchase', { currency: 'USD', value: 10 })
-  }
+    fbq.event("Purchase", { currency: "USD", value: 10 });
+  };
 
   return (
     <div>
@@ -21,5 +21,5 @@ export default function Home() {
         <Link href="/navigation">Navigation page</Link>
       </p>
     </div>
-  )
+  );
 }
diff --git a/examples/with-facebook-pixel/_pages/navigation.js b/examples/with-facebook-pixel/_pages/navigation.js
index 328df6ed86..7580c6f36a 100644
--- a/examples/with-facebook-pixel/_pages/navigation.js
+++ b/examples/with-facebook-pixel/_pages/navigation.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function NavigationPage() {
   return (
@@ -9,5 +9,5 @@ export default function NavigationPage() {
       </p>
       <Link href="/">Return to home</Link>
     </div>
-  )
+  );
 }
diff --git a/examples/with-facebook-pixel/app/about/page.js b/examples/with-facebook-pixel/app/about/page.js
index 72bd94511e..784dbb4b4f 100644
--- a/examples/with-facebook-pixel/app/about/page.js
+++ b/examples/with-facebook-pixel/app/about/page.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function About() {
   return (
@@ -7,5 +7,5 @@ export default function About() {
 
       <Link href="/">back to home</Link>
     </>
-  )
+  );
 }
diff --git a/examples/with-facebook-pixel/app/components/FacebookPixel.js b/examples/with-facebook-pixel/app/components/FacebookPixel.js
index 7da3bd2ac8..d91090011a 100644
--- a/examples/with-facebook-pixel/app/components/FacebookPixel.js
+++ b/examples/with-facebook-pixel/app/components/FacebookPixel.js
@@ -1,19 +1,19 @@
-'use client'
+"use client";
 
-import { usePathname } from 'next/navigation'
-import Script from 'next/script'
-import { useEffect, useState } from 'react'
-import * as pixel from '/lib/fpixel'
+import { usePathname } from "next/navigation";
+import Script from "next/script";
+import { useEffect, useState } from "react";
+import * as pixel from "/lib/fpixel";
 
 const FacebookPixel = () => {
-  const [loaded, setLoaded] = useState(false)
-  const pathname = usePathname()
+  const [loaded, setLoaded] = useState(false);
+  const pathname = usePathname();
 
   useEffect(() => {
-    if (!loaded) return
+    if (!loaded) return;
 
-    pixel.pageview()
-  }, [pathname, loaded])
+    pixel.pageview();
+  }, [pathname, loaded]);
 
   return (
     <div>
@@ -25,7 +25,7 @@ const FacebookPixel = () => {
         data-pixel-id={pixel.FB_PIXEL_ID}
       />
     </div>
-  )
-}
+  );
+};
 
-export default FacebookPixel
+export default FacebookPixel;
diff --git a/examples/with-facebook-pixel/app/components/index.js b/examples/with-facebook-pixel/app/components/index.js
index c88f9e0a89..103b59787e 100644
--- a/examples/with-facebook-pixel/app/components/index.js
+++ b/examples/with-facebook-pixel/app/components/index.js
@@ -1 +1 @@
-export { default as FacebookPixel } from './FacebookPixel'
+export { default as FacebookPixel } from "./FacebookPixel";
diff --git a/examples/with-facebook-pixel/app/layout.js b/examples/with-facebook-pixel/app/layout.js
index 80838a5cad..3a1d5be136 100644
--- a/examples/with-facebook-pixel/app/layout.js
+++ b/examples/with-facebook-pixel/app/layout.js
@@ -1,4 +1,4 @@
-import { FacebookPixel } from './components'
+import { FacebookPixel } from "./components";
 
 export default function RootLayout({ children }) {
   return (
@@ -8,5 +8,5 @@ export default function RootLayout({ children }) {
         <FacebookPixel />
       </body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-facebook-pixel/app/page.js b/examples/with-facebook-pixel/app/page.js
index a978cc1d42..5354bae1b4 100644
--- a/examples/with-facebook-pixel/app/page.js
+++ b/examples/with-facebook-pixel/app/page.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Home() {
   return (
@@ -10,5 +10,5 @@ export default function Home() {
       <h2>If you want to see old implementation, go to `_pages/index.js`</h2>
       <Link href="/about">About page</Link>
     </>
-  )
+  );
 }
diff --git a/examples/with-facebook-pixel/lib/fpixel.js b/examples/with-facebook-pixel/lib/fpixel.js
index 145f000bfc..4acfceb8a1 100644
--- a/examples/with-facebook-pixel/lib/fpixel.js
+++ b/examples/with-facebook-pixel/lib/fpixel.js
@@ -1,10 +1,10 @@
-export const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID
+export const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID;
 
 export const pageview = () => {
-  window.fbq('track', 'PageView')
-}
+  window.fbq("track", "PageView");
+};
 
 // https://developers.facebook.com/docs/facebook-pixel/advanced/
 export const event = (name, options = {}) => {
-  window.fbq('track', name, options)
-}
+  window.fbq("track", name, options);
+};
diff --git a/examples/with-facebook-pixel/public/scripts/pixel.js b/examples/with-facebook-pixel/public/scripts/pixel.js
index 5a5e50b603..1bf3cbffd6 100644
--- a/examples/with-facebook-pixel/public/scripts/pixel.js
+++ b/examples/with-facebook-pixel/public/scripts/pixel.js
@@ -1,27 +1,27 @@
-const PIXEL_ID = document.currentScript.getAttribute('data-pixel-id')
+const PIXEL_ID = document.currentScript.getAttribute("data-pixel-id");
 
 function initializeFacebookPixel(f, b, e, v, n, t, s) {
-  if (f.fbq) return
+  if (f.fbq) return;
   n = f.fbq = function () {
-    n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments)
-  }
-  if (!f._fbq) f._fbq = n
-  n.push = n
-  n.loaded = !0
-  n.version = '2.0'
-  n.queue = []
-  t = b.createElement(e)
-  t.async = !0
-  t.src = v
-  s = b.getElementsByTagName(e)[0]
-  s.parentNode.insertBefore(t, s)
+    n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);
+  };
+  if (!f._fbq) f._fbq = n;
+  n.push = n;
+  n.loaded = !0;
+  n.version = "2.0";
+  n.queue = [];
+  t = b.createElement(e);
+  t.async = !0;
+  t.src = v;
+  s = b.getElementsByTagName(e)[0];
+  s.parentNode.insertBefore(t, s);
 }
 
 initializeFacebookPixel(
   window,
   document,
-  'script',
-  'https://connect.facebook.net/en_US/fbevents.js'
-)
+  "script",
+  "https://connect.facebook.net/en_US/fbevents.js",
+);
 
-window.fbq('init', PIXEL_ID)
+window.fbq("init", PIXEL_ID);
diff --git a/examples/with-fauna/actions/entry.ts b/examples/with-fauna/actions/entry.ts
index 3f69f7284d..5e5dff4697 100644
--- a/examples/with-fauna/actions/entry.ts
+++ b/examples/with-fauna/actions/entry.ts
@@ -1,22 +1,22 @@
-'use server'
+"use server";
 
-import { revalidatePath } from 'next/cache'
-import { createEntry } from '@/lib/fauna'
+import { revalidatePath } from "next/cache";
+import { createEntry } from "@/lib/fauna";
 
 export async function createEntryAction(prevState: any, formData: FormData) {
-  const name = formData.get('name') as string
-  const message = formData.get('message') as string
+  const name = formData.get("name") as string;
+  const message = formData.get("message") as string;
   try {
-    await createEntry(name, message)
-    revalidatePath('/')
+    await createEntry(name, message);
+    revalidatePath("/");
     return {
-      successMessage: 'Thank you for signing the guest book',
+      successMessage: "Thank you for signing the guest book",
       errorMessage: null,
-    }
+    };
   } catch (error) {
     return {
       successMessage: null,
-      errorMessage: 'Something went wrong. Please try again',
-    }
+      errorMessage: "Something went wrong. Please try again",
+    };
   }
 }
diff --git a/examples/with-fauna/app/guestbook-page.tsx b/examples/with-fauna/app/guestbook-page.tsx
index 553a61489a..7af17d66b5 100644
--- a/examples/with-fauna/app/guestbook-page.tsx
+++ b/examples/with-fauna/app/guestbook-page.tsx
@@ -1,7 +1,7 @@
-import cn from 'classnames'
-import formatDate from 'date-fns/format'
-import EntryForm from '@/components/EntryForm'
-import { EntryType } from './page'
+import cn from "classnames";
+import formatDate from "date-fns/format";
+import EntryForm from "@/components/EntryForm";
+import { EntryType } from "./page";
 
 const EntryItem = ({ entry }: { entry: EntryType }) => (
   <div className="flex flex-col space-y-2">
@@ -12,28 +12,28 @@ const EntryItem = ({ entry }: { entry: EntryType }) => (
       <p className="text-sm text-gray-400 dark:text-gray-600">
         {formatDate(
           new Date(entry.createdAt.isoString),
-          "d MMM yyyy 'at' h:mm bb"
+          "d MMM yyyy 'at' h:mm bb",
         )}
       </p>
     </div>
   </div>
-)
+);
 
 export default async function GuestbookPage({
   entries,
 }: {
-  entries: EntryType[]
+  entries: EntryType[];
 }) {
   return (
     <main className="max-w-4xl mx-auto p-4">
       <div
         className={cn(
-          'border border-blue-200 rounded p-6',
-          'my-4 w-full dark:border-gray-800 bg-blue-50',
-          'dark:bg-blue-opaque'
+          "border border-blue-200 rounded p-6",
+          "my-4 w-full dark:border-gray-800 bg-blue-50",
+          "dark:bg-blue-opaque",
         )}
       >
-        <h5 className={cn('text-lg md:text-xl font-bold', 'text-gray-900')}>
+        <h5 className={cn("text-lg md:text-xl font-bold", "text-gray-900")}>
           Sign the Guestbook
         </h5>
         <p className="my-1 text-gray-800">
@@ -48,5 +48,5 @@ export default async function GuestbookPage({
         ))}
       </div>
     </main>
-  )
+  );
 }
diff --git a/examples/with-fauna/app/layout.tsx b/examples/with-fauna/app/layout.tsx
index afbaec7170..67369055cf 100644
--- a/examples/with-fauna/app/layout.tsx
+++ b/examples/with-fauna/app/layout.tsx
@@ -1,21 +1,21 @@
-import './globals.css'
+import "./globals.css";
 
 export const metadata: {
-  title: string
-  description: string
+  title: string;
+  description: string;
 } = {
-  title: 'Next.js + Fauna example',
-  description: 'Generated by Next.js',
-}
+  title: "Next.js + Fauna example",
+  description: "Generated by Next.js",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-fauna/app/page.tsx b/examples/with-fauna/app/page.tsx
index 8d7292c155..8c245ddab2 100644
--- a/examples/with-fauna/app/page.tsx
+++ b/examples/with-fauna/app/page.tsx
@@ -1,16 +1,16 @@
-import { getAllEntries } from '@/lib/fauna'
-import GuestbookPage from './guestbook-page'
+import { getAllEntries } from "@/lib/fauna";
+import GuestbookPage from "./guestbook-page";
 
 export type EntryType = {
-  id: string
-  name: string
-  message: string
+  id: string;
+  name: string;
+  message: string;
   createdAt: {
-    isoString: string
-  }
-}
+    isoString: string;
+  };
+};
 
 export default async function Page() {
-  const entries = (await getAllEntries()) as EntryType[]
-  return <GuestbookPage entries={entries} />
+  const entries = (await getAllEntries()) as EntryType[];
+  return <GuestbookPage entries={entries} />;
 }
diff --git a/examples/with-fauna/components/EntryForm.tsx b/examples/with-fauna/components/EntryForm.tsx
index 5f3cea173b..eca9d68d66 100644
--- a/examples/with-fauna/components/EntryForm.tsx
+++ b/examples/with-fauna/components/EntryForm.tsx
@@ -1,56 +1,56 @@
-'use client'
+"use client";
 
-import cn from 'classnames'
-import { createEntryAction } from '@/actions/entry'
+import cn from "classnames";
+import { createEntryAction } from "@/actions/entry";
 // @ts-ignore
-import { useFormState, useFormStatus } from 'react-dom'
-import LoadingSpinner from '@/components/LoadingSpinner'
-import SuccessMessage from '@/components/SuccessMessage'
-import ErrorMessage from '@/components/ErrorMessage'
+import { useFormState, useFormStatus } from "react-dom";
+import LoadingSpinner from "@/components/LoadingSpinner";
+import SuccessMessage from "@/components/SuccessMessage";
+import ErrorMessage from "@/components/ErrorMessage";
 
 const inputClasses = cn(
-  'block py-2 bg-white dark:bg-gray-800',
-  'rounded-md border-gray-300 focus:ring-blue-500',
-  'focus:border-blue-500 text-gray-900 dark:text-gray-100'
-)
+  "block py-2 bg-white dark:bg-gray-800",
+  "rounded-md border-gray-300 focus:ring-blue-500",
+  "focus:border-blue-500 text-gray-900 dark:text-gray-100",
+);
 
 const initialState = {
   successMessage: null,
   errorMessage: null,
-}
+};
 
 export default function EntryForm() {
-  const [state, formAction] = useFormState(createEntryAction, initialState)
-  const { pending } = useFormStatus()
+  const [state, formAction] = useFormState(createEntryAction, initialState);
+  const { pending } = useFormStatus();
 
   return (
     <>
       <form className="relative flex my-4" action={formAction}>
         <input
           required
-          className={cn(inputClasses, 'w-1/3 mr-2 px-4')}
+          className={cn(inputClasses, "w-1/3 mr-2 px-4")}
           aria-label="Your name"
           placeholder="Your name..."
           name="name"
         />
         <input
           required
-          className={cn(inputClasses, 'pl-4 pr-32 flex-grow')}
+          className={cn(inputClasses, "pl-4 pr-32 flex-grow")}
           aria-label="Your message"
           placeholder="Your message..."
           name="message"
         />
         <button
           className={cn(
-            'flex items-center justify-center',
-            'absolute right-1 top-1 px-4 font-bold h-8',
-            'bg-gray-100 dark:bg-gray-700 text-gray-900',
-            'dark:text-gray-100 rounded w-28'
+            "flex items-center justify-center",
+            "absolute right-1 top-1 px-4 font-bold h-8",
+            "bg-gray-100 dark:bg-gray-700 text-gray-900",
+            "dark:text-gray-100 rounded w-28",
           )}
           type="submit"
           disabled={pending}
         >
-          {pending ? <LoadingSpinner /> : 'Sign'}
+          {pending ? <LoadingSpinner /> : "Sign"}
         </button>
       </form>
       {state?.successMessage ? (
@@ -60,5 +60,5 @@ export default function EntryForm() {
         <ErrorMessage>{state.errorMessage}</ErrorMessage>
       ) : null}
     </>
-  )
+  );
 }
diff --git a/examples/with-fauna/components/ErrorMessage.tsx b/examples/with-fauna/components/ErrorMessage.tsx
index e782d4cf28..df692190aa 100644
--- a/examples/with-fauna/components/ErrorMessage.tsx
+++ b/examples/with-fauna/components/ErrorMessage.tsx
@@ -1,7 +1,7 @@
 export default function ErrorMessage({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <p className="flex items-center text-sm font-bold text-red-800 dark:text-red-400">
@@ -19,5 +19,5 @@ export default function ErrorMessage({
       </svg>
       {children}
     </p>
-  )
+  );
 }
diff --git a/examples/with-fauna/components/LoadingSpinner.tsx b/examples/with-fauna/components/LoadingSpinner.tsx
index 1287fdc81d..ab1a26fcb2 100644
--- a/examples/with-fauna/components/LoadingSpinner.tsx
+++ b/examples/with-fauna/components/LoadingSpinner.tsx
@@ -20,5 +20,5 @@ export default function LoadingSpinner() {
         d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
       />
     </svg>
-  )
+  );
 }
diff --git a/examples/with-fauna/components/SuccessMessage.tsx b/examples/with-fauna/components/SuccessMessage.tsx
index ff4cff06bc..670e9e6a94 100644
--- a/examples/with-fauna/components/SuccessMessage.tsx
+++ b/examples/with-fauna/components/SuccessMessage.tsx
@@ -1,7 +1,7 @@
 export default function SuccessMessage({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <p className="flex items-center text-sm font-bold text-green-700 dark:text-green-400">
@@ -19,5 +19,5 @@ export default function SuccessMessage({
       </svg>
       {children}
     </p>
-  )
+  );
 }
diff --git a/examples/with-fauna/lib/fauna.ts b/examples/with-fauna/lib/fauna.ts
index 09ac49ae7b..7e902fc078 100644
--- a/examples/with-fauna/lib/fauna.ts
+++ b/examples/with-fauna/lib/fauna.ts
@@ -1,20 +1,20 @@
-import 'server-only'
-import { Client, fql, QuerySuccess, QueryValueObject } from 'fauna'
+import "server-only";
+import { Client, fql, QuerySuccess, QueryValueObject } from "fauna";
 
 const client = new Client({
   secret: process.env.FAUNA_CLIENT_SECRET,
-})
+});
 
 export const getAllEntries = async () => {
   try {
     const dbresponse: QuerySuccess<QueryValueObject> = await client.query(fql`
 		Entry.all()
-	`)
-    return dbresponse.data.data
+	`);
+    return dbresponse.data.data;
   } catch (error: any) {
-    throw new Error(error.message)
+    throw new Error(error.message);
   }
-}
+};
 
 export const createEntry = async (name: string, message: string) => {
   try {
@@ -23,9 +23,9 @@ export const createEntry = async (name: string, message: string) => {
 				name: ${name},
 				message: ${message},
 				createdAt: Time.now(),
-			})`)
-    return dbresponse.data
+			})`);
+    return dbresponse.data;
   } catch (error: any) {
-    throw new Error(error.message)
+    throw new Error(error.message);
   }
-}
+};
diff --git a/examples/with-fauna/next.config.js b/examples/with-fauna/next.config.js
index 692c4b6c8a..497197982c 100644
--- a/examples/with-fauna/next.config.js
+++ b/examples/with-fauna/next.config.js
@@ -1,3 +1,3 @@
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-fauna/postcss.config.js b/examples/with-fauna/postcss.config.js
index 33ad091d26..12a703d900 100644
--- a/examples/with-fauna/postcss.config.js
+++ b/examples/with-fauna/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/with-fauna/tailwind.config.js b/examples/with-fauna/tailwind.config.js
index 0b4c17d126..3de3845850 100644
--- a/examples/with-fauna/tailwind.config.js
+++ b/examples/with-fauna/tailwind.config.js
@@ -1,12 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {},
   },
   plugins: [],
-}
+};
diff --git a/examples/with-fela/FelaProvider.js b/examples/with-fela/FelaProvider.js
index c4155153d1..fcd134f6e4 100755
--- a/examples/with-fela/FelaProvider.js
+++ b/examples/with-fela/FelaProvider.js
@@ -1,17 +1,17 @@
 /* eslint-disable */
-import { Component } from 'react'
-import { RendererProvider } from 'react-fela'
-import getFelaRenderer from './getFelaRenderer'
+import { Component } from "react";
+import { RendererProvider } from "react-fela";
+import getFelaRenderer from "./getFelaRenderer";
 
-const fallbackRenderer = getFelaRenderer()
+const fallbackRenderer = getFelaRenderer();
 
 export default class FelaProvider extends Component {
   render() {
-    const renderer = this.props.renderer || fallbackRenderer
+    const renderer = this.props.renderer || fallbackRenderer;
     return (
       <RendererProvider renderer={renderer}>
         {this.props.children}
       </RendererProvider>
-    )
+    );
   }
 }
diff --git a/examples/with-fela/getFelaRenderer.js b/examples/with-fela/getFelaRenderer.js
index 290d46cc05..c7c776aa82 100644
--- a/examples/with-fela/getFelaRenderer.js
+++ b/examples/with-fela/getFelaRenderer.js
@@ -1,8 +1,8 @@
-import { createRenderer } from 'fela'
-import webPreset from 'fela-preset-web'
+import { createRenderer } from "fela";
+import webPreset from "fela-preset-web";
 
 export default function getRenderer() {
   return createRenderer({
     plugins: [...webPreset],
-  })
+  });
 }
diff --git a/examples/with-fela/pages/_app.js b/examples/with-fela/pages/_app.js
index 2bb9f45650..b00e2e98cc 100644
--- a/examples/with-fela/pages/_app.js
+++ b/examples/with-fela/pages/_app.js
@@ -1,11 +1,11 @@
-import FelaProvider from '../FelaProvider'
+import FelaProvider from "../FelaProvider";
 
 function MyApp({ Component, pageProps, renderer }) {
   return (
     <FelaProvider renderer={renderer}>
       <Component {...pageProps} />
     </FelaProvider>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-fela/pages/_document.js b/examples/with-fela/pages/_document.js
index 8ceec1121a..5865d0673d 100755
--- a/examples/with-fela/pages/_document.js
+++ b/examples/with-fela/pages/_document.js
@@ -1,24 +1,24 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
-import { renderToNodeList } from 'react-fela'
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import { renderToNodeList } from "react-fela";
 
-import getFelaRenderer from '../getFelaRenderer'
+import getFelaRenderer from "../getFelaRenderer";
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const renderer = getFelaRenderer()
-    const originalRenderPage = ctx.renderPage
+    const renderer = getFelaRenderer();
+    const originalRenderPage = ctx.renderPage;
 
     ctx.renderPage = () =>
       originalRenderPage({
         enhanceApp: (App) => (props) => <App {...props} renderer={renderer} />,
-      })
+      });
 
-    const initialProps = await Document.getInitialProps(ctx)
-    const styles = renderToNodeList(renderer)
+    const initialProps = await Document.getInitialProps(ctx);
+    const styles = renderToNodeList(renderer);
     return {
       ...initialProps,
       styles: [...initialProps.styles, ...styles],
-    }
+    };
   }
 
   render() {
@@ -30,6 +30,6 @@ export default class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
diff --git a/examples/with-fela/pages/index.js b/examples/with-fela/pages/index.js
index df6583c7ae..1d1bc725bf 100755
--- a/examples/with-fela/pages/index.js
+++ b/examples/with-fela/pages/index.js
@@ -1,36 +1,36 @@
-import { useFela, FelaComponent } from 'react-fela'
+import { useFela, FelaComponent } from "react-fela";
 
 const Container = ({ children }) => (
   <FelaComponent
     style={{
       maxWidth: 700,
-      marginLeft: 'auto',
-      marginRight: 'auto',
+      marginLeft: "auto",
+      marginRight: "auto",
       lineHeight: 1.5,
     }}
     as="div"
   >
     {children}
   </FelaComponent>
-)
+);
 
 const textRule = ({ size, theme }) => ({
   fontFamily:
     '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
   fontSize: size,
-  color: '#333',
-})
+  color: "#333",
+});
 
 function Text({ size = 16, children }) {
-  const { css } = useFela({ size })
+  const { css } = useFela({ size });
 
-  return <p className={css(textRule)}>{children}</p>
+  return <p className={css(textRule)}>{children}</p>;
 }
 
 function Title({ children, size = 24 }) {
-  const { css } = useFela()
+  const { css } = useFela();
 
-  return <h1 className={css({ fontSize: size, color: '#555' })}>{children}</h1>
+  return <h1 className={css({ fontSize: size, color: "#555" })}>{children}</h1>;
 }
 
 export default function Home() {
@@ -39,5 +39,5 @@ export default function Home() {
       <Title size={50}>My Title</Title>
       <Text>Hi, I am Fela.</Text>
     </Container>
-  )
+  );
 }
diff --git a/examples/with-filbert/pages/_document.js b/examples/with-filbert/pages/_document.js
index 979140b707..da96d8cdee 100644
--- a/examples/with-filbert/pages/_document.js
+++ b/examples/with-filbert/pages/_document.js
@@ -1,22 +1,22 @@
-import Document from 'next/document'
-import { createStylesheet } from '@filbert-js/server-stylesheet'
+import Document from "next/document";
+import { createStylesheet } from "@filbert-js/server-stylesheet";
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const sheet = createStylesheet()
-    const originalRenderPage = ctx.renderPage
+    const sheet = createStylesheet();
+    const originalRenderPage = ctx.renderPage;
     try {
       ctx.renderPage = () =>
         originalRenderPage({
           enhanceApp: (App) => {
             return (props) => {
-              return sheet.collectStyles(<App {...props} />)
-            }
+              return sheet.collectStyles(<App {...props} />);
+            };
           },
-        })
-      const initialProps = await Document.getInitialProps(ctx)
+        });
+      const initialProps = await Document.getInitialProps(ctx);
 
-      const styleTags = sheet.getReactElements()
+      const styleTags = sheet.getReactElements();
       return {
         ...initialProps,
         styles: (
@@ -25,10 +25,10 @@ class MyDocument extends Document {
             {initialProps.styles}
           </>
         ),
-      }
+      };
     } finally {
     }
   }
 }
 
-export default MyDocument
+export default MyDocument;
diff --git a/examples/with-filbert/pages/index.js b/examples/with-filbert/pages/index.js
index fb4f6eaea4..32f705afa3 100644
--- a/examples/with-filbert/pages/index.js
+++ b/examples/with-filbert/pages/index.js
@@ -1,6 +1,6 @@
-import { Global, css, styled } from '@filbert-js/macro'
+import { Global, css, styled } from "@filbert-js/macro";
 
-import React from 'react'
+import React from "react";
 
 const Heading = styled.h1`
   outline: none;
@@ -19,10 +19,10 @@ const Heading = styled.h1`
     color: #3793e0;
     text-decoration: none;
   }
-`
+`;
 const Small = styled.div`
   color: black;
-`
+`;
 const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -32,7 +32,7 @@ const Container = styled.div`
   > * + * {
     margin-top: 1rem;
   }
-`
+`;
 export default function Home() {
   return (
     <Container>
@@ -60,7 +60,7 @@ export default function Home() {
       />
       <Heading>
         <a target="_black" href="https://filbert-js.vercel.app/">
-          {' '}
+          {" "}
           Welcome to Filbert!
         </a>
       </Heading>
@@ -73,5 +73,5 @@ export default function Home() {
         Nextjs is awesome
       </div>
     </Container>
-  )
+  );
 }
diff --git a/examples/with-fingerprintjs-pro/components/CacheStrategySelector.tsx b/examples/with-fingerprintjs-pro/components/CacheStrategySelector.tsx
index b48364e9d6..80332c4fa7 100644
--- a/examples/with-fingerprintjs-pro/components/CacheStrategySelector.tsx
+++ b/examples/with-fingerprintjs-pro/components/CacheStrategySelector.tsx
@@ -1,9 +1,9 @@
-import { useRouter } from 'next/router'
+import { useRouter } from "next/router";
 
 export const CacheStrategySelector = () => {
-  const router = useRouter()
-  const { asPath, route } = router
-  const value = asPath.split('/')[2]
+  const router = useRouter();
+  const { asPath, route } = router;
+  const value = asPath.split("/")[2];
 
   return (
     <div className="cache-option-toggler">
@@ -11,9 +11,9 @@ export const CacheStrategySelector = () => {
       <select
         name="cache-option"
         onChange={(event) => {
-          const newValue = event.currentTarget.value
-          const newRoute = route.replace('[cacheStrategy]', newValue)
-          router.push(newRoute, undefined, { scroll: false })
+          const newValue = event.currentTarget.value;
+          const newRoute = route.replace("[cacheStrategy]", newValue);
+          router.push(newRoute, undefined, { scroll: false });
         }}
         value={value}
       >
@@ -23,5 +23,5 @@ export const CacheStrategySelector = () => {
         <option value="ls-cache">Local Storage Cache</option>
       </select>
     </div>
-  )
-}
+  );
+};
diff --git a/examples/with-fingerprintjs-pro/components/Nav.tsx b/examples/with-fingerprintjs-pro/components/Nav.tsx
index fb3e874bcf..c122d7a9bb 100644
--- a/examples/with-fingerprintjs-pro/components/Nav.tsx
+++ b/examples/with-fingerprintjs-pro/components/Nav.tsx
@@ -1,17 +1,17 @@
-import { PropsWithChildren } from 'react'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import { RouterProps } from './types'
+import { PropsWithChildren } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { RouterProps } from "./types";
 
 const CustomLink: React.FC<PropsWithChildren<{ to: string }>> = ({
   to,
   children,
 }) => {
-  const router = useRouter()
-  const { pathname } = router
-  const { cacheStrategy } = router.query as RouterProps
-  const linkPathname = `/${to}/[cacheStrategy]`
-  const className = `nav-link${pathname === linkPathname ? ' active' : ''}`
+  const router = useRouter();
+  const { pathname } = router;
+  const { cacheStrategy } = router.query as RouterProps;
+  const linkPathname = `/${to}/[cacheStrategy]`;
+  const className = `nav-link${pathname === linkPathname ? " active" : ""}`;
   return (
     <div>
       <Link
@@ -25,8 +25,8 @@ const CustomLink: React.FC<PropsWithChildren<{ to: string }>> = ({
         {children}
       </Link>
     </div>
-  )
-}
+  );
+};
 
 export const Nav: React.FC = () => {
   return (
@@ -34,5 +34,5 @@ export const Nav: React.FC = () => {
       <CustomLink to="home">Home</CustomLink>
       <CustomLink to="signin">Sign in</CustomLink>
     </nav>
-  )
-}
+  );
+};
diff --git a/examples/with-fingerprintjs-pro/components/Toggler.tsx b/examples/with-fingerprintjs-pro/components/Toggler.tsx
index 6af48463dd..9033dcf641 100644
--- a/examples/with-fingerprintjs-pro/components/Toggler.tsx
+++ b/examples/with-fingerprintjs-pro/components/Toggler.tsx
@@ -1,7 +1,7 @@
-import { PropsWithChildren, useState } from 'react'
+import { PropsWithChildren, useState } from "react";
 
 function Toggler({ children }: PropsWithChildren<{}>) {
-  const [showChildren, setShowChildren] = useState(true)
+  const [showChildren, setShowChildren] = useState(true);
 
   return (
     <div className="toggler">
@@ -15,11 +15,11 @@ function Toggler({ children }: PropsWithChildren<{}>) {
         className="toggle-button"
         onClick={() => setShowChildren((show) => !show)}
       >
-        {showChildren ? 'Hide' : 'Show'} visitor data
+        {showChildren ? "Hide" : "Show"} visitor data
       </button>
       {showChildren && children}
     </div>
-  )
+  );
 }
 
-export default Toggler
+export default Toggler;
diff --git a/examples/with-fingerprintjs-pro/components/VisitorDataPresenter.tsx b/examples/with-fingerprintjs-pro/components/VisitorDataPresenter.tsx
index acdc92f846..c0aa631d02 100644
--- a/examples/with-fingerprintjs-pro/components/VisitorDataPresenter.tsx
+++ b/examples/with-fingerprintjs-pro/components/VisitorDataPresenter.tsx
@@ -1,27 +1,27 @@
-import { VisitorData } from '@fingerprintjs/fingerprintjs-pro-react'
+import { VisitorData } from "@fingerprintjs/fingerprintjs-pro-react";
 
 function VisitorDataPresenter({
   data,
   isLoading,
   error,
 }: {
-  data?: VisitorData
-  isLoading?: boolean
-  error?: Error
+  data?: VisitorData;
+  isLoading?: boolean;
+  error?: Error;
 }) {
   if (error) {
-    return <p>An error occurred: {error.message}</p>
+    return <p>An error occurred: {error.message}</p>;
   }
 
   return (
     <div className="visitor-data">
       <p>
-        <b>Visitor ID:</b>{' '}
+        <b>Visitor ID:</b>{" "}
         {isLoading
-          ? 'Loading...'
+          ? "Loading..."
           : data
           ? data.visitorId
-          : 'not established yet'}
+          : "not established yet"}
       </p>
       {data && (
         <>
@@ -32,7 +32,7 @@ function VisitorDataPresenter({
         </>
       )}
     </div>
-  )
+  );
 }
 
-export default VisitorDataPresenter
+export default VisitorDataPresenter;
diff --git a/examples/with-fingerprintjs-pro/components/types.ts b/examples/with-fingerprintjs-pro/components/types.ts
index e918105577..4f2208f054 100644
--- a/examples/with-fingerprintjs-pro/components/types.ts
+++ b/examples/with-fingerprintjs-pro/components/types.ts
@@ -1,9 +1,9 @@
 export type CacheStrategyPath =
-  | 'no-cache'
-  | 'memory-cache'
-  | 'session-storage-cache'
-  | 'ls-cache'
+  | "no-cache"
+  | "memory-cache"
+  | "session-storage-cache"
+  | "ls-cache";
 
 export type RouterProps = {
-  cacheStrategy: CacheStrategyPath
-}
+  cacheStrategy: CacheStrategyPath;
+};
diff --git a/examples/with-fingerprintjs-pro/next.config.js b/examples/with-fingerprintjs-pro/next.config.js
index bd990eee34..8d92d3bb68 100644
--- a/examples/with-fingerprintjs-pro/next.config.js
+++ b/examples/with-fingerprintjs-pro/next.config.js
@@ -4,12 +4,12 @@ const nextConfig = {
   async redirects() {
     return [
       {
-        source: '/',
-        destination: '/home/memory-cache',
+        source: "/",
+        destination: "/home/memory-cache",
         permanent: true,
       },
-    ]
+    ];
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-fingerprintjs-pro/pages/_app.tsx b/examples/with-fingerprintjs-pro/pages/_app.tsx
index d2e0945f22..00555f9aeb 100644
--- a/examples/with-fingerprintjs-pro/pages/_app.tsx
+++ b/examples/with-fingerprintjs-pro/pages/_app.tsx
@@ -1,37 +1,37 @@
-import { useRouter } from 'next/router'
-import Head from 'next/head'
-import '../styles/globals.css'
-import '../styles/App.css'
-import { InMemoryCache } from '../providers/InMemoryCache'
-import { LocalStorageCache } from '../providers/LocalStorageCache'
-import { WithoutCache } from '../providers/WithoutCache'
-import { SessionStorageCache } from '../providers/SessionStorageCache'
-import { CacheStrategySelector } from '../components/CacheStrategySelector'
-import { Nav } from '../components/Nav'
-import type { AppProps } from 'next/app'
-import type { CacheStrategyPath, RouterProps } from '../components/types'
+import { useRouter } from "next/router";
+import Head from "next/head";
+import "../styles/globals.css";
+import "../styles/App.css";
+import { InMemoryCache } from "../providers/InMemoryCache";
+import { LocalStorageCache } from "../providers/LocalStorageCache";
+import { WithoutCache } from "../providers/WithoutCache";
+import { SessionStorageCache } from "../providers/SessionStorageCache";
+import { CacheStrategySelector } from "../components/CacheStrategySelector";
+import { Nav } from "../components/Nav";
+import type { AppProps } from "next/app";
+import type { CacheStrategyPath, RouterProps } from "../components/types";
 
 const getFingerprintJsProProviderByCacheStrategy = (
-  cacheStrategy: CacheStrategyPath
+  cacheStrategy: CacheStrategyPath,
 ) => {
   switch (cacheStrategy) {
-    case 'no-cache':
-      return WithoutCache
-    case 'ls-cache':
-      return LocalStorageCache
-    case 'session-storage-cache':
-      return SessionStorageCache
+    case "no-cache":
+      return WithoutCache;
+    case "ls-cache":
+      return LocalStorageCache;
+    case "session-storage-cache":
+      return SessionStorageCache;
     default:
-      return InMemoryCache
+      return InMemoryCache;
   }
-}
+};
 
 function MyApp({ Component, pageProps }: AppProps) {
-  const router = useRouter()
-  const { cacheStrategy } = router.query as RouterProps
+  const router = useRouter();
+  const { cacheStrategy } = router.query as RouterProps;
 
   const ConfiguredFingerprintJsProProvider =
-    getFingerprintJsProProviderByCacheStrategy(cacheStrategy)
+    getFingerprintJsProProviderByCacheStrategy(cacheStrategy);
 
   return (
     <div className="layout">
@@ -46,7 +46,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         </ConfiguredFingerprintJsProProvider>
       </main>
     </div>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-fingerprintjs-pro/pages/home/[cacheStrategy].tsx b/examples/with-fingerprintjs-pro/pages/home/[cacheStrategy].tsx
index c9a786a6bc..26cbfba2a0 100644
--- a/examples/with-fingerprintjs-pro/pages/home/[cacheStrategy].tsx
+++ b/examples/with-fingerprintjs-pro/pages/home/[cacheStrategy].tsx
@@ -1,21 +1,21 @@
-import Toggler from '../../components/Toggler'
-import VisitorDataPresenter from '../../components/VisitorDataPresenter'
-import { useContext } from 'react'
+import Toggler from "../../components/Toggler";
+import VisitorDataPresenter from "../../components/VisitorDataPresenter";
+import { useContext } from "react";
 import {
   FpjsContext,
   useVisitorData,
-} from '@fingerprintjs/fingerprintjs-pro-react'
+} from "@fingerprintjs/fingerprintjs-pro-react";
 
 function VisitorDataComponent() {
-  const { data, isLoading, error } = useVisitorData({ extendedResult: true })
+  const { data, isLoading, error } = useVisitorData({ extendedResult: true });
 
   return (
     <VisitorDataPresenter data={data} isLoading={isLoading} error={error} />
-  )
+  );
 }
 
 function HomePage() {
-  const { clearCache } = useContext(FpjsContext)
+  const { clearCache } = useContext(FpjsContext);
 
   return (
     <section className="body">
@@ -32,7 +32,7 @@ function HomePage() {
         Clear cache
       </button>
     </section>
-  )
+  );
 }
 
-export default HomePage
+export default HomePage;
diff --git a/examples/with-fingerprintjs-pro/pages/signin/[cacheStrategy].tsx b/examples/with-fingerprintjs-pro/pages/signin/[cacheStrategy].tsx
index c111d4527b..d4cc508217 100644
--- a/examples/with-fingerprintjs-pro/pages/signin/[cacheStrategy].tsx
+++ b/examples/with-fingerprintjs-pro/pages/signin/[cacheStrategy].tsx
@@ -1,19 +1,19 @@
-import { useState } from 'react'
-import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'
-import VisitorDataPresenter from '../../components/VisitorDataPresenter'
+import { useState } from "react";
+import { useVisitorData } from "@fingerprintjs/fingerprintjs-pro-react";
+import VisitorDataPresenter from "../../components/VisitorDataPresenter";
 
 function SignInPage() {
-  const [login, setLogin] = useState('')
-  const [password, setPassword] = useState('')
-  const [tag, setTag] = useState('')
+  const [login, setLogin] = useState("");
+  const [password, setPassword] = useState("");
+  const [tag, setTag] = useState("");
 
-  const [ignoreCache, setIgnoreCache] = useState(false)
-  const [extendedResult, setExtendedResult] = useState(false)
+  const [ignoreCache, setIgnoreCache] = useState(false);
+  const [extendedResult, setExtendedResult] = useState(false);
 
   const { getData, data, isLoading, error } = useVisitorData(
     { extendedResult, tag, linkedId: login },
-    { immediate: false }
-  )
+    { immediate: false },
+  );
 
   return (
     <section className="body">
@@ -22,8 +22,8 @@ function SignInPage() {
         <p>
           Another common use-case is when you want to only fingerprint a user
           after they perform some action, in this case - submit a form. For this
-          purpose <code>useVisitorData</code> hook should be called with{' '}
-          <code>immediate</code> flag set to <code>false</code> and call the{' '}
+          purpose <code>useVisitorData</code> hook should be called with{" "}
+          <code>immediate</code> flag set to <code>false</code> and call the{" "}
           <code>getData</code> function on form submission.
         </p>
         <p>
@@ -57,14 +57,14 @@ function SignInPage() {
       <form
         className="form"
         onSubmit={(e) => {
-          e.preventDefault()
+          e.preventDefault();
           getData({ ignoreCache }).then((data) => {
             if (data) {
               // do something with the visitor data
               // for example, append visitor data to the form data to send to your server
-              console.log(data)
+              console.log(data);
             }
-          })
+          });
         }}
       >
         <div className="form-control">
@@ -106,7 +106,7 @@ function SignInPage() {
       </form>
       <VisitorDataPresenter data={data} isLoading={isLoading} error={error} />
     </section>
-  )
+  );
 }
 
-export default SignInPage
+export default SignInPage;
diff --git a/examples/with-fingerprintjs-pro/providers/InMemoryCache.tsx b/examples/with-fingerprintjs-pro/providers/InMemoryCache.tsx
index a9c92a6698..c0ede41d6e 100644
--- a/examples/with-fingerprintjs-pro/providers/InMemoryCache.tsx
+++ b/examples/with-fingerprintjs-pro/providers/InMemoryCache.tsx
@@ -1,16 +1,16 @@
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren } from "react";
 import {
   CacheLocation,
   FpjsProvider,
   LoadOptions,
-} from '@fingerprintjs/fingerprintjs-pro-react'
+} from "@fingerprintjs/fingerprintjs-pro-react";
 
-const fpjsPublicApiKey = process.env.NEXT_PUBLIC_FPJS_PUBLIC_API_KEY as string
+const fpjsPublicApiKey = process.env.NEXT_PUBLIC_FPJS_PUBLIC_API_KEY as string;
 
 export const InMemoryCache: React.FC<PropsWithChildren> = ({ children }) => {
   const loadOptions: LoadOptions = {
     apiKey: fpjsPublicApiKey,
-  }
+  };
 
   return (
     <FpjsProvider
@@ -28,5 +28,5 @@ export const InMemoryCache: React.FC<PropsWithChildren> = ({ children }) => {
         {children}
       </div>
     </FpjsProvider>
-  )
-}
+  );
+};
diff --git a/examples/with-fingerprintjs-pro/providers/LocalStorageCache.tsx b/examples/with-fingerprintjs-pro/providers/LocalStorageCache.tsx
index fb471464db..8f87d2d8af 100644
--- a/examples/with-fingerprintjs-pro/providers/LocalStorageCache.tsx
+++ b/examples/with-fingerprintjs-pro/providers/LocalStorageCache.tsx
@@ -1,18 +1,18 @@
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren } from "react";
 import {
   CacheLocation,
   FpjsProvider,
   LoadOptions,
-} from '@fingerprintjs/fingerprintjs-pro-react'
+} from "@fingerprintjs/fingerprintjs-pro-react";
 
-const fpjsPublicApiKey = process.env.NEXT_PUBLIC_FPJS_PUBLIC_API_KEY as string
+const fpjsPublicApiKey = process.env.NEXT_PUBLIC_FPJS_PUBLIC_API_KEY as string;
 
 export const LocalStorageCache: React.FC<PropsWithChildren> = ({
   children,
 }) => {
   const loadOptions: LoadOptions = {
     apiKey: fpjsPublicApiKey,
-  }
+  };
 
   return (
     <FpjsProvider
@@ -32,5 +32,5 @@ export const LocalStorageCache: React.FC<PropsWithChildren> = ({
         {children}
       </div>
     </FpjsProvider>
-  )
-}
+  );
+};
diff --git a/examples/with-fingerprintjs-pro/providers/SessionStorageCache.tsx b/examples/with-fingerprintjs-pro/providers/SessionStorageCache.tsx
index f0445d7ff6..d7d1f0283b 100644
--- a/examples/with-fingerprintjs-pro/providers/SessionStorageCache.tsx
+++ b/examples/with-fingerprintjs-pro/providers/SessionStorageCache.tsx
@@ -1,18 +1,18 @@
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren } from "react";
 import {
   CacheLocation,
   FpjsProvider,
   LoadOptions,
-} from '@fingerprintjs/fingerprintjs-pro-react'
+} from "@fingerprintjs/fingerprintjs-pro-react";
 
-const fpjsPublicApiKey = process.env.NEXT_PUBLIC_FPJS_PUBLIC_API_KEY as string
+const fpjsPublicApiKey = process.env.NEXT_PUBLIC_FPJS_PUBLIC_API_KEY as string;
 
 export const SessionStorageCache: React.FC<PropsWithChildren> = ({
   children,
 }) => {
   const loadOptions: LoadOptions = {
     apiKey: fpjsPublicApiKey,
-  }
+  };
 
   return (
     <FpjsProvider
@@ -33,5 +33,5 @@ export const SessionStorageCache: React.FC<PropsWithChildren> = ({
         {children}
       </div>
     </FpjsProvider>
-  )
-}
+  );
+};
diff --git a/examples/with-fingerprintjs-pro/providers/WithoutCache.tsx b/examples/with-fingerprintjs-pro/providers/WithoutCache.tsx
index 15f972ac71..d06352d768 100644
--- a/examples/with-fingerprintjs-pro/providers/WithoutCache.tsx
+++ b/examples/with-fingerprintjs-pro/providers/WithoutCache.tsx
@@ -1,16 +1,16 @@
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren } from "react";
 import {
   CacheLocation,
   FpjsProvider,
   LoadOptions,
-} from '@fingerprintjs/fingerprintjs-pro-react'
+} from "@fingerprintjs/fingerprintjs-pro-react";
 
-const fpjsPublicApiKey = process.env.NEXT_PUBLIC_FPJS_PUBLIC_API_KEY as string
+const fpjsPublicApiKey = process.env.NEXT_PUBLIC_FPJS_PUBLIC_API_KEY as string;
 
 export const WithoutCache: React.FC<PropsWithChildren> = ({ children }) => {
   const loadOptions: LoadOptions = {
     apiKey: fpjsPublicApiKey,
-  }
+  };
 
   return (
     <FpjsProvider
@@ -27,5 +27,5 @@ export const WithoutCache: React.FC<PropsWithChildren> = ({ children }) => {
         {children}
       </div>
     </FpjsProvider>
-  )
-}
+  );
+};
diff --git a/examples/with-fingerprintjs-pro/styles/App.css b/examples/with-fingerprintjs-pro/styles/App.css
index eef0a9a450..da0d163ba9 100644
--- a/examples/with-fingerprintjs-pro/styles/App.css
+++ b/examples/with-fingerprintjs-pro/styles/App.css
@@ -123,7 +123,7 @@ sub {
   font-size: 18px;
 }
 
-.form button[type='submit'] {
+.form button[type="submit"] {
   padding: 8px 12px;
   font-size: 16px;
   cursor: pointer;
diff --git a/examples/with-fingerprintjs-pro/styles/globals.css b/examples/with-fingerprintjs-pro/styles/globals.css
index c2e2ab158b..7c418a3b97 100644
--- a/examples/with-fingerprintjs-pro/styles/globals.css
+++ b/examples/with-fingerprintjs-pro/styles/globals.css
@@ -1,7 +1,7 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -9,6 +9,6 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
diff --git a/examples/with-firebase-cloud-messaging/pages/index.js b/examples/with-firebase-cloud-messaging/pages/index.js
index 01d56759c8..0f5fc7f798 100644
--- a/examples/with-firebase-cloud-messaging/pages/index.js
+++ b/examples/with-firebase-cloud-messaging/pages/index.js
@@ -1,12 +1,12 @@
-import { useEffect } from 'react'
-import { firebaseCloudMessaging } from '../utils/webPush'
+import { useEffect } from "react";
+import { firebaseCloudMessaging } from "../utils/webPush";
 
 const Index = () => {
   useEffect(() => {
-    firebaseCloudMessaging.init()
-  }, [])
+    firebaseCloudMessaging.init();
+  }, []);
 
-  return <div>Next.js with firebase cloud messaging.</div>
-}
+  return <div>Next.js with firebase cloud messaging.</div>;
+};
 
-export default Index
+export default Index;
diff --git a/examples/with-firebase-cloud-messaging/public/firebase-messaging-sw.js b/examples/with-firebase-cloud-messaging/public/firebase-messaging-sw.js
index 717c3099ca..7b460ad082 100644
--- a/examples/with-firebase-cloud-messaging/public/firebase-messaging-sw.js
+++ b/examples/with-firebase-cloud-messaging/public/firebase-messaging-sw.js
@@ -1,12 +1,12 @@
 /* global importScripts, firebase */
-importScripts('https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js')
-importScripts('https://www.gstatic.com/firebasejs/7.9.1/firebase-messaging.js')
+importScripts("https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js");
+importScripts("https://www.gstatic.com/firebasejs/7.9.1/firebase-messaging.js");
 
 firebase.initializeApp({
-  apiKey: 'YOUR-API-KEY',
-  projectId: 'YOUR-PROJECT-ID',
-  messagingSenderId: 'YOUR-SENDER-ID',
-  appId: 'YOUR-APP-ID',
-})
+  apiKey: "YOUR-API-KEY",
+  projectId: "YOUR-PROJECT-ID",
+  messagingSenderId: "YOUR-SENDER-ID",
+  appId: "YOUR-APP-ID",
+});
 
-firebase.messaging()
+firebase.messaging();
diff --git a/examples/with-firebase-cloud-messaging/utils/webPush.js b/examples/with-firebase-cloud-messaging/utils/webPush.js
index 808dc8e3e7..4a424c26ea 100644
--- a/examples/with-firebase-cloud-messaging/utils/webPush.js
+++ b/examples/with-firebase-cloud-messaging/utils/webPush.js
@@ -1,35 +1,35 @@
-import 'firebase/messaging'
-import firebase from 'firebase/app'
-import localforage from 'localforage'
+import "firebase/messaging";
+import firebase from "firebase/app";
+import localforage from "localforage";
 
 const firebaseCloudMessaging = {
   tokenInlocalforage: async () => {
-    return localforage.getItem('fcm_token')
+    return localforage.getItem("fcm_token");
   },
 
   init: async function () {
     firebase.initializeApp({
-      apiKey: 'YOUR-API-KEY',
-      projectId: 'YOUR-PROJECT-ID',
-      messagingSenderId: 'YOUR-SENDER-ID',
-      appId: 'YOUR-APP-ID',
-    })
+      apiKey: "YOUR-API-KEY",
+      projectId: "YOUR-PROJECT-ID",
+      messagingSenderId: "YOUR-SENDER-ID",
+      appId: "YOUR-APP-ID",
+    });
 
     try {
       if ((await this.tokenInlocalforage()) !== null) {
-        return false
+        return false;
       }
 
-      const messaging = firebase.messaging()
-      await Notification.requestPermission()
-      const token = await messaging.getToken()
+      const messaging = firebase.messaging();
+      await Notification.requestPermission();
+      const token = await messaging.getToken();
 
-      localforage.setItem('fcm_token', token)
-      console.log('fcm_token', token)
+      localforage.setItem("fcm_token", token);
+      console.log("fcm_token", token);
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
   },
-}
+};
 
-export { firebaseCloudMessaging }
+export { firebaseCloudMessaging };
diff --git a/examples/with-firebase-hosting/firebaseFunctions.js b/examples/with-firebase-hosting/firebaseFunctions.js
index 3d8c8a5a8e..f48112bf24 100644
--- a/examples/with-firebase-hosting/firebaseFunctions.js
+++ b/examples/with-firebase-hosting/firebaseFunctions.js
@@ -1,17 +1,17 @@
-const { join } = require('path')
-const { https } = require('firebase-functions')
-const { default: next } = require('next')
+const { join } = require("path");
+const { https } = require("firebase-functions");
+const { default: next } = require("next");
 
-const nextjsDistDir = join('src', require('./src/next.config.js').distDir)
+const nextjsDistDir = join("src", require("./src/next.config.js").distDir);
 
 const nextjsServer = next({
   dev: false,
   conf: {
     distDir: nextjsDistDir,
   },
-})
-const nextjsHandle = nextjsServer.getRequestHandler()
+});
+const nextjsHandle = nextjsServer.getRequestHandler();
 
 exports.nextjsFunc = https.onRequest((req, res) => {
-  return nextjsServer.prepare().then(() => nextjsHandle(req, res))
-})
+  return nextjsServer.prepare().then(() => nextjsHandle(req, res));
+});
diff --git a/examples/with-firebase-hosting/src/components/App.jsx b/examples/with-firebase-hosting/src/components/App.jsx
index d15dc0a5ca..f172435452 100644
--- a/examples/with-firebase-hosting/src/components/App.jsx
+++ b/examples/with-firebase-hosting/src/components/App.jsx
@@ -1,11 +1,11 @@
-import React from 'react'
-import Header from './Header'
+import React from "react";
+import Header from "./Header";
 
 const App = ({ children }) => (
   <main>
     <Header />
     {children}
   </main>
-)
+);
 
-export default App
+export default App;
diff --git a/examples/with-firebase-hosting/src/components/Header.jsx b/examples/with-firebase-hosting/src/components/Header.jsx
index bc6a4099f8..6abf6db675 100644
--- a/examples/with-firebase-hosting/src/components/Header.jsx
+++ b/examples/with-firebase-hosting/src/components/Header.jsx
@@ -1,15 +1,15 @@
-import * as React from 'react'
-import Link from 'next/link'
+import * as React from "react";
+import Link from "next/link";
 
 const Header = ({ pathname }) => (
   <header>
-    <Link href="/" className={pathname === '/' ? 'is-active' : ''}>
+    <Link href="/" className={pathname === "/" ? "is-active" : ""}>
       Home
-    </Link>{' '}
-    <Link href="/about" className={pathname === '/about' ? 'is-active' : ''}>
+    </Link>{" "}
+    <Link href="/about" className={pathname === "/about" ? "is-active" : ""}>
       About
     </Link>
   </header>
-)
+);
 
-export default Header
+export default Header;
diff --git a/examples/with-firebase-hosting/src/next.config.js b/examples/with-firebase-hosting/src/next.config.js
index ef671cdd1b..47be51d9d2 100644
--- a/examples/with-firebase-hosting/src/next.config.js
+++ b/examples/with-firebase-hosting/src/next.config.js
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
-  distDir: '../.next',
-}
+  distDir: "../.next",
+};
diff --git a/examples/with-firebase-hosting/src/pages/about.jsx b/examples/with-firebase-hosting/src/pages/about.jsx
index b17b5429db..fc895d6547 100644
--- a/examples/with-firebase-hosting/src/pages/about.jsx
+++ b/examples/with-firebase-hosting/src/pages/about.jsx
@@ -1,9 +1,9 @@
-import App from '../components/App'
+import App from "../components/App";
 
 export default function About() {
   return (
     <App>
       <p>About Page</p>
     </App>
-  )
+  );
 }
diff --git a/examples/with-firebase-hosting/src/pages/index.jsx b/examples/with-firebase-hosting/src/pages/index.jsx
index de67c5222d..f129b036da 100644
--- a/examples/with-firebase-hosting/src/pages/index.jsx
+++ b/examples/with-firebase-hosting/src/pages/index.jsx
@@ -1,9 +1,9 @@
-import App from '../components/App'
+import App from "../components/App";
 
 export default function Home() {
   return (
     <App>
       <p>Index Page</p>
     </App>
-  )
+  );
 }
diff --git a/examples/with-firebase/context/userContext.js b/examples/with-firebase/context/userContext.js
index 9a7d4be53b..bdb269a294 100644
--- a/examples/with-firebase/context/userContext.js
+++ b/examples/with-firebase/context/userContext.js
@@ -1,43 +1,43 @@
-import { useState, useEffect, createContext, useContext } from 'react'
-import { createFirebaseApp } from '../firebase/clientApp'
-import { getAuth, onAuthStateChanged } from 'firebase/auth'
+import { useState, useEffect, createContext, useContext } from "react";
+import { createFirebaseApp } from "../firebase/clientApp";
+import { getAuth, onAuthStateChanged } from "firebase/auth";
 
-export const UserContext = createContext()
+export const UserContext = createContext();
 
 export default function UserContextComp({ children }) {
-  const [user, setUser] = useState(null)
-  const [loadingUser, setLoadingUser] = useState(true) // Helpful, to update the UI accordingly.
+  const [user, setUser] = useState(null);
+  const [loadingUser, setLoadingUser] = useState(true); // Helpful, to update the UI accordingly.
 
   useEffect(() => {
     // Listen authenticated user
-    const app = createFirebaseApp()
-    const auth = getAuth(app)
+    const app = createFirebaseApp();
+    const auth = getAuth(app);
     const unsubscriber = onAuthStateChanged(auth, async (user) => {
       try {
         if (user) {
           // User is signed in.
-          const { uid, displayName, email, photoURL } = user
+          const { uid, displayName, email, photoURL } = user;
           // You could also look for the user doc in your Firestore (if you have one):
           // const userDoc = await firebase.firestore().doc(`users/${uid}`).get()
-          setUser({ uid, displayName, email, photoURL })
-        } else setUser(null)
+          setUser({ uid, displayName, email, photoURL });
+        } else setUser(null);
       } catch (error) {
         // Most probably a connection error. Handle appropriately.
       } finally {
-        setLoadingUser(false)
+        setLoadingUser(false);
       }
-    })
+    });
 
     // Unsubscribe auth listener on unmount
-    return () => unsubscriber()
-  }, [])
+    return () => unsubscriber();
+  }, []);
 
   return (
     <UserContext.Provider value={{ user, setUser, loadingUser }}>
       {children}
     </UserContext.Provider>
-  )
+  );
 }
 
 // Custom hook that shorthands the context!
-export const useUser = () => useContext(UserContext)
+export const useUser = () => useContext(UserContext);
diff --git a/examples/with-firebase/fetchData/getProfileData.js b/examples/with-firebase/fetchData/getProfileData.js
index 417771bba4..fb98304c0c 100644
--- a/examples/with-firebase/fetchData/getProfileData.js
+++ b/examples/with-firebase/fetchData/getProfileData.js
@@ -1,13 +1,13 @@
-import admin from '../firebase/nodeApp'
+import admin from "../firebase/nodeApp";
 
 export const getProfileData = async (username) => {
-  const db = admin.firestore()
-  const profileCollection = db.collection('profile')
-  const profileDoc = await profileCollection.doc(username).get()
+  const db = admin.firestore();
+  const profileCollection = db.collection("profile");
+  const profileDoc = await profileCollection.doc(username).get();
 
   if (!profileDoc.exists) {
-    return null
+    return null;
   }
 
-  return profileDoc.data()
-}
+  return profileDoc.data();
+};
diff --git a/examples/with-firebase/firebase/clientApp.js b/examples/with-firebase/firebase/clientApp.js
index 74f9c8a9aa..38f40b8673 100644
--- a/examples/with-firebase/firebase/clientApp.js
+++ b/examples/with-firebase/firebase/clientApp.js
@@ -1,5 +1,5 @@
-import { initializeApp, getApps } from 'firebase/app'
-import { getAnalytics } from 'firebase/analytics'
+import { initializeApp, getApps } from "firebase/app";
+import { getAnalytics } from "firebase/analytics";
 export const createFirebaseApp = () => {
   const clientCredentials = {
     apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
@@ -10,17 +10,17 @@ export const createFirebaseApp = () => {
     messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
     appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
     measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
-  }
+  };
 
   if (getApps().length <= 0) {
-    const app = initializeApp(clientCredentials)
+    const app = initializeApp(clientCredentials);
     // Check that `window` is in scope for the analytics module!
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       // Enable analytics. https://firebase.google.com/docs/analytics/get-started
-      if ('measurementId' in clientCredentials) {
-        getAnalytics()
+      if ("measurementId" in clientCredentials) {
+        getAnalytics();
       }
     }
-    return app
+    return app;
   }
-}
+};
diff --git a/examples/with-firebase/firebase/nodeApp.js b/examples/with-firebase/firebase/nodeApp.js
index 75d8449c94..8b8e30bccb 100644
--- a/examples/with-firebase/firebase/nodeApp.js
+++ b/examples/with-firebase/firebase/nodeApp.js
@@ -1,14 +1,14 @@
-import * as admin from 'firebase-admin'
+import * as admin from "firebase-admin";
 
 if (!admin.apps.length) {
   admin.initializeApp({
     credential: admin.credential.cert({
       projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
       clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
-      privateKey: process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, '\n'),
+      privateKey: process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, "\n"),
     }),
     databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
-  })
+  });
 }
 
-export default admin
+export default admin;
diff --git a/examples/with-firebase/pages/_app.js b/examples/with-firebase/pages/_app.js
index 812477fe59..3fbef51e1a 100644
--- a/examples/with-firebase/pages/_app.js
+++ b/examples/with-firebase/pages/_app.js
@@ -1,4 +1,4 @@
-import UserProvider from '../context/userContext'
+import UserProvider from "../context/userContext";
 
 // Custom App to wrap it with context provider
 export default function App({ Component, pageProps }) {
@@ -6,5 +6,5 @@ export default function App({ Component, pageProps }) {
     <UserProvider>
       <Component {...pageProps} />
     </UserProvider>
-  )
+  );
 }
diff --git a/examples/with-firebase/pages/index.js b/examples/with-firebase/pages/index.js
index 43d4c3d04f..0bfda65e6d 100644
--- a/examples/with-firebase/pages/index.js
+++ b/examples/with-firebase/pages/index.js
@@ -1,29 +1,29 @@
-import { getFirestore, setDoc, doc } from 'firebase/firestore'
-import Head from 'next/head'
-import Link from 'next/link'
-import { useEffect } from 'react'
-import { useUser } from '../context/userContext'
+import { getFirestore, setDoc, doc } from "firebase/firestore";
+import Head from "next/head";
+import Link from "next/link";
+import { useEffect } from "react";
+import { useUser } from "../context/userContext";
 
 export default function Home() {
   // Our custom hook to get context values
-  const { loadingUser, user } = useUser()
+  const { loadingUser, user } = useUser();
 
-  const profile = { username: 'nextjs_user', message: 'Awesome!!' }
+  const profile = { username: "nextjs_user", message: "Awesome!!" };
 
   useEffect(() => {
     if (!loadingUser) {
       // You know that the user is loaded: either logged in or out!
-      console.log(user)
+      console.log(user);
     }
     // You also have your firebase app initialized
-  }, [loadingUser, user])
+  }, [loadingUser, user]);
 
   const createUser = async () => {
-    const db = getFirestore()
-    await setDoc(doc(db, 'profile', profile.username), profile)
+    const db = getFirestore();
+    await setDoc(doc(db, "profile", profile.username), profile);
 
-    alert('User created!!')
-  }
+    alert("User created!!");
+  };
 
   return (
     <div className="container">
@@ -196,5 +196,5 @@ export default function Home() {
         }
       `}</style>
     </div>
-  )
+  );
 }
diff --git a/examples/with-firebase/pages/profile/[username].js b/examples/with-firebase/pages/profile/[username].js
index 8c1f314464..607dc35193 100644
--- a/examples/with-firebase/pages/profile/[username].js
+++ b/examples/with-firebase/pages/profile/[username].js
@@ -1,9 +1,9 @@
-import Head from 'next/head'
+import Head from "next/head";
 
-import { getProfileData } from '../../fetchData/getProfileData'
+import { getProfileData } from "../../fetchData/getProfileData";
 
 export default function SSRPage({ data }) {
-  const { username, profile } = data
+  const { username, profile } = data;
 
   return (
     <div className="container">
@@ -18,14 +18,14 @@ export default function SSRPage({ data }) {
         <p>{profile.message}</p>
       </main>
     </div>
-  )
+  );
 }
 
 export const getServerSideProps = async ({ params }) => {
-  const { username } = params
-  const profile = await getProfileData(username)
+  const { username } = params;
+  const profile = await getProfileData(username);
   if (!profile) {
-    return { notFound: true }
+    return { notFound: true };
   }
-  return { props: { data: { username, profile } } }
-}
+  return { props: { data: { username, profile } } };
+};
diff --git a/examples/with-flow/components/Page.js b/examples/with-flow/components/Page.js
index 53914133ea..ca9ece9586 100644
--- a/examples/with-flow/components/Page.js
+++ b/examples/with-flow/components/Page.js
@@ -1,15 +1,15 @@
 // @flow
-import React, { type Node } from 'react'
-import Head from 'next/head'
+import React, { type Node } from "react";
+import Head from "next/head";
 
 type Props = {
   children: Node,
   title?: string,
-}
+};
 
 export default function Page({
   children,
-  title = 'This is the default title',
+  title = "This is the default title",
 }: Props) {
   return (
     <section>
@@ -18,5 +18,5 @@ export default function Page({
       </Head>
       {children}
     </section>
-  )
+  );
 }
diff --git a/examples/with-flow/flow-typed/next.js.flow b/examples/with-flow/flow-typed/next.js.flow
index a6087145c4..280b9987b2 100644
--- a/examples/with-flow/flow-typed/next.js.flow
+++ b/examples/with-flow/flow-typed/next.js.flow
@@ -1,32 +1,32 @@
 // @flow
 
-declare module 'next' {
+declare module "next" {
   declare type NextApp = {
     prepare(): Promise<void>,
     getRequestHandler(): any,
     render(req: any, res: any, pathname: string, query: any): any,
-  }
-  declare module.exports: (...opts: any) => NextApp
+  };
+  declare module.exports: (...opts: any) => NextApp;
 }
 
-declare module 'next/head' {
-  declare module.exports: Class<React$Component<any, any>>
+declare module "next/head" {
+  declare module.exports: Class<React$Component<any, any>>;
 }
 
-declare module 'next/link' {
+declare module "next/link" {
   declare module.exports: Class<
-    React$Component<{ href: string, prefetch?: boolean }, any>
-  >
+    React$Component<{ href: string, prefetch?: boolean }, any>,
+  >;
 }
 
-declare module 'next/error' {
-  declare module.exports: Class<React$Component<{ statusCode: number }, any>>
+declare module "next/error" {
+  declare module.exports: Class<React$Component<{ statusCode: number }, any>>;
 }
 
-declare module 'next/document' {
-  declare export var Head: Class<React$Component<any, any>>
-  declare export var Main: Class<React$Component<any, any>>
-  declare export var NextScript: Class<React$Component<any, any>>
+declare module "next/document" {
+  declare export var Head: Class<React$Component<any, any>>;
+  declare export var Main: Class<React$Component<any, any>>;
+  declare export var NextScript: Class<React$Component<any, any>>;
   declare export default Class<React$Component<any, any>> & {
     getInitialProps: (ctx: {
       pathname: string,
@@ -36,5 +36,5 @@ declare module 'next/document' {
       err?: any,
     }) => Promise<any>,
     renderPage(cb: Function): void,
-  }
+  };
 }
diff --git a/examples/with-flow/pages/_app.js b/examples/with-flow/pages/_app.js
index b1d45bda92..e69550dd55 100644
--- a/examples/with-flow/pages/_app.js
+++ b/examples/with-flow/pages/_app.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 function MyApp({ Component, pageProps }) {
   return (
@@ -14,7 +14,7 @@ function MyApp({ Component, pageProps }) {
 
       <footer>I`m here to stay</footer>
     </>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-flow/pages/about.js b/examples/with-flow/pages/about.js
index 83a7781be3..cb22dede4c 100644
--- a/examples/with-flow/pages/about.js
+++ b/examples/with-flow/pages/about.js
@@ -1,10 +1,10 @@
 // @flow
-import Page from '../components/Page'
+import Page from "../components/Page";
 
 export default function About() {
   return (
     <Page title="About us">
       <div>About us</div>
     </Page>
-  )
+  );
 }
diff --git a/examples/with-flow/pages/contact.js b/examples/with-flow/pages/contact.js
index 687480237e..d2d658e174 100644
--- a/examples/with-flow/pages/contact.js
+++ b/examples/with-flow/pages/contact.js
@@ -1,10 +1,10 @@
 // @flow
-import Page from '../components/Page'
+import Page from "../components/Page";
 
 export default function Contact() {
   return (
     <Page title="Contact us">
       <div>Contact</div>
     </Page>
-  )
+  );
 }
diff --git a/examples/with-flow/pages/index.js b/examples/with-flow/pages/index.js
index f7ed5ddfe4..e6ca695ec0 100644
--- a/examples/with-flow/pages/index.js
+++ b/examples/with-flow/pages/index.js
@@ -1,10 +1,10 @@
 // @flow
-import Page from '../components/Page'
+import Page from "../components/Page";
 
 export default function Home() {
   return (
     <Page>
       <div>Hello World</div>
     </Page>
-  )
+  );
 }
diff --git a/examples/with-formspree/components/contact-form.js b/examples/with-formspree/components/contact-form.js
index cb44288451..86ec511eb8 100644
--- a/examples/with-formspree/components/contact-form.js
+++ b/examples/with-formspree/components/contact-form.js
@@ -1,11 +1,11 @@
-import * as React from 'react'
-import { useForm, ValidationError } from '@formspree/react'
-import formStyles from '../styles/form.module.css'
+import * as React from "react";
+import { useForm, ValidationError } from "@formspree/react";
+import formStyles from "../styles/form.module.css";
 
 export default function ContactForm() {
-  const [state, handleSubmit] = useForm(process.env.NEXT_PUBLIC_FORM)
+  const [state, handleSubmit] = useForm(process.env.NEXT_PUBLIC_FORM);
   if (state.succeeded) {
-    return <p>Thanks for your submission!</p>
+    return <p>Thanks for your submission!</p>;
   }
   return (
     <form onSubmit={handleSubmit} className={formStyles.container}>
@@ -50,5 +50,5 @@ export default function ContactForm() {
         className={formStyles.formErrors}
       />
     </form>
-  )
+  );
 }
diff --git a/examples/with-formspree/pages/_app.js b/examples/with-formspree/pages/_app.js
index 1e1cec9242..2fc3e07009 100644
--- a/examples/with-formspree/pages/_app.js
+++ b/examples/with-formspree/pages/_app.js
@@ -1,7 +1,7 @@
-import '../styles/globals.css'
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-formspree/pages/index.js b/examples/with-formspree/pages/index.js
index fce5116d50..b87a163910 100644
--- a/examples/with-formspree/pages/index.js
+++ b/examples/with-formspree/pages/index.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
-import ContactForm from '../components/contact-form'
+import Head from "next/head";
+import styles from "../styles/Home.module.css";
+import ContactForm from "../components/contact-form";
 
 export default function Home() {
   return (
@@ -16,7 +16,7 @@ export default function Home() {
         </h1>
 
         <p className={styles.description}>
-          Get started by editing{' '}
+          Get started by editing{" "}
           <code className={styles.code}>pages/index.js</code>
         </p>
 
@@ -34,10 +34,10 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-framer-motion/components/Gallery.js b/examples/with-framer-motion/components/Gallery.js
index 73530b2f35..7badcadec4 100644
--- a/examples/with-framer-motion/components/Gallery.js
+++ b/examples/with-framer-motion/components/Gallery.js
@@ -1,10 +1,10 @@
-import * as React from 'react'
-import Link from 'next/link'
+import * as React from "react";
+import Link from "next/link";
 
-import { motion } from 'framer-motion'
-import { images } from '../constants'
+import { motion } from "framer-motion";
+import { images } from "../constants";
 
-const transition = { duration: 0.5, ease: [0.43, 0.13, 0.23, 0.96] }
+const transition = { duration: 0.5, ease: [0.43, 0.13, 0.23, 0.96] };
 
 const thumbnailVariants = {
   initial: { scale: 0.9, opacity: 0 },
@@ -14,15 +14,15 @@ const thumbnailVariants = {
     opacity: 0,
     transition: { duration: 1.5, ...transition },
   },
-}
+};
 
 const frameVariants = {
   hover: { scale: 0.95 },
-}
+};
 
 const imageVariants = {
   hover: { scale: 1.1 },
-}
+};
 
 const Thumbnail = ({ id, i }) => (
   <>
@@ -70,7 +70,7 @@ const Thumbnail = ({ id, i }) => (
         `}
     </style>
   </>
-)
+);
 
 const Gallery = () => (
   <>
@@ -146,6 +146,6 @@ const Gallery = () => (
         `}
     </style>
   </>
-)
+);
 
-export default Gallery
+export default Gallery;
diff --git a/examples/with-framer-motion/components/SingleImage.js b/examples/with-framer-motion/components/SingleImage.js
index 847f1032f8..ed8b302990 100644
--- a/examples/with-framer-motion/components/SingleImage.js
+++ b/examples/with-framer-motion/components/SingleImage.js
@@ -1,27 +1,27 @@
-import * as React from 'react'
-import Link from 'next/link'
+import * as React from "react";
+import Link from "next/link";
 
-import { motion } from 'framer-motion'
-import { images } from '../constants'
+import { motion } from "framer-motion";
+import { images } from "../constants";
 
 const transition = {
   duration: 1,
   ease: [0.43, 0.13, 0.23, 0.96],
-}
+};
 
 const imageVariants = {
-  exit: { y: '50%', opacity: 0, transition },
+  exit: { y: "50%", opacity: 0, transition },
   enter: {
-    y: '0%',
+    y: "0%",
     opacity: 1,
     transition,
   },
-}
+};
 
 const backVariants = {
   exit: { x: 100, opacity: 0, transition },
   enter: { x: 0, opacity: 1, transition: { delay: 1, ...transition } },
-}
+};
 
 const SingleImage = ({ index }) => (
   <>
@@ -61,6 +61,6 @@ const SingleImage = ({ index }) => (
 `}
     </style>
   </>
-)
+);
 
-export default SingleImage
+export default SingleImage;
diff --git a/examples/with-framer-motion/constants.js b/examples/with-framer-motion/constants.js
index 7e48c3ec64..8f0564d12d 100644
--- a/examples/with-framer-motion/constants.js
+++ b/examples/with-framer-motion/constants.js
@@ -1,8 +1,8 @@
 export const images = [
-  'photo-1520517601640-32ec514e4a15',
-  'photo-1518780535463-bc357fa46e64',
-  'photo-1555068178-89125fb6356d',
-  'photo-1553503359-d4ff2537a6ea',
-  'photo-1585211751845-37663b4ab614',
-  'photo-1496467115032-c504ef76521b',
-]
+  "photo-1520517601640-32ec514e4a15",
+  "photo-1518780535463-bc357fa46e64",
+  "photo-1555068178-89125fb6356d",
+  "photo-1553503359-d4ff2537a6ea",
+  "photo-1585211751845-37663b4ab614",
+  "photo-1496467115032-c504ef76521b",
+];
diff --git a/examples/with-framer-motion/pages/_app.js b/examples/with-framer-motion/pages/_app.js
index 8f5d0e61dd..c9757d4d04 100644
--- a/examples/with-framer-motion/pages/_app.js
+++ b/examples/with-framer-motion/pages/_app.js
@@ -1,14 +1,14 @@
-import { AnimatePresence } from 'framer-motion'
-import { useRouter } from 'next/router'
+import { AnimatePresence } from "framer-motion";
+import { useRouter } from "next/router";
 
 function handleExitComplete() {
-  if (typeof window !== 'undefined') {
-    window.scrollTo({ top: 0 })
+  if (typeof window !== "undefined") {
+    window.scrollTo({ top: 0 });
   }
 }
 
 function MyApp({ Component, pageProps }) {
-  const router = useRouter()
+  const router = useRouter();
   return (
     <>
       <AnimatePresence exitBeforeEnter onExitComplete={handleExitComplete}>
@@ -31,7 +31,7 @@ function MyApp({ Component, pageProps }) {
       `}
       </style>
     </>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-framer-motion/pages/image/[index].js b/examples/with-framer-motion/pages/image/[index].js
index e4e64af882..a8efcde54f 100644
--- a/examples/with-framer-motion/pages/image/[index].js
+++ b/examples/with-framer-motion/pages/image/[index].js
@@ -1,17 +1,17 @@
-import * as React from 'react'
-import SingleImage from '../../components/SingleImage'
-import { images } from '../../constants'
+import * as React from "react";
+import SingleImage from "../../components/SingleImage";
+import { images } from "../../constants";
 const Page = ({ index }) => {
-  return <SingleImage index={index} />
-}
+  return <SingleImage index={index} />;
+};
 
 export async function getStaticProps({ params }) {
-  const number = Number.parseInt(params.index, 10)
+  const number = Number.parseInt(params.index, 10);
   return {
     props: {
       index: number,
     },
-  }
+  };
 }
 
 export async function getStaticPaths() {
@@ -21,10 +21,10 @@ export async function getStaticPaths() {
         params: {
           index: `${index}`,
         },
-      }
+      };
     }),
     fallback: false,
-  }
+  };
 }
 
-export default Page
+export default Page;
diff --git a/examples/with-framer-motion/pages/index.js b/examples/with-framer-motion/pages/index.js
index 957e27792a..64deb6084f 100644
--- a/examples/with-framer-motion/pages/index.js
+++ b/examples/with-framer-motion/pages/index.js
@@ -1,5 +1,5 @@
-import Gallery from '../components/Gallery'
+import Gallery from "../components/Gallery";
 
-const Index = () => <Gallery />
+const Index = () => <Gallery />;
 
-export default Index
+export default Index;
diff --git a/examples/with-goober/pages/_app.tsx b/examples/with-goober/pages/_app.tsx
index 09fb2bf00f..0aeaff55e1 100644
--- a/examples/with-goober/pages/_app.tsx
+++ b/examples/with-goober/pages/_app.tsx
@@ -1,13 +1,13 @@
-import { createElement } from 'react'
-import { setup } from 'goober'
-import { prefix } from 'goober/prefixer'
-import type { AppProps } from 'next/app'
+import { createElement } from "react";
+import { setup } from "goober";
+import { prefix } from "goober/prefixer";
+import type { AppProps } from "next/app";
 
 // goober's needs to know how to render the `styled` nodes.
 // So to let it know, we run the `setup` function with the
 // `createElement` function and prefixer function.
-setup(createElement, prefix)
+setup(createElement, prefix);
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-goober/pages/_document.tsx b/examples/with-goober/pages/_document.tsx
index b3c283a033..58c2f87040 100644
--- a/examples/with-goober/pages/_document.tsx
+++ b/examples/with-goober/pages/_document.tsx
@@ -1,21 +1,21 @@
-import { extractCss } from 'goober'
+import { extractCss } from "goober";
 import NextDocument, {
   DocumentContext,
   Head,
   Html,
   Main,
   NextScript,
-} from 'next/document'
+} from "next/document";
 
 type Props = {
-  css: string
-}
+  css: string;
+};
 
 class Document extends NextDocument<Props> {
   static async getInitialProps({ renderPage }: DocumentContext) {
-    const page = await renderPage()
-    const css = extractCss()
-    return { ...page, css }
+    const page = await renderPage();
+    const css = extractCss();
+    return { ...page, css };
   }
 
   render() {
@@ -23,9 +23,9 @@ class Document extends NextDocument<Props> {
       <Html>
         <Head>
           <style
-            id={'_goober'}
+            id={"_goober"}
             // And defined it in here
-            dangerouslySetInnerHTML={{ __html: ' ' + this.props.css }}
+            dangerouslySetInnerHTML={{ __html: " " + this.props.css }}
           />
         </Head>
         <body>
@@ -33,8 +33,8 @@ class Document extends NextDocument<Props> {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
 
-export default Document
+export default Document;
diff --git a/examples/with-goober/pages/index.tsx b/examples/with-goober/pages/index.tsx
index 64350d7bb8..91b2398f4d 100644
--- a/examples/with-goober/pages/index.tsx
+++ b/examples/with-goober/pages/index.tsx
@@ -1,12 +1,12 @@
-import { styled } from 'goober'
+import { styled } from "goober";
 
-const Title = styled('h1')`
+const Title = styled("h1")`
   padding: 0;
   margin: 0;
   color: tomato;
-`
+`;
 
-const SmallTitle = styled('p')`
+const SmallTitle = styled("p")`
   font-size: 1em;
   color: dodgerblue;
   transition: padding 200ms ease-in-out;
@@ -16,7 +16,7 @@ const SmallTitle = styled('p')`
     padding-left: 2em;
     color: darkseagreen;
   }
-`
+`;
 
 export default function Home() {
   return (
@@ -24,5 +24,5 @@ export default function Home() {
       <Title>You are using 🥜 goober! Yay!</Title>
       <SmallTitle>Go on, try it!</SmallTitle>
     </>
-  )
+  );
 }
diff --git a/examples/with-google-analytics/components/Header.js b/examples/with-google-analytics/components/Header.js
index 68edfe2512..46d49a3b3d 100644
--- a/examples/with-google-analytics/components/Header.js
+++ b/examples/with-google-analytics/components/Header.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -17,5 +17,5 @@ export default function Header() {
         </ul>
       </nav>
     </header>
-  )
+  );
 }
diff --git a/examples/with-google-analytics/components/Page.js b/examples/with-google-analytics/components/Page.js
index 3420951b7d..9ecadce7f7 100644
--- a/examples/with-google-analytics/components/Page.js
+++ b/examples/with-google-analytics/components/Page.js
@@ -1,4 +1,4 @@
-import Header from './Header'
+import Header from "./Header";
 
 export default function Page({ children }) {
   return (
@@ -6,5 +6,5 @@ export default function Page({ children }) {
       <Header />
       {children}
     </div>
-  )
+  );
 }
diff --git a/examples/with-google-analytics/lib/gtag.js b/examples/with-google-analytics/lib/gtag.js
index 49507f8b95..c94566a6b0 100644
--- a/examples/with-google-analytics/lib/gtag.js
+++ b/examples/with-google-analytics/lib/gtag.js
@@ -1,17 +1,17 @@
-export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID
+export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
 
 // https://developers.google.com/analytics/devguides/collection/gtagjs/pages
 export const pageview = (url) => {
-  window.gtag('config', GA_TRACKING_ID, {
+  window.gtag("config", GA_TRACKING_ID, {
     page_path: url,
-  })
-}
+  });
+};
 
 // https://developers.google.com/analytics/devguides/collection/gtagjs/events
 export const event = ({ action, category, label, value }) => {
-  window.gtag('event', action, {
+  window.gtag("event", action, {
     event_category: category,
     event_label: label,
     value: value,
-  })
-}
+  });
+};
diff --git a/examples/with-google-analytics/pages/_app.js b/examples/with-google-analytics/pages/_app.js
index 3444e0dd42..0db9173c45 100644
--- a/examples/with-google-analytics/pages/_app.js
+++ b/examples/with-google-analytics/pages/_app.js
@@ -1,20 +1,20 @@
-import Head from 'next/head'
-import { useRouter } from 'next/router'
-import Script from 'next/script'
-import { useEffect } from 'react'
-import * as gtag from '../lib/gtag'
+import Head from "next/head";
+import { useRouter } from "next/router";
+import Script from "next/script";
+import { useEffect } from "react";
+import * as gtag from "../lib/gtag";
 
 const App = ({ Component, pageProps }) => {
-  const router = useRouter()
+  const router = useRouter();
   useEffect(() => {
     const handleRouteChange = (url) => {
-      gtag.pageview(url)
-    }
-    router.events.on('routeChangeComplete', handleRouteChange)
+      gtag.pageview(url);
+    };
+    router.events.on("routeChangeComplete", handleRouteChange);
     return () => {
-      router.events.off('routeChangeComplete', handleRouteChange)
-    }
-  }, [router.events])
+      router.events.off("routeChangeComplete", handleRouteChange);
+    };
+  }, [router.events]);
 
   return (
     <>
@@ -40,7 +40,7 @@ const App = ({ Component, pageProps }) => {
       />
       <Component {...pageProps} />
     </>
-  )
-}
+  );
+};
 
-export default App
+export default App;
diff --git a/examples/with-google-analytics/pages/about.js b/examples/with-google-analytics/pages/about.js
index 2b0ac9e8ef..425faf7c40 100644
--- a/examples/with-google-analytics/pages/about.js
+++ b/examples/with-google-analytics/pages/about.js
@@ -1,9 +1,9 @@
-import Page from '../components/Page'
+import Page from "../components/Page";
 
 export default function About() {
   return (
     <Page>
       <h1>This is the About page</h1>
     </Page>
-  )
+  );
 }
diff --git a/examples/with-google-analytics/pages/contact.js b/examples/with-google-analytics/pages/contact.js
index 20022ed94f..22c64093ae 100644
--- a/examples/with-google-analytics/pages/contact.js
+++ b/examples/with-google-analytics/pages/contact.js
@@ -1,26 +1,26 @@
-import { Component } from 'react'
-import Page from '../components/Page'
+import { Component } from "react";
+import Page from "../components/Page";
 
-import * as gtag from '../lib/gtag'
+import * as gtag from "../lib/gtag";
 
 export default class Contact extends Component {
-  state = { message: '' }
+  state = { message: "" };
 
   handleInput = (e) => {
-    this.setState({ message: e.target.value })
-  }
+    this.setState({ message: e.target.value });
+  };
 
   handleSubmit = (e) => {
-    e.preventDefault()
+    e.preventDefault();
 
     gtag.event({
-      action: 'submit_form',
-      category: 'Contact',
+      action: "submit_form",
+      category: "Contact",
       label: this.state.message,
-    })
+    });
 
-    this.setState({ message: '' })
-  }
+    this.setState({ message: "" });
+  };
 
   render() {
     return (
@@ -34,6 +34,6 @@ export default class Contact extends Component {
           <button type="submit">submit</button>
         </form>
       </Page>
-    )
+    );
   }
 }
diff --git a/examples/with-google-analytics/pages/index.js b/examples/with-google-analytics/pages/index.js
index 5dc3dadfcc..fcda57a616 100644
--- a/examples/with-google-analytics/pages/index.js
+++ b/examples/with-google-analytics/pages/index.js
@@ -1,9 +1,9 @@
-import Page from '../components/Page'
+import Page from "../components/Page";
 
 export default function Home() {
   return (
     <Page>
       <h1>This is the Home page</h1>
     </Page>
-  )
+  );
 }
diff --git a/examples/with-google-maps-embed/app/layout.js b/examples/with-google-maps-embed/app/layout.js
index 4ee00a2185..23ec8e7d9a 100644
--- a/examples/with-google-maps-embed/app/layout.js
+++ b/examples/with-google-maps-embed/app/layout.js
@@ -3,5 +3,5 @@ export default function RootLayout({ children }) {
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-google-maps-embed/app/page.js b/examples/with-google-maps-embed/app/page.js
index d48cfb501b..4e20ec5e4b 100644
--- a/examples/with-google-maps-embed/app/page.js
+++ b/examples/with-google-maps-embed/app/page.js
@@ -1,6 +1,6 @@
-import { GoogleMapsEmbed } from '@next/third-parties/google'
+import { GoogleMapsEmbed } from "@next/third-parties/google";
 
-const API_KEY = process.env.NEXT_PUBLIC_GOOGLE_API_KEY
+const API_KEY = process.env.NEXT_PUBLIC_GOOGLE_API_KEY;
 
 export default function Page() {
   return (
@@ -13,5 +13,5 @@ export default function Page() {
         q="Brooklyn+Bridge,New+York,NY"
       />
     </div>
-  )
+  );
 }
diff --git a/examples/with-grafbase/app/layout.tsx b/examples/with-grafbase/app/layout.tsx
index 9f56cbb868..622b51dcaf 100644
--- a/examples/with-grafbase/app/layout.tsx
+++ b/examples/with-grafbase/app/layout.tsx
@@ -1,15 +1,15 @@
-import './globals.css'
-import Link from 'next/link'
-import { graphql } from '../gql'
-import { grafbase } from '../lib/grafbase'
-import type { Metadata } from 'next'
+import "./globals.css";
+import Link from "next/link";
+import { graphql } from "../gql";
+import { grafbase } from "../lib/grafbase";
+import type { Metadata } from "next";
 
-export const revalidate = 0
+export const revalidate = 0;
 
 export const metadata: Metadata = {
-  title: 'Grafbase + Next.js',
-  description: 'Grafbase + Next.js',
-}
+  title: "Grafbase + Next.js",
+  description: "Grafbase + Next.js",
+};
 
 const GetAllPostsDocument = graphql(/* GraphQL */ `
   query GetAllPosts($first: Int!) {
@@ -23,16 +23,16 @@ const GetAllPostsDocument = graphql(/* GraphQL */ `
       }
     }
   }
-`)
+`);
 
 export default async function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   const { postCollection } = await grafbase.request(GetAllPostsDocument, {
     first: 50,
-  })
+  });
 
   return (
     <html lang="en">
@@ -61,7 +61,7 @@ export default async function RootLayout({
                       {edge.node.title}
                     </Link>
                   </li>
-                ) : null
+                ) : null,
               )}
               <li>
                 <Link
@@ -81,5 +81,5 @@ export default async function RootLayout({
         </div>
       </body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-grafbase/app/page.tsx b/examples/with-grafbase/app/page.tsx
index 3c70dda9e4..c3d474b74d 100644
--- a/examples/with-grafbase/app/page.tsx
+++ b/examples/with-grafbase/app/page.tsx
@@ -7,5 +7,5 @@ export default function Page() {
         explore each post by clicking the link in the nav.
       </p>
     </>
-  )
+  );
 }
diff --git a/examples/with-grafbase/app/posts/[slug]/page.tsx b/examples/with-grafbase/app/posts/[slug]/page.tsx
index 522d17c98f..f65c62e36b 100644
--- a/examples/with-grafbase/app/posts/[slug]/page.tsx
+++ b/examples/with-grafbase/app/posts/[slug]/page.tsx
@@ -1,5 +1,5 @@
-import { graphql } from '../../../gql'
-import { grafbase } from '../../../lib/grafbase'
+import { graphql } from "../../../gql";
+import { grafbase } from "../../../lib/grafbase";
 
 const GetPostBySlugDocument = graphql(/* GraphQL */ `
   query GetPostBySlug($slug: String!) {
@@ -9,16 +9,16 @@ const GetPostBySlugDocument = graphql(/* GraphQL */ `
       slug
     }
   }
-`)
+`);
 
 export default async function Page({ params }: { params: { slug: string } }) {
   const { post } = await grafbase.request(GetPostBySlugDocument, {
     slug: params.slug,
-  })
+  });
 
   if (!post) {
     // optionally import notFound from next/navigation
-    return <h1>404: Not Found</h1>
+    return <h1>404: Not Found</h1>;
   }
 
   return (
@@ -26,5 +26,5 @@ export default async function Page({ params }: { params: { slug: string } }) {
       <h1>{post.title}</h1>
       <pre>{JSON.stringify(post, null, 2)}</pre>
     </>
-  )
+  );
 }
diff --git a/examples/with-grafbase/codegen.ts b/examples/with-grafbase/codegen.ts
index 28164af1fc..2f5af179ed 100644
--- a/examples/with-grafbase/codegen.ts
+++ b/examples/with-grafbase/codegen.ts
@@ -1,26 +1,26 @@
-import { CodegenConfig } from '@graphql-codegen/cli'
+import { CodegenConfig } from "@graphql-codegen/cli";
 
-const url = process.env.GRAFBASE_API_URL as string
-const xApiKey = process.env.GRAFBASE_API_KEY as string
+const url = process.env.GRAFBASE_API_URL as string;
+const xApiKey = process.env.GRAFBASE_API_KEY as string;
 
 const config: CodegenConfig = {
   schema: [
     {
       [url]: {
         headers: {
-          'x-api-key': xApiKey,
+          "x-api-key": xApiKey,
         },
       },
     },
   ],
-  documents: ['app/**/*.tsx', 'app/**/*.ts'],
+  documents: ["app/**/*.tsx", "app/**/*.ts"],
   ignoreNoDocuments: true,
   generates: {
-    './gql/': {
-      preset: 'client',
+    "./gql/": {
+      preset: "client",
       plugins: [],
     },
   },
-}
+};
 
-export default config
+export default config;
diff --git a/examples/with-grafbase/gql/fragment-masking.ts b/examples/with-grafbase/gql/fragment-masking.ts
index 4de725491d..d181c55919 100644
--- a/examples/with-grafbase/gql/fragment-masking.ts
+++ b/examples/with-grafbase/gql/fragment-masking.ts
@@ -1,44 +1,44 @@
-import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
+import { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-node/core";
 
 export type FragmentType<TDocumentType extends DocumentNode<any, any>> =
   TDocumentType extends DocumentNode<infer TType, any>
-    ? TType extends { ' $fragmentName'?: infer TKey }
+    ? TType extends { " $fragmentName"?: infer TKey }
       ? TKey extends string
-        ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+        ? { " $fragmentRefs"?: { [key in TKey]: TType } }
         : never
       : never
-    : never
+    : never;
 
 // return non-nullable if `fragmentType` is non-nullable
 export function useFragment<TType>(
   _documentNode: DocumentNode<TType, any>,
-  fragmentType: FragmentType<DocumentNode<TType, any>>
-): TType
+  fragmentType: FragmentType<DocumentNode<TType, any>>,
+): TType;
 // return nullable if `fragmentType` is nullable
 export function useFragment<TType>(
   _documentNode: DocumentNode<TType, any>,
-  fragmentType: FragmentType<DocumentNode<TType, any>> | null | undefined
-): TType | null | undefined
+  fragmentType: FragmentType<DocumentNode<TType, any>> | null | undefined,
+): TType | null | undefined;
 // return array of non-nullable if `fragmentType` is array of non-nullable
 export function useFragment<TType>(
   _documentNode: DocumentNode<TType, any>,
-  fragmentType: ReadonlyArray<FragmentType<DocumentNode<TType, any>>>
-): ReadonlyArray<TType>
+  fragmentType: ReadonlyArray<FragmentType<DocumentNode<TType, any>>>,
+): ReadonlyArray<TType>;
 // return array of nullable if `fragmentType` is array of nullable
 export function useFragment<TType>(
   _documentNode: DocumentNode<TType, any>,
   fragmentType:
     | ReadonlyArray<FragmentType<DocumentNode<TType, any>>>
     | null
-    | undefined
-): ReadonlyArray<TType> | null | undefined
+    | undefined,
+): ReadonlyArray<TType> | null | undefined;
 export function useFragment<TType>(
   _documentNode: DocumentNode<TType, any>,
   fragmentType:
     | FragmentType<DocumentNode<TType, any>>
     | ReadonlyArray<FragmentType<DocumentNode<TType, any>>>
     | null
-    | undefined
+    | undefined,
 ): TType | ReadonlyArray<TType> | null | undefined {
-  return fragmentType as any
+  return fragmentType as any;
 }
diff --git a/examples/with-grafbase/gql/gql.ts b/examples/with-grafbase/gql/gql.ts
index 116864f581..d509ddc29b 100644
--- a/examples/with-grafbase/gql/gql.ts
+++ b/examples/with-grafbase/gql/gql.ts
@@ -1,25 +1,25 @@
 /* eslint-disable */
-import * as types from './graphql'
-import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
+import * as types from "./graphql";
+import { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-node/core";
 
 const documents = {
-  '\n  query GetAllPosts($first: Int!) {\n    postCollection(first: $first) {\n      edges {\n        node {\n          id\n          title\n          slug\n        }\n      }\n    }\n  }\n':
+  "\n  query GetAllPosts($first: Int!) {\n    postCollection(first: $first) {\n      edges {\n        node {\n          id\n          title\n          slug\n        }\n      }\n    }\n  }\n":
     types.GetAllPostsDocument,
-  '\n  query GetPostBySlug($slug: String!) {\n    post(by: { slug: $slug }) {\n      id\n      title\n      slug\n    }\n  }\n':
+  "\n  query GetPostBySlug($slug: String!) {\n    post(by: { slug: $slug }) {\n      id\n      title\n      slug\n    }\n  }\n":
     types.GetPostBySlugDocument,
-}
+};
 
 export function graphql(
-  source: '\n  query GetAllPosts($first: Int!) {\n    postCollection(first: $first) {\n      edges {\n        node {\n          id\n          title\n          slug\n        }\n      }\n    }\n  }\n'
-): (typeof documents)['\n  query GetAllPosts($first: Int!) {\n    postCollection(first: $first) {\n      edges {\n        node {\n          id\n          title\n          slug\n        }\n      }\n    }\n  }\n']
+  source: "\n  query GetAllPosts($first: Int!) {\n    postCollection(first: $first) {\n      edges {\n        node {\n          id\n          title\n          slug\n        }\n      }\n    }\n  }\n",
+): (typeof documents)["\n  query GetAllPosts($first: Int!) {\n    postCollection(first: $first) {\n      edges {\n        node {\n          id\n          title\n          slug\n        }\n      }\n    }\n  }\n"];
 export function graphql(
-  source: '\n  query GetPostBySlug($slug: String!) {\n    post(by: { slug: $slug }) {\n      id\n      title\n      slug\n    }\n  }\n'
-): (typeof documents)['\n  query GetPostBySlug($slug: String!) {\n    post(by: { slug: $slug }) {\n      id\n      title\n      slug\n    }\n  }\n']
+  source: "\n  query GetPostBySlug($slug: String!) {\n    post(by: { slug: $slug }) {\n      id\n      title\n      slug\n    }\n  }\n",
+): (typeof documents)["\n  query GetPostBySlug($slug: String!) {\n    post(by: { slug: $slug }) {\n      id\n      title\n      slug\n    }\n  }\n"];
 
-export function graphql(source: string): unknown
+export function graphql(source: string): unknown;
 export function graphql(source: string) {
-  return (documents as any)[source] ?? {}
+  return (documents as any)[source] ?? {};
 }
 
 export type DocumentType<TDocumentNode extends DocumentNode<any, any>> =
-  TDocumentNode extends DocumentNode<infer TType, any> ? TType : never
+  TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;
diff --git a/examples/with-grafbase/gql/graphql.ts b/examples/with-grafbase/gql/graphql.ts
index 97ba10d05a..484c3c5bb6 100644
--- a/examples/with-grafbase/gql/graphql.ts
+++ b/examples/with-grafbase/gql/graphql.ts
@@ -1,23 +1,23 @@
 /* eslint-disable */
-import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
-export type Maybe<T> = T | null
-export type InputMaybe<T> = Maybe<T>
+import { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-node/core";
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {
-  [K in keyof T]: T[K]
-}
+  [K in keyof T]: T[K];
+};
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> & {
-  [SubKey in K]?: Maybe<T[SubKey]>
-}
+  [SubKey in K]?: Maybe<T[SubKey]>;
+};
 export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & {
-  [SubKey in K]: Maybe<T[SubKey]>
-}
+  [SubKey in K]: Maybe<T[SubKey]>;
+};
 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
-  ID: string
-  String: string
-  Boolean: boolean
-  Int: number
-  Float: number
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
   /**
    * A date-time string at UTC, such as 2007-12-03T10:15:30Z, is compliant with the date-time format outlined in section 5.6 of the RFC 3339
    * profile of the ISO 8601 standard for representation of dates and times using the Gregorian calendar.
@@ -33,341 +33,346 @@ export type Scalars = {
    * Where an RFC 3339 compliant date-time string has a time-zone other than UTC, it is shifted to UTC.
    * For example, the date-time string 2016-01-01T14:10:20+01:00 is shifted to 2016-01-01T13:10:20Z.
    */
-  DateTime: any
-}
+  DateTime: any;
+};
 
 export type Comment = {
-  __typename?: 'Comment'
+  __typename?: "Comment";
   /** when the model was created */
-  createdAt: Scalars['DateTime']
-  id: Scalars['ID']
-  message: Scalars['String']
-  post?: Maybe<Post>
+  createdAt: Scalars["DateTime"];
+  id: Scalars["ID"];
+  message: Scalars["String"];
+  post?: Maybe<Post>;
   /** when the model was updated */
-  updatedAt: Scalars['DateTime']
-}
+  updatedAt: Scalars["DateTime"];
+};
 
 export type CommentByInput = {
-  id?: InputMaybe<Scalars['ID']>
-}
+  id?: InputMaybe<Scalars["ID"]>;
+};
 
 /** Input to create a new CommentCommentRelatePostPost */
 export type CommentCommentRelatePostPostCreateInput = {
-  slug: Scalars['String']
-  title: Scalars['String']
-}
+  slug: Scalars["String"];
+  title: Scalars["String"];
+};
 
 /** Input to create a new CommentCommentRelatePostPost relation */
 export type CommentCommentRelatePostPostCreateRelationInput = {
-  create?: InputMaybe<CommentCommentRelatePostPostCreateInput>
-  link?: InputMaybe<Scalars['ID']>
-}
+  create?: InputMaybe<CommentCommentRelatePostPostCreateInput>;
+  link?: InputMaybe<Scalars["ID"]>;
+};
 
 /** Input to update a CommentCommentRelatePostPost relation */
 export type CommentCommentRelatePostPostUpdateRelationInput = {
-  create?: InputMaybe<CommentCommentRelatePostPostCreateInput>
-  link?: InputMaybe<Scalars['ID']>
-  unlink?: InputMaybe<Scalars['ID']>
-}
+  create?: InputMaybe<CommentCommentRelatePostPostCreateInput>;
+  link?: InputMaybe<Scalars["ID"]>;
+  unlink?: InputMaybe<Scalars["ID"]>;
+};
 
 export type CommentConnection = {
-  __typename?: 'CommentConnection'
-  edges?: Maybe<Array<Maybe<CommentEdge>>>
+  __typename?: "CommentConnection";
+  edges?: Maybe<Array<Maybe<CommentEdge>>>;
   /** Information to aid in pagination */
-  pageInfo: PageInfo
-}
+  pageInfo: PageInfo;
+};
 
 /** Input to create a new Comment */
 export type CommentCreateInput = {
-  message: Scalars['String']
-  post?: InputMaybe<CommentCommentRelatePostPostCreateRelationInput>
-}
+  message: Scalars["String"];
+  post?: InputMaybe<CommentCommentRelatePostPostCreateRelationInput>;
+};
 
 export type CommentCreatePayload = {
-  __typename?: 'CommentCreatePayload'
-  comment?: Maybe<Comment>
-}
+  __typename?: "CommentCreatePayload";
+  comment?: Maybe<Comment>;
+};
 
 export type CommentDeletePayload = {
-  __typename?: 'CommentDeletePayload'
-  deletedId: Scalars['ID']
-}
+  __typename?: "CommentDeletePayload";
+  deletedId: Scalars["ID"];
+};
 
 export type CommentEdge = {
-  __typename?: 'CommentEdge'
-  cursor: Scalars['String']
-  node: Comment
-}
+  __typename?: "CommentEdge";
+  cursor: Scalars["String"];
+  node: Comment;
+};
 
 /** Input to create a new Comment */
 export type CommentUpdateInput = {
-  message?: InputMaybe<Scalars['String']>
-  post?: InputMaybe<CommentCommentRelatePostPostUpdateRelationInput>
-}
+  message?: InputMaybe<Scalars["String"]>;
+  post?: InputMaybe<CommentCommentRelatePostPostUpdateRelationInput>;
+};
 
 export type CommentUpdatePayload = {
-  __typename?: 'CommentUpdatePayload'
-  comment?: Maybe<Comment>
-}
+  __typename?: "CommentUpdatePayload";
+  comment?: Maybe<Comment>;
+};
 
 export type Mutation = {
-  __typename?: 'Mutation'
+  __typename?: "Mutation";
   /** Create a Comment */
-  commentCreate?: Maybe<CommentCreatePayload>
+  commentCreate?: Maybe<CommentCreatePayload>;
   /** Delete a Comment by ID or unique field */
-  commentDelete?: Maybe<CommentDeletePayload>
+  commentDelete?: Maybe<CommentDeletePayload>;
   /** Update a Comment */
-  commentUpdate?: Maybe<CommentUpdatePayload>
+  commentUpdate?: Maybe<CommentUpdatePayload>;
   /** Create a Post */
-  postCreate?: Maybe<PostCreatePayload>
+  postCreate?: Maybe<PostCreatePayload>;
   /** Delete a Post by ID or unique field */
-  postDelete?: Maybe<PostDeletePayload>
+  postDelete?: Maybe<PostDeletePayload>;
   /** Update a Post */
-  postUpdate?: Maybe<PostUpdatePayload>
-}
+  postUpdate?: Maybe<PostUpdatePayload>;
+};
 
 export type MutationCommentCreateArgs = {
-  input: CommentCreateInput
-}
+  input: CommentCreateInput;
+};
 
 export type MutationCommentDeleteArgs = {
-  by: CommentByInput
-}
+  by: CommentByInput;
+};
 
 export type MutationCommentUpdateArgs = {
-  by: CommentByInput
-  input: CommentUpdateInput
-}
+  by: CommentByInput;
+  input: CommentUpdateInput;
+};
 
 export type MutationPostCreateArgs = {
-  input: PostCreateInput
-}
+  input: PostCreateInput;
+};
 
 export type MutationPostDeleteArgs = {
-  by: PostByInput
-}
+  by: PostByInput;
+};
 
 export type MutationPostUpdateArgs = {
-  by: PostByInput
-  input: PostUpdateInput
-}
+  by: PostByInput;
+  input: PostUpdateInput;
+};
 
 export type PageInfo = {
-  __typename?: 'PageInfo'
-  endCursor?: Maybe<Scalars['String']>
-  hasNextPage: Scalars['Boolean']
-  hasPreviousPage: Scalars['Boolean']
-  startCursor?: Maybe<Scalars['String']>
-}
+  __typename?: "PageInfo";
+  endCursor?: Maybe<Scalars["String"]>;
+  hasNextPage: Scalars["Boolean"];
+  hasPreviousPage: Scalars["Boolean"];
+  startCursor?: Maybe<Scalars["String"]>;
+};
 
 export type Post = {
-  __typename?: 'Post'
-  comments?: Maybe<CommentConnection>
+  __typename?: "Post";
+  comments?: Maybe<CommentConnection>;
   /** when the model was created */
-  createdAt: Scalars['DateTime']
-  id: Scalars['ID']
-  slug: Scalars['String']
-  title: Scalars['String']
+  createdAt: Scalars["DateTime"];
+  id: Scalars["ID"];
+  slug: Scalars["String"];
+  title: Scalars["String"];
   /** when the model was updated */
-  updatedAt: Scalars['DateTime']
-}
+  updatedAt: Scalars["DateTime"];
+};
 
 export type PostCommentsArgs = {
-  after?: InputMaybe<Scalars['String']>
-  before?: InputMaybe<Scalars['String']>
-  first?: InputMaybe<Scalars['Int']>
-  last?: InputMaybe<Scalars['Int']>
-}
+  after?: InputMaybe<Scalars["String"]>;
+  before?: InputMaybe<Scalars["String"]>;
+  first?: InputMaybe<Scalars["Int"]>;
+  last?: InputMaybe<Scalars["Int"]>;
+};
 
 export type PostByInput = {
-  id?: InputMaybe<Scalars['ID']>
-  slug?: InputMaybe<Scalars['String']>
-}
+  id?: InputMaybe<Scalars["ID"]>;
+  slug?: InputMaybe<Scalars["String"]>;
+};
 
 /** Input to create a new PostCommentRelatePostComment */
 export type PostCommentRelatePostCommentCreateInput = {
-  message: Scalars['String']
-}
+  message: Scalars["String"];
+};
 
 /** Input to create a new PostCommentRelatePostComment relation */
 export type PostCommentRelatePostCommentCreateRelationInput = {
-  create?: InputMaybe<PostCommentRelatePostCommentCreateInput>
-  link?: InputMaybe<Scalars['ID']>
-}
+  create?: InputMaybe<PostCommentRelatePostCommentCreateInput>;
+  link?: InputMaybe<Scalars["ID"]>;
+};
 
 /** Input to update a PostCommentRelatePostComment relation */
 export type PostCommentRelatePostCommentUpdateRelationInput = {
-  create?: InputMaybe<PostCommentRelatePostCommentCreateInput>
-  link?: InputMaybe<Scalars['ID']>
-  unlink?: InputMaybe<Scalars['ID']>
-}
+  create?: InputMaybe<PostCommentRelatePostCommentCreateInput>;
+  link?: InputMaybe<Scalars["ID"]>;
+  unlink?: InputMaybe<Scalars["ID"]>;
+};
 
 export type PostConnection = {
-  __typename?: 'PostConnection'
-  edges?: Maybe<Array<Maybe<PostEdge>>>
+  __typename?: "PostConnection";
+  edges?: Maybe<Array<Maybe<PostEdge>>>;
   /** Information to aid in pagination */
-  pageInfo: PageInfo
-}
+  pageInfo: PageInfo;
+};
 
 /** Input to create a new Post */
 export type PostCreateInput = {
   comments?: InputMaybe<
     Array<InputMaybe<PostCommentRelatePostCommentCreateRelationInput>>
-  >
-  slug: Scalars['String']
-  title: Scalars['String']
-}
+  >;
+  slug: Scalars["String"];
+  title: Scalars["String"];
+};
 
 export type PostCreatePayload = {
-  __typename?: 'PostCreatePayload'
-  post?: Maybe<Post>
-}
+  __typename?: "PostCreatePayload";
+  post?: Maybe<Post>;
+};
 
 export type PostDeletePayload = {
-  __typename?: 'PostDeletePayload'
-  deletedId: Scalars['ID']
-}
+  __typename?: "PostDeletePayload";
+  deletedId: Scalars["ID"];
+};
 
 export type PostEdge = {
-  __typename?: 'PostEdge'
-  cursor: Scalars['String']
-  node: Post
-}
+  __typename?: "PostEdge";
+  cursor: Scalars["String"];
+  node: Post;
+};
 
 /** Input to create a new Post */
 export type PostUpdateInput = {
   comments?: InputMaybe<
     Array<InputMaybe<PostCommentRelatePostCommentUpdateRelationInput>>
-  >
-  slug?: InputMaybe<Scalars['String']>
-  title?: InputMaybe<Scalars['String']>
-}
+  >;
+  slug?: InputMaybe<Scalars["String"]>;
+  title?: InputMaybe<Scalars["String"]>;
+};
 
 export type PostUpdatePayload = {
-  __typename?: 'PostUpdatePayload'
-  post?: Maybe<Post>
-}
+  __typename?: "PostUpdatePayload";
+  post?: Maybe<Post>;
+};
 
 export type Query = {
-  __typename?: 'Query'
+  __typename?: "Query";
   /** Query a single Comment by an ID or a unique field */
-  comment?: Maybe<Comment>
+  comment?: Maybe<Comment>;
   /** Paginated query to fetch the whole list of `Comment`. */
-  commentCollection?: Maybe<CommentConnection>
+  commentCollection?: Maybe<CommentConnection>;
   /** Query a single Post by an ID or a unique field */
-  post?: Maybe<Post>
+  post?: Maybe<Post>;
   /** Paginated query to fetch the whole list of `Post`. */
-  postCollection?: Maybe<PostConnection>
-}
+  postCollection?: Maybe<PostConnection>;
+};
 
 export type QueryCommentArgs = {
-  by: CommentByInput
-}
+  by: CommentByInput;
+};
 
 export type QueryCommentCollectionArgs = {
-  after?: InputMaybe<Scalars['String']>
-  before?: InputMaybe<Scalars['String']>
-  first?: InputMaybe<Scalars['Int']>
-  last?: InputMaybe<Scalars['Int']>
-}
+  after?: InputMaybe<Scalars["String"]>;
+  before?: InputMaybe<Scalars["String"]>;
+  first?: InputMaybe<Scalars["Int"]>;
+  last?: InputMaybe<Scalars["Int"]>;
+};
 
 export type QueryPostArgs = {
-  by: PostByInput
-}
+  by: PostByInput;
+};
 
 export type QueryPostCollectionArgs = {
-  after?: InputMaybe<Scalars['String']>
-  before?: InputMaybe<Scalars['String']>
-  first?: InputMaybe<Scalars['Int']>
-  last?: InputMaybe<Scalars['Int']>
-}
+  after?: InputMaybe<Scalars["String"]>;
+  before?: InputMaybe<Scalars["String"]>;
+  first?: InputMaybe<Scalars["Int"]>;
+  last?: InputMaybe<Scalars["Int"]>;
+};
 
 export type GetAllPostsQueryVariables = Exact<{
-  first: Scalars['Int']
-}>
+  first: Scalars["Int"];
+}>;
 
 export type GetAllPostsQuery = {
-  __typename?: 'Query'
+  __typename?: "Query";
   postCollection?: {
-    __typename?: 'PostConnection'
+    __typename?: "PostConnection";
     edges?: Array<{
-      __typename?: 'PostEdge'
-      node: { __typename?: 'Post'; id: string; title: string; slug: string }
-    } | null> | null
-  } | null
-}
+      __typename?: "PostEdge";
+      node: { __typename?: "Post"; id: string; title: string; slug: string };
+    } | null> | null;
+  } | null;
+};
 
 export type GetPostBySlugQueryVariables = Exact<{
-  slug: Scalars['String']
-}>
+  slug: Scalars["String"];
+}>;
 
 export type GetPostBySlugQuery = {
-  __typename?: 'Query'
-  post?: { __typename?: 'Post'; id: string; title: string; slug: string } | null
-}
+  __typename?: "Query";
+  post?: {
+    __typename?: "Post";
+    id: string;
+    title: string;
+    slug: string;
+  } | null;
+};
 
 export const GetAllPostsDocument = {
-  kind: 'Document',
+  kind: "Document",
   definitions: [
     {
-      kind: 'OperationDefinition',
-      operation: 'query',
-      name: { kind: 'Name', value: 'GetAllPosts' },
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "GetAllPosts" },
       variableDefinitions: [
         {
-          kind: 'VariableDefinition',
+          kind: "VariableDefinition",
           variable: {
-            kind: 'Variable',
-            name: { kind: 'Name', value: 'first' },
+            kind: "Variable",
+            name: { kind: "Name", value: "first" },
           },
           type: {
-            kind: 'NonNullType',
-            type: { kind: 'NamedType', name: { kind: 'Name', value: 'Int' } },
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
           },
         },
       ],
       selectionSet: {
-        kind: 'SelectionSet',
+        kind: "SelectionSet",
         selections: [
           {
-            kind: 'Field',
-            name: { kind: 'Name', value: 'postCollection' },
+            kind: "Field",
+            name: { kind: "Name", value: "postCollection" },
             arguments: [
               {
-                kind: 'Argument',
-                name: { kind: 'Name', value: 'first' },
+                kind: "Argument",
+                name: { kind: "Name", value: "first" },
                 value: {
-                  kind: 'Variable',
-                  name: { kind: 'Name', value: 'first' },
+                  kind: "Variable",
+                  name: { kind: "Name", value: "first" },
                 },
               },
             ],
             selectionSet: {
-              kind: 'SelectionSet',
+              kind: "SelectionSet",
               selections: [
                 {
-                  kind: 'Field',
-                  name: { kind: 'Name', value: 'edges' },
+                  kind: "Field",
+                  name: { kind: "Name", value: "edges" },
                   selectionSet: {
-                    kind: 'SelectionSet',
+                    kind: "SelectionSet",
                     selections: [
                       {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'node' },
+                        kind: "Field",
+                        name: { kind: "Name", value: "node" },
                         selectionSet: {
-                          kind: 'SelectionSet',
+                          kind: "SelectionSet",
                           selections: [
                             {
-                              kind: 'Field',
-                              name: { kind: 'Name', value: 'id' },
+                              kind: "Field",
+                              name: { kind: "Name", value: "id" },
                             },
                             {
-                              kind: 'Field',
-                              name: { kind: 'Name', value: 'title' },
+                              kind: "Field",
+                              name: { kind: "Name", value: "title" },
                             },
                             {
-                              kind: 'Field',
-                              name: { kind: 'Name', value: 'slug' },
+                              kind: "Field",
+                              name: { kind: "Name", value: "slug" },
                             },
                           ],
                         },
@@ -382,46 +387,46 @@ export const GetAllPostsDocument = {
       },
     },
   ],
-} as unknown as DocumentNode<GetAllPostsQuery, GetAllPostsQueryVariables>
+} as unknown as DocumentNode<GetAllPostsQuery, GetAllPostsQueryVariables>;
 export const GetPostBySlugDocument = {
-  kind: 'Document',
+  kind: "Document",
   definitions: [
     {
-      kind: 'OperationDefinition',
-      operation: 'query',
-      name: { kind: 'Name', value: 'GetPostBySlug' },
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "GetPostBySlug" },
       variableDefinitions: [
         {
-          kind: 'VariableDefinition',
-          variable: { kind: 'Variable', name: { kind: 'Name', value: 'slug' } },
+          kind: "VariableDefinition",
+          variable: { kind: "Variable", name: { kind: "Name", value: "slug" } },
           type: {
-            kind: 'NonNullType',
+            kind: "NonNullType",
             type: {
-              kind: 'NamedType',
-              name: { kind: 'Name', value: 'String' },
+              kind: "NamedType",
+              name: { kind: "Name", value: "String" },
             },
           },
         },
       ],
       selectionSet: {
-        kind: 'SelectionSet',
+        kind: "SelectionSet",
         selections: [
           {
-            kind: 'Field',
-            name: { kind: 'Name', value: 'post' },
+            kind: "Field",
+            name: { kind: "Name", value: "post" },
             arguments: [
               {
-                kind: 'Argument',
-                name: { kind: 'Name', value: 'by' },
+                kind: "Argument",
+                name: { kind: "Name", value: "by" },
                 value: {
-                  kind: 'ObjectValue',
+                  kind: "ObjectValue",
                   fields: [
                     {
-                      kind: 'ObjectField',
-                      name: { kind: 'Name', value: 'slug' },
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "slug" },
                       value: {
-                        kind: 'Variable',
-                        name: { kind: 'Name', value: 'slug' },
+                        kind: "Variable",
+                        name: { kind: "Name", value: "slug" },
                       },
                     },
                   ],
@@ -429,11 +434,11 @@ export const GetPostBySlugDocument = {
               },
             ],
             selectionSet: {
-              kind: 'SelectionSet',
+              kind: "SelectionSet",
               selections: [
-                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'title' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'slug' } },
+                { kind: "Field", name: { kind: "Name", value: "id" } },
+                { kind: "Field", name: { kind: "Name", value: "title" } },
+                { kind: "Field", name: { kind: "Name", value: "slug" } },
               ],
             },
           },
@@ -441,4 +446,4 @@ export const GetPostBySlugDocument = {
       },
     },
   ],
-} as unknown as DocumentNode<GetPostBySlugQuery, GetPostBySlugQueryVariables>
+} as unknown as DocumentNode<GetPostBySlugQuery, GetPostBySlugQueryVariables>;
diff --git a/examples/with-grafbase/gql/index.ts b/examples/with-grafbase/gql/index.ts
index 99775ae23c..b3c7f85b88 100644
--- a/examples/with-grafbase/gql/index.ts
+++ b/examples/with-grafbase/gql/index.ts
@@ -1,2 +1,2 @@
-export * from './gql'
-export * from './fragment-masking'
+export * from "./gql";
+export * from "./fragment-masking";
diff --git a/examples/with-grafbase/lib/grafbase.ts b/examples/with-grafbase/lib/grafbase.ts
index fbb8f9acc5..6792b7916f 100644
--- a/examples/with-grafbase/lib/grafbase.ts
+++ b/examples/with-grafbase/lib/grafbase.ts
@@ -1,12 +1,12 @@
-import { GraphQLClient } from 'graphql-request'
-export { gql } from 'graphql-request'
+import { GraphQLClient } from "graphql-request";
+export { gql } from "graphql-request";
 
 export const grafbase = new GraphQLClient(
   process.env.GRAFBASE_API_URL as string,
   {
     headers: {
-      'x-api-key': process.env.GRAFBASE_API_KEY as string,
+      "x-api-key": process.env.GRAFBASE_API_KEY as string,
     },
     fetch,
-  }
-)
+  },
+);
diff --git a/examples/with-grafbase/next.config.js b/examples/with-grafbase/next.config.js
index a843cbee09..91ef62f0db 100644
--- a/examples/with-grafbase/next.config.js
+++ b/examples/with-grafbase/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-grafbase/postcss.config.js b/examples/with-grafbase/postcss.config.js
index 33ad091d26..12a703d900 100644
--- a/examples/with-grafbase/postcss.config.js
+++ b/examples/with-grafbase/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/with-grafbase/tailwind.config.js b/examples/with-grafbase/tailwind.config.js
index d4b5c6122d..10ceac24e9 100644
--- a/examples/with-grafbase/tailwind.config.js
+++ b/examples/with-grafbase/tailwind.config.js
@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./app/**/*.{js,ts,jsx,tsx}'],
+  content: ["./app/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {},
   },
-  plugins: [require('@tailwindcss/typography')],
-}
+  plugins: [require("@tailwindcss/typography")],
+};
diff --git a/examples/with-graphql-gateway/next.config.js b/examples/with-graphql-gateway/next.config.js
index a843cbee09..91ef62f0db 100644
--- a/examples/with-graphql-gateway/next.config.js
+++ b/examples/with-graphql-gateway/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-graphql-gateway/pages/_app.tsx b/examples/with-graphql-gateway/pages/_app.tsx
index 3f5c9d5485..8c4d5de82a 100644
--- a/examples/with-graphql-gateway/pages/_app.tsx
+++ b/examples/with-graphql-gateway/pages/_app.tsx
@@ -1,8 +1,8 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-graphql-gateway/pages/api/graphql.ts b/examples/with-graphql-gateway/pages/api/graphql.ts
index 43047a9a8b..82170c6624 100644
--- a/examples/with-graphql-gateway/pages/api/graphql.ts
+++ b/examples/with-graphql-gateway/pages/api/graphql.ts
@@ -1,29 +1,29 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { createServer } from '@graphql-yoga/node'
+import type { NextApiRequest, NextApiResponse } from "next";
+import { createServer } from "@graphql-yoga/node";
 
-import { getBuiltMesh } from '../../.mesh'
+import { getBuiltMesh } from "../../.mesh";
 
 async function buildServer() {
   // retrieve the mesh instance (with configured Envelop plugins)
-  const mesh = await getBuiltMesh()
+  const mesh = await getBuiltMesh();
   // pass the Mesh instance to Yoga and configure GraphiQL
   const server = createServer({
     plugins: mesh.plugins,
     graphiql: {
-      endpoint: '/api/graphql',
-      title: 'GraphQL Gateway',
+      endpoint: "/api/graphql",
+      title: "GraphQL Gateway",
     },
-  })
+  });
 
-  return server
+  return server;
 }
 
-const server$ = buildServer()
+const server$ = buildServer();
 
 export default async function apiHandler(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  return (await server$).requestListener(req, res)
+  return (await server$).requestListener(req, res);
 }
diff --git a/examples/with-graphql-gateway/pages/index.tsx b/examples/with-graphql-gateway/pages/index.tsx
index ff4dd21141..e953f1e6dd 100644
--- a/examples/with-graphql-gateway/pages/index.tsx
+++ b/examples/with-graphql-gateway/pages/index.tsx
@@ -1,7 +1,7 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
+import type { NextPage } from "next";
+import Head from "next/head";
+import Image from "next/image";
+import styles from "../styles/Home.module.css";
 
 const Home: NextPage = () => {
   return (
@@ -18,7 +18,7 @@ const Home: NextPage = () => {
         </h1>
 
         <p className={styles.description}>
-          Get started by editing{' '}
+          Get started by editing{" "}
           <code className={styles.code}>pages/index.tsx</code>
         </p>
 
@@ -61,14 +61,14 @@ const Home: NextPage = () => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <span className={styles.logo}>
             <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
           </span>
         </a>
       </footer>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/examples/with-graphql-hooks/components/app.js b/examples/with-graphql-hooks/components/app.js
index 5a0ce7dee5..42555456e4 100644
--- a/examples/with-graphql-hooks/components/app.js
+++ b/examples/with-graphql-hooks/components/app.js
@@ -1,3 +1,3 @@
 export default function App({ children }) {
-  return <main>{children}</main>
+  return <main>{children}</main>;
 }
diff --git a/examples/with-graphql-hooks/components/error-message.js b/examples/with-graphql-hooks/components/error-message.js
index d8cc91e950..8782366812 100644
--- a/examples/with-graphql-hooks/components/error-message.js
+++ b/examples/with-graphql-hooks/components/error-message.js
@@ -11,5 +11,5 @@ export default function ErrorMessage({ message }) {
         }
       `}</style>
     </aside>
-  )
+  );
 }
diff --git a/examples/with-graphql-hooks/components/header.js b/examples/with-graphql-hooks/components/header.js
index 1371bc25d2..063448505c 100644
--- a/examples/with-graphql-hooks/components/header.js
+++ b/examples/with-graphql-hooks/components/header.js
@@ -1,16 +1,16 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
+import Link from "next/link";
+import { useRouter } from "next/router";
 
 export default function Header() {
-  const { pathname } = useRouter()
+  const { pathname } = useRouter();
 
   return (
     <header>
       <Link href="/" legacyBehavior>
-        <a className={pathname === '/' ? 'is-active' : ''}>Home</a>
+        <a className={pathname === "/" ? "is-active" : ""}>Home</a>
       </Link>
       <Link href="/about" legacyBehavior>
-        <a className={pathname === '/about' ? 'is-active' : ''}>About</a>
+        <a className={pathname === "/about" ? "is-active" : ""}>About</a>
       </Link>
       <style jsx>{`
         header {
@@ -26,5 +26,5 @@ export default function Header() {
         }
       `}</style>
     </header>
-  )
+  );
 }
diff --git a/examples/with-graphql-hooks/components/post-list.js b/examples/with-graphql-hooks/components/post-list.js
index 3cf8a13243..f3305a0ed9 100644
--- a/examples/with-graphql-hooks/components/post-list.js
+++ b/examples/with-graphql-hooks/components/post-list.js
@@ -1,8 +1,8 @@
-import { useState } from 'react'
-import { useQuery } from 'graphql-hooks'
-import ErrorMessage from './error-message'
-import PostUpvoter from './post-upvoter'
-import Submit from './submit'
+import { useState } from "react";
+import { useQuery } from "graphql-hooks";
+import ErrorMessage from "./error-message";
+import PostUpvoter from "./post-upvoter";
+import Submit from "./submit";
 
 export const ALL_POSTS_QUERY = `
   query allPosts($first: Int!, $skip: Int!) {
@@ -17,7 +17,7 @@ export const ALL_POSTS_QUERY = `
       count
     }
   }
-`
+`;
 
 export const allPostsQueryOptions = (skip = 0) => ({
   variables: { skip, first: 10 },
@@ -27,26 +27,26 @@ export const allPostsQueryOptions = (skip = 0) => ({
       ? [...prevResult.allPosts, ...result.allPosts]
       : result.allPosts,
   }),
-})
+});
 
 export default function PostList() {
-  const [skip, setSkip] = useState(0)
+  const [skip, setSkip] = useState(0);
   const { loading, error, data, refetch } = useQuery(
     ALL_POSTS_QUERY,
-    allPostsQueryOptions(skip)
-  )
+    allPostsQueryOptions(skip),
+  );
 
-  if (error) return <ErrorMessage message="Error loading posts." />
-  if (!data) return <div>Loading</div>
+  if (error) return <ErrorMessage message="Error loading posts." />;
+  if (!data) return <div>Loading</div>;
 
-  const { allPosts, _allPostsMeta } = data
-  const areMorePosts = allPosts.length < _allPostsMeta.count
+  const { allPosts, _allPostsMeta } = data;
+  const areMorePosts = allPosts.length < _allPostsMeta.count;
 
   return (
     <>
       <Submit
         onSubmission={() => {
-          refetch({ variables: { skip: 0, first: allPosts.length } })
+          refetch({ variables: { skip: 0, first: allPosts.length } });
         }}
       />
       <section>
@@ -60,7 +60,7 @@ export default function PostList() {
                   id={post.id}
                   votes={post.votes}
                   onUpdate={() => {
-                    refetch({ variables: { skip: 0, first: allPosts.length } })
+                    refetch({ variables: { skip: 0, first: allPosts.length } });
                   }}
                 />
               </div>
@@ -69,13 +69,13 @@ export default function PostList() {
         </ul>
         {areMorePosts ? (
           <button className="more" onClick={() => setSkip(skip + 10)}>
-            {' '}
-            {loading && !data ? 'Loading...' : 'Show More'}{' '}
+            {" "}
+            {loading && !data ? "Loading..." : "Show More"}{" "}
           </button>
         ) : (
-          ''
+          ""
         )}
       </section>
     </>
-  )
+  );
 }
diff --git a/examples/with-graphql-hooks/components/post-upvoter.js b/examples/with-graphql-hooks/components/post-upvoter.js
index d2266c40a9..6f276f4576 100644
--- a/examples/with-graphql-hooks/components/post-upvoter.js
+++ b/examples/with-graphql-hooks/components/post-upvoter.js
@@ -1,5 +1,5 @@
-import React from 'react'
-import { useMutation } from 'graphql-hooks'
+import React from "react";
+import { useMutation } from "graphql-hooks";
 
 const UPDATE_POST = `
   mutation votePost($id: String!) {
@@ -9,10 +9,10 @@ const UPDATE_POST = `
       __typename
     }
   }
-`
+`;
 
 export default function PostUpvoter({ votes, id, onUpdate }) {
-  const [updatePost] = useMutation(UPDATE_POST)
+  const [updatePost] = useMutation(UPDATE_POST);
 
   return (
     <button
@@ -23,15 +23,15 @@ export default function PostUpvoter({ votes, id, onUpdate }) {
             variables: {
               id,
             },
-          })
+          });
 
-          onUpdate && onUpdate(result)
+          onUpdate && onUpdate(result);
         } catch (e) {
-          console.error('error upvoting post', e)
+          console.error("error upvoting post", e);
         }
       }}
     >
       {votes}
     </button>
-  )
+  );
 }
diff --git a/examples/with-graphql-hooks/components/submit.js b/examples/with-graphql-hooks/components/submit.js
index ca69203795..40f958410f 100644
--- a/examples/with-graphql-hooks/components/submit.js
+++ b/examples/with-graphql-hooks/components/submit.js
@@ -1,5 +1,5 @@
-import React from 'react'
-import { useMutation } from 'graphql-hooks'
+import React from "react";
+import { useMutation } from "graphql-hooks";
 
 const CREATE_POST = `
 mutation createPost($title: String!, $url: String!) {
@@ -10,33 +10,33 @@ mutation createPost($title: String!, $url: String!) {
     url
     createdAt
   }
-}`
+}`;
 
 async function handleSubmit(event, onSubmission, createPost) {
-  event.preventDefault()
-  const form = event.target
-  const formData = new window.FormData(form)
-  const title = formData.get('title')
-  const url = formData.get('url')
-  form.reset()
+  event.preventDefault();
+  const form = event.target;
+  const formData = new window.FormData(form);
+  const title = formData.get("title");
+  const url = formData.get("url");
+  form.reset();
   const result = await createPost({
     variables: {
       title,
       url,
     },
-  })
-  onSubmission && onSubmission(result)
+  });
+  onSubmission && onSubmission(result);
 }
 
 export default function Submit({ onSubmission }) {
-  const [createPost, state] = useMutation(CREATE_POST)
+  const [createPost, state] = useMutation(CREATE_POST);
 
   return (
     <form onSubmit={(event) => handleSubmit(event, onSubmission, createPost)}>
       <h1>Submit</h1>
       <input placeholder="title" name="title" type="text" required />
       <input placeholder="url" name="url" type="url" required />
-      <button type="submit">{state.loading ? 'Loading...' : 'Submit'}</button>
+      <button type="submit">{state.loading ? "Loading..." : "Submit"}</button>
       <style jsx>{`
         form {
           border-bottom: 1px solid #ececec;
@@ -52,5 +52,5 @@ export default function Submit({ onSubmission }) {
         }
       `}</style>
     </form>
-  )
+  );
 }
diff --git a/examples/with-graphql-hooks/lib/graphql-client.js b/examples/with-graphql-hooks/lib/graphql-client.js
index 1a471496b5..0be522d644 100644
--- a/examples/with-graphql-hooks/lib/graphql-client.js
+++ b/examples/with-graphql-hooks/lib/graphql-client.js
@@ -1,19 +1,19 @@
-import { useMemo } from 'react'
-import { GraphQLClient } from 'graphql-hooks'
-import memCache from 'graphql-hooks-memcache'
+import { useMemo } from "react";
+import { GraphQLClient } from "graphql-hooks";
+import memCache from "graphql-hooks-memcache";
 
-let graphQLClient
+let graphQLClient;
 
 function createClient(initialState) {
   return new GraphQLClient({
-    ssrMode: typeof window === 'undefined',
-    url: 'https://nextjs-graphql-with-prisma-simple-foo.vercel.app/api', // Server URL (must be absolute)
+    ssrMode: typeof window === "undefined",
+    url: "https://nextjs-graphql-with-prisma-simple-foo.vercel.app/api", // Server URL (must be absolute)
     cache: memCache({ initialState }),
-  })
+  });
 }
 
 export function initializeGraphQL(initialState = null) {
-  const _graphQLClient = graphQLClient ?? createClient(initialState)
+  const _graphQLClient = graphQLClient ?? createClient(initialState);
 
   // After navigating to a page with an initial GraphQL state, create a new cache with the
   // current state merged with the incoming state and set it to the GraphQL client.
@@ -22,19 +22,19 @@ export function initializeGraphQL(initialState = null) {
     graphQLClient.cache = memCache({
       initialState: Object.assign(
         graphQLClient.cache.getInitialState(),
-        initialState
+        initialState,
       ),
-    })
+    });
   }
   // For SSG and SSR always create a new GraphQL Client
-  if (typeof window === 'undefined') return _graphQLClient
+  if (typeof window === "undefined") return _graphQLClient;
   // Create the GraphQL Client once in the client
-  if (!graphQLClient) graphQLClient = _graphQLClient
+  if (!graphQLClient) graphQLClient = _graphQLClient;
 
-  return _graphQLClient
+  return _graphQLClient;
 }
 
 export function useGraphQLClient(initialState) {
-  const store = useMemo(() => initializeGraphQL(initialState), [initialState])
-  return store
+  const store = useMemo(() => initializeGraphQL(initialState), [initialState]);
+  return store;
 }
diff --git a/examples/with-graphql-hooks/lib/graphql-request.js b/examples/with-graphql-hooks/lib/graphql-request.js
index 130da12c15..7bbc2c2ab3 100644
--- a/examples/with-graphql-hooks/lib/graphql-request.js
+++ b/examples/with-graphql-hooks/lib/graphql-request.js
@@ -1,4 +1,4 @@
-const defaultOpts = { useCache: true }
+const defaultOpts = { useCache: true };
 /**
  * Returns the result of a GraphQL query. It also adds the result to the
  * cache of the GraphQL client for better initial data population in pages.
@@ -7,24 +7,24 @@ const defaultOpts = { useCache: true }
  * do internally to make sure we generate the same cache key
  */
 export default async function graphQLRequest(client, query, options) {
-  const opts = { ...defaultOpts, ...options }
+  const opts = { ...defaultOpts, ...options };
   const operation = {
     query,
     variables: opts.variables,
     operationName: opts.operationName,
     persisted: opts.persisted,
-  }
+  };
 
   if (opts.persisted || (client.useGETForQueries && !opts.isMutation)) {
     opts.fetchOptionsOverrides = {
       ...opts.fetchOptionsOverrides,
-      method: 'GET',
-    }
+      method: "GET",
+    };
   }
 
-  const cacheKey = client.getCacheKey(operation, opts)
-  const cacheValue = await client.request(operation, opts)
+  const cacheKey = client.getCacheKey(operation, opts);
+  const cacheValue = await client.request(operation, opts);
 
-  client.saveCache(cacheKey, cacheValue)
-  return cacheValue
+  client.saveCache(cacheKey, cacheValue);
+  return cacheValue;
 }
diff --git a/examples/with-graphql-hooks/pages/_app.js b/examples/with-graphql-hooks/pages/_app.js
index c72524f1a0..2badeb34bd 100644
--- a/examples/with-graphql-hooks/pages/_app.js
+++ b/examples/with-graphql-hooks/pages/_app.js
@@ -1,13 +1,13 @@
-import '../styles.css'
-import { ClientContext } from 'graphql-hooks'
-import { useGraphQLClient } from '../lib/graphql-client'
+import "../styles.css";
+import { ClientContext } from "graphql-hooks";
+import { useGraphQLClient } from "../lib/graphql-client";
 
 export default function App({ Component, pageProps }) {
-  const graphQLClient = useGraphQLClient(pageProps.initialGraphQLState)
+  const graphQLClient = useGraphQLClient(pageProps.initialGraphQLState);
 
   return (
     <ClientContext.Provider value={graphQLClient}>
       <Component {...pageProps} />
     </ClientContext.Provider>
-  )
+  );
 }
diff --git a/examples/with-graphql-hooks/pages/about.js b/examples/with-graphql-hooks/pages/about.js
index 057b1b60a2..dc0812ad05 100644
--- a/examples/with-graphql-hooks/pages/about.js
+++ b/examples/with-graphql-hooks/pages/about.js
@@ -1,5 +1,5 @@
-import App from '../components/app'
-import Header from '../components/header'
+import App from "../components/app";
+import Header from "../components/header";
 
 export default function About() {
   return (
@@ -8,7 +8,7 @@ export default function About() {
       <article>
         <h1>The Idea Behind This Example</h1>
         <p>
-          <a href="https://github.com/nearform/graphql-hooks">GraphQL Hooks</a>{' '}
+          <a href="https://github.com/nearform/graphql-hooks">GraphQL Hooks</a>{" "}
           is a library from NearForm that intends to be a minimal hooks-first
           GraphQL client. Providing it in a way familiar to Apollo users.
         </p>
@@ -21,12 +21,12 @@ export default function About() {
         </p>
 
         <p>
-          You'll see this shares the same{' '}
+          You'll see this shares the same{" "}
           <a href="https://www.graph.cool">graph.cool</a> backend as the Apollo
           example, this is so you can compare the two side by side. The app
           itself should also look identical.
         </p>
       </article>
     </App>
-  )
+  );
 }
diff --git a/examples/with-graphql-hooks/pages/index.js b/examples/with-graphql-hooks/pages/index.js
index dc9ec59025..d14ee30ab4 100644
--- a/examples/with-graphql-hooks/pages/index.js
+++ b/examples/with-graphql-hooks/pages/index.js
@@ -1,11 +1,11 @@
-import { initializeGraphQL } from '../lib/graphql-client'
-import graphQLRequest from '../lib/graphql-request'
-import App from '../components/app'
-import Header from '../components/header'
+import { initializeGraphQL } from "../lib/graphql-client";
+import graphQLRequest from "../lib/graphql-request";
+import App from "../components/app";
+import Header from "../components/header";
 import PostList, {
   ALL_POSTS_QUERY,
   allPostsQueryOptions,
-} from '../components/post-list'
+} from "../components/post-list";
 
 export default function Home() {
   return (
@@ -13,18 +13,18 @@ export default function Home() {
       <Header />
       <PostList />
     </App>
-  )
+  );
 }
 
 export async function getStaticProps() {
-  const client = initializeGraphQL()
+  const client = initializeGraphQL();
 
-  await graphQLRequest(client, ALL_POSTS_QUERY, allPostsQueryOptions())
+  await graphQLRequest(client, ALL_POSTS_QUERY, allPostsQueryOptions());
 
   return {
     props: {
       initialGraphQLState: client.cache.getInitialState(),
     },
     revalidate: 1,
-  }
+  };
 }
diff --git a/examples/with-graphql-hooks/styles.css b/examples/with-graphql-hooks/styles.css
index dd28550255..8019474819 100644
--- a/examples/with-graphql-hooks/styles.css
+++ b/examples/with-graphql-hooks/styles.css
@@ -1,6 +1,6 @@
 * {
-  font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
-    'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace,
+  font-family: Menlo, Monaco, "Lucida Console", "Liberation Mono",
+    "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace,
     serif;
 }
 body {
@@ -60,7 +60,7 @@ ul {
 button:before {
   align-self: center;
   border-style: solid;
-  content: '';
+  content: "";
   height: 0;
   margin-right: 5px;
   width: 0;
diff --git a/examples/with-graphql-react/pages/_app.js b/examples/with-graphql-react/pages/_app.js
index 4c611c912a..eabdd88fdc 100644
--- a/examples/with-graphql-react/pages/_app.js
+++ b/examples/with-graphql-react/pages/_app.js
@@ -1,10 +1,10 @@
-import { GraphQLProvider } from 'graphql-react'
-import { withGraphQLApp } from 'next-graphql-react'
+import { GraphQLProvider } from "graphql-react";
+import { withGraphQLApp } from "next-graphql-react";
 
 const App = ({ Component, pageProps, graphql }) => (
   <GraphQLProvider graphql={graphql}>
     <Component {...pageProps} />
   </GraphQLProvider>
-)
+);
 
-export default withGraphQLApp(App)
+export default withGraphQLApp(App);
diff --git a/examples/with-graphql-react/pages/index.js b/examples/with-graphql-react/pages/index.js
index 3bbd76c1e2..123412b73f 100644
--- a/examples/with-graphql-react/pages/index.js
+++ b/examples/with-graphql-react/pages/index.js
@@ -1,9 +1,9 @@
-import { useGraphQL } from 'graphql-react'
+import { useGraphQL } from "graphql-react";
 
 export default function IndexPage() {
   const { loading, cacheValue: { data } = {} } = useGraphQL({
     fetchOptionsOverride(options) {
-      options.url = 'https://graphql-pokemon.vercel.app'
+      options.url = "https://graphql-pokemon.vercel.app";
     },
     operation: {
       query: /* GraphQL */ `
@@ -18,7 +18,7 @@ export default function IndexPage() {
     loadOnMount: true,
     loadOnReload: true,
     loadOnReset: true,
-  })
+  });
 
   return data ? (
     <img src={data.pokemon.image} alt={data.pokemon.name} />
@@ -26,5 +26,5 @@ export default function IndexPage() {
     <p>Loading…</p>
   ) : (
     <p>Error!</p>
-  )
+  );
 }
diff --git a/examples/with-gsap/App.scss b/examples/with-gsap/App.scss
index b14e9facdb..ac3eb31653 100644
--- a/examples/with-gsap/App.scss
+++ b/examples/with-gsap/App.scss
@@ -9,7 +9,7 @@
     color: #181818;
     font-size: 12px;
     font-weight: 600;
-    font-family: 'Poppins';
+    font-family: "Poppins";
   }
 }
 
@@ -26,7 +26,7 @@
       display: flex;
       justify-content: center;
       h1 {
-        font-family: 'Bebas Neue';
+        font-family: "Bebas Neue";
         font-size: 52px;
         letter-spacing: 0.1rem;
         .line-wrap {
@@ -35,7 +35,7 @@
         }
       }
       p {
-        font-family: 'Poppins';
+        font-family: "Poppins";
         margin-top: 200px;
         width: 340px;
         font-weight: 300;
diff --git a/examples/with-gsap/components/Content.tsx b/examples/with-gsap/components/Content.tsx
index 7f67d3e7a2..b14c06480c 100644
--- a/examples/with-gsap/components/Content.tsx
+++ b/examples/with-gsap/components/Content.tsx
@@ -1,36 +1,36 @@
-import { useEffect, useRef } from 'react'
-import { gsap } from 'gsap'
+import { useEffect, useRef } from "react";
+import { gsap } from "gsap";
 
 export default function Content() {
-  let line1 = useRef(null)
+  let line1 = useRef(null);
 
   useEffect(() => {
     gsap.from([line1.current], 0.6, {
       delay: 0.9,
-      ease: 'power3.out',
+      ease: "power3.out",
       y: 24,
       stagger: {
         amount: 0.15,
       },
-    })
-  }, [line1])
+    });
+  }, [line1]);
 
   return (
     <p ref={line1} className="line">
-      A Simple example using{' '}
+      A Simple example using{" "}
       <a
         href="https://greensock.com/gsap/"
-        style={{ fontWeight: 'bold', textDecoration: 'none' }}
+        style={{ fontWeight: "bold", textDecoration: "none" }}
       >
         GSAP
-      </a>{' '}
-      &{' '}
+      </a>{" "}
+      &{" "}
       <a
         href="https://www.npmjs.com/package/react-transition-group"
-        style={{ fontWeight: 'bold', textDecoration: 'none' }}
+        style={{ fontWeight: "bold", textDecoration: "none" }}
       >
         react-transition-group
       </a>
     </p>
-  )
+  );
 }
diff --git a/examples/with-gsap/components/Home.tsx b/examples/with-gsap/components/Home.tsx
index 065619f779..5b3bd68212 100644
--- a/examples/with-gsap/components/Home.tsx
+++ b/examples/with-gsap/components/Home.tsx
@@ -1,5 +1,5 @@
-import Title from './Title'
-import Content from './Content'
+import Title from "./Title";
+import Content from "./Content";
 
 export default function Home() {
   return (
@@ -13,5 +13,5 @@ export default function Home() {
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/with-gsap/components/Title.tsx b/examples/with-gsap/components/Title.tsx
index 7f250ea59b..fa3178044d 100644
--- a/examples/with-gsap/components/Title.tsx
+++ b/examples/with-gsap/components/Title.tsx
@@ -1,25 +1,25 @@
-import { useEffect, useRef } from 'react'
-import { gsap } from 'gsap'
+import { useEffect, useRef } from "react";
+import { gsap } from "gsap";
 
 type TitleProps = {
-  lineContent: string
-  lineContent2: string
-}
+  lineContent: string;
+  lineContent2: string;
+};
 
 export default function Title({ lineContent, lineContent2 }: TitleProps) {
-  let line1 = useRef(null)
-  let line2 = useRef(null)
+  let line1 = useRef(null);
+  let line2 = useRef(null);
 
   useEffect(() => {
     gsap.from([line1.current, line2.current], 0.8, {
       delay: 0.8,
-      ease: 'power3.out',
+      ease: "power3.out",
       y: 64,
       stagger: {
         amount: 0.15,
       },
-    })
-  }, [line1, line2])
+    });
+  }, [line1, line2]);
 
   return (
     <h1 className="page-title">
@@ -34,5 +34,5 @@ export default function Title({ lineContent, lineContent2 }: TitleProps) {
         </div>
       </div>
     </h1>
-  )
+  );
 }
diff --git a/examples/with-gsap/pages/_app.tsx b/examples/with-gsap/pages/_app.tsx
index e12b69b03d..8c3256aa16 100644
--- a/examples/with-gsap/pages/_app.tsx
+++ b/examples/with-gsap/pages/_app.tsx
@@ -1,8 +1,8 @@
-import type { AppProps } from 'next/app'
-import '../App.scss'
+import type { AppProps } from "next/app";
+import "../App.scss";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-gsap/pages/index.tsx b/examples/with-gsap/pages/index.tsx
index 0c38d450fa..ffe2da74ea 100644
--- a/examples/with-gsap/pages/index.tsx
+++ b/examples/with-gsap/pages/index.tsx
@@ -1,6 +1,6 @@
-import { CSSTransition } from 'react-transition-group'
-import { gsap } from 'gsap'
-import Home from '../components/Home'
+import { CSSTransition } from "react-transition-group";
+import { gsap } from "gsap";
+import Home from "../components/Home";
 
 export default function HomePage() {
   const onEnter = (node: any) => {
@@ -10,27 +10,27 @@ export default function HomePage() {
       {
         y: 30,
         delay: 0.6,
-        ease: 'power3.InOut',
+        ease: "power3.InOut",
         opacity: 0,
         stagger: {
           amount: 0.6,
         },
-      }
-    )
-  }
+      },
+    );
+  };
   const onExit = (node: any) => {
     gsap.to(
       [node.children[0].firstElementChild, node.children[0].lastElementChild],
       0.6,
       {
         y: -30,
-        ease: 'power3.InOut',
+        ease: "power3.InOut",
         stagger: {
           amount: 0.2,
         },
-      }
-    )
-  }
+      },
+    );
+  };
 
   return (
     <>
@@ -49,5 +49,5 @@ export default function HomePage() {
         </CSSTransition>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/with-hls-js/components/video-player.js b/examples/with-hls-js/components/video-player.js
index 676e79cf12..0e48e44cde 100644
--- a/examples/with-hls-js/components/video-player.js
+++ b/examples/with-hls-js/components/video-player.js
@@ -1,28 +1,28 @@
-import { useEffect, useRef } from 'react'
-import Hls from 'hls.js'
+import { useEffect, useRef } from "react";
+import Hls from "hls.js";
 
 export default function VideoPlayer({ src }) {
-  const videoRef = useRef(null)
+  const videoRef = useRef(null);
 
   useEffect(() => {
-    const video = videoRef.current
-    if (!video) return
+    const video = videoRef.current;
+    if (!video) return;
 
-    video.controls = true
-    if (video.canPlayType('application/vnd.apple.mpegurl')) {
+    video.controls = true;
+    if (video.canPlayType("application/vnd.apple.mpegurl")) {
       // This will run in safari, where HLS is supported natively
-      video.src = src
+      video.src = src;
     } else if (Hls.isSupported()) {
       // This will run in all other modern browsers
-      const hls = new Hls()
-      hls.loadSource(src)
-      hls.attachMedia(video)
+      const hls = new Hls();
+      hls.loadSource(src);
+      hls.attachMedia(video);
     } else {
       console.error(
-        'This is an old browser that does not support MSE https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API'
-      )
+        "This is an old browser that does not support MSE https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API",
+      );
     }
-  }, [src, videoRef])
+  }, [src, videoRef]);
 
   return (
     <>
@@ -33,5 +33,5 @@ export default function VideoPlayer({ src }) {
         }
       `}</style>
     </>
-  )
+  );
 }
diff --git a/examples/with-hls-js/pages/index.js b/examples/with-hls-js/pages/index.js
index 0e368282ab..0631e033f7 100644
--- a/examples/with-hls-js/pages/index.js
+++ b/examples/with-hls-js/pages/index.js
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import VideoPlayer from '../components/video-player'
+import Head from "next/head";
+import VideoPlayer from "../components/video-player";
 
 export default function Home() {
   return (
@@ -27,7 +27,7 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <img src="/vercel.svg" alt="Vercel Logo" className="logo" />
         </a>
         <div className="separator">.</div>
@@ -166,5 +166,5 @@ export default function Home() {
         }
       `}</style>
     </div>
-  )
+  );
 }
diff --git a/examples/with-http2/next.config.js b/examples/with-http2/next.config.js
index 3bf3711250..2adf20eb88 100644
--- a/examples/with-http2/next.config.js
+++ b/examples/with-http2/next.config.js
@@ -4,4 +4,4 @@ module.exports = {
 reference: https://github.com/expressjs/compression/issues/122
   */
   compress: false,
-}
+};
diff --git a/examples/with-http2/pages/about.js b/examples/with-http2/pages/about.js
index 2d17470688..5579b47756 100644
--- a/examples/with-http2/pages/about.js
+++ b/examples/with-http2/pages/about.js
@@ -1,9 +1,9 @@
-import Link from 'next/link'
+import Link from "next/link";
 export default function About() {
   return (
     <div>
       <h3>This is the /about page. </h3>
       <Link href="/">&larr; Back home</Link>
     </div>
-  )
+  );
 }
diff --git a/examples/with-http2/pages/index.js b/examples/with-http2/pages/index.js
index 1c374f4223..f7a23079dc 100644
--- a/examples/with-http2/pages/index.js
+++ b/examples/with-http2/pages/index.js
@@ -1,9 +1,9 @@
-import Link from 'next/link'
+import Link from "next/link";
 export default function Home() {
   return (
     <div>
       <h3>Hello World.</h3>
       <Link href="/about">About</Link>
     </div>
-  )
+  );
 }
diff --git a/examples/with-http2/server.js b/examples/with-http2/server.js
index 7622bdb05b..89a1f6f309 100644
--- a/examples/with-http2/server.js
+++ b/examples/with-http2/server.js
@@ -1,30 +1,30 @@
-const next = require('next')
-const http2 = require('node:http2')
-const { parse } = require('node:url')
-const fs = require('node:fs')
+const next = require("next");
+const http2 = require("node:http2");
+const { parse } = require("node:url");
+const fs = require("node:fs");
 
-const port = parseInt(process.env.PORT, 10) || 3000
-const dev = process.env.NODE_ENV !== 'production'
+const port = parseInt(process.env.PORT, 10) || 3000;
+const dev = process.env.NODE_ENV !== "production";
 
 // Init the Next app:
-const app = next({ dev })
+const app = next({ dev });
 
 // Create the secure HTTPS server:
 // Don't forget to create the keys for your development
 const server = http2.createSecureServer({
-  key: fs.readFileSync('localhost-privkey.pem'),
-  cert: fs.readFileSync('localhost-cert.pem'),
-})
+  key: fs.readFileSync("localhost-privkey.pem"),
+  cert: fs.readFileSync("localhost-cert.pem"),
+});
 
-const handler = app.getRequestHandler()
+const handler = app.getRequestHandler();
 
 app.prepare().then(() => {
-  server.on('error', (err) => console.error(err))
-  server.on('request', (req, res) => {
-    const parsedUrl = parse(req.url, true)
-    handler(req, res, parsedUrl)
-  })
-  server.listen(port)
+  server.on("error", (err) => console.error(err));
+  server.on("request", (req, res) => {
+    const parsedUrl = parse(req.url, true);
+    handler(req, res, parsedUrl);
+  });
+  server.listen(port);
 
-  console.log(`Listening on HTTPS port ${port}`)
-})
+  console.log(`Listening on HTTPS port ${port}`);
+});
diff --git a/examples/with-i18n-next-intl/components/Code.js b/examples/with-i18n-next-intl/components/Code.js
index 17dd6c74c2..baef783227 100644
--- a/examples/with-i18n-next-intl/components/Code.js
+++ b/examples/with-i18n-next-intl/components/Code.js
@@ -1,7 +1,7 @@
 export default function Code({ children }) {
   return (
-    <code style={{ background: '#eee', padding: 4, borderRadius: 4 }}>
+    <code style={{ background: "#eee", padding: 4, borderRadius: 4 }}>
       {children}
     </code>
-  )
+  );
 }
diff --git a/examples/with-i18n-next-intl/components/Navigation.js b/examples/with-i18n-next-intl/components/Navigation.js
index 9035f06968..272f69b942 100644
--- a/examples/with-i18n-next-intl/components/Navigation.js
+++ b/examples/with-i18n-next-intl/components/Navigation.js
@@ -1,23 +1,23 @@
-import { useTranslations } from 'next-intl'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/router";
+import Link from "next/link";
 
 export default function Navigation() {
-  const t = useTranslations('Navigation')
-  const { locale, locales, route } = useRouter()
-  const otherLocale = locales?.find((cur) => cur !== locale)
+  const t = useTranslations("Navigation");
+  const { locale, locales, route } = useRouter();
+  const otherLocale = locales?.find((cur) => cur !== locale);
 
   return (
-    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-      <div style={{ display: 'flex', gap: 10 }}>
-        <Link href="/">{t('index')}</Link>
-        <Link href="/about">{t('about')}</Link>
+    <div style={{ display: "flex", justifyContent: "space-between" }}>
+      <div style={{ display: "flex", gap: 10 }}>
+        <Link href="/">{t("index")}</Link>
+        <Link href="/about">{t("about")}</Link>
       </div>
       {otherLocale && (
         <Link href={route} locale={otherLocale}>
-          {t('switchLocale', { locale: otherLocale })}
+          {t("switchLocale", { locale: otherLocale })}
         </Link>
       )}
     </div>
-  )
+  );
 }
diff --git a/examples/with-i18n-next-intl/components/PageLayout.js b/examples/with-i18n-next-intl/components/PageLayout.js
index fb79b660c5..49b933530c 100644
--- a/examples/with-i18n-next-intl/components/PageLayout.js
+++ b/examples/with-i18n-next-intl/components/PageLayout.js
@@ -1,11 +1,11 @@
-import Navigation from './Navigation'
+import Navigation from "./Navigation";
 
 export default function PageLayout({ children, title }) {
   return (
     <div
       style={{
         padding: 24,
-        fontFamily: 'system-ui, sans-serif',
+        fontFamily: "system-ui, sans-serif",
         lineHeight: 1.5,
       }}
     >
@@ -15,5 +15,5 @@ export default function PageLayout({ children, title }) {
         {children}
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/with-i18n-next-intl/next.config.js b/examples/with-i18n-next-intl/next.config.js
index 8309826c49..2d735a7f87 100644
--- a/examples/with-i18n-next-intl/next.config.js
+++ b/examples/with-i18n-next-intl/next.config.js
@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   i18n: {
-    locales: ['en', 'de'],
-    defaultLocale: 'en',
+    locales: ["en", "de"],
+    defaultLocale: "en",
   },
-}
+};
diff --git a/examples/with-i18n-next-intl/pages/_app.js b/examples/with-i18n-next-intl/pages/_app.js
index 2ad65a0fd2..4be49003f6 100644
--- a/examples/with-i18n-next-intl/pages/_app.js
+++ b/examples/with-i18n-next-intl/pages/_app.js
@@ -1,4 +1,4 @@
-import { NextIntlProvider } from 'next-intl'
+import { NextIntlProvider } from "next-intl";
 
 export default function App({ Component, pageProps }) {
   return (
@@ -8,9 +8,9 @@ export default function App({ Component, pageProps }) {
       formats={{
         dateTime: {
           short: {
-            day: 'numeric',
-            month: 'short',
-            year: 'numeric',
+            day: "numeric",
+            month: "short",
+            year: "numeric",
           },
         },
       }}
@@ -25,5 +25,5 @@ export default function App({ Component, pageProps }) {
     >
       <Component {...pageProps} />
     </NextIntlProvider>
-  )
+  );
 }
diff --git a/examples/with-i18n-next-intl/pages/about.js b/examples/with-i18n-next-intl/pages/about.js
index dd9a9580c4..067515c24e 100644
--- a/examples/with-i18n-next-intl/pages/about.js
+++ b/examples/with-i18n-next-intl/pages/about.js
@@ -1,30 +1,30 @@
-import { useIntl, useTranslations } from 'next-intl'
-import { useRouter } from 'next/router'
-import Code from '../components/Code'
-import PageLayout from '../components/PageLayout'
+import { useIntl, useTranslations } from "next-intl";
+import { useRouter } from "next/router";
+import Code from "../components/Code";
+import PageLayout from "../components/PageLayout";
 
 export default function About() {
-  const t = useTranslations('About')
-  const { locale } = useRouter()
-  const intl = useIntl()
-  const lastUpdated = new Date(2021, 0, 26, 17, 4, 45)
+  const t = useTranslations("About");
+  const { locale } = useRouter();
+  const intl = useIntl();
+  const lastUpdated = new Date(2021, 0, 26, 17, 4, 45);
 
   return (
-    <PageLayout title={t('title')}>
+    <PageLayout title={t("title")}>
       <p>
-        {t('description', {
+        {t("description", {
           locale,
           code: (children) => <Code>{children}</Code>,
         })}
       </p>
       <p>
-        {t('lastUpdated', {
+        {t("lastUpdated", {
           lastUpdated,
           lastUpdatedRelative: intl.formatRelativeTime(lastUpdated),
         })}
       </p>
     </PageLayout>
-  )
+  );
 }
 
 export function getStaticProps({ locale }) {
@@ -36,5 +36,5 @@ export function getStaticProps({ locale }) {
       },
       now: new Date().getTime(),
     },
-  }
+  };
 }
diff --git a/examples/with-i18n-next-intl/pages/index.js b/examples/with-i18n-next-intl/pages/index.js
index 0df29ddcbf..7017082407 100644
--- a/examples/with-i18n-next-intl/pages/index.js
+++ b/examples/with-i18n-next-intl/pages/index.js
@@ -1,22 +1,22 @@
-import { useTranslations } from 'next-intl'
-import { useRouter } from 'next/router'
-import Code from '../components/Code'
-import PageLayout from '../components/PageLayout'
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/router";
+import Code from "../components/Code";
+import PageLayout from "../components/PageLayout";
 
 export default function Index() {
-  const t = useTranslations('Index')
-  const { locale } = useRouter()
+  const t = useTranslations("Index");
+  const { locale } = useRouter();
 
   return (
-    <PageLayout title={t('title')}>
+    <PageLayout title={t("title")}>
       <p>
-        {t('description', {
+        {t("description", {
           locale,
           code: (children) => <Code>{children}</Code>,
         })}
       </p>
     </PageLayout>
-  )
+  );
 }
 
 export function getStaticProps({ locale }) {
@@ -27,5 +27,5 @@ export function getStaticProps({ locale }) {
         ...require(`../messages/index/${locale}.json`),
       },
     },
-  }
+  };
 }
diff --git a/examples/with-i18n-rosetta/components/title.js b/examples/with-i18n-rosetta/components/title.js
index 912afe370c..4a6e9a49a7 100644
--- a/examples/with-i18n-rosetta/components/title.js
+++ b/examples/with-i18n-rosetta/components/title.js
@@ -1,6 +1,6 @@
-import useI18n from '../hooks/use-i18n'
+import useI18n from "../hooks/use-i18n";
 
 export default function Title({ username }) {
-  const i18n = useI18n()
-  return <h1>{i18n.t('intro.welcome', { username })}</h1>
+  const i18n = useI18n();
+  return <h1>{i18n.t("intro.welcome", { username })}</h1>;
 }
diff --git a/examples/with-i18n-rosetta/hooks/use-i18n.js b/examples/with-i18n-rosetta/hooks/use-i18n.js
index 457eb9add8..96425bd45f 100644
--- a/examples/with-i18n-rosetta/hooks/use-i18n.js
+++ b/examples/with-i18n-rosetta/hooks/use-i18n.js
@@ -1,7 +1,7 @@
-import { useContext } from 'react'
-import { I18nContext } from '../lib/i18n'
+import { useContext } from "react";
+import { I18nContext } from "../lib/i18n";
 
 export default function useI18n() {
-  const i18n = useContext(I18nContext)
-  return i18n
+  const i18n = useContext(I18nContext);
+  return i18n;
 }
diff --git a/examples/with-i18n-rosetta/lib/i18n.js b/examples/with-i18n-rosetta/lib/i18n.js
index 7a3d5810a4..76debec243 100644
--- a/examples/with-i18n-rosetta/lib/i18n.js
+++ b/examples/with-i18n-rosetta/lib/i18n.js
@@ -1,52 +1,52 @@
-import { createContext, useState, useRef, useEffect } from 'react'
-import rosetta from 'rosetta'
+import { createContext, useState, useRef, useEffect } from "react";
+import rosetta from "rosetta";
 // import rosetta from 'rosetta/debug';
 
-const i18n = rosetta()
+const i18n = rosetta();
 
-export const defaultLanguage = 'en'
-export const languages = ['de', 'en']
-export const contentLanguageMap = { de: 'de-DE', en: 'en-US' }
+export const defaultLanguage = "en";
+export const languages = ["de", "en"];
+export const contentLanguageMap = { de: "de-DE", en: "en-US" };
 
-export const I18nContext = createContext()
+export const I18nContext = createContext();
 
 // default language
-i18n.locale(defaultLanguage)
+i18n.locale(defaultLanguage);
 
 export default function I18n({ children, locale, lngDict }) {
-  const activeLocaleRef = useRef(locale || defaultLanguage)
-  const [, setTick] = useState(0)
-  const firstRender = useRef(true)
+  const activeLocaleRef = useRef(locale || defaultLanguage);
+  const [, setTick] = useState(0);
+  const firstRender = useRef(true);
 
   const i18nWrapper = {
     activeLocale: activeLocaleRef.current,
     t: (...args) => i18n.t(...args),
     locale: (l, dict) => {
-      i18n.locale(l)
-      activeLocaleRef.current = l
+      i18n.locale(l);
+      activeLocaleRef.current = l;
       if (dict) {
-        i18n.set(l, dict)
+        i18n.set(l, dict);
       }
       // force rerender to update view
-      setTick((tick) => tick + 1)
+      setTick((tick) => tick + 1);
     },
-  }
+  };
 
   // for initial SSR render
   if (locale && firstRender.current === true) {
-    firstRender.current = false
-    i18nWrapper.locale(locale, lngDict)
+    firstRender.current = false;
+    i18nWrapper.locale(locale, lngDict);
   }
 
   // when locale is updated
   useEffect(() => {
     if (locale) {
-      i18nWrapper.locale(locale, lngDict)
+      i18nWrapper.locale(locale, lngDict);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lngDict, locale])
+  }, [lngDict, locale]);
 
   return (
     <I18nContext.Provider value={i18nWrapper}>{children}</I18nContext.Provider>
-  )
+  );
 }
diff --git a/examples/with-i18n-rosetta/next.config.js b/examples/with-i18n-rosetta/next.config.js
index dff12cbf7f..9bac4c78eb 100644
--- a/examples/with-i18n-rosetta/next.config.js
+++ b/examples/with-i18n-rosetta/next.config.js
@@ -2,10 +2,10 @@ module.exports = {
   redirects() {
     return [
       {
-        source: '/',
-        destination: '/en',
+        source: "/",
+        destination: "/en",
         permanent: true,
       },
-    ]
+    ];
   },
-}
+};
diff --git a/examples/with-i18n-rosetta/pages/[lng]/index.js b/examples/with-i18n-rosetta/pages/[lng]/index.js
index 2ccc1ead15..b68458dd24 100644
--- a/examples/with-i18n-rosetta/pages/[lng]/index.js
+++ b/examples/with-i18n-rosetta/pages/[lng]/index.js
@@ -1,11 +1,11 @@
-import Link from 'next/link'
-import Head from 'next/head'
-import Title from '../../components/title'
-import useI18n from '../../hooks/use-i18n'
-import { languages, contentLanguageMap } from '../../lib/i18n'
+import Link from "next/link";
+import Head from "next/head";
+import Title from "../../components/title";
+import useI18n from "../../hooks/use-i18n";
+import { languages, contentLanguageMap } from "../../lib/i18n";
 
 const HomePage = () => {
-  const i18n = useI18n()
+  const i18n = useI18n();
 
   return (
     <div>
@@ -16,31 +16,31 @@ const HomePage = () => {
         />
       </Head>
       <Title username="Peter" />
-      <h2>{i18n.t('intro.text')}</h2>
-      <h3>{i18n.t('intro.description')}</h3>
+      <h2>{i18n.t("intro.text")}</h2>
+      <h3>{i18n.t("intro.description")}</h3>
       <div>Current locale: {i18n.activeLocale}</div>
       <Link href="/[lng]" as="/de">
         Use client-side routing to change language to 'de'
       </Link>
     </div>
-  )
-}
+  );
+};
 
 export async function getStaticProps({ params }) {
   const { default: lngDict = {} } = await import(
     `../../locales/${params.lng}.json`
-  )
+  );
 
   return {
     props: { lng: params.lng, lngDict },
-  }
+  };
 }
 
 export async function getStaticPaths() {
   return {
     paths: languages.map((l) => ({ params: { lng: l } })),
     fallback: false,
-  }
+  };
 }
 
-export default HomePage
+export default HomePage;
diff --git a/examples/with-i18n-rosetta/pages/_app.js b/examples/with-i18n-rosetta/pages/_app.js
index 7475cd8bd1..3231916d3b 100644
--- a/examples/with-i18n-rosetta/pages/_app.js
+++ b/examples/with-i18n-rosetta/pages/_app.js
@@ -1,9 +1,9 @@
-import I18n from '../lib/i18n'
+import I18n from "../lib/i18n";
 
 export default function MyApp({ Component, pageProps }) {
   return (
     <I18n lngDict={pageProps.lngDict} locale={pageProps.lng}>
       <Component {...pageProps} />
     </I18n>
-  )
+  );
 }
diff --git a/examples/with-i18n-rosetta/pages/_document.js b/examples/with-i18n-rosetta/pages/_document.js
index 7d2b7c7911..590f37357b 100644
--- a/examples/with-i18n-rosetta/pages/_document.js
+++ b/examples/with-i18n-rosetta/pages/_document.js
@@ -1,10 +1,10 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from "next/document";
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx)
+    const initialProps = await Document.getInitialProps(ctx);
 
-    return { ...initialProps, lang: ctx.query.lng }
+    return { ...initialProps, lang: ctx.query.lng };
   }
 
   render() {
@@ -16,8 +16,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
 
-export default MyDocument
+export default MyDocument;
diff --git a/examples/with-i18n-rosetta/pages/dashboard.js b/examples/with-i18n-rosetta/pages/dashboard.js
index 7d7aeb6af3..0540218818 100644
--- a/examples/with-i18n-rosetta/pages/dashboard.js
+++ b/examples/with-i18n-rosetta/pages/dashboard.js
@@ -1,18 +1,18 @@
-import { useEffect } from 'react'
-import Head from 'next/head'
-import useI18n from '../hooks/use-i18n'
-import Title from '../components/title'
-import { contentLanguageMap } from '../lib/i18n'
-import EN from '../locales/en.json'
-import DE from '../locales/de.json'
+import { useEffect } from "react";
+import Head from "next/head";
+import useI18n from "../hooks/use-i18n";
+import Title from "../components/title";
+import { contentLanguageMap } from "../lib/i18n";
+import EN from "../locales/en.json";
+import DE from "../locales/de.json";
 
 const Dashboard = () => {
-  const i18n = useI18n()
+  const i18n = useI18n();
 
   useEffect(() => {
-    i18n.locale('en', EN)
+    i18n.locale("en", EN);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, []);
 
   return (
     <div>
@@ -23,19 +23,19 @@ const Dashboard = () => {
         />
       </Head>
       <Title username="Peter" />
-      <h2>{i18n.t('intro.text')}</h2>
-      <h3>{i18n.t('dashboard.description')}</h3>
+      <h2>{i18n.t("intro.text")}</h2>
+      <h3>{i18n.t("dashboard.description")}</h3>
       <div>Current locale: {i18n.activeLocale}</div>
       <a
         href="#"
         onClick={() => {
-          i18n.locale('de', DE)
+          i18n.locale("de", DE);
         }}
       >
         Change language client-side to 'de'
       </a>
     </div>
-  )
-}
+  );
+};
 
-export default Dashboard
+export default Dashboard;
diff --git a/examples/with-ionic-typescript/ionic.d.ts b/examples/with-ionic-typescript/ionic.d.ts
index 038a4cd1e7..8846f12366 100644
--- a/examples/with-ionic-typescript/ionic.d.ts
+++ b/examples/with-ionic-typescript/ionic.d.ts
@@ -1,24 +1,24 @@
-import { ReactText, HTMLAttributes } from 'react'
-import { JSX as LocalJSX } from '@ionic/core'
-import { JSX as IoniconsJSX } from 'ionicons'
+import { ReactText, HTMLAttributes } from "react";
+import { JSX as LocalJSX } from "@ionic/core";
+import { JSX as IoniconsJSX } from "ionicons";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import IonicIntrinsicElements = LocalJSX.IntrinsicElements
+import IonicIntrinsicElements = LocalJSX.IntrinsicElements;
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import IoniconsIntrinsicElements = IoniconsJSX.IntrinsicElements
+import IoniconsIntrinsicElements = IoniconsJSX.IntrinsicElements;
 
 type ToReact<T> = {
   [P in keyof T]?: T[P] &
-    Omit<HTMLAttributes<Element>, 'className'> & {
-      class?: string
-      key?: ReactText
-    }
-}
+    Omit<HTMLAttributes<Element>, "className"> & {
+      class?: string;
+      key?: ReactText;
+    };
+};
 
 declare global {
   export namespace JSX {
     interface IntrinsicElements
       extends ToReact<IonicIntrinsicElements & IoniconsIntrinsicElements> {
-      key?: string
+      key?: string;
     }
   }
 }
diff --git a/examples/with-ionic-typescript/next.config.js b/examples/with-ionic-typescript/next.config.js
index 2f607c52f4..b7d609877c 100644
--- a/examples/with-ionic-typescript/next.config.js
+++ b/examples/with-ionic-typescript/next.config.js
@@ -1,5 +1,5 @@
-const path = require('path')
-const CopyPlugin = require('copy-webpack-plugin')
+const path = require("path");
+const CopyPlugin = require("copy-webpack-plugin");
 
 /** @type {import('next').NextConfig} */
 module.exports = {
@@ -10,13 +10,13 @@ module.exports = {
           {
             from: path.join(
               __dirname,
-              'node_modules/ionicons/dist/ionicons/svg'
+              "node_modules/ionicons/dist/ionicons/svg",
             ),
-            to: path.join(__dirname, 'public/svg'),
+            to: path.join(__dirname, "public/svg"),
           },
         ],
-      })
-    )
-    return config
+      }),
+    );
+    return config;
   },
-}
+};
diff --git a/examples/with-ionic-typescript/pages/_app.tsx b/examples/with-ionic-typescript/pages/_app.tsx
index c4f91ec8d6..00811544e1 100644
--- a/examples/with-ionic-typescript/pages/_app.tsx
+++ b/examples/with-ionic-typescript/pages/_app.tsx
@@ -1,26 +1,26 @@
-import React, { useEffect } from 'react'
-import { defineCustomElements as ionDefineCustomElements } from '@ionic/core/loader'
+import React, { useEffect } from "react";
+import { defineCustomElements as ionDefineCustomElements } from "@ionic/core/loader";
 
 /* Core CSS required for Ionic components to work properly */
-import '@ionic/core/css/core.css'
+import "@ionic/core/css/core.css";
 
 /* Basic CSS for apps built with Ionic */
-import '@ionic/core/css/normalize.css'
-import '@ionic/core/css/structure.css'
-import '@ionic/core/css/typography.css'
+import "@ionic/core/css/normalize.css";
+import "@ionic/core/css/structure.css";
+import "@ionic/core/css/typography.css";
 
 /* Optional CSS utils that can be commented out */
-import '@ionic/core/css/padding.css'
-import '@ionic/core/css/float-elements.css'
-import '@ionic/core/css/text-alignment.css'
-import '@ionic/core/css/text-transformation.css'
-import '@ionic/core/css/flex-utils.css'
-import '@ionic/core/css/display.css'
+import "@ionic/core/css/padding.css";
+import "@ionic/core/css/float-elements.css";
+import "@ionic/core/css/text-alignment.css";
+import "@ionic/core/css/text-transformation.css";
+import "@ionic/core/css/flex-utils.css";
+import "@ionic/core/css/display.css";
 
 function MyApp({ Component, pageProps }) {
   useEffect(() => {
-    ionDefineCustomElements(window)
-  })
+    ionDefineCustomElements(window);
+  });
   return (
     <ion-app>
       <ion-header translucent>
@@ -38,7 +38,7 @@ function MyApp({ Component, pageProps }) {
         </ion-toolbar>
       </ion-footer>
     </ion-app>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-ionic-typescript/pages/index.tsx b/examples/with-ionic-typescript/pages/index.tsx
index 16233eb995..411544d787 100644
--- a/examples/with-ionic-typescript/pages/index.tsx
+++ b/examples/with-ionic-typescript/pages/index.tsx
@@ -1,10 +1,10 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Home() {
   return (
     <ion-grid>
       <ion-row>
-        {new Array(8).fill('').map((k, i) => (
+        {new Array(8).fill("").map((k, i) => (
           <ion-col key={i} size="3">
             <ion-card>
               <Image
@@ -28,5 +28,5 @@ export default function Home() {
         ))}
       </ion-row>
     </ion-grid>
-  )
+  );
 }
diff --git a/examples/with-iron-session/components/Form.tsx b/examples/with-iron-session/components/Form.tsx
index db7b7480b4..bf9c179835 100644
--- a/examples/with-iron-session/components/Form.tsx
+++ b/examples/with-iron-session/components/Form.tsx
@@ -1,11 +1,11 @@
-import { FormEvent } from 'react'
+import { FormEvent } from "react";
 
 export default function Form({
   errorMessage,
   onSubmit,
 }: {
-  errorMessage: string
-  onSubmit: (e: FormEvent<HTMLFormElement>) => void
+  errorMessage: string;
+  onSubmit: (e: FormEvent<HTMLFormElement>) => void;
 }) {
   return (
     <form onSubmit={onSubmit}>
@@ -39,5 +39,5 @@ export default function Form({
         }
       `}</style>
     </form>
-  )
+  );
 }
diff --git a/examples/with-iron-session/components/Header.tsx b/examples/with-iron-session/components/Header.tsx
index 7e7895b5f3..53a6a87fa0 100644
--- a/examples/with-iron-session/components/Header.tsx
+++ b/examples/with-iron-session/components/Header.tsx
@@ -1,12 +1,12 @@
-import Link from 'next/link'
-import useUser from 'lib/useUser'
-import { useRouter } from 'next/router'
-import Image from 'next/image'
-import fetchJson from 'lib/fetchJson'
+import Link from "next/link";
+import useUser from "lib/useUser";
+import { useRouter } from "next/router";
+import Image from "next/image";
+import fetchJson from "lib/fetchJson";
 
 export default function Header() {
-  const { user, mutateUser } = useUser()
-  const router = useRouter()
+  const { user, mutateUser } = useUser();
+  const router = useRouter();
 
   return (
     <header>
@@ -31,10 +31,10 @@ export default function Header() {
                   <a>
                     <span
                       style={{
-                        marginRight: '.3em',
-                        verticalAlign: 'middle',
-                        borderRadius: '100%',
-                        overflow: 'hidden',
+                        marginRight: ".3em",
+                        verticalAlign: "middle",
+                        borderRadius: "100%",
+                        overflow: "hidden",
                       }}
                     >
                       <Image
@@ -57,12 +57,12 @@ export default function Header() {
                 <a
                   href="/api/logout"
                   onClick={async (e) => {
-                    e.preventDefault()
+                    e.preventDefault();
                     mutateUser(
-                      await fetchJson('/api/logout', { method: 'POST' }),
-                      false
-                    )
-                    router.push('/login')
+                      await fetchJson("/api/logout", { method: "POST" }),
+                      false,
+                    );
+                    router.push("/login");
                   }}
                 >
                   Logout
@@ -117,5 +117,5 @@ export default function Header() {
         }
       `}</style>
     </header>
-  )
+  );
 }
diff --git a/examples/with-iron-session/components/Layout.tsx b/examples/with-iron-session/components/Layout.tsx
index 78ee11ba0a..4091058ac3 100644
--- a/examples/with-iron-session/components/Layout.tsx
+++ b/examples/with-iron-session/components/Layout.tsx
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import Header from 'components/Header'
+import Head from "next/head";
+import Header from "components/Header";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -17,9 +17,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         body {
           margin: 0;
           color: #333;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-            'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
-            'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+            "Helvetica Neue", Arial, Noto Sans, sans-serif, "Apple Color Emoji",
+            "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
         }
 
         .container {
@@ -35,5 +35,5 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         <div className="container">{children}</div>
       </main>
     </>
-  )
+  );
 }
diff --git a/examples/with-iron-session/lib/fetchJson.ts b/examples/with-iron-session/lib/fetchJson.ts
index eeec4f1d34..416ba18329 100644
--- a/examples/with-iron-session/lib/fetchJson.ts
+++ b/examples/with-iron-session/lib/fetchJson.ts
@@ -1,52 +1,52 @@
 export class FetchError extends Error {
-  response: Response
+  response: Response;
   data: {
-    message: string
-  }
+    message: string;
+  };
   constructor({
     message,
     response,
     data,
   }: {
-    message: string
-    response: Response
+    message: string;
+    response: Response;
     data: {
-      message: string
-    }
+      message: string;
+    };
   }) {
     // Pass remaining arguments (including vendor specific ones) to parent constructor
-    super(message)
+    super(message);
 
     // Maintains proper stack trace for where our error was thrown (only available on V8)
     if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, FetchError)
+      Error.captureStackTrace(this, FetchError);
     }
 
-    this.name = 'FetchError'
-    this.response = response
-    this.data = data ?? { message: message }
+    this.name = "FetchError";
+    this.response = response;
+    this.data = data ?? { message: message };
   }
 }
 
 export default async function fetchJson<JSON = unknown>(
   input: RequestInfo,
-  init?: RequestInit
+  init?: RequestInit,
 ): Promise<JSON> {
-  const response = await fetch(input, init)
+  const response = await fetch(input, init);
 
   // if the server replies, there's always some data in json
   // if there's a network error, it will throw at the previous line
-  const data = await response.json()
+  const data = await response.json();
 
   // response.ok is true when res.status is 2xx
   // https://developer.mozilla.org/docs/Web/API/Response/ok
   if (response.ok) {
-    return data
+    return data;
   }
 
   throw new FetchError({
     message: response.statusText,
     response,
     data,
-  })
+  });
 }
diff --git a/examples/with-iron-session/lib/session.ts b/examples/with-iron-session/lib/session.ts
index d9ca113fad..8b6cd75e90 100644
--- a/examples/with-iron-session/lib/session.ts
+++ b/examples/with-iron-session/lib/session.ts
@@ -1,19 +1,19 @@
 // this file is a wrapper with defaults to be used in both API routes and `getServerSideProps` functions
-import type { IronSessionOptions } from 'iron-session'
-import type { User } from 'pages/api/user'
+import type { IronSessionOptions } from "iron-session";
+import type { User } from "pages/api/user";
 
 export const sessionOptions: IronSessionOptions = {
   password: process.env.SECRET_COOKIE_PASSWORD as string,
-  cookieName: 'iron-session/examples/next.js',
+  cookieName: "iron-session/examples/next.js",
   // secure: true should be used in production (HTTPS) but can't be used in development (HTTP)
   cookieOptions: {
-    secure: process.env.NODE_ENV === 'production',
+    secure: process.env.NODE_ENV === "production",
   },
-}
+};
 
 // This is where we specify the typings of req.session.*
-declare module 'iron-session' {
+declare module "iron-session" {
   interface IronSessionData {
-    user?: User
+    user?: User;
   }
 }
diff --git a/examples/with-iron-session/lib/useEvents.ts b/examples/with-iron-session/lib/useEvents.ts
index 40540c7e2d..0cfccc5048 100644
--- a/examples/with-iron-session/lib/useEvents.ts
+++ b/examples/with-iron-session/lib/useEvents.ts
@@ -1,12 +1,12 @@
-import useSWR from 'swr'
-import type { User } from 'pages/api/user'
-import type { Events } from 'pages/api/events'
+import useSWR from "swr";
+import type { User } from "pages/api/user";
+import type { Events } from "pages/api/events";
 
 export default function useEvents(user: User | undefined) {
   // We do a request to /api/events only if the user is logged in
   const { data: events } = useSWR<Events>(
-    user?.isLoggedIn ? `/api/events` : null
-  )
+    user?.isLoggedIn ? `/api/events` : null,
+  );
 
-  return { events }
+  return { events };
 }
diff --git a/examples/with-iron-session/lib/useUser.ts b/examples/with-iron-session/lib/useUser.ts
index 55ba02ad8c..7ae91b7d62 100644
--- a/examples/with-iron-session/lib/useUser.ts
+++ b/examples/with-iron-session/lib/useUser.ts
@@ -1,18 +1,18 @@
-import { useEffect } from 'react'
-import Router from 'next/router'
-import useSWR from 'swr'
-import { User } from 'pages/api/user'
+import { useEffect } from "react";
+import Router from "next/router";
+import useSWR from "swr";
+import { User } from "pages/api/user";
 
 export default function useUser({
-  redirectTo = '',
+  redirectTo = "",
   redirectIfFound = false,
 } = {}) {
-  const { data: user, mutate: mutateUser } = useSWR<User>('/api/user')
+  const { data: user, mutate: mutateUser } = useSWR<User>("/api/user");
 
   useEffect(() => {
     // if no redirect needed, just return (example: already on /dashboard)
     // if user data not yet there (fetch in progress, logged in or not) then don't do anything yet
-    if (!redirectTo || !user) return
+    if (!redirectTo || !user) return;
 
     if (
       // If redirectTo is set, redirect if the user was not found.
@@ -20,9 +20,9 @@ export default function useUser({
       // If redirectIfFound is also set, redirect if the user was found
       (redirectIfFound && user?.isLoggedIn)
     ) {
-      Router.push(redirectTo)
+      Router.push(redirectTo);
     }
-  }, [user, redirectIfFound, redirectTo])
+  }, [user, redirectIfFound, redirectTo]);
 
-  return { user, mutateUser }
+  return { user, mutateUser };
 }
diff --git a/examples/with-iron-session/next.config.js b/examples/with-iron-session/next.config.js
index bf3aad71cc..a08a554e84 100644
--- a/examples/with-iron-session/next.config.js
+++ b/examples/with-iron-session/next.config.js
@@ -3,11 +3,11 @@ module.exports = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'avatars.githubusercontent.com',
-        port: '',
-        pathname: '/my-account/**',
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com",
+        port: "",
+        pathname: "/my-account/**",
       },
     ],
   },
-}
+};
diff --git a/examples/with-iron-session/pages/_app.tsx b/examples/with-iron-session/pages/_app.tsx
index bad8e87d7d..dab871322c 100644
--- a/examples/with-iron-session/pages/_app.tsx
+++ b/examples/with-iron-session/pages/_app.tsx
@@ -1,6 +1,6 @@
-import { AppProps } from 'next/app'
-import { SWRConfig } from 'swr'
-import fetchJson from 'lib/fetchJson'
+import { AppProps } from "next/app";
+import { SWRConfig } from "swr";
+import fetchJson from "lib/fetchJson";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -8,13 +8,13 @@ function MyApp({ Component, pageProps }: AppProps) {
       value={{
         fetcher: fetchJson,
         onError: (err) => {
-          console.error(err)
+          console.error(err);
         },
       }}
     >
       <Component {...pageProps} />
     </SWRConfig>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-iron-session/pages/api/events.ts b/examples/with-iron-session/pages/api/events.ts
index 91ed59a494..8f3a83ef30 100644
--- a/examples/with-iron-session/pages/api/events.ts
+++ b/examples/with-iron-session/pages/api/events.ts
@@ -1,33 +1,33 @@
-import { withIronSessionApiRoute } from 'iron-session/next'
-import { sessionOptions } from 'lib/session'
-import { Octokit } from 'octokit'
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "lib/session";
+import { Octokit } from "octokit";
 
-import type { Endpoints } from '@octokit/types'
-import { NextApiRequest, NextApiResponse } from 'next'
+import type { Endpoints } from "@octokit/types";
+import { NextApiRequest, NextApiResponse } from "next";
 
 export type Events =
-  Endpoints['GET /users/{username}/events']['response']['data']
+  Endpoints["GET /users/{username}/events"]["response"]["data"];
 
-const octokit = new Octokit()
+const octokit = new Octokit();
 
 async function eventsRoute(req: NextApiRequest, res: NextApiResponse<Events>) {
-  const user = req.session.user
+  const user = req.session.user;
 
   if (!user || user.isLoggedIn === false) {
-    res.status(401).end()
-    return
+    res.status(401).end();
+    return;
   }
 
   try {
     const { data: events } =
       await octokit.rest.activity.listPublicEventsForUser({
         username: user.login,
-      })
+      });
 
-    res.json(events)
+    res.json(events);
   } catch (error) {
-    res.status(200).json([])
+    res.status(200).json([]);
   }
 }
 
-export default withIronSessionApiRoute(eventsRoute, sessionOptions)
+export default withIronSessionApiRoute(eventsRoute, sessionOptions);
diff --git a/examples/with-iron-session/pages/api/login.ts b/examples/with-iron-session/pages/api/login.ts
index c9f094ae42..bd13276a41 100644
--- a/examples/with-iron-session/pages/api/login.ts
+++ b/examples/with-iron-session/pages/api/login.ts
@@ -1,26 +1,26 @@
-import type { User } from './user'
+import type { User } from "./user";
 
-import { Octokit } from 'octokit'
-import { withIronSessionApiRoute } from 'iron-session/next'
-import { sessionOptions } from 'lib/session'
-import { NextApiRequest, NextApiResponse } from 'next'
-const octokit = new Octokit()
+import { Octokit } from "octokit";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "lib/session";
+import { NextApiRequest, NextApiResponse } from "next";
+const octokit = new Octokit();
 
 async function loginRoute(req: NextApiRequest, res: NextApiResponse) {
-  const { username } = await req.body
+  const { username } = await req.body;
 
   try {
     const {
       data: { login, avatar_url },
-    } = await octokit.rest.users.getByUsername({ username })
+    } = await octokit.rest.users.getByUsername({ username });
 
-    const user = { isLoggedIn: true, login, avatarUrl: avatar_url } as User
-    req.session.user = user
-    await req.session.save()
-    res.json(user)
+    const user = { isLoggedIn: true, login, avatarUrl: avatar_url } as User;
+    req.session.user = user;
+    await req.session.save();
+    res.json(user);
   } catch (error) {
-    res.status(500).json({ message: (error as Error).message })
+    res.status(500).json({ message: (error as Error).message });
   }
 }
 
-export default withIronSessionApiRoute(loginRoute, sessionOptions)
+export default withIronSessionApiRoute(loginRoute, sessionOptions);
diff --git a/examples/with-iron-session/pages/api/logout.ts b/examples/with-iron-session/pages/api/logout.ts
index e081136289..e5e370dc57 100644
--- a/examples/with-iron-session/pages/api/logout.ts
+++ b/examples/with-iron-session/pages/api/logout.ts
@@ -1,11 +1,11 @@
-import { withIronSessionApiRoute } from 'iron-session/next'
-import { sessionOptions } from 'lib/session'
-import { NextApiRequest, NextApiResponse } from 'next'
-import type { User } from 'pages/api/user'
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "lib/session";
+import { NextApiRequest, NextApiResponse } from "next";
+import type { User } from "pages/api/user";
 
 function logoutRoute(req: NextApiRequest, res: NextApiResponse<User>) {
-  req.session.destroy()
-  res.json({ isLoggedIn: false, login: '', avatarUrl: '' })
+  req.session.destroy();
+  res.json({ isLoggedIn: false, login: "", avatarUrl: "" });
 }
 
-export default withIronSessionApiRoute(logoutRoute, sessionOptions)
+export default withIronSessionApiRoute(logoutRoute, sessionOptions);
diff --git a/examples/with-iron-session/pages/api/user.ts b/examples/with-iron-session/pages/api/user.ts
index e7249a427e..aa9048a082 100644
--- a/examples/with-iron-session/pages/api/user.ts
+++ b/examples/with-iron-session/pages/api/user.ts
@@ -1,12 +1,12 @@
-import { withIronSessionApiRoute } from 'iron-session/next'
-import { sessionOptions } from 'lib/session'
-import { NextApiRequest, NextApiResponse } from 'next'
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "lib/session";
+import { NextApiRequest, NextApiResponse } from "next";
 
 export type User = {
-  isLoggedIn: boolean
-  login: string
-  avatarUrl: string
-}
+  isLoggedIn: boolean;
+  login: string;
+  avatarUrl: string;
+};
 
 async function userRoute(req: NextApiRequest, res: NextApiResponse<User>) {
   if (req.session.user) {
@@ -15,14 +15,14 @@ async function userRoute(req: NextApiRequest, res: NextApiResponse<User>) {
     res.json({
       ...req.session.user,
       isLoggedIn: true,
-    })
+    });
   } else {
     res.json({
       isLoggedIn: false,
-      login: '',
-      avatarUrl: '',
-    })
+      login: "",
+      avatarUrl: "",
+    });
   }
 }
 
-export default withIronSessionApiRoute(userRoute, sessionOptions)
+export default withIronSessionApiRoute(userRoute, sessionOptions);
diff --git a/examples/with-iron-session/pages/index.tsx b/examples/with-iron-session/pages/index.tsx
index ae31b6b5af..e890905e6a 100644
--- a/examples/with-iron-session/pages/index.tsx
+++ b/examples/with-iron-session/pages/index.tsx
@@ -1,11 +1,11 @@
-import Layout from 'components/Layout'
-import Image from 'next/image'
+import Layout from "components/Layout";
+import Image from "next/image";
 
 export default function Home() {
   return (
     <Layout>
       <h1>
-        <span style={{ marginRight: '.3em', verticalAlign: 'middle' }}>
+        <span style={{ marginRight: ".3em", verticalAlign: "middle" }}>
           <Image src="/GitHub-Mark-32px.png" width="32" height="32" alt="" />
         </span>
         <a href="https://github.com/vvo/iron-session">iron-session</a> -
@@ -13,7 +13,7 @@ export default function Home() {
       </h1>
 
       <p>
-        This example creates an authentication system that uses a{' '}
+        This example creates an authentication system that uses a{" "}
         <b>signed and encrypted cookie to store session data</b>.
       </p>
 
@@ -55,5 +55,5 @@ export default function Home() {
         }
       `}</style>
     </Layout>
-  )
+  );
 }
diff --git a/examples/with-iron-session/pages/login.tsx b/examples/with-iron-session/pages/login.tsx
index 3fdf9e037e..9ad8053672 100644
--- a/examples/with-iron-session/pages/login.tsx
+++ b/examples/with-iron-session/pages/login.tsx
@@ -1,17 +1,17 @@
-import React, { useState } from 'react'
-import useUser from 'lib/useUser'
-import Layout from 'components/Layout'
-import Form from 'components/Form'
-import fetchJson, { FetchError } from 'lib/fetchJson'
+import React, { useState } from "react";
+import useUser from "lib/useUser";
+import Layout from "components/Layout";
+import Form from "components/Form";
+import fetchJson, { FetchError } from "lib/fetchJson";
 
 export default function Login() {
   // here we just check if user is already logged in and redirect to profile
   const { mutateUser } = useUser({
-    redirectTo: '/profile-sg',
+    redirectTo: "/profile-sg",
     redirectIfFound: true,
-  })
+  });
 
-  const [errorMsg, setErrorMsg] = useState('')
+  const [errorMsg, setErrorMsg] = useState("");
 
   return (
     <Layout>
@@ -19,25 +19,25 @@ export default function Login() {
         <Form
           errorMessage={errorMsg}
           onSubmit={async function handleSubmit(event) {
-            event.preventDefault()
+            event.preventDefault();
 
             const body = {
               username: event.currentTarget.username.value,
-            }
+            };
 
             try {
               mutateUser(
-                await fetchJson('/api/login', {
-                  method: 'POST',
-                  headers: { 'Content-Type': 'application/json' },
+                await fetchJson("/api/login", {
+                  method: "POST",
+                  headers: { "Content-Type": "application/json" },
                   body: JSON.stringify(body),
-                })
-              )
+                }),
+              );
             } catch (error) {
               if (error instanceof FetchError) {
-                setErrorMsg(error.data.message)
+                setErrorMsg(error.data.message);
               } else {
-                console.error('An unexpected error happened:', error)
+                console.error("An unexpected error happened:", error);
               }
             }
           }}
@@ -53,5 +53,5 @@ export default function Login() {
         }
       `}</style>
     </Layout>
-  )
+  );
 }
diff --git a/examples/with-iron-session/pages/profile-sg.tsx b/examples/with-iron-session/pages/profile-sg.tsx
index 8639708be4..fdd0525de3 100644
--- a/examples/with-iron-session/pages/profile-sg.tsx
+++ b/examples/with-iron-session/pages/profile-sg.tsx
@@ -1,30 +1,30 @@
-import React from 'react'
-import Layout from 'components/Layout'
-import useUser from 'lib/useUser'
-import useEvents from 'lib/useEvents'
+import React from "react";
+import Layout from "components/Layout";
+import useUser from "lib/useUser";
+import useEvents from "lib/useEvents";
 
 // Make sure to check https://nextjs.org/docs/basic-features/layouts for more info on how to use layouts
 export default function SgProfile() {
   const { user } = useUser({
-    redirectTo: '/login',
-  })
-  const { events } = useEvents(user)
+    redirectTo: "/login",
+  });
+  const { events } = useEvents(user);
 
   return (
     <Layout>
       <h1>Your GitHub profile</h1>
       <h2>
-        This page uses{' '}
+        This page uses{" "}
         <a href="https://nextjs.org/docs/basic-features/pages#static-generation-recommended">
           Static Generation (SG)
-        </a>{' '}
-        and the <a href="/api/user">/api/user</a> route (using{' '}
+        </a>{" "}
+        and the <a href="/api/user">/api/user</a> route (using{" "}
         <a href="https://github.com/vercel/swr">vercel/SWR</a>)
       </h2>
       {user && (
         <>
-          <p style={{ fontStyle: 'italic' }}>
-            Public data, from{' '}
+          <p style={{ fontStyle: "italic" }}>
+            Public data, from{" "}
             <a href={`https://github.com/${user.login}`}>
               https://github.com/{user.login}
             </a>
@@ -37,7 +37,7 @@ export default function SgProfile() {
 
       {events !== undefined && (
         <p>
-          Number of GitHub events for user: <b>{events.length}</b>.{' '}
+          Number of GitHub events for user: <b>{events.length}</b>.{" "}
           {events.length > 0 && (
             <>
               Last event type: <b>{events[0].type}</b>
@@ -46,5 +46,5 @@ export default function SgProfile() {
         </p>
       )}
     </Layout>
-  )
+  );
 }
diff --git a/examples/with-iron-session/pages/profile-ssr.tsx b/examples/with-iron-session/pages/profile-ssr.tsx
index 3633ab3815..1bdd5732b5 100644
--- a/examples/with-iron-session/pages/profile-ssr.tsx
+++ b/examples/with-iron-session/pages/profile-ssr.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import Layout from 'components/Layout'
-import { withIronSessionSsr } from 'iron-session/next'
-import { sessionOptions } from 'lib/session'
-import { User } from 'pages/api/user'
+import React from "react";
+import Layout from "components/Layout";
+import { withIronSessionSsr } from "iron-session/next";
+import { sessionOptions } from "lib/session";
+import { User } from "pages/api/user";
 
-import { InferGetServerSidePropsType } from 'next'
+import { InferGetServerSidePropsType } from "next";
 
 export default function SsrProfile({
   user,
@@ -13,11 +13,11 @@ export default function SsrProfile({
     <Layout>
       <h1>Your GitHub profile</h1>
       <h2>
-        This page uses{' '}
+        This page uses{" "}
         <a href="https://nextjs.org/docs/basic-features/pages#server-side-rendering">
           Server-side Rendering (SSR)
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a href="https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props">
           getServerSideProps
         </a>
@@ -25,8 +25,8 @@ export default function SsrProfile({
 
       {user?.isLoggedIn && (
         <>
-          <p style={{ fontStyle: 'italic' }}>
-            Public data, from{' '}
+          <p style={{ fontStyle: "italic" }}>
+            Public data, from{" "}
             <a href={`https://github.com/${user.login}`}>
               https://github.com/{user.login}
             </a>
@@ -36,28 +36,28 @@ export default function SsrProfile({
         </>
       )}
     </Layout>
-  )
+  );
 }
 
 export const getServerSideProps = withIronSessionSsr(async function ({
   req,
   res,
 }) {
-  const user = req.session.user
+  const user = req.session.user;
 
   if (user === undefined) {
-    res.setHeader('location', '/login')
-    res.statusCode = 302
-    res.end()
+    res.setHeader("location", "/login");
+    res.statusCode = 302;
+    res.end();
     return {
       props: {
-        user: { isLoggedIn: false, login: '', avatarUrl: '' } as User,
+        user: { isLoggedIn: false, login: "", avatarUrl: "" } as User,
       },
-    }
+    };
   }
 
   return {
     props: { user: req.session.user },
-  }
+  };
 },
-sessionOptions)
+sessionOptions);
diff --git a/examples/with-jest-babel/__mocks__/fileMock.js b/examples/with-jest-babel/__mocks__/fileMock.js
index 4a271a81f5..d54915b22c 100644
--- a/examples/with-jest-babel/__mocks__/fileMock.js
+++ b/examples/with-jest-babel/__mocks__/fileMock.js
@@ -1,8 +1,8 @@
 // Read more at "Handling stylesheets and image imports" on https://nextjs.org/docs/testing
 
 module.exports = {
-  src: '/img.jpg',
+  src: "/img.jpg",
   height: 24,
   width: 24,
-  blurDataURL: 'data:image/png;base64,imagedata',
-}
+  blurDataURL: "data:image/png;base64,imagedata",
+};
diff --git a/examples/with-jest-babel/__mocks__/styleMock.js b/examples/with-jest-babel/__mocks__/styleMock.js
index 72cfaf9af2..65424c5aae 100644
--- a/examples/with-jest-babel/__mocks__/styleMock.js
+++ b/examples/with-jest-babel/__mocks__/styleMock.js
@@ -2,4 +2,4 @@
 // If you're using CSS modules, this file can be deleted.
 // Read more at "Handling stylesheets and image imports" on https://nextjs.org/docs/testing
 
-module.exports = {}
+module.exports = {};
diff --git a/examples/with-jest-babel/__tests__/index.test.tsx b/examples/with-jest-babel/__tests__/index.test.tsx
index 8640dbfb6a..7a5ee76e2a 100644
--- a/examples/with-jest-babel/__tests__/index.test.tsx
+++ b/examples/with-jest-babel/__tests__/index.test.tsx
@@ -1,14 +1,14 @@
-import { render, screen } from '@testing-library/react'
-import Home from '@/pages/index'
+import { render, screen } from "@testing-library/react";
+import Home from "@/pages/index";
 
-describe('Home', () => {
-  it('renders a heading', () => {
-    render(<Home />)
+describe("Home", () => {
+  it("renders a heading", () => {
+    render(<Home />);
 
-    const heading = screen.getByRole('heading', {
+    const heading = screen.getByRole("heading", {
       name: /welcome to next\.js!/i,
-    })
+    });
 
-    expect(heading).toBeInTheDocument()
-  })
-})
+    expect(heading).toBeInTheDocument();
+  });
+});
diff --git a/examples/with-jest-babel/__tests__/snapshot.tsx b/examples/with-jest-babel/__tests__/snapshot.tsx
index 4c46eba354..ecd675d3f8 100644
--- a/examples/with-jest-babel/__tests__/snapshot.tsx
+++ b/examples/with-jest-babel/__tests__/snapshot.tsx
@@ -1,7 +1,7 @@
-import { render } from '@testing-library/react'
-import Home from '@/pages/index'
+import { render } from "@testing-library/react";
+import Home from "@/pages/index";
 
-it('renders homepage unchanged', () => {
-  const { container } = render(<Home />)
-  expect(container).toMatchSnapshot()
-})
+it("renders homepage unchanged", () => {
+  const { container } = render(<Home />);
+  expect(container).toMatchSnapshot();
+});
diff --git a/examples/with-jest-babel/jest.config.js b/examples/with-jest-babel/jest.config.js
index 6351201bf4..a26f866641 100644
--- a/examples/with-jest-babel/jest.config.js
+++ b/examples/with-jest-babel/jest.config.js
@@ -2,37 +2,37 @@
 
 module.exports = {
   collectCoverageFrom: [
-    '**/*.{js,jsx,ts,tsx}',
-    '!**/*.d.ts',
-    '!**/node_modules/**',
+    "**/*.{js,jsx,ts,tsx}",
+    "!**/*.d.ts",
+    "!**/node_modules/**",
   ],
   moduleNameMapper: {
     // Handle CSS imports (with CSS modules)
     // https://jestjs.io/docs/webpack#mocking-css-modules
-    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
 
     // Handle CSS imports (without CSS modules)
-    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
+    "^.+\\.(css|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
 
     // Handle image imports
     // https://jestjs.io/docs/webpack#handling-static-assets
-    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$': `<rootDir>/__mocks__/fileMock.js`,
+    "^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$": `<rootDir>/__mocks__/fileMock.js`,
 
     // Handle module aliases
-    '^@/components/(.*)$': '<rootDir>/components/$1',
+    "^@/components/(.*)$": "<rootDir>/components/$1",
 
-    '^@/pages/(.*)$': '<rootDir>/pages/$1',
+    "^@/pages/(.*)$": "<rootDir>/pages/$1",
   },
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/.next/"],
   transform: {
     // Use babel-jest to transpile tests with the next/babel preset
     // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
-    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
+    "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { presets: ["next/babel"] }],
   },
   transformIgnorePatterns: [
-    '/node_modules/',
-    '^.+\\.module\\.(css|sass|scss)$',
+    "/node_modules/",
+    "^.+\\.module\\.(css|sass|scss)$",
   ],
-  testEnvironment: 'jest-environment-jsdom',
-}
+  testEnvironment: "jest-environment-jsdom",
+};
diff --git a/examples/with-jest-babel/jest.setup.js b/examples/with-jest-babel/jest.setup.js
index 996e74a2ba..0cc243b007 100644
--- a/examples/with-jest-babel/jest.setup.js
+++ b/examples/with-jest-babel/jest.setup.js
@@ -3,4 +3,4 @@
 
 // Used for __tests__/testing-library.js
 // Learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect'
+import "@testing-library/jest-dom/extend-expect";
diff --git a/examples/with-jest-babel/pages/_app.tsx b/examples/with-jest-babel/pages/_app.tsx
index ee0da37657..51559a04b4 100644
--- a/examples/with-jest-babel/pages/_app.tsx
+++ b/examples/with-jest-babel/pages/_app.tsx
@@ -1,6 +1,6 @@
-import '@/styles/global.css'
-import type { AppProps } from 'next/app'
+import "@/styles/global.css";
+import type { AppProps } from "next/app";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-jest-babel/pages/index.tsx b/examples/with-jest-babel/pages/index.tsx
index c30337b4ad..72552aaafd 100644
--- a/examples/with-jest-babel/pages/index.tsx
+++ b/examples/with-jest-babel/pages/index.tsx
@@ -1,7 +1,7 @@
-import Head from 'next/head'
-import Image from 'next/image'
+import Head from "next/head";
+import Image from "next/image";
 
-import styles from '@/pages/index.module.css'
+import styles from "@/pages/index.module.css";
 
 export default function Home() {
   return (
@@ -54,12 +54,12 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <span className={styles.logo}>
             <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
           </span>
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-jest-babel/types.d.ts b/examples/with-jest-babel/types.d.ts
index 6995fb3f2a..57b7914b56 100644
--- a/examples/with-jest-babel/types.d.ts
+++ b/examples/with-jest-babel/types.d.ts
@@ -1,6 +1,6 @@
-declare module '*module.css' {
+declare module "*module.css" {
   const styles: {
-    [className: string]: string
-  }
-  export default styles
+    [className: string]: string;
+  };
+  export default styles;
 }
diff --git a/examples/with-jest/__tests__/index.test.tsx b/examples/with-jest/__tests__/index.test.tsx
index 2f1ee41801..12a153c9c3 100644
--- a/examples/with-jest/__tests__/index.test.tsx
+++ b/examples/with-jest/__tests__/index.test.tsx
@@ -1,17 +1,17 @@
 /**
  * @jest-environment jsdom
  */
-import { render, screen } from '@testing-library/react'
-import Home from '@/pages/home/index'
+import { render, screen } from "@testing-library/react";
+import Home from "@/pages/home/index";
 
-describe('Home', () => {
-  it('renders a heading', () => {
-    render(<Home />)
+describe("Home", () => {
+  it("renders a heading", () => {
+    render(<Home />);
 
-    const heading = screen.getByRole('heading', {
+    const heading = screen.getByRole("heading", {
       name: /welcome to next\.js!/i,
-    })
+    });
 
-    expect(heading).toBeInTheDocument()
-  })
-})
+    expect(heading).toBeInTheDocument();
+  });
+});
diff --git a/examples/with-jest/__tests__/snapshot.tsx b/examples/with-jest/__tests__/snapshot.tsx
index 2f4bb918eb..03a3e4e37f 100644
--- a/examples/with-jest/__tests__/snapshot.tsx
+++ b/examples/with-jest/__tests__/snapshot.tsx
@@ -1,10 +1,10 @@
 /**
  * @jest-environment jsdom
  */
-import { render } from '@testing-library/react'
-import Home from '@/pages/home/index'
+import { render } from "@testing-library/react";
+import Home from "@/pages/home/index";
 
-it('renders homepage unchanged', () => {
-  const { container } = render(<Home />)
-  expect(container).toMatchSnapshot()
-})
+it("renders homepage unchanged", () => {
+  const { container } = render(<Home />);
+  expect(container).toMatchSnapshot();
+});
diff --git a/examples/with-jest/app/blog/[slug]/page.test.tsx b/examples/with-jest/app/blog/[slug]/page.test.tsx
index b621001461..5a51c10b6d 100644
--- a/examples/with-jest/app/blog/[slug]/page.test.tsx
+++ b/examples/with-jest/app/blog/[slug]/page.test.tsx
@@ -1,11 +1,11 @@
 /**
  * @jest-environment jsdom
  */
-import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import Page from './page'
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Page from "./page";
 
-it('App Router: Works with dynamic route segments', () => {
-  render(<Page params={{ slug: 'Test' }} />)
-  expect(screen.getByRole('heading')).toHaveTextContent('Slug: Test')
-})
+it("App Router: Works with dynamic route segments", () => {
+  render(<Page params={{ slug: "Test" }} />);
+  expect(screen.getByRole("heading")).toHaveTextContent("Slug: Test");
+});
diff --git a/examples/with-jest/app/blog/[slug]/page.tsx b/examples/with-jest/app/blog/[slug]/page.tsx
index df9575a49a..239d5c2071 100644
--- a/examples/with-jest/app/blog/[slug]/page.tsx
+++ b/examples/with-jest/app/blog/[slug]/page.tsx
@@ -1,13 +1,13 @@
 type Params = {
   params: {
-    slug: string
-  }
-}
+    slug: string;
+  };
+};
 
 export async function generateMetadata({ params }: Params) {
-  return { title: `Post: ${params.slug}` }
+  return { title: `Post: ${params.slug}` };
 }
 
 export default function Page({ params }: Params) {
-  return <h1>Slug: {params.slug}</h1>
+  return <h1>Slug: {params.slug}</h1>;
 }
diff --git a/examples/with-jest/app/counter.test.tsx b/examples/with-jest/app/counter.test.tsx
index 3c7c59fd3a..8488296aa7 100644
--- a/examples/with-jest/app/counter.test.tsx
+++ b/examples/with-jest/app/counter.test.tsx
@@ -1,12 +1,12 @@
 /**
  * @jest-environment jsdom
  */
-import { fireEvent, render, screen } from '@testing-library/react'
-import Counter from './counter'
+import { fireEvent, render, screen } from "@testing-library/react";
+import Counter from "./counter";
 
-it('App Router: Works with Client Components (React State)', () => {
-  render(<Counter />)
-  expect(screen.getByRole('heading')).toHaveTextContent('0')
-  fireEvent.click(screen.getByRole('button'))
-  expect(screen.getByRole('heading')).toHaveTextContent('1')
-})
+it("App Router: Works with Client Components (React State)", () => {
+  render(<Counter />);
+  expect(screen.getByRole("heading")).toHaveTextContent("0");
+  fireEvent.click(screen.getByRole("button"));
+  expect(screen.getByRole("heading")).toHaveTextContent("1");
+});
diff --git a/examples/with-jest/app/counter.tsx b/examples/with-jest/app/counter.tsx
index e383b40314..7a8f9f47e2 100644
--- a/examples/with-jest/app/counter.tsx
+++ b/examples/with-jest/app/counter.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client";
 
-import { useState } from 'react'
+import { useState } from "react";
 
 export default function Counter() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
   return (
     <>
       <h2>{count}</h2>
@@ -11,5 +11,5 @@ export default function Counter() {
         +
       </button>
     </>
-  )
+  );
 }
diff --git a/examples/with-jest/app/layout.tsx b/examples/with-jest/app/layout.tsx
index dbce4ea8e3..225b6038d7 100644
--- a/examples/with-jest/app/layout.tsx
+++ b/examples/with-jest/app/layout.tsx
@@ -1,11 +1,11 @@
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-jest/app/page.test.tsx b/examples/with-jest/app/page.test.tsx
index ad9f208355..e94d24cd8b 100644
--- a/examples/with-jest/app/page.test.tsx
+++ b/examples/with-jest/app/page.test.tsx
@@ -1,10 +1,10 @@
 /**
  * @jest-environment jsdom
  */
-import { render, screen } from '@testing-library/react'
-import Page from './page'
+import { render, screen } from "@testing-library/react";
+import Page from "./page";
 
-it('App Router: Works with Server Components', () => {
-  render(<Page />)
-  expect(screen.getByRole('heading')).toHaveTextContent('App Router')
-})
+it("App Router: Works with Server Components", () => {
+  render(<Page />);
+  expect(screen.getByRole("heading")).toHaveTextContent("App Router");
+});
diff --git a/examples/with-jest/app/page.tsx b/examples/with-jest/app/page.tsx
index 5175cc603b..c40d746000 100644
--- a/examples/with-jest/app/page.tsx
+++ b/examples/with-jest/app/page.tsx
@@ -1,7 +1,7 @@
 export const metadata = {
-  title: 'App Router',
-}
+  title: "App Router",
+};
 
 export default function Page() {
-  return <h1>App Router</h1>
+  return <h1>App Router</h1>;
 }
diff --git a/examples/with-jest/app/utils/add.test.ts b/examples/with-jest/app/utils/add.test.ts
index 753f075ab4..a4c2405590 100644
--- a/examples/with-jest/app/utils/add.test.ts
+++ b/examples/with-jest/app/utils/add.test.ts
@@ -1,5 +1,5 @@
-import { add } from './add'
+import { add } from "./add";
 
-test('Test functions that import server-only', () => {
-  expect(add(1, 2)).toBe(3)
-})
+test("Test functions that import server-only", () => {
+  expect(add(1, 2)).toBe(3);
+});
diff --git a/examples/with-jest/app/utils/add.ts b/examples/with-jest/app/utils/add.ts
index 260a464800..43a6f6e568 100644
--- a/examples/with-jest/app/utils/add.ts
+++ b/examples/with-jest/app/utils/add.ts
@@ -1,5 +1,5 @@
-import 'server-only'
+import "server-only";
 
 export function add(a: number, b: number) {
-  return a + b
+  return a + b;
 }
diff --git a/examples/with-jest/jest.config.js b/examples/with-jest/jest.config.js
index 6e2155e610..afde621b07 100644
--- a/examples/with-jest/jest.config.js
+++ b/examples/with-jest/jest.config.js
@@ -1,15 +1,15 @@
-const nextJest = require('next/jest')
+const nextJest = require("next/jest");
 
 const createJestConfig = nextJest({
   // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
-  dir: './',
-})
+  dir: "./",
+});
 
 // Add any custom config to be passed to Jest
 const customJestConfig = {
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-  testEnvironment: 'jsdom',
-}
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  testEnvironment: "jsdom",
+};
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
-module.exports = createJestConfig(customJestConfig)
+module.exports = createJestConfig(customJestConfig);
diff --git a/examples/with-jest/jest.setup.js b/examples/with-jest/jest.setup.js
index d5dc35681c..ee6ccea1a8 100644
--- a/examples/with-jest/jest.setup.js
+++ b/examples/with-jest/jest.setup.js
@@ -1,2 +1,2 @@
 // Learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom'
+import "@testing-library/jest-dom";
diff --git a/examples/with-jest/pages/_app.tsx b/examples/with-jest/pages/_app.tsx
index ee0da37657..51559a04b4 100644
--- a/examples/with-jest/pages/_app.tsx
+++ b/examples/with-jest/pages/_app.tsx
@@ -1,6 +1,6 @@
-import '@/styles/global.css'
-import type { AppProps } from 'next/app'
+import "@/styles/global.css";
+import type { AppProps } from "next/app";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-jest/pages/home/index.tsx b/examples/with-jest/pages/home/index.tsx
index 98f5bd86ec..6549f3d3db 100644
--- a/examples/with-jest/pages/home/index.tsx
+++ b/examples/with-jest/pages/home/index.tsx
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '@/pages/index.module.css'
+import Head from "next/head";
+import Image from "next/image";
+import styles from "@/pages/index.module.css";
 
 export default function Home() {
   return (
@@ -53,12 +53,12 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <span className={styles.logo}>
             <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
           </span>
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-jest/types.d.ts b/examples/with-jest/types.d.ts
index 6995fb3f2a..57b7914b56 100644
--- a/examples/with-jest/types.d.ts
+++ b/examples/with-jest/types.d.ts
@@ -1,6 +1,6 @@
-declare module '*module.css' {
+declare module "*module.css" {
   const styles: {
-    [className: string]: string
-  }
-  export default styles
+    [className: string]: string;
+  };
+  export default styles;
 }
diff --git a/examples/with-joi/pages/api/cars.js b/examples/with-joi/pages/api/cars.js
index d0170c9762..6aeddfddae 100644
--- a/examples/with-joi/pages/api/cars.js
+++ b/examples/with-joi/pages/api/cars.js
@@ -1,13 +1,13 @@
-import Joi from 'joi'
-import { validate } from '../../server/api/middlewares/validate'
+import Joi from "joi";
+import { validate } from "../../server/api/middlewares/validate";
 
 const carSchema = Joi.object({
   brand: Joi.string().required(),
   model: Joi.string().required(),
-})
+});
 
 export default validate({ body: carSchema }, (req, res) => {
-  const car = req.body
+  const car = req.body;
 
-  return res.status(201).json({ data: car })
-})
+  return res.status(201).json({ data: car });
+});
diff --git a/examples/with-joi/pages/api/people.js b/examples/with-joi/pages/api/people.js
index e7b39f416c..73aeff5a54 100644
--- a/examples/with-joi/pages/api/people.js
+++ b/examples/with-joi/pages/api/people.js
@@ -1,14 +1,14 @@
-import Joi from 'joi'
-import connect from 'next-connect'
-import { validate } from '../../server/api/middlewares/validate'
+import Joi from "joi";
+import connect from "next-connect";
+import { validate } from "../../server/api/middlewares/validate";
 
 const personSchema = Joi.object({
   age: Joi.number().required(),
   name: Joi.string().required(),
-})
+});
 
 export default connect().post(validate({ body: personSchema }), (req, res) => {
-  const person = req.body
+  const person = req.body;
 
-  return res.status(201).json({ data: person })
-})
+  return res.status(201).json({ data: person });
+});
diff --git a/examples/with-joi/pages/api/people/[id].js b/examples/with-joi/pages/api/people/[id].js
index 3aabe18b57..d7a4cdf73e 100644
--- a/examples/with-joi/pages/api/people/[id].js
+++ b/examples/with-joi/pages/api/people/[id].js
@@ -1,6 +1,6 @@
-import Joi from 'joi'
-import connect from 'next-connect'
-import { validate } from '../../../server/api/middlewares/validate'
+import Joi from "joi";
+import connect from "next-connect";
+import { validate } from "../../../server/api/middlewares/validate";
 
 export default connect().get(
   validate({
@@ -9,12 +9,12 @@ export default connect().get(
     }),
   }),
   (req, res) => {
-    const id = req.query.id
+    const id = req.query.id;
 
     return res.status(200).json({
       data: {
         id,
       },
-    })
-  }
-)
+    });
+  },
+);
diff --git a/examples/with-joi/server/api/middlewares/validate.js b/examples/with-joi/server/api/middlewares/validate.js
index 622624efc7..226795acc6 100644
--- a/examples/with-joi/server/api/middlewares/validate.js
+++ b/examples/with-joi/server/api/middlewares/validate.js
@@ -1,4 +1,4 @@
-import withJoi from 'next-joi'
+import withJoi from "next-joi";
 
 export const validate = withJoi({
   /**
@@ -6,6 +6,6 @@ export const validate = withJoi({
    * we can customize the error response.
    */
   onValidationError: (_, res) => {
-    return res.status(418).json({ message: "I'm a Teapot" })
+    return res.status(418).json({ message: "I'm a Teapot" });
   },
-})
+});
diff --git a/examples/with-jotai/components/Canvas.tsx b/examples/with-jotai/components/Canvas.tsx
index abc56810fb..c87cba3dc8 100644
--- a/examples/with-jotai/components/Canvas.tsx
+++ b/examples/with-jotai/components/Canvas.tsx
@@ -1,42 +1,42 @@
-import { atom, useAtom } from 'jotai'
+import { atom, useAtom } from "jotai";
 
-type Point = [number, number]
-const dotsAtom = atom<Point[]>([])
+type Point = [number, number];
+const dotsAtom = atom<Point[]>([]);
 
-const drawingAtom = atom<boolean>(false)
+const drawingAtom = atom<boolean>(false);
 
 const handleMouseDownAtom = atom(null, (get, set) => {
-  set(drawingAtom, true)
-})
+  set(drawingAtom, true);
+});
 
 const handleMouseUpAtom = atom(null, (get, set) => {
-  set(drawingAtom, false)
-})
+  set(drawingAtom, false);
+});
 
 const handleMouseMoveAtom = atom(
   (get) => get(dotsAtom),
   (get, set, update: Point) => {
     if (get(drawingAtom)) {
-      set(dotsAtom, (prev) => [...prev, update])
+      set(dotsAtom, (prev) => [...prev, update]);
     }
-  }
-)
+  },
+);
 
 const SvgDots = () => {
-  const [dots] = useAtom(handleMouseMoveAtom)
+  const [dots] = useAtom(handleMouseMoveAtom);
   return (
     <g>
       {dots.map(([x, y], index) => (
         <circle cx={x} cy={y} r="2" fill="#aaa" key={index} />
       ))}
     </g>
-  )
-}
+  );
+};
 
 export default function Canvas() {
-  const [, handleMouseUp] = useAtom(handleMouseUpAtom)
-  const [, handleMouseDown] = useAtom(handleMouseDownAtom)
-  const [, handleMouseMove] = useAtom(handleMouseMoveAtom)
+  const [, handleMouseUp] = useAtom(handleMouseUpAtom);
+  const [, handleMouseDown] = useAtom(handleMouseDownAtom);
+  const [, handleMouseMove] = useAtom(handleMouseMoveAtom);
   return (
     <svg
       width="100vw"
@@ -45,11 +45,11 @@ export default function Canvas() {
       onMouseDown={handleMouseDown}
       onMouseUp={handleMouseUp}
       onMouseMove={(e) => {
-        handleMouseMove([e.clientX, e.clientY - 150])
+        handleMouseMove([e.clientX, e.clientY - 150]);
       }}
     >
       <rect width="100vw" height="100vh" fill="#eee" />
       <SvgDots />
     </svg>
-  )
+  );
 }
diff --git a/examples/with-jotai/next.config.js b/examples/with-jotai/next.config.js
index 0d6071006a..da1bb770fb 100644
--- a/examples/with-jotai/next.config.js
+++ b/examples/with-jotai/next.config.js
@@ -1,3 +1,3 @@
 module.exports = {
   reactStrictMode: true,
-}
+};
diff --git a/examples/with-jotai/pages/_app.tsx b/examples/with-jotai/pages/_app.tsx
index c8b6cfe847..8a2c747230 100644
--- a/examples/with-jotai/pages/_app.tsx
+++ b/examples/with-jotai/pages/_app.tsx
@@ -1,11 +1,11 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
-import { Provider } from 'jotai'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import { Provider } from "jotai";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (
     <Provider>
       <Component {...pageProps} />
     </Provider>
-  )
+  );
 }
diff --git a/examples/with-jotai/pages/api/hello.ts b/examples/with-jotai/pages/api/hello.ts
index f8bcc7e5ca..ea77e8f35b 100644
--- a/examples/with-jotai/pages/api/hello.ts
+++ b/examples/with-jotai/pages/api/hello.ts
@@ -1,13 +1,13 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from "next";
 
 type Data = {
-  name: string
-}
+  name: string;
+};
 
 export default function handler(
   req: NextApiRequest,
-  res: NextApiResponse<Data>
+  res: NextApiResponse<Data>,
 ) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: "John Doe" });
 }
diff --git a/examples/with-jotai/pages/index.tsx b/examples/with-jotai/pages/index.tsx
index 25029ad07c..df98778f03 100644
--- a/examples/with-jotai/pages/index.tsx
+++ b/examples/with-jotai/pages/index.tsx
@@ -1,7 +1,7 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
-import Canvas from '../components/Canvas'
+import Head from "next/head";
+import Image from "next/image";
+import styles from "../styles/Home.module.css";
+import Canvas from "../components/Canvas";
 
 export default function Home() {
   return (
@@ -21,12 +21,12 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <span className={styles.logo}>
             <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
           </span>
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-kea/pages/_app.js b/examples/with-kea/pages/_app.js
index f842a4e7d1..f0dd66ee47 100644
--- a/examples/with-kea/pages/_app.js
+++ b/examples/with-kea/pages/_app.js
@@ -1,16 +1,16 @@
-import React from 'react'
-import { Provider } from 'react-redux'
-import withRedux from 'next-redux-wrapper'
-import { initStore } from '../store'
+import React from "react";
+import { Provider } from "react-redux";
+import withRedux from "next-redux-wrapper";
+import { initStore } from "../store";
 
 function MyApp({ Component, pageProps, store }) {
   return (
     <Provider store={store}>
       <Component {...pageProps} />
     </Provider>
-  )
+  );
 }
 
 export default withRedux(initStore, {
-  debug: process.env.NODE_ENV === 'development',
-})(MyApp)
+  debug: process.env.NODE_ENV === "development",
+})(MyApp);
diff --git a/examples/with-kea/pages/index.js b/examples/with-kea/pages/index.js
index 2803180ebf..43066d12c6 100644
--- a/examples/with-kea/pages/index.js
+++ b/examples/with-kea/pages/index.js
@@ -1,9 +1,9 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { kea } from 'kea'
+import React from "react";
+import PropTypes from "prop-types";
+import { kea } from "kea";
 
 const logic = kea({
-  path: () => ['kea'],
+  path: () => ["kea"],
   actions: () => ({
     increment: (amount) => ({ amount }),
     decrement: (amount) => ({ amount }),
@@ -25,7 +25,7 @@ const logic = kea({
       PropTypes.number,
     ],
   }),
-})
+});
 
 @logic
 class Index extends React.Component {
@@ -40,8 +40,8 @@ class Index extends React.Component {
           Decrement
         </button>
       </div>
-    )
+    );
   }
 }
 
-export default Index
+export default Index;
diff --git a/examples/with-kea/store.js b/examples/with-kea/store.js
index fc761b3f41..c1c7b8ae81 100644
--- a/examples/with-kea/store.js
+++ b/examples/with-kea/store.js
@@ -1,15 +1,15 @@
-import { keaReducer } from 'kea'
-import { createStore, compose, combineReducers } from 'redux'
+import { keaReducer } from "kea";
+import { createStore, compose, combineReducers } from "redux";
 
 const reducers = combineReducers({
-  kea: keaReducer('kea'),
-})
+  kea: keaReducer("kea"),
+});
 
 const reduxDevTools =
-  typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
+  typeof window !== "undefined" && window.__REDUX_DEVTOOLS_EXTENSION__
     ? window.__REDUX_DEVTOOLS_EXTENSION__()
-    : (f) => f
+    : (f) => f;
 
 export const initStore = (initialState) => {
-  return createStore(reducers, initialState, compose(reduxDevTools))
-}
+  return createStore(reducers, initialState, compose(reduxDevTools));
+};
diff --git a/examples/with-knex/knex/index.js b/examples/with-knex/knex/index.js
index 47013ad329..50142149ea 100644
--- a/examples/with-knex/knex/index.js
+++ b/examples/with-knex/knex/index.js
@@ -1,5 +1,5 @@
-import knex from 'knex'
-import config from '../knexfile.js'
+import knex from "knex";
+import config from "../knexfile.js";
 
 /**
  * Global is used here to ensure the connection
@@ -7,10 +7,10 @@ import config from '../knexfile.js'
  *
  * see https://github.com/vercel/next.js/discussions/12229#discussioncomment-83372
  */
-let cached = global.pg
-if (!cached) cached = global.pg = {}
+let cached = global.pg;
+if (!cached) cached = global.pg = {};
 
 export function getKnex() {
-  if (!cached.instance) cached.instance = knex(config)
-  return cached.instance
+  if (!cached.instance) cached.instance = knex(config);
+  return cached.instance;
 }
diff --git a/examples/with-knex/knex/migrations/20201015140127_initial.js b/examples/with-knex/knex/migrations/20201015140127_initial.js
index 75f2d3ed91..fbbbd62a84 100644
--- a/examples/with-knex/knex/migrations/20201015140127_initial.js
+++ b/examples/with-knex/knex/migrations/20201015140127_initial.js
@@ -1,16 +1,16 @@
 exports.up = async function (knex) {
-  await knex.schema.createTable('todos', (table) => {
-    table.increments('id')
-    table.string('text').notNullable()
-    table.boolean('done').notNullable()
-  })
+  await knex.schema.createTable("todos", (table) => {
+    table.increments("id");
+    table.string("text").notNullable();
+    table.boolean("done").notNullable();
+  });
 
-  await knex('todos').insert([
-    { text: 'Buy milk', done: true },
-    { text: 'Wash car', done: false },
-  ])
-}
+  await knex("todos").insert([
+    { text: "Buy milk", done: true },
+    { text: "Wash car", done: false },
+  ]);
+};
 
 exports.down = async function (knex) {
-  await knex.raw('DROP TABLE todos CASCADE')
-}
+  await knex.raw("DROP TABLE todos CASCADE");
+};
diff --git a/examples/with-knex/knexfile.js b/examples/with-knex/knexfile.js
index 93f697cbee..77bacfd7f2 100644
--- a/examples/with-knex/knexfile.js
+++ b/examples/with-knex/knexfile.js
@@ -1,15 +1,15 @@
-const { loadEnvConfig } = require('@next/env')
+const { loadEnvConfig } = require("@next/env");
 
-const dev = process.env.NODE_ENV !== 'production'
-const { PG_URI } = loadEnvConfig('./', dev).combinedEnv
+const dev = process.env.NODE_ENV !== "production";
+const { PG_URI } = loadEnvConfig("./", dev).combinedEnv;
 
 module.exports = {
-  client: 'pg',
+  client: "pg",
   connection: PG_URI,
   migrations: {
-    directory: './knex/migrations',
+    directory: "./knex/migrations",
   },
   seeds: {
-    directory: './knex/seeds',
+    directory: "./knex/seeds",
   },
-}
+};
diff --git a/examples/with-knex/pages/api/todos.js b/examples/with-knex/pages/api/todos.js
index 565a3c36f0..2b177b338f 100644
--- a/examples/with-knex/pages/api/todos.js
+++ b/examples/with-knex/pages/api/todos.js
@@ -1,7 +1,7 @@
-import { getKnex } from '../../knex'
+import { getKnex } from "../../knex";
 
 export default async function handler(req, res) {
-  const knex = getKnex()
-  const todos = await knex('todos')
-  res.status(200).json(todos)
+  const knex = getKnex();
+  const todos = await knex("todos");
+  res.status(200).json(todos);
 }
diff --git a/examples/with-knex/pages/index.js b/examples/with-knex/pages/index.js
index 28b4c1b042..6079325ab3 100644
--- a/examples/with-knex/pages/index.js
+++ b/examples/with-knex/pages/index.js
@@ -1,16 +1,16 @@
-import { useEffect, useState } from 'react'
-import Head from 'next/head'
+import { useEffect, useState } from "react";
+import Head from "next/head";
 
 export default function Home() {
-  const [todos, setTodos] = useState()
+  const [todos, setTodos] = useState();
   useEffect(() => {
     async function loadTodos() {
-      const resp = await fetch('/api/todos')
-      const data = await resp.json()
-      setTodos(data)
+      const resp = await fetch("/api/todos");
+      const data = await resp.json();
+      setTodos(data);
     }
-    loadTodos()
-  }, [])
+    loadTodos();
+  }, []);
 
   return (
     <div className="container">
@@ -30,9 +30,9 @@ export default function Home() {
           todos.map((todo) => {
             return (
               <p className="todos-item" key={todo.id}>
-                {todo.text} {todo.done && '(complete)'}
+                {todo.text} {todo.done && "(complete)"}
               </p>
-            )
+            );
           })}
 
         <p className="description">
@@ -78,7 +78,7 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <img src="/vercel.svg" alt="Vercel Logo" className="logo" />
         </a>
       </footer>
@@ -250,5 +250,5 @@ export default function Home() {
         }
       `}</style>
     </div>
-  )
+  );
 }
diff --git a/examples/with-linaria/next.config.js b/examples/with-linaria/next.config.js
index 3906100b95..cd21a082e5 100644
--- a/examples/with-linaria/next.config.js
+++ b/examples/with-linaria/next.config.js
@@ -1,3 +1,3 @@
-const withLinaria = require('next-linaria')
+const withLinaria = require("next-linaria");
 
-module.exports = withLinaria({})
+module.exports = withLinaria({});
diff --git a/examples/with-linaria/pages/index.tsx b/examples/with-linaria/pages/index.tsx
index 3351e959a7..707aadde01 100644
--- a/examples/with-linaria/pages/index.tsx
+++ b/examples/with-linaria/pages/index.tsx
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import { styled } from '@linaria/react'
-import { css } from '@linaria/core'
+import Head from "next/head";
+import { styled } from "@linaria/react";
+import { css } from "@linaria/core";
 
 const Box = styled.div`
   margin-top: 40px;
@@ -19,11 +19,11 @@ const Box = styled.div`
       transform: rotate(360deg);
     }
   }
-`
+`;
 
 const anotherClass = css`
   color: blue;
-`
+`;
 
 export default function Home() {
   return (
@@ -33,5 +33,5 @@ export default function Home() {
       </Head>
       <Box className={anotherClass}>Zero runtime CSS in JS</Box>
     </>
-  )
+  );
 }
diff --git a/examples/with-lingui/components/LangSwitcher.js b/examples/with-lingui/components/LangSwitcher.js
index a3020a7c1e..33e7e7e23d 100644
--- a/examples/with-lingui/components/LangSwitcher.js
+++ b/examples/with-lingui/components/LangSwitcher.js
@@ -1,23 +1,23 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { t } from '@lingui/macro'
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { t } from "@lingui/macro";
 
 const availableLanguageNames = {
   en: t`English`,
   sv: t`Swedish`,
-}
+};
 
 export default function LangSwitcher() {
-  const { locale, locales, route } = useRouter()
-  const otherLocale = locales?.find((cur) => cur !== locale)
+  const { locale, locales, route } = useRouter();
+  const otherLocale = locales?.find((cur) => cur !== locale);
 
   return (
     <Link
       href={route}
       locale={otherLocale}
-      style={{ display: 'block', marginBottom: '20px' }}
+      style={{ display: "block", marginBottom: "20px" }}
     >
       {availableLanguageNames[otherLocale]}
     </Link>
-  )
+  );
 }
diff --git a/examples/with-lingui/lingui.config.js b/examples/with-lingui/lingui.config.js
index a32a07f3b8..d6a1925611 100644
--- a/examples/with-lingui/lingui.config.js
+++ b/examples/with-lingui/lingui.config.js
@@ -1,11 +1,11 @@
 module.exports = {
-  locales: ['en', 'sv'],
-  sourceLocale: 'en',
+  locales: ["en", "sv"],
+  sourceLocale: "en",
   catalogs: [
     {
-      path: '<rootDir>/locale/{locale}/messages',
-      include: ['<rootDir>/'],
-      exclude: ['**/node_modules/**'],
+      path: "<rootDir>/locale/{locale}/messages",
+      include: ["<rootDir>/"],
+      exclude: ["**/node_modules/**"],
     },
   ],
-}
+};
diff --git a/examples/with-lingui/next.config.js b/examples/with-lingui/next.config.js
index 165c1b213a..b39dc76be7 100644
--- a/examples/with-lingui/next.config.js
+++ b/examples/with-lingui/next.config.js
@@ -1,4 +1,4 @@
-const { locales, sourceLocale } = require('./lingui.config.js')
+const { locales, sourceLocale } = require("./lingui.config.js");
 
 /** @type {import('next').NextConfig} */
 module.exports = {
@@ -9,9 +9,9 @@ module.exports = {
   webpack: (config) => {
     config.module.rules.push({
       test: /\.po/,
-      use: ['@lingui/loader'],
-    })
+      use: ["@lingui/loader"],
+    });
 
-    return config
+    return config;
   },
-}
+};
diff --git a/examples/with-lingui/pages/_app.js b/examples/with-lingui/pages/_app.js
index 3e855780b0..1b8112c029 100644
--- a/examples/with-lingui/pages/_app.js
+++ b/examples/with-lingui/pages/_app.js
@@ -1,27 +1,27 @@
-import { useEffect } from 'react'
+import { useEffect } from "react";
 
-import { I18nProvider } from '@lingui/react'
-import { i18n } from '@lingui/core'
-import { useRouter } from 'next/router'
-import { en, sv } from 'make-plural/plurals'
-import LangSwitcher from '../components/LangSwitcher'
+import { I18nProvider } from "@lingui/react";
+import { i18n } from "@lingui/core";
+import { useRouter } from "next/router";
+import { en, sv } from "make-plural/plurals";
+import LangSwitcher from "../components/LangSwitcher";
 
-i18n.loadLocaleData('en', { plurals: en })
-i18n.loadLocaleData('sv', { plurals: sv })
+i18n.loadLocaleData("en", { plurals: en });
+i18n.loadLocaleData("sv", { plurals: sv });
 
 export default function Page({ Component, pageProps }) {
-  const { locale } = useRouter()
+  const { locale } = useRouter();
 
   useEffect(() => {
     async function load(locale) {
-      const { messages } = await import(`../locale/${locale}/messages.po`)
+      const { messages } = await import(`../locale/${locale}/messages.po`);
 
-      i18n.load(locale, messages)
-      i18n.activate(locale)
+      i18n.load(locale, messages);
+      i18n.activate(locale);
     }
 
-    load(locale)
-  }, [locale])
+    load(locale);
+  }, [locale]);
 
   return (
     <I18nProvider i18n={i18n}>
@@ -30,5 +30,5 @@ export default function Page({ Component, pageProps }) {
         <Component {...pageProps} />
       </div>
     </I18nProvider>
-  )
+  );
 }
diff --git a/examples/with-lingui/pages/index.js b/examples/with-lingui/pages/index.js
index ee332e249f..e6fb180a3c 100644
--- a/examples/with-lingui/pages/index.js
+++ b/examples/with-lingui/pages/index.js
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import { Trans } from '@lingui/macro'
+import Link from "next/link";
+import { Trans } from "@lingui/macro";
 
 const Index = () => (
   <div>
@@ -9,6 +9,6 @@ const Index = () => (
     </Link>
     <br />
   </div>
-)
+);
 
-export default Index
+export default Index;
diff --git a/examples/with-lingui/pages/two.js b/examples/with-lingui/pages/two.js
index d01b78ca5f..69e6fb32a6 100644
--- a/examples/with-lingui/pages/two.js
+++ b/examples/with-lingui/pages/two.js
@@ -1,14 +1,14 @@
-import { Trans } from '@lingui/macro'
-import Link from 'next/link'
+import { Trans } from "@lingui/macro";
+import Link from "next/link";
 
 const Two = () => (
   <div>
-    <Trans>Page two.</Trans>{' '}
+    <Trans>Page two.</Trans>{" "}
     <Link href="/">
       <Trans>Back home</Trans>
     </Link>
     <br />
   </div>
-)
+);
 
-export default Two
+export default Two;
diff --git a/examples/with-magic/components/form.js b/examples/with-magic/components/form.js
index 112cae74af..c157de3b3d 100644
--- a/examples/with-magic/components/form.js
+++ b/examples/with-magic/components/form.js
@@ -51,6 +51,6 @@ const Form = ({ errorMessage, onSubmit }) => (
       }
     `}</style>
   </form>
-)
+);
 
-export default Form
+export default Form;
diff --git a/examples/with-magic/components/header.js b/examples/with-magic/components/header.js
index 746ad5d791..597b82589b 100644
--- a/examples/with-magic/components/header.js
+++ b/examples/with-magic/components/header.js
@@ -1,8 +1,8 @@
-import Link from 'next/link'
-import { useUser } from '../lib/hooks'
+import Link from "next/link";
+import { useUser } from "../lib/hooks";
 
 const Header = () => {
-  const user = useUser()
+  const user = useUser();
 
   return (
     <header>
@@ -61,7 +61,7 @@ const Header = () => {
         }
       `}</style>
     </header>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;
diff --git a/examples/with-magic/components/layout.js b/examples/with-magic/components/layout.js
index 4c6a1962c2..3f92b2abc3 100644
--- a/examples/with-magic/components/layout.js
+++ b/examples/with-magic/components/layout.js
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import Header from './header'
+import Head from "next/head";
+import Header from "./header";
 
 const Layout = (props) => (
   <>
@@ -33,9 +33,9 @@ const Layout = (props) => (
       body {
         margin: 0;
         color: #333;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-          'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
-          'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          "Helvetica Neue", Arial, Noto Sans, sans-serif, "Apple Color Emoji",
+          "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
       }
       .container {
         max-width: 42rem;
@@ -52,6 +52,6 @@ const Layout = (props) => (
       }
     `}</style>
   </>
-)
+);
 
-export default Layout
+export default Layout;
diff --git a/examples/with-magic/lib/auth-cookies.js b/examples/with-magic/lib/auth-cookies.js
index b0fbf5030b..6e829c760c 100644
--- a/examples/with-magic/lib/auth-cookies.js
+++ b/examples/with-magic/lib/auth-cookies.js
@@ -1,41 +1,41 @@
-import { serialize, parse } from 'cookie'
+import { serialize, parse } from "cookie";
 
-const TOKEN_NAME = 'token'
+const TOKEN_NAME = "token";
 
-export const MAX_AGE = 60 * 60 * 8 // 8 hours
+export const MAX_AGE = 60 * 60 * 8; // 8 hours
 
 export function setTokenCookie(res, token) {
   const cookie = serialize(TOKEN_NAME, token, {
     maxAge: MAX_AGE,
     expires: new Date(Date.now() + MAX_AGE * 1000),
     httpOnly: true,
-    secure: process.env.NODE_ENV === 'production',
-    path: '/',
-    sameSite: 'lax',
-  })
+    secure: process.env.NODE_ENV === "production",
+    path: "/",
+    sameSite: "lax",
+  });
 
-  res.setHeader('Set-Cookie', cookie)
+  res.setHeader("Set-Cookie", cookie);
 }
 
 export function removeTokenCookie(res) {
-  const cookie = serialize(TOKEN_NAME, '', {
+  const cookie = serialize(TOKEN_NAME, "", {
     maxAge: -1,
-    path: '/',
-  })
+    path: "/",
+  });
 
-  res.setHeader('Set-Cookie', cookie)
+  res.setHeader("Set-Cookie", cookie);
 }
 
 export function parseCookies(req) {
   // For API Routes we don't need to parse the cookies.
-  if (req.cookies) return req.cookies
+  if (req.cookies) return req.cookies;
 
   // For pages we do need to parse the cookies.
-  const cookie = req.headers?.cookie
-  return parse(cookie || '')
+  const cookie = req.headers?.cookie;
+  return parse(cookie || "");
 }
 
 export function getTokenCookie(req) {
-  const cookies = parseCookies(req)
-  return cookies[TOKEN_NAME]
+  const cookies = parseCookies(req);
+  return cookies[TOKEN_NAME];
 }
diff --git a/examples/with-magic/lib/auth.js b/examples/with-magic/lib/auth.js
index fe830e95d5..15bcaec77a 100644
--- a/examples/with-magic/lib/auth.js
+++ b/examples/with-magic/lib/auth.js
@@ -1,29 +1,29 @@
-import Iron from '@hapi/iron'
-import { MAX_AGE, setTokenCookie, getTokenCookie } from './auth-cookies'
+import Iron from "@hapi/iron";
+import { MAX_AGE, setTokenCookie, getTokenCookie } from "./auth-cookies";
 
-const TOKEN_SECRET = process.env.TOKEN_SECRET
+const TOKEN_SECRET = process.env.TOKEN_SECRET;
 
 export async function setLoginSession(res, session) {
-  const createdAt = Date.now()
+  const createdAt = Date.now();
   // Create a session object with a max age that we can validate later
-  const obj = { ...session, createdAt, maxAge: MAX_AGE }
-  const token = await Iron.seal(obj, TOKEN_SECRET, Iron.defaults)
+  const obj = { ...session, createdAt, maxAge: MAX_AGE };
+  const token = await Iron.seal(obj, TOKEN_SECRET, Iron.defaults);
 
-  setTokenCookie(res, token)
+  setTokenCookie(res, token);
 }
 
 export async function getLoginSession(req) {
-  const token = getTokenCookie(req)
+  const token = getTokenCookie(req);
 
-  if (!token) return
+  if (!token) return;
 
-  const session = await Iron.unseal(token, TOKEN_SECRET, Iron.defaults)
-  const expiresAt = session.createdAt + session.maxAge * 1000
+  const session = await Iron.unseal(token, TOKEN_SECRET, Iron.defaults);
+  const expiresAt = session.createdAt + session.maxAge * 1000;
 
   // Validate the expiration date of the session
   if (Date.now() > expiresAt) {
-    throw new Error('Session expired')
+    throw new Error("Session expired");
   }
 
-  return session
+  return session;
 }
diff --git a/examples/with-magic/lib/hooks.js b/examples/with-magic/lib/hooks.js
index f3a6885fbb..72a7db9413 100644
--- a/examples/with-magic/lib/hooks.js
+++ b/examples/with-magic/lib/hooks.js
@@ -1,31 +1,31 @@
-import { useEffect } from 'react'
-import Router from 'next/router'
-import useSWR from 'swr'
+import { useEffect } from "react";
+import Router from "next/router";
+import useSWR from "swr";
 
 const fetcher = (url) =>
   fetch(url)
     .then((r) => r.json())
     .then((data) => {
-      return { user: data?.user || null }
-    })
+      return { user: data?.user || null };
+    });
 
 export function useUser({ redirectTo, redirectIfFound } = {}) {
-  const { data, error } = useSWR('/api/user', fetcher)
-  const user = data?.user
-  const finished = Boolean(data)
-  const hasUser = Boolean(user)
+  const { data, error } = useSWR("/api/user", fetcher);
+  const user = data?.user;
+  const finished = Boolean(data);
+  const hasUser = Boolean(user);
 
   useEffect(() => {
-    if (!redirectTo || !finished) return
+    if (!redirectTo || !finished) return;
     if (
       // If redirectTo is set, redirect if the user was not found.
       (redirectTo && !redirectIfFound && !hasUser) ||
       // If redirectIfFound is also set, redirect if the user was found
       (redirectIfFound && hasUser)
     ) {
-      Router.push(redirectTo)
+      Router.push(redirectTo);
     }
-  }, [redirectTo, redirectIfFound, finished, hasUser])
+  }, [redirectTo, redirectIfFound, finished, hasUser]);
 
-  return error ? null : user
+  return error ? null : user;
 }
diff --git a/examples/with-magic/lib/magic.js b/examples/with-magic/lib/magic.js
index f09937d4ec..0facce1f40 100644
--- a/examples/with-magic/lib/magic.js
+++ b/examples/with-magic/lib/magic.js
@@ -1,3 +1,3 @@
-const { Magic } = require('@magic-sdk/admin')
+const { Magic } = require("@magic-sdk/admin");
 
-export const magic = new Magic(process.env.MAGIC_SECRET_KEY)
+export const magic = new Magic(process.env.MAGIC_SECRET_KEY);
diff --git a/examples/with-magic/pages/api/login.js b/examples/with-magic/pages/api/login.js
index ae6997950d..850ef77d19 100644
--- a/examples/with-magic/pages/api/login.js
+++ b/examples/with-magic/pages/api/login.js
@@ -1,16 +1,16 @@
-import { magic } from '../../lib/magic'
-import { setLoginSession } from '../../lib/auth'
+import { magic } from "../../lib/magic";
+import { setLoginSession } from "../../lib/auth";
 
 export default async function login(req, res) {
   try {
-    const didToken = req.headers.authorization.slice(7)
-    const metadata = await magic.users.getMetadataByToken(didToken)
-    const session = { ...metadata }
+    const didToken = req.headers.authorization.slice(7);
+    const metadata = await magic.users.getMetadataByToken(didToken);
+    const session = { ...metadata };
 
-    await setLoginSession(res, session)
+    await setLoginSession(res, session);
 
-    res.status(200).send({ done: true })
+    res.status(200).send({ done: true });
   } catch (error) {
-    res.status(error.status || 500).end(error.message)
+    res.status(error.status || 500).end(error.message);
   }
 }
diff --git a/examples/with-magic/pages/api/logout.js b/examples/with-magic/pages/api/logout.js
index 73444d72b7..089c24d97d 100644
--- a/examples/with-magic/pages/api/logout.js
+++ b/examples/with-magic/pages/api/logout.js
@@ -1,19 +1,19 @@
-import { magic } from '../../lib/magic'
-import { removeTokenCookie } from '../../lib/auth-cookies'
-import { getLoginSession } from '../../lib/auth'
+import { magic } from "../../lib/magic";
+import { removeTokenCookie } from "../../lib/auth-cookies";
+import { getLoginSession } from "../../lib/auth";
 
 export default async function logout(req, res) {
   try {
-    const session = await getLoginSession(req)
+    const session = await getLoginSession(req);
 
     if (session) {
-      await magic.users.logoutByIssuer(session.issuer)
-      removeTokenCookie(res)
+      await magic.users.logoutByIssuer(session.issuer);
+      removeTokenCookie(res);
     }
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
 
-  res.writeHead(302, { Location: '/' })
-  res.end()
+  res.writeHead(302, { Location: "/" });
+  res.end();
 }
diff --git a/examples/with-magic/pages/api/user.js b/examples/with-magic/pages/api/user.js
index 0a69be28ef..c467bd7681 100644
--- a/examples/with-magic/pages/api/user.js
+++ b/examples/with-magic/pages/api/user.js
@@ -1,9 +1,9 @@
-import { getLoginSession } from '../../lib/auth'
+import { getLoginSession } from "../../lib/auth";
 
 export default async function user(req, res) {
-  const session = await getLoginSession(req)
+  const session = await getLoginSession(req);
   // After getting the session you may want to fetch for the user instead
   // of sending the session's payload directly, this example doesn't have a DB
   // so it won't matter in this case
-  res.status(200).json({ user: session || null })
+  res.status(200).json({ user: session || null });
 }
diff --git a/examples/with-magic/pages/index.js b/examples/with-magic/pages/index.js
index efa11804d8..9bd9141249 100644
--- a/examples/with-magic/pages/index.js
+++ b/examples/with-magic/pages/index.js
@@ -1,8 +1,8 @@
-import { useUser } from '../lib/hooks'
-import Layout from '../components/layout'
+import { useUser } from "../lib/hooks";
+import Layout from "../components/layout";
 
 const Home = () => {
-  const user = useUser()
+  const user = useUser();
 
   return (
     <Layout>
@@ -23,7 +23,7 @@ const Home = () => {
       </ol>
 
       <p>
-        To learn more about Magic, visit their{' '}
+        To learn more about Magic, visit their{" "}
         <a
           href="https://docs.magic.link/"
           target="_blank"
@@ -51,7 +51,7 @@ const Home = () => {
         }
       `}</style>
     </Layout>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/examples/with-magic/pages/login.js b/examples/with-magic/pages/login.js
index 571db159a7..8b93533b43 100644
--- a/examples/with-magic/pages/login.js
+++ b/examples/with-magic/pages/login.js
@@ -1,46 +1,46 @@
-import { useState } from 'react'
-import Router from 'next/router'
-import { useUser } from '../lib/hooks'
-import Layout from '../components/layout'
-import Form from '../components/form'
+import { useState } from "react";
+import Router from "next/router";
+import { useUser } from "../lib/hooks";
+import Layout from "../components/layout";
+import Form from "../components/form";
 
-import { Magic } from 'magic-sdk'
+import { Magic } from "magic-sdk";
 
 const Login = () => {
-  useUser({ redirectTo: '/', redirectIfFound: true })
+  useUser({ redirectTo: "/", redirectIfFound: true });
 
-  const [errorMsg, setErrorMsg] = useState('')
+  const [errorMsg, setErrorMsg] = useState("");
 
   async function handleSubmit(e) {
-    e.preventDefault()
+    e.preventDefault();
 
-    if (errorMsg) setErrorMsg('')
+    if (errorMsg) setErrorMsg("");
 
     const body = {
       email: e.currentTarget.email.value,
-    }
+    };
 
     try {
-      const magic = new Magic(process.env.NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY)
+      const magic = new Magic(process.env.NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY);
       const didToken = await magic.auth.loginWithMagicLink({
         email: body.email,
-      })
-      const res = await fetch('/api/login', {
-        method: 'POST',
+      });
+      const res = await fetch("/api/login", {
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
-          Authorization: 'Bearer ' + didToken,
+          "Content-Type": "application/json",
+          Authorization: "Bearer " + didToken,
         },
         body: JSON.stringify(body),
-      })
+      });
       if (res.status === 200) {
-        Router.push('/')
+        Router.push("/");
       } else {
-        throw new Error(await res.text())
+        throw new Error(await res.text());
       }
     } catch (error) {
-      console.error('An unexpected error happened occurred:', error)
-      setErrorMsg(error.message)
+      console.error("An unexpected error happened occurred:", error);
+      setErrorMsg(error.message);
     }
   }
 
@@ -59,7 +59,7 @@ const Login = () => {
         }
       `}</style>
     </Layout>
-  )
-}
+  );
+};
 
-export default Login
+export default Login;
diff --git a/examples/with-magic/pages/profile.js b/examples/with-magic/pages/profile.js
index 2903c74278..ad11b4cf02 100644
--- a/examples/with-magic/pages/profile.js
+++ b/examples/with-magic/pages/profile.js
@@ -1,8 +1,8 @@
-import { useUser } from '../lib/hooks'
-import Layout from '../components/layout'
+import { useUser } from "../lib/hooks";
+import Layout from "../components/layout";
 
 const Profile = () => {
-  const user = useUser({ redirectTo: '/login' })
+  const user = useUser({ redirectTo: "/login" });
 
   return (
     <Layout>
@@ -22,7 +22,7 @@ const Profile = () => {
         }
       `}</style>
     </Layout>
-  )
-}
+  );
+};
 
-export default Profile
+export default Profile;
diff --git a/examples/with-mdbreact/pages/_app.js b/examples/with-mdbreact/pages/_app.js
index d19b16ba08..4635dd2aeb 100644
--- a/examples/with-mdbreact/pages/_app.js
+++ b/examples/with-mdbreact/pages/_app.js
@@ -1,10 +1,10 @@
-import '@fortawesome/fontawesome-free/css/all.min.css'
-import 'bootstrap-css-only/css/bootstrap.min.css'
-import 'mdbreact/dist/css/mdb.css'
-import '../styles/globals.css'
+import "@fortawesome/fontawesome-free/css/all.min.css";
+import "bootstrap-css-only/css/bootstrap.min.css";
+import "mdbreact/dist/css/mdb.css";
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-mdbreact/pages/index.js b/examples/with-mdbreact/pages/index.js
index 48e86545c9..05e1a412d5 100644
--- a/examples/with-mdbreact/pages/index.js
+++ b/examples/with-mdbreact/pages/index.js
@@ -1,4 +1,4 @@
-import Head from 'next/head'
+import Head from "next/head";
 import {
   MDBBtn,
   MDBCard,
@@ -9,7 +9,7 @@ import {
   MDBContainer,
   MDBFooter,
   MDBRow,
-} from 'mdbreact'
+} from "mdbreact";
 
 export default function Home() {
   return (
@@ -114,5 +114,5 @@ export default function Home() {
         </MDBFooter>
       </MDBContainer>
     </>
-  )
+  );
 }
diff --git a/examples/with-mdx-remote/README.md b/examples/with-mdx-remote/README.md
index 8e02916724..974cea5b81 100644
--- a/examples/with-mdx-remote/README.md
+++ b/examples/with-mdx-remote/README.md
@@ -39,22 +39,22 @@ When using `next-mdx-remote`, you can pass custom components to the MDX renderer
 For example, here's how you can change `getStaticProps` to pass a list of component names, checking the names in the page render function to see which components need to be dynamically loaded.
 
 ```js
-import dynamic from 'next/dynamic'
-import Test from '../components/test'
+import dynamic from "next/dynamic";
+import Test from "../components/test";
 
-const SomeHeavyComponent = dynamic(() => import('SomeHeavyComponent'))
+const SomeHeavyComponent = dynamic(() => import("SomeHeavyComponent"));
 
-const defaultComponents = { Test }
+const defaultComponents = { Test };
 
 export function SomePage({ mdxSource, componentNames }) {
   const components = {
     ...defaultComponents,
-    SomeHeavyComponent: componentNames.includes('SomeHeavyComponent')
+    SomeHeavyComponent: componentNames.includes("SomeHeavyComponent")
       ? SomeHeavyComponent
       : null,
-  }
+  };
 
-  return <MDXRemote {...mdxSource} components={components} />
+  return <MDXRemote {...mdxSource} components={components} />;
 }
 
 export async function getStaticProps() {
@@ -63,21 +63,21 @@ export async function getStaticProps() {
   ---
 
   Some **mdx** text, with a default component <Test name={title}/> and a Heavy component <SomeHeavyComponent />
-  `
+  `;
 
-  const { content, data } = matter(source)
+  const { content, data } = matter(source);
 
   const componentNames = [
-    /<SomeHeavyComponent/.test(content) ? 'SomeHeavyComponent' : null,
-  ].filter(Boolean)
+    /<SomeHeavyComponent/.test(content) ? "SomeHeavyComponent" : null,
+  ].filter(Boolean);
 
-  const mdxSource = await serialize(content)
+  const mdxSource = await serialize(content);
 
   return {
     props: {
       mdxSource,
       componentNames,
     },
-  }
+  };
 }
 ```
diff --git a/examples/with-mdx-remote/components/CustomLink.js b/examples/with-mdx-remote/components/CustomLink.js
index ac0d2fddd1..e119f276b7 100644
--- a/examples/with-mdx-remote/components/CustomLink.js
+++ b/examples/with-mdx-remote/components/CustomLink.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function CustomLink({ as, href, ...otherProps }) {
   return (
@@ -12,5 +12,5 @@ export default function CustomLink({ as, href, ...otherProps }) {
         }
       `}</style>
     </>
-  )
+  );
 }
diff --git a/examples/with-mdx-remote/components/Layout.js b/examples/with-mdx-remote/components/Layout.js
index 26da6b3a1f..c8a8990615 100644
--- a/examples/with-mdx-remote/components/Layout.js
+++ b/examples/with-mdx-remote/components/Layout.js
@@ -41,9 +41,9 @@ export default function Layout({ children }) {
         }
 
         code {
-          font-family: 'Menlo';
+          font-family: "Menlo";
         }
       `}</style>
     </>
-  )
+  );
 }
diff --git a/examples/with-mdx-remote/components/TestComponent.js b/examples/with-mdx-remote/components/TestComponent.js
index ca4dfc5dc2..98f38a5056 100644
--- a/examples/with-mdx-remote/components/TestComponent.js
+++ b/examples/with-mdx-remote/components/TestComponent.js
@@ -1,4 +1,4 @@
-export default function TestComponent({ name = 'world' }) {
+export default function TestComponent({ name = "world" }) {
   return (
     <>
       <div>Hello, {name}!</div>
@@ -12,5 +12,5 @@ export default function TestComponent({ name = 'world' }) {
         }
       `}</style>
     </>
-  )
+  );
 }
diff --git a/examples/with-mdx-remote/pages/index.js b/examples/with-mdx-remote/pages/index.js
index f98430f6ab..75947328a1 100644
--- a/examples/with-mdx-remote/pages/index.js
+++ b/examples/with-mdx-remote/pages/index.js
@@ -1,23 +1,23 @@
-import fs from 'fs'
-import matter from 'gray-matter'
-import Link from 'next/link'
-import path from 'path'
-import Layout from '../components/Layout'
-import { postFilePaths, POSTS_PATH } from '../utils/mdxUtils'
+import fs from "fs";
+import matter from "gray-matter";
+import Link from "next/link";
+import path from "path";
+import Layout from "../components/Layout";
+import { postFilePaths, POSTS_PATH } from "../utils/mdxUtils";
 
 export default function Index({ posts }) {
   return (
     <Layout>
       <h1>Home Page</h1>
       <p>
-        Click the link below to navigate to a page generated by{' '}
+        Click the link below to navigate to a page generated by{" "}
         <code>next-mdx-remote</code>.
       </p>
       <ul>
         {posts.map((post) => (
           <li key={post.filePath}>
             <Link
-              as={`/posts/${post.filePath.replace(/\.mdx?$/, '')}`}
+              as={`/posts/${post.filePath.replace(/\.mdx?$/, "")}`}
               href={`/posts/[slug]`}
             >
               {post.data.title}
@@ -26,20 +26,20 @@ export default function Index({ posts }) {
         ))}
       </ul>
     </Layout>
-  )
+  );
 }
 
 export function getStaticProps() {
   const posts = postFilePaths.map((filePath) => {
-    const source = fs.readFileSync(path.join(POSTS_PATH, filePath))
-    const { content, data } = matter(source)
+    const source = fs.readFileSync(path.join(POSTS_PATH, filePath));
+    const { content, data } = matter(source);
 
     return {
       content,
       data,
       filePath,
-    }
-  })
+    };
+  });
 
-  return { props: { posts } }
+  return { props: { posts } };
 }
diff --git a/examples/with-mdx-remote/pages/posts/[slug].js b/examples/with-mdx-remote/pages/posts/[slug].js
index b18318d7e9..712e272557 100644
--- a/examples/with-mdx-remote/pages/posts/[slug].js
+++ b/examples/with-mdx-remote/pages/posts/[slug].js
@@ -1,14 +1,14 @@
-import fs from 'fs'
-import matter from 'gray-matter'
-import { MDXRemote } from 'next-mdx-remote'
-import { serialize } from 'next-mdx-remote/serialize'
-import dynamic from 'next/dynamic'
-import Head from 'next/head'
-import Link from 'next/link'
-import path from 'path'
-import CustomLink from '../../components/CustomLink'
-import Layout from '../../components/Layout'
-import { postFilePaths, POSTS_PATH } from '../../utils/mdxUtils'
+import fs from "fs";
+import matter from "gray-matter";
+import { MDXRemote } from "next-mdx-remote";
+import { serialize } from "next-mdx-remote/serialize";
+import dynamic from "next/dynamic";
+import Head from "next/head";
+import Link from "next/link";
+import path from "path";
+import CustomLink from "../../components/CustomLink";
+import Layout from "../../components/Layout";
+import { postFilePaths, POSTS_PATH } from "../../utils/mdxUtils";
 
 // Custom components/renderers to pass to MDX.
 // Since the MDX files aren't loaded by webpack, they have no knowledge of how
@@ -19,9 +19,9 @@ const components = {
   // It also works with dynamically-imported components, which is especially
   // useful for conditionally loading components for certain routes.
   // See the notes in README.md for more details.
-  TestComponent: dynamic(() => import('../../components/TestComponent')),
+  TestComponent: dynamic(() => import("../../components/TestComponent")),
   Head,
-}
+};
 
 export default function PostPage({ source, frontMatter }) {
   return (
@@ -56,14 +56,14 @@ export default function PostPage({ source, frontMatter }) {
         }
       `}</style>
     </Layout>
-  )
+  );
 }
 
 export const getStaticProps = async ({ params }) => {
-  const postFilePath = path.join(POSTS_PATH, `${params.slug}.mdx`)
-  const source = fs.readFileSync(postFilePath)
+  const postFilePath = path.join(POSTS_PATH, `${params.slug}.mdx`);
+  const source = fs.readFileSync(postFilePath);
 
-  const { content, data } = matter(source)
+  const { content, data } = matter(source);
 
   const mdxSource = await serialize(content, {
     // Optionally pass remark/rehype plugins
@@ -72,25 +72,25 @@ export const getStaticProps = async ({ params }) => {
       rehypePlugins: [],
     },
     scope: data,
-  })
+  });
 
   return {
     props: {
       source: mdxSource,
       frontMatter: data,
     },
-  }
-}
+  };
+};
 
 export const getStaticPaths = async () => {
   const paths = postFilePaths
     // Remove file extensions for page paths
-    .map((path) => path.replace(/\.mdx?$/, ''))
+    .map((path) => path.replace(/\.mdx?$/, ""))
     // Map the path into the static paths object required by Next.js
-    .map((slug) => ({ params: { slug } }))
+    .map((slug) => ({ params: { slug } }));
 
   return {
     paths,
     fallback: false,
-  }
-}
+  };
+};
diff --git a/examples/with-mdx-remote/utils/mdxUtils.js b/examples/with-mdx-remote/utils/mdxUtils.js
index 3b884f2bfc..de8db693d6 100644
--- a/examples/with-mdx-remote/utils/mdxUtils.js
+++ b/examples/with-mdx-remote/utils/mdxUtils.js
@@ -1,11 +1,11 @@
-import fs from 'fs'
-import path from 'path'
+import fs from "fs";
+import path from "path";
 
 // POSTS_PATH is useful when you want to get the path to a specific file
-export const POSTS_PATH = path.join(process.cwd(), 'posts')
+export const POSTS_PATH = path.join(process.cwd(), "posts");
 
 // postFilePaths is the list of all mdx files inside the POSTS_PATH directory
 export const postFilePaths = fs
   .readdirSync(POSTS_PATH)
   // Only include md(x) files
-  .filter((path) => /\.mdx?$/.test(path))
+  .filter((path) => /\.mdx?$/.test(path));
diff --git a/examples/with-mdx/components/button.js b/examples/with-mdx/components/button.js
index d520af578b..9b7154a193 100644
--- a/examples/with-mdx/components/button.js
+++ b/examples/with-mdx/components/button.js
@@ -2,15 +2,15 @@ export default function Button({ children }) {
   return (
     <button
       style={{
-        borderRadius: '3px',
-        border: '1px solid black',
-        color: 'black',
-        padding: '0.5em 1em',
-        cursor: 'pointer',
-        fontSize: '1.1em',
+        borderRadius: "3px",
+        border: "1px solid black",
+        color: "black",
+        padding: "0.5em 1em",
+        cursor: "pointer",
+        fontSize: "1.1em",
       }}
     >
       {children}
     </button>
-  )
+  );
 }
diff --git a/examples/with-mdx/next.config.js b/examples/with-mdx/next.config.js
index 14c9fb5f31..d1c3c4a2e0 100644
--- a/examples/with-mdx/next.config.js
+++ b/examples/with-mdx/next.config.js
@@ -1,6 +1,6 @@
-const withMDX = require('@next/mdx')({
+const withMDX = require("@next/mdx")({
   extension: /\.mdx?$/,
-})
+});
 module.exports = withMDX({
-  pageExtensions: ['js', 'jsx', 'mdx'],
-})
+  pageExtensions: ["js", "jsx", "mdx"],
+});
diff --git a/examples/with-mdx/pages/index.mdx b/examples/with-mdx/pages/index.mdx
index ebd48dbef9..e2f8626d50 100644
--- a/examples/with-mdx/pages/index.mdx
+++ b/examples/with-mdx/pages/index.mdx
@@ -1,4 +1,4 @@
-import Button from '../components/button.js'
+import Button from "../components/button.js";
 
 # MDX + Next.js
 
diff --git a/examples/with-mobx-state-tree/components/Clock.tsx b/examples/with-mobx-state-tree/components/Clock.tsx
index 19ea8d84f6..aab58003f8 100644
--- a/examples/with-mobx-state-tree/components/Clock.tsx
+++ b/examples/with-mobx-state-tree/components/Clock.tsx
@@ -1,16 +1,16 @@
-const pad = (n) => (n < 10 ? `0${n}` : n)
+const pad = (n) => (n < 10 ? `0${n}` : n);
 const format = (t) =>
-  `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`
+  `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`;
 
 const Clock = (props) => {
   const divStyle = {
-    backgroundColor: props.light ? '#999' : '#000',
-    color: '#82FA58',
-    display: 'inline-block',
-    font: '50px menlo, monaco, monospace',
-    padding: '15px',
-  }
-  return <div style={divStyle}>{format(new Date(props.lastUpdate))}</div>
-}
+    backgroundColor: props.light ? "#999" : "#000",
+    color: "#82FA58",
+    display: "inline-block",
+    font: "50px menlo, monaco, monospace",
+    padding: "15px",
+  };
+  return <div style={divStyle}>{format(new Date(props.lastUpdate))}</div>;
+};
 
-export default Clock
+export default Clock;
diff --git a/examples/with-mobx-state-tree/components/SampleComponent.tsx b/examples/with-mobx-state-tree/components/SampleComponent.tsx
index 39a92300e1..81a48e543b 100644
--- a/examples/with-mobx-state-tree/components/SampleComponent.tsx
+++ b/examples/with-mobx-state-tree/components/SampleComponent.tsx
@@ -1,24 +1,24 @@
-import React, { useEffect } from 'react'
-import { observer } from 'mobx-react-lite'
-import Link from 'next/link'
-import { IStore, useStore } from '../store'
-import Clock from './Clock'
+import React, { useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { IStore, useStore } from "../store";
+import Clock from "./Clock";
 
 interface IOwnProps {
-  store?: IStore
-  title: string
-  linkTo: string
+  store?: IStore;
+  title: string;
+  linkTo: string;
 }
 
 const SampleComponent: React.FC<IOwnProps> = observer((props) => {
-  const { lastUpdate, light, start, stop } = useStore(props.store)
+  const { lastUpdate, light, start, stop } = useStore(props.store);
 
   useEffect(() => {
-    start()
+    start();
     return () => {
-      stop()
-    }
-  }, [start, stop])
+      stop();
+    };
+  }, [start, stop]);
 
   return (
     <div>
@@ -28,7 +28,7 @@ const SampleComponent: React.FC<IOwnProps> = observer((props) => {
         <Link href={props.linkTo}>Navigate</Link>
       </nav>
     </div>
-  )
-})
+  );
+});
 
-export default SampleComponent
+export default SampleComponent;
diff --git a/examples/with-mobx-state-tree/pages/_app.tsx b/examples/with-mobx-state-tree/pages/_app.tsx
index e75b81d855..88cfef10ac 100644
--- a/examples/with-mobx-state-tree/pages/_app.tsx
+++ b/examples/with-mobx-state-tree/pages/_app.tsx
@@ -1,12 +1,12 @@
-import { Provider } from 'mobx-react'
-import { useStore } from '../store'
+import { Provider } from "mobx-react";
+import { useStore } from "../store";
 
 export default function App({ Component, pageProps }) {
-  const store = useStore(pageProps.initialState)
+  const store = useStore(pageProps.initialState);
 
   return (
     <Provider store={store}>
       <Component {...pageProps} />
     </Provider>
-  )
+  );
 }
diff --git a/examples/with-mobx-state-tree/pages/index.tsx b/examples/with-mobx-state-tree/pages/index.tsx
index 00b3a426d7..970ee77ea6 100644
--- a/examples/with-mobx-state-tree/pages/index.tsx
+++ b/examples/with-mobx-state-tree/pages/index.tsx
@@ -1,5 +1,5 @@
-import SampleComponent from '../components/SampleComponent'
+import SampleComponent from "../components/SampleComponent";
 
 export default function Home() {
-  return <SampleComponent title="Index Page" linkTo="/other" />
+  return <SampleComponent title="Index Page" linkTo="/other" />;
 }
diff --git a/examples/with-mobx-state-tree/pages/other.tsx b/examples/with-mobx-state-tree/pages/other.tsx
index 64baaaeedd..f531f3f3c8 100644
--- a/examples/with-mobx-state-tree/pages/other.tsx
+++ b/examples/with-mobx-state-tree/pages/other.tsx
@@ -1,5 +1,5 @@
-import SampleComponent from '../components/SampleComponent'
+import SampleComponent from "../components/SampleComponent";
 
 export default function Other() {
-  return <SampleComponent title={'Other Page'} linkTo="/" />
+  return <SampleComponent title={"Other Page"} linkTo="/" />;
 }
diff --git a/examples/with-mobx-state-tree/pages/ssg.tsx b/examples/with-mobx-state-tree/pages/ssg.tsx
index d26f34ddcf..509962aaaf 100644
--- a/examples/with-mobx-state-tree/pages/ssg.tsx
+++ b/examples/with-mobx-state-tree/pages/ssg.tsx
@@ -1,17 +1,17 @@
-import { getSnapshot } from 'mobx-state-tree'
-import SampleComponent from '../components/SampleComponent'
-import { initializeStore } from '../store'
+import { getSnapshot } from "mobx-state-tree";
+import SampleComponent from "../components/SampleComponent";
+import { initializeStore } from "../store";
 
 export default function Ssg({ initialState }) {
-  return <SampleComponent title={'SSG Page'} linkTo="/" store={initialState} />
+  return <SampleComponent title={"SSG Page"} linkTo="/" store={initialState} />;
 }
 
 // If you build and start the app, the date returned here will have the same
 // value for all requests, as this method gets executed at build time.
 export function getStaticProps() {
-  const store = initializeStore()
+  const store = initializeStore();
 
-  store.update()
+  store.update();
 
-  return { props: { initialState: getSnapshot(store) } }
+  return { props: { initialState: getSnapshot(store) } };
 }
diff --git a/examples/with-mobx-state-tree/pages/ssr.tsx b/examples/with-mobx-state-tree/pages/ssr.tsx
index 3210abab93..0c112af49e 100644
--- a/examples/with-mobx-state-tree/pages/ssr.tsx
+++ b/examples/with-mobx-state-tree/pages/ssr.tsx
@@ -1,18 +1,18 @@
-import { getSnapshot } from 'mobx-state-tree'
-import SampleComponent from '../components/SampleComponent'
-import { initializeStore } from '../store'
+import { getSnapshot } from "mobx-state-tree";
+import SampleComponent from "../components/SampleComponent";
+import { initializeStore } from "../store";
 
 export default function Ssr({ initialState }) {
-  return <SampleComponent title={'SSR Page'} linkTo="/" store={initialState} />
+  return <SampleComponent title={"SSR Page"} linkTo="/" store={initialState} />;
 }
 
 // The date returned here will be different for every request that hits the page,
 // that is because the page becomes a serverless function instead of being statically
 // exported when you use `getServerSideProps` or `getInitialProps`
 export function getServerSideProps() {
-  const store = initializeStore()
+  const store = initializeStore();
 
-  store.update()
+  store.update();
 
-  return { props: { initialState: getSnapshot(store) } }
+  return { props: { initialState: getSnapshot(store) } };
 }
diff --git a/examples/with-mobx-state-tree/store.ts b/examples/with-mobx-state-tree/store.ts
index 878a01b4b7..06e8ae7305 100644
--- a/examples/with-mobx-state-tree/store.ts
+++ b/examples/with-mobx-state-tree/store.ts
@@ -1,13 +1,13 @@
-import { useMemo } from 'react'
+import { useMemo } from "react";
 import {
   applySnapshot,
   Instance,
   SnapshotIn,
   SnapshotOut,
   types,
-} from 'mobx-state-tree'
+} from "mobx-state-tree";
 
-let store: IStore | undefined
+let store: IStore | undefined;
 
 const Store = types
   .model({
@@ -15,47 +15,47 @@ const Store = types
     light: false,
   })
   .actions((self) => {
-    let timer: any
+    let timer: any;
     const start = () => {
       timer = setInterval(() => {
         // mobx-state-tree doesn't allow anonymous callbacks changing data.
         // Pass off to another action instead (need to cast self as any
         // because TypeScript doesn't yet know about the actions we're
         // adding to self here)
-        ;(self as any).update()
-      }, 1000)
-    }
+        (self as any).update();
+      }, 1000);
+    };
     const update = () => {
-      self.lastUpdate = new Date(Date.now())
-      self.light = true
-    }
+      self.lastUpdate = new Date(Date.now());
+      self.light = true;
+    };
     const stop = () => {
-      clearInterval(timer)
-    }
-    return { start, stop, update }
-  })
+      clearInterval(timer);
+    };
+    return { start, stop, update };
+  });
 
-export type IStore = Instance<typeof Store>
-export type IStoreSnapshotIn = SnapshotIn<typeof Store>
-export type IStoreSnapshotOut = SnapshotOut<typeof Store>
+export type IStore = Instance<typeof Store>;
+export type IStoreSnapshotIn = SnapshotIn<typeof Store>;
+export type IStoreSnapshotOut = SnapshotOut<typeof Store>;
 
 export function initializeStore(snapshot = null) {
-  const _store = store ?? Store.create({ lastUpdate: 0 })
+  const _store = store ?? Store.create({ lastUpdate: 0 });
 
   // If your page has Next.js data fetching methods that use a Mobx store, it will
   // get hydrated here, check `pages/ssg.tsx` and `pages/ssr.tsx` for more details
   if (snapshot) {
-    applySnapshot(_store, snapshot)
+    applySnapshot(_store, snapshot);
   }
   // For SSG and SSR always create a new store
-  if (typeof window === 'undefined') return _store
+  if (typeof window === "undefined") return _store;
   // Create the store once in the client
-  if (!store) store = _store
+  if (!store) store = _store;
 
-  return store
+  return store;
 }
 
 export function useStore(initialState: any) {
-  const store = useMemo(() => initializeStore(initialState), [initialState])
-  return store
+  const store = useMemo(() => initializeStore(initialState), [initialState]);
+  return store;
 }
diff --git a/examples/with-mobx/components/Clock.js b/examples/with-mobx/components/Clock.js
index 18a2dd149f..0dc2a6822c 100644
--- a/examples/with-mobx/components/Clock.js
+++ b/examples/with-mobx/components/Clock.js
@@ -1,12 +1,12 @@
-import { observer } from 'mobx-react-lite'
-import { useStore } from './StoreProvider'
+import { observer } from "mobx-react-lite";
+import { useStore } from "./StoreProvider";
 
 const Clock = observer(function Clock(props) {
   // use store from the store context
-  const store = useStore()
+  const store = useStore();
 
   return (
-    <div className={store.light ? 'light' : ''}>
+    <div className={store.light ? "light" : ""}>
       {store.timeString}
       <style jsx>{`
         div {
@@ -22,7 +22,7 @@ const Clock = observer(function Clock(props) {
         }
       `}</style>
     </div>
-  )
-})
+  );
+});
 
-export default Clock
+export default Clock;
diff --git a/examples/with-mobx/components/Page.js b/examples/with-mobx/components/Page.js
index e894bbbc65..114ba6b3b2 100644
--- a/examples/with-mobx/components/Page.js
+++ b/examples/with-mobx/components/Page.js
@@ -1,22 +1,22 @@
-import { observer } from 'mobx-react-lite'
-import Link from 'next/link'
-import { useEffect } from 'react'
-import Clock from './Clock'
-import { useStore } from './StoreProvider'
+import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { useEffect } from "react";
+import Clock from "./Clock";
+import { useStore } from "./StoreProvider";
 
 const Page = observer(function Page(props) {
   // use store from the store context
-  const store = useStore()
+  const store = useStore();
 
   //start the clock when the component is mounted
   useEffect(() => {
-    store.start()
+    store.start();
 
     // stop the clock when the component unmounts
     return () => {
-      store.stop()
-    }
-  }, [store])
+      store.stop();
+    };
+  }, [store]);
 
   return (
     <div>
@@ -26,7 +26,7 @@ const Page = observer(function Page(props) {
         <Link href={props.linkTo}>Navigate</Link>
       </nav>
     </div>
-  )
-})
+  );
+});
 
-export default Page
+export default Page;
diff --git a/examples/with-mobx/components/StoreProvider.js b/examples/with-mobx/components/StoreProvider.js
index 8484b5a3eb..ff92852cd6 100644
--- a/examples/with-mobx/components/StoreProvider.js
+++ b/examples/with-mobx/components/StoreProvider.js
@@ -1,36 +1,38 @@
-import { createContext, useContext } from 'react'
-import { Store } from '../store'
+import { createContext, useContext } from "react";
+import { Store } from "../store";
 
-let store
-export const StoreContext = createContext()
+let store;
+export const StoreContext = createContext();
 
 export function useStore() {
-  const context = useContext(StoreContext)
+  const context = useContext(StoreContext);
   if (context === undefined) {
-    throw new Error('useStore must be used within StoreProvider')
+    throw new Error("useStore must be used within StoreProvider");
   }
 
-  return context
+  return context;
 }
 
 function initializeStore(initialData = null) {
-  const _store = store ?? new Store()
+  const _store = store ?? new Store();
 
   // If your page has Next.js data fetching methods that use a Mobx store, it will
   // get hydrated here, check `pages/ssg.js` and `pages/ssr.js` for more details
   if (initialData) {
-    _store.hydrate(initialData)
+    _store.hydrate(initialData);
   }
   // For SSG and SSR always create a new store
-  if (typeof window === 'undefined') return _store
+  if (typeof window === "undefined") return _store;
   // Create the store once in the client
-  if (!store) store = _store
+  if (!store) store = _store;
 
-  return _store
+  return _store;
 }
 
 export function StoreProvider({ children, initialState: initialData }) {
-  const store = initializeStore(initialData)
+  const store = initializeStore(initialData);
 
-  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
+  return (
+    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
+  );
 }
diff --git a/examples/with-mobx/pages/_app.js b/examples/with-mobx/pages/_app.js
index 7aff31ee3c..cfcd78ee37 100644
--- a/examples/with-mobx/pages/_app.js
+++ b/examples/with-mobx/pages/_app.js
@@ -1,9 +1,9 @@
-import { StoreProvider } from '../components/StoreProvider'
+import { StoreProvider } from "../components/StoreProvider";
 
 export default function App({ Component, pageProps }) {
   return (
     <StoreProvider {...pageProps}>
       <Component {...pageProps} />
     </StoreProvider>
-  )
+  );
 }
diff --git a/examples/with-mobx/pages/index.js b/examples/with-mobx/pages/index.js
index 95c2063569..fac611b983 100644
--- a/examples/with-mobx/pages/index.js
+++ b/examples/with-mobx/pages/index.js
@@ -1,5 +1,5 @@
-import Page from '../components/Page'
+import Page from "../components/Page";
 
 export default function Index() {
-  return <Page title="Index Page" linkTo="/other" />
+  return <Page title="Index Page" linkTo="/other" />;
 }
diff --git a/examples/with-mobx/pages/other.js b/examples/with-mobx/pages/other.js
index 7919d82fa7..1adfb76905 100644
--- a/examples/with-mobx/pages/other.js
+++ b/examples/with-mobx/pages/other.js
@@ -1,5 +1,5 @@
-import Page from '../components/Page'
+import Page from "../components/Page";
 
 export default function Other() {
-  return <Page title="Other Page" linkTo="/" />
+  return <Page title="Other Page" linkTo="/" />;
 }
diff --git a/examples/with-mobx/pages/ssg.js b/examples/with-mobx/pages/ssg.js
index 496dac3e70..d8ebbc9450 100644
--- a/examples/with-mobx/pages/ssg.js
+++ b/examples/with-mobx/pages/ssg.js
@@ -1,11 +1,11 @@
-import Page from '../components/Page'
+import Page from "../components/Page";
 
 export default function SSG() {
-  return <Page title="Index Page" linkTo="/other" />
+  return <Page title="Index Page" linkTo="/other" />;
 }
 
 // If you build and start the app, the date returned here will have the same
 // value for all requests, as this method gets executed at build time.
 export function getStaticProps() {
-  return { props: { initialState: { lastUpdate: Date.now() } } }
+  return { props: { initialState: { lastUpdate: Date.now() } } };
 }
diff --git a/examples/with-mobx/pages/ssr.js b/examples/with-mobx/pages/ssr.js
index f414935aa0..f328e7e9aa 100644
--- a/examples/with-mobx/pages/ssr.js
+++ b/examples/with-mobx/pages/ssr.js
@@ -1,12 +1,12 @@
-import Page from '../components/Page'
+import Page from "../components/Page";
 
 export default function SSR() {
-  return <Page title="Index Page" linkTo="/other" />
+  return <Page title="Index Page" linkTo="/other" />;
 }
 
 // The date returned here will be different for every request that hits the page,
 // that is because the page becomes a serverless function instead of being statically
 // exported when you use `getServerSideProps` or `getInitialProps`
 export function getServerSideProps() {
-  return { props: { initialState: { lastUpdate: Date.now() } } }
+  return { props: { initialState: { lastUpdate: Date.now() } } };
 }
diff --git a/examples/with-mobx/store.js b/examples/with-mobx/store.js
index f21bf6099d..8b3d80efdb 100644
--- a/examples/with-mobx/store.js
+++ b/examples/with-mobx/store.js
@@ -1,11 +1,17 @@
-import { action, observable, computed, runInAction, makeObservable } from 'mobx'
-import { enableStaticRendering } from 'mobx-react-lite'
+import {
+  action,
+  observable,
+  computed,
+  runInAction,
+  makeObservable,
+} from "mobx";
+import { enableStaticRendering } from "mobx-react-lite";
 
-enableStaticRendering(typeof window === 'undefined')
+enableStaticRendering(typeof window === "undefined");
 
 export class Store {
-  lastUpdate = 0
-  light = false
+  lastUpdate = 0;
+  light = false;
 
   constructor() {
     makeObservable(this, {
@@ -14,33 +20,33 @@ export class Store {
       start: action,
       hydrate: action,
       timeString: computed,
-    })
+    });
   }
 
   start = () => {
     this.timer = setInterval(() => {
       runInAction(() => {
-        this.lastUpdate = Date.now()
-        this.light = true
-      })
-    }, 1000)
-  }
+        this.lastUpdate = Date.now();
+        this.light = true;
+      });
+    }, 1000);
+  };
 
   get timeString() {
-    const pad = (n) => (n < 10 ? `0${n}` : n)
+    const pad = (n) => (n < 10 ? `0${n}` : n);
     const format = (t) =>
       `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(
-        t.getUTCSeconds()
-      )}`
-    return format(new Date(this.lastUpdate))
+        t.getUTCSeconds(),
+      )}`;
+    return format(new Date(this.lastUpdate));
   }
 
-  stop = () => clearInterval(this.timer)
+  stop = () => clearInterval(this.timer);
 
   hydrate = (data) => {
-    if (!data) return
+    if (!data) return;
 
-    this.lastUpdate = data.lastUpdate !== null ? data.lastUpdate : Date.now()
-    this.light = !!data.light
-  }
+    this.lastUpdate = data.lastUpdate !== null ? data.lastUpdate : Date.now();
+    this.light = !!data.light;
+  };
 }
diff --git a/examples/with-mocha/.mocharc.yml b/examples/with-mocha/.mocharc.yml
index 8cfc058067..314dcc468e 100644
--- a/examples/with-mocha/.mocharc.yml
+++ b/examples/with-mocha/.mocharc.yml
@@ -1,3 +1,3 @@
 file:
   - mocha.setup.js
-require: '@babel/register'
+require: "@babel/register"
diff --git a/examples/with-mocha/mocha.setup.js b/examples/with-mocha/mocha.setup.js
index 88c8c3b323..0d5e30837f 100644
--- a/examples/with-mocha/mocha.setup.js
+++ b/examples/with-mocha/mocha.setup.js
@@ -1,4 +1,4 @@
-import Enzyme from 'enzyme'
-import Adapter from 'enzyme-adapter-react-16'
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
 
-Enzyme.configure({ adapter: new Adapter() })
+Enzyme.configure({ adapter: new Adapter() });
diff --git a/examples/with-mocha/pages/index.js b/examples/with-mocha/pages/index.js
index e930bb9afe..3f4dbd6026 100644
--- a/examples/with-mocha/pages/index.js
+++ b/examples/with-mocha/pages/index.js
@@ -8,5 +8,5 @@ export default function Home() {
       `}</style>
       <p>Hello World!</p>
     </div>
-  )
+  );
 }
diff --git a/examples/with-mocha/test/index.test.js b/examples/with-mocha/test/index.test.js
index d7359c95b8..33113155af 100644
--- a/examples/with-mocha/test/index.test.js
+++ b/examples/with-mocha/test/index.test.js
@@ -1,14 +1,14 @@
 /* global describe, it */
-import { shallow } from 'enzyme'
-import React from 'react'
-import expect from 'expect.js'
+import { shallow } from "enzyme";
+import React from "react";
+import expect from "expect.js";
 
-import App from '../pages/index.js'
+import App from "../pages/index.js";
 
-describe('With Enzyme', () => {
+describe("With Enzyme", () => {
   it('App shows "Hello world!"', () => {
-    const app = shallow(<App />)
+    const app = shallow(<App />);
 
-    expect(app.find('p').text()).to.equal('Hello World!')
-  })
-})
+    expect(app.find("p").text()).to.equal("Hello World!");
+  });
+});
diff --git a/examples/with-mongodb-mongoose/components/Form.tsx b/examples/with-mongodb-mongoose/components/Form.tsx
index 47cdbf8291..9edd0062cd 100644
--- a/examples/with-mongodb-mongoose/components/Form.tsx
+++ b/examples/with-mongodb-mongoose/components/Form.tsx
@@ -1,37 +1,37 @@
-import { useState } from 'react'
-import { useRouter } from 'next/router'
-import { mutate } from 'swr'
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { mutate } from "swr";
 
 interface FormData {
-  name: string
-  owner_name: string
-  species: string
-  age: number
-  poddy_trained: boolean
-  diet: string[]
-  image_url: string
-  likes: string[]
-  dislikes: string[]
+  name: string;
+  owner_name: string;
+  species: string;
+  age: number;
+  poddy_trained: boolean;
+  diet: string[];
+  image_url: string;
+  likes: string[];
+  dislikes: string[];
 }
 
 interface Error {
-  name?: string
-  owner_name?: string
-  species?: string
-  image_url?: string
+  name?: string;
+  owner_name?: string;
+  species?: string;
+  image_url?: string;
 }
 
 type Props = {
-  formId: string
-  petForm: FormData
-  forNewPet?: boolean
-}
+  formId: string;
+  petForm: FormData;
+  forNewPet?: boolean;
+};
 
 const Form = ({ formId, petForm, forNewPet = true }: Props) => {
-  const router = useRouter()
-  const contentType = 'application/json'
-  const [errors, setErrors] = useState({})
-  const [message, setMessage] = useState('')
+  const router = useRouter();
+  const contentType = "application/json";
+  const [errors, setErrors] = useState({});
+  const [message, setMessage] = useState("");
 
   const [form, setForm] = useState({
     name: petForm.name,
@@ -43,95 +43,95 @@ const Form = ({ formId, petForm, forNewPet = true }: Props) => {
     image_url: petForm.image_url,
     likes: petForm.likes,
     dislikes: petForm.dislikes,
-  })
+  });
 
   /* The PUT method edits an existing entry in the mongodb database. */
   const putData = async (form: FormData) => {
-    const { id } = router.query
+    const { id } = router.query;
 
     try {
       const res = await fetch(`/api/pets/${id}`, {
-        method: 'PUT',
+        method: "PUT",
         headers: {
           Accept: contentType,
-          'Content-Type': contentType,
+          "Content-Type": contentType,
         },
         body: JSON.stringify(form),
-      })
+      });
 
       // Throw error with status code in case Fetch API req failed
       if (!res.ok) {
-        throw new Error(res.status.toString())
+        throw new Error(res.status.toString());
       }
 
-      const { data } = await res.json()
+      const { data } = await res.json();
 
-      mutate(`/api/pets/${id}`, data, false) // Update the local data without a revalidation
-      router.push('/')
+      mutate(`/api/pets/${id}`, data, false); // Update the local data without a revalidation
+      router.push("/");
     } catch (error) {
-      setMessage('Failed to update pet')
+      setMessage("Failed to update pet");
     }
-  }
+  };
 
   /* The POST method adds a new entry in the mongodb database. */
   const postData = async (form: FormData) => {
     try {
-      const res = await fetch('/api/pets', {
-        method: 'POST',
+      const res = await fetch("/api/pets", {
+        method: "POST",
         headers: {
           Accept: contentType,
-          'Content-Type': contentType,
+          "Content-Type": contentType,
         },
         body: JSON.stringify(form),
-      })
+      });
 
       // Throw error with status code in case Fetch API req failed
       if (!res.ok) {
-        throw new Error(res.status.toString())
+        throw new Error(res.status.toString());
       }
 
-      router.push('/')
+      router.push("/");
     } catch (error) {
-      setMessage('Failed to add pet')
+      setMessage("Failed to add pet");
     }
-  }
+  };
 
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
-    const target = e.target
+    const target = e.target;
     const value =
-      target.name === 'poddy_trained'
+      target.name === "poddy_trained"
         ? (target as HTMLInputElement).checked
-        : target.value
-    const name = target.name
+        : target.value;
+    const name = target.name;
 
     setForm({
       ...form,
       [name]: value,
-    })
-  }
+    });
+  };
 
   /* Makes sure pet info is filled for pet name, owner name, species, and image url*/
   const formValidate = () => {
-    let err: Error = {}
-    if (!form.name) err.name = 'Name is required'
-    if (!form.owner_name) err.owner_name = 'Owner is required'
-    if (!form.species) err.species = 'Species is required'
-    if (!form.image_url) err.image_url = 'Image URL is required'
-    return err
-  }
+    let err: Error = {};
+    if (!form.name) err.name = "Name is required";
+    if (!form.owner_name) err.owner_name = "Owner is required";
+    if (!form.species) err.species = "Species is required";
+    if (!form.image_url) err.image_url = "Image URL is required";
+    return err;
+  };
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    const errs = formValidate()
+    e.preventDefault();
+    const errs = formValidate();
 
     if (Object.keys(errs).length === 0) {
-      forNewPet ? postData(form) : putData(form)
+      forNewPet ? postData(form) : putData(form);
     } else {
-      setErrors({ errs })
+      setErrors({ errs });
     }
-  }
+  };
 
   return (
     <>
@@ -226,7 +226,7 @@ const Form = ({ formId, petForm, forNewPet = true }: Props) => {
         ))}
       </div>
     </>
-  )
-}
+  );
+};
 
-export default Form
+export default Form;
diff --git a/examples/with-mongodb-mongoose/css/style.css b/examples/with-mongodb-mongoose/css/style.css
index 28a5d320e2..37969d065d 100644
--- a/examples/with-mongodb-mongoose/css/style.css
+++ b/examples/with-mongodb-mongoose/css/style.css
@@ -1,5 +1,5 @@
 * {
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
   box-sizing: border-box;
 }
 
diff --git a/examples/with-mongodb-mongoose/lib/dbConnect.ts b/examples/with-mongodb-mongoose/lib/dbConnect.ts
index 3be094120f..2e03265f4d 100644
--- a/examples/with-mongodb-mongoose/lib/dbConnect.ts
+++ b/examples/with-mongodb-mongoose/lib/dbConnect.ts
@@ -1,42 +1,42 @@
-import mongoose from 'mongoose'
+import mongoose from "mongoose";
 declare global {
-  var mongoose: any // This must be a `var` and not a `let / const`
+  var mongoose: any; // This must be a `var` and not a `let / const`
 }
 
-const MONGODB_URI = process.env.MONGODB_URI!
+const MONGODB_URI = process.env.MONGODB_URI!;
 
 if (!MONGODB_URI) {
   throw new Error(
-    'Please define the MONGODB_URI environment variable inside .env.local'
-  )
+    "Please define the MONGODB_URI environment variable inside .env.local",
+  );
 }
 
-let cached = global.mongoose
+let cached = global.mongoose;
 
 if (!cached) {
-  cached = global.mongoose = { conn: null, promise: null }
+  cached = global.mongoose = { conn: null, promise: null };
 }
 
 async function dbConnect() {
   if (cached.conn) {
-    return cached.conn
+    return cached.conn;
   }
   if (!cached.promise) {
     const opts = {
       bufferCommands: false,
-    }
+    };
     cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
-      return mongoose
-    })
+      return mongoose;
+    });
   }
   try {
-    cached.conn = await cached.promise
+    cached.conn = await cached.promise;
   } catch (e) {
-    cached.promise = null
-    throw e
+    cached.promise = null;
+    throw e;
   }
 
-  return cached.conn
+  return cached.conn;
 }
 
-export default dbConnect
+export default dbConnect;
diff --git a/examples/with-mongodb-mongoose/models/Pet.ts b/examples/with-mongodb-mongoose/models/Pet.ts
index 681aa8e59b..447df05c68 100644
--- a/examples/with-mongodb-mongoose/models/Pet.ts
+++ b/examples/with-mongodb-mongoose/models/Pet.ts
@@ -1,15 +1,15 @@
-import mongoose from 'mongoose'
+import mongoose from "mongoose";
 
 export interface Pets extends mongoose.Document {
-  name: string
-  owner_name: string
-  species: string
-  age: number
-  poddy_trained: boolean
-  diet: string[]
-  image_url: string
-  likes: string[]
-  dislikes: string[]
+  name: string;
+  owner_name: string;
+  species: string;
+  age: number;
+  poddy_trained: boolean;
+  diet: string[];
+  image_url: string;
+  likes: string[];
+  dislikes: string[];
 }
 
 /* PetSchema will correspond to a collection in your MongoDB database. */
@@ -18,8 +18,8 @@ const PetSchema = new mongoose.Schema<Pets>({
     /* The name of this pet */
 
     type: String,
-    required: [true, 'Please provide a name for this pet.'],
-    maxlength: [60, 'Name cannot be more than 60 characters'],
+    required: [true, "Please provide a name for this pet."],
+    maxlength: [60, "Name cannot be more than 60 characters"],
   },
   owner_name: {
     /* The owner of this pet */
@@ -32,8 +32,8 @@ const PetSchema = new mongoose.Schema<Pets>({
     /* The species of your pet */
 
     type: String,
-    required: [true, 'Please specify the species of your pet.'],
-    maxlength: [40, 'Species specified cannot be more than 40 characters'],
+    required: [true, "Please specify the species of your pet."],
+    maxlength: [40, "Species specified cannot be more than 40 characters"],
   },
   age: {
     /* Pet's age, if applicable */
@@ -53,7 +53,7 @@ const PetSchema = new mongoose.Schema<Pets>({
   image_url: {
     /* Url to pet image */
 
-    required: [true, 'Please provide an image url for this pet.'],
+    required: [true, "Please provide an image url for this pet."],
     type: String,
   },
   likes: {
@@ -66,6 +66,6 @@ const PetSchema = new mongoose.Schema<Pets>({
 
     type: [String],
   },
-})
+});
 
-export default mongoose.models.Pet || mongoose.model<Pets>('Pet', PetSchema)
+export default mongoose.models.Pet || mongoose.model<Pets>("Pet", PetSchema);
diff --git a/examples/with-mongodb-mongoose/pages/[id]/edit.tsx b/examples/with-mongodb-mongoose/pages/[id]/edit.tsx
index 4a649ea3d5..cd8aff2b57 100644
--- a/examples/with-mongodb-mongoose/pages/[id]/edit.tsx
+++ b/examples/with-mongodb-mongoose/pages/[id]/edit.tsx
@@ -1,24 +1,24 @@
-import { useRouter } from 'next/router'
-import useSWR from 'swr'
-import Form from '../../components/Form'
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import Form from "../../components/Form";
 
 const fetcher = (url: string) =>
   fetch(url)
     .then((res) => res.json())
-    .then((json) => json.data)
+    .then((json) => json.data);
 
 const EditPet = () => {
-  const router = useRouter()
-  const { id } = router.query
+  const router = useRouter();
+  const { id } = router.query;
   const {
     data: pet,
     error,
     isLoading,
-  } = useSWR(id ? `/api/pets/${id}` : null, fetcher)
+  } = useSWR(id ? `/api/pets/${id}` : null, fetcher);
 
-  if (error) return <p>Failed to load</p>
-  if (isLoading) return <p>Loading...</p>
-  if (!pet) return null
+  if (error) return <p>Failed to load</p>;
+  if (isLoading) return <p>Loading...</p>;
+  if (!pet) return null;
 
   const petForm = {
     name: pet.name,
@@ -30,9 +30,9 @@ const EditPet = () => {
     image_url: pet.image_url,
     likes: pet.likes,
     dislikes: pet.dislikes,
-  }
+  };
 
-  return <Form formId="edit-pet-form" petForm={petForm} forNewPet={false} />
-}
+  return <Form formId="edit-pet-form" petForm={petForm} forNewPet={false} />;
+};
 
-export default EditPet
+export default EditPet;
diff --git a/examples/with-mongodb-mongoose/pages/[id]/index.tsx b/examples/with-mongodb-mongoose/pages/[id]/index.tsx
index f782dae0c9..14e79dca1c 100644
--- a/examples/with-mongodb-mongoose/pages/[id]/index.tsx
+++ b/examples/with-mongodb-mongoose/pages/[id]/index.tsx
@@ -1,35 +1,35 @@
-import { useState } from 'react'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import dbConnect from '../../lib/dbConnect'
-import Pet, { Pets } from '../../models/Pet'
-import { GetServerSideProps, GetServerSidePropsContext } from 'next'
-import { ParsedUrlQuery } from 'querystring'
+import { useState } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import dbConnect from "../../lib/dbConnect";
+import Pet, { Pets } from "../../models/Pet";
+import { GetServerSideProps, GetServerSidePropsContext } from "next";
+import { ParsedUrlQuery } from "querystring";
 
 interface Params extends ParsedUrlQuery {
-  id: string
+  id: string;
 }
 
 type Props = {
-  pet: Pets
-}
+  pet: Pets;
+};
 
 /* Allows you to view pet card info and delete pet card*/
 const PetPage = ({ pet }: Props) => {
-  const router = useRouter()
-  const [message, setMessage] = useState('')
+  const router = useRouter();
+  const [message, setMessage] = useState("");
   const handleDelete = async () => {
-    const petID = router.query.id
+    const petID = router.query.id;
 
     try {
       await fetch(`/api/pets/${petID}`, {
-        method: 'Delete',
-      })
-      router.push('/')
+        method: "Delete",
+      });
+      router.push("/");
     } catch (error) {
-      setMessage('Failed to delete the pet.')
+      setMessage("Failed to delete the pet.");
     }
-  }
+  };
 
   return (
     <div key={pet._id}>
@@ -70,36 +70,36 @@ const PetPage = ({ pet }: Props) => {
       </div>
       {message && <p>{message}</p>}
     </div>
-  )
-}
+  );
+};
 
 export const getServerSideProps: GetServerSideProps<Props, Params> = async ({
   params,
 }: GetServerSidePropsContext) => {
-  await dbConnect()
+  await dbConnect();
 
   if (!params?.id) {
     return {
       notFound: true,
-    }
+    };
   }
 
-  const pet = await Pet.findById(params.id).lean()
+  const pet = await Pet.findById(params.id).lean();
 
   if (!pet) {
     return {
       notFound: true,
-    }
+    };
   }
 
   /* Ensures all objectIds and nested objectIds are serialized as JSON data */
-  const serializedPet = JSON.parse(JSON.stringify(pet))
+  const serializedPet = JSON.parse(JSON.stringify(pet));
 
   return {
     props: {
       pet: serializedPet,
     },
-  }
-}
+  };
+};
 
-export default PetPage
+export default PetPage;
diff --git a/examples/with-mongodb-mongoose/pages/_app.tsx b/examples/with-mongodb-mongoose/pages/_app.tsx
index 5fe1e62122..0748f45677 100644
--- a/examples/with-mongodb-mongoose/pages/_app.tsx
+++ b/examples/with-mongodb-mongoose/pages/_app.tsx
@@ -1,8 +1,8 @@
-import '../css/style.css'
-import '../css/form.css'
-import Head from 'next/head'
-import Link from 'next/link'
-import type { AppProps } from 'next/app'
+import "../css/style.css";
+import "../css/form.css";
+import Head from "next/head";
+import Link from "next/link";
+import type { AppProps } from "next/app";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -27,7 +27,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         <Component {...pageProps} />
       </div>
     </>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-mongodb-mongoose/pages/_document.tsx b/examples/with-mongodb-mongoose/pages/_document.tsx
index 191b81ba6f..d57463e8e4 100644
--- a/examples/with-mongodb-mongoose/pages/_document.tsx
+++ b/examples/with-mongodb-mongoose/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -14,5 +14,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/with-mongodb-mongoose/pages/api/pets/[id].ts b/examples/with-mongodb-mongoose/pages/api/pets/[id].ts
index 5685f3613f..6d85a5a753 100644
--- a/examples/with-mongodb-mongoose/pages/api/pets/[id].ts
+++ b/examples/with-mongodb-mongoose/pages/api/pets/[id].ts
@@ -1,60 +1,60 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import dbConnect from '../../../lib/dbConnect'
-import Pet from '../../../models/Pet'
+import { NextApiRequest, NextApiResponse } from "next";
+import dbConnect from "../../../lib/dbConnect";
+import Pet from "../../../models/Pet";
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
   const {
     query: { id },
     method,
-  } = req
+  } = req;
 
-  await dbConnect()
+  await dbConnect();
 
   switch (method) {
-    case 'GET' /* Get a model by its ID */:
+    case "GET" /* Get a model by its ID */:
       try {
-        const pet = await Pet.findById(id)
+        const pet = await Pet.findById(id);
         if (!pet) {
-          return res.status(400).json({ success: false })
+          return res.status(400).json({ success: false });
         }
-        res.status(200).json({ success: true, data: pet })
+        res.status(200).json({ success: true, data: pet });
       } catch (error) {
-        res.status(400).json({ success: false })
+        res.status(400).json({ success: false });
       }
-      break
+      break;
 
-    case 'PUT' /* Edit a model by its ID */:
+    case "PUT" /* Edit a model by its ID */:
       try {
         const pet = await Pet.findByIdAndUpdate(id, req.body, {
           new: true,
           runValidators: true,
-        })
+        });
         if (!pet) {
-          return res.status(400).json({ success: false })
+          return res.status(400).json({ success: false });
         }
-        res.status(200).json({ success: true, data: pet })
+        res.status(200).json({ success: true, data: pet });
       } catch (error) {
-        res.status(400).json({ success: false })
+        res.status(400).json({ success: false });
       }
-      break
+      break;
 
-    case 'DELETE' /* Delete a model by its ID */:
+    case "DELETE" /* Delete a model by its ID */:
       try {
-        const deletedPet = await Pet.deleteOne({ _id: id })
+        const deletedPet = await Pet.deleteOne({ _id: id });
         if (!deletedPet) {
-          return res.status(400).json({ success: false })
+          return res.status(400).json({ success: false });
         }
-        res.status(200).json({ success: true, data: {} })
+        res.status(200).json({ success: true, data: {} });
       } catch (error) {
-        res.status(400).json({ success: false })
+        res.status(400).json({ success: false });
       }
-      break
+      break;
 
     default:
-      res.status(400).json({ success: false })
-      break
+      res.status(400).json({ success: false });
+      break;
   }
 }
diff --git a/examples/with-mongodb-mongoose/pages/api/pets/index.ts b/examples/with-mongodb-mongoose/pages/api/pets/index.ts
index cb565735f6..a985b10757 100644
--- a/examples/with-mongodb-mongoose/pages/api/pets/index.ts
+++ b/examples/with-mongodb-mongoose/pages/api/pets/index.ts
@@ -1,36 +1,36 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import dbConnect from '../../../lib/dbConnect'
-import Pet from '../../../models/Pet'
+import { NextApiRequest, NextApiResponse } from "next";
+import dbConnect from "../../../lib/dbConnect";
+import Pet from "../../../models/Pet";
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  const { method } = req
+  const { method } = req;
 
-  await dbConnect()
+  await dbConnect();
 
   switch (method) {
-    case 'GET':
+    case "GET":
       try {
-        const pets = await Pet.find({}) /* find all the data in our database */
-        res.status(200).json({ success: true, data: pets })
+        const pets = await Pet.find({}); /* find all the data in our database */
+        res.status(200).json({ success: true, data: pets });
       } catch (error) {
-        res.status(400).json({ success: false })
+        res.status(400).json({ success: false });
       }
-      break
-    case 'POST':
+      break;
+    case "POST":
       try {
         const pet = await Pet.create(
-          req.body
-        ) /* create a new model in the database */
-        res.status(201).json({ success: true, data: pet })
+          req.body,
+        ); /* create a new model in the database */
+        res.status(201).json({ success: true, data: pet });
       } catch (error) {
-        res.status(400).json({ success: false })
+        res.status(400).json({ success: false });
       }
-      break
+      break;
     default:
-      res.status(400).json({ success: false })
-      break
+      res.status(400).json({ success: false });
+      break;
   }
 }
diff --git a/examples/with-mongodb-mongoose/pages/index.tsx b/examples/with-mongodb-mongoose/pages/index.tsx
index 0208c04a68..ce69514de0 100644
--- a/examples/with-mongodb-mongoose/pages/index.tsx
+++ b/examples/with-mongodb-mongoose/pages/index.tsx
@@ -1,11 +1,11 @@
-import Link from 'next/link'
-import dbConnect from '../lib/dbConnect'
-import Pet, { Pets } from '../models/Pet'
-import { GetServerSideProps } from 'next'
+import Link from "next/link";
+import dbConnect from "../lib/dbConnect";
+import Pet, { Pets } from "../models/Pet";
+import { GetServerSideProps } from "next";
 
 type Props = {
-  pets: Pets[]
-}
+  pets: Pets[];
+};
 
 const Index = ({ pets }: Props) => {
   return (
@@ -38,10 +38,10 @@ const Index = ({ pets }: Props) => {
               </div>
 
               <div className="btn-container">
-                <Link href={{ pathname: '/[id]/edit', query: { id: pet._id } }}>
+                <Link href={{ pathname: "/[id]/edit", query: { id: pet._id } }}>
                   <button className="btn edit">Edit</button>
                 </Link>
-                <Link href={{ pathname: '/[id]', query: { id: pet._id } }}>
+                <Link href={{ pathname: "/[id]", query: { id: pet._id } }}>
                   <button className="btn view">View</button>
                 </Link>
               </div>
@@ -50,23 +50,23 @@ const Index = ({ pets }: Props) => {
         </div>
       ))}
     </>
-  )
-}
+  );
+};
 
 /* Retrieves pet(s) data from mongodb database */
 export const getServerSideProps: GetServerSideProps<Props> = async () => {
-  await dbConnect()
+  await dbConnect();
 
   /* find all the data in our database */
-  const result = await Pet.find({})
+  const result = await Pet.find({});
 
   /* Ensures all objectIds and nested objectIds are serialized as JSON data */
   const pets = result.map((doc) => {
-    const pet = JSON.parse(JSON.stringify(doc))
-    return pet
-  })
+    const pet = JSON.parse(JSON.stringify(doc));
+    return pet;
+  });
 
-  return { props: { pets: pets } }
-}
+  return { props: { pets: pets } };
+};
 
-export default Index
+export default Index;
diff --git a/examples/with-mongodb-mongoose/pages/new.tsx b/examples/with-mongodb-mongoose/pages/new.tsx
index 2d4d735da3..6d8cc30951 100644
--- a/examples/with-mongodb-mongoose/pages/new.tsx
+++ b/examples/with-mongodb-mongoose/pages/new.tsx
@@ -1,19 +1,19 @@
-import Form from '../components/Form'
+import Form from "../components/Form";
 
 const NewPet = () => {
   const petForm = {
-    name: '',
-    owner_name: '',
-    species: '',
+    name: "",
+    owner_name: "",
+    species: "",
     age: 0,
     poddy_trained: false,
     diet: [],
-    image_url: '',
+    image_url: "",
     likes: [],
     dislikes: [],
-  }
+  };
 
-  return <Form formId="add-pet-form" petForm={petForm} />
-}
+  return <Form formId="add-pet-form" petForm={petForm} />;
+};
 
-export default NewPet
+export default NewPet;
diff --git a/examples/with-mongodb/lib/mongodb.ts b/examples/with-mongodb/lib/mongodb.ts
index 2104db1942..7935fd6ed4 100644
--- a/examples/with-mongodb/lib/mongodb.ts
+++ b/examples/with-mongodb/lib/mongodb.ts
@@ -1,33 +1,33 @@
-import { MongoClient } from 'mongodb'
+import { MongoClient } from "mongodb";
 
 if (!process.env.MONGODB_URI) {
-  throw new Error('Invalid/Missing environment variable: "MONGODB_URI"')
+  throw new Error('Invalid/Missing environment variable: "MONGODB_URI"');
 }
 
-const uri = process.env.MONGODB_URI
-const options = {}
+const uri = process.env.MONGODB_URI;
+const options = {};
 
-let client
-let clientPromise: Promise<MongoClient>
+let client;
+let clientPromise: Promise<MongoClient>;
 
-if (process.env.NODE_ENV === 'development') {
+if (process.env.NODE_ENV === "development") {
   // In development mode, use a global variable so that the value
   // is preserved across module reloads caused by HMR (Hot Module Replacement).
   let globalWithMongo = global as typeof globalThis & {
-    _mongoClientPromise?: Promise<MongoClient>
-  }
+    _mongoClientPromise?: Promise<MongoClient>;
+  };
 
   if (!globalWithMongo._mongoClientPromise) {
-    client = new MongoClient(uri, options)
-    globalWithMongo._mongoClientPromise = client.connect()
+    client = new MongoClient(uri, options);
+    globalWithMongo._mongoClientPromise = client.connect();
   }
-  clientPromise = globalWithMongo._mongoClientPromise
+  clientPromise = globalWithMongo._mongoClientPromise;
 } else {
   // In production mode, it's best to not use a global variable.
-  client = new MongoClient(uri, options)
-  clientPromise = client.connect()
+  client = new MongoClient(uri, options);
+  clientPromise = client.connect();
 }
 
 // Export a module-scoped MongoClient promise. By doing this in a
 // separate module, the client can be shared across functions.
-export default clientPromise
+export default clientPromise;
diff --git a/examples/with-mongodb/pages/index.tsx b/examples/with-mongodb/pages/index.tsx
index 3a8420c103..145bf12866 100644
--- a/examples/with-mongodb/pages/index.tsx
+++ b/examples/with-mongodb/pages/index.tsx
@@ -1,16 +1,16 @@
-import Head from 'next/head'
-import clientPromise from '../lib/mongodb'
-import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
+import Head from "next/head";
+import clientPromise from "../lib/mongodb";
+import type { InferGetServerSidePropsType, GetServerSideProps } from "next";
 
 type ConnectionStatus = {
-  isConnected: boolean
-}
+  isConnected: boolean;
+};
 
 export const getServerSideProps: GetServerSideProps<
   ConnectionStatus
 > = async () => {
   try {
-    await clientPromise
+    await clientPromise;
     // `await clientPromise` will use the default database passed in the MONGODB_URI
     // However you can use another database (e.g. myDatabase) by replacing the `await clientPromise` with the following code:
     //
@@ -22,14 +22,14 @@ export const getServerSideProps: GetServerSideProps<
 
     return {
       props: { isConnected: true },
-    }
+    };
   } catch (e) {
-    console.error(e)
+    console.error(e);
     return {
       props: { isConnected: false },
-    }
+    };
   }
-}
+};
 
 export default function Home({
   isConnected,
@@ -50,7 +50,7 @@ export default function Home({
           <h2 className="subtitle">You are connected to MongoDB</h2>
         ) : (
           <h2 className="subtitle">
-            You are NOT connected to MongoDB. Check the <code>README.md</code>{' '}
+            You are NOT connected to MongoDB. Check the <code>README.md</code>{" "}
             for instructions.
           </h2>
         )}
@@ -98,7 +98,7 @@ export default function Home({
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <img src="/vercel.svg" alt="Vercel Logo" className="logo" />
         </a>
       </footer>
@@ -253,5 +253,5 @@ export default function Home({
         }
       `}</style>
     </div>
-  )
+  );
 }
diff --git a/examples/with-mongodb/types/mongodb.d.ts b/examples/with-mongodb/types/mongodb.d.ts
index 440c0b1996..489dc0a695 100644
--- a/examples/with-mongodb/types/mongodb.d.ts
+++ b/examples/with-mongodb/types/mongodb.d.ts
@@ -1,5 +1,5 @@
-import { MongoClient } from 'mongodb'
+import { MongoClient } from "mongodb";
 
 declare global {
-  var _mongoClientPromise: Promise<MongoClient>
+  var _mongoClientPromise: Promise<MongoClient>;
 }
diff --git a/examples/with-mqtt-js/environment.d.ts b/examples/with-mqtt-js/environment.d.ts
index 96efc89f4a..e32803ef13 100644
--- a/examples/with-mqtt-js/environment.d.ts
+++ b/examples/with-mqtt-js/environment.d.ts
@@ -1,8 +1,8 @@
 declare namespace NodeJS {
   export interface ProcessEnv {
-    readonly NEXT_PUBLIC_MQTT_URI: string
-    readonly NEXT_PUBLIC_MQTT_USERNAME: string
-    readonly NEXT_PUBLIC_MQTT_PASSWORD: string
-    readonly NEXT_PUBLIC_MQTT_CLIENTID: string
+    readonly NEXT_PUBLIC_MQTT_URI: string;
+    readonly NEXT_PUBLIC_MQTT_USERNAME: string;
+    readonly NEXT_PUBLIC_MQTT_PASSWORD: string;
+    readonly NEXT_PUBLIC_MQTT_CLIENTID: string;
   }
 }
diff --git a/examples/with-mqtt-js/lib/useMqtt.ts b/examples/with-mqtt-js/lib/useMqtt.ts
index 8e049d4eb6..35ffd78ae0 100644
--- a/examples/with-mqtt-js/lib/useMqtt.ts
+++ b/examples/with-mqtt-js/lib/useMqtt.ts
@@ -1,63 +1,63 @@
-import type { MqttClient, IClientOptions } from 'mqtt'
-import MQTT from 'mqtt'
-import { useEffect, useRef } from 'react'
+import type { MqttClient, IClientOptions } from "mqtt";
+import MQTT from "mqtt";
+import { useEffect, useRef } from "react";
 
 interface useMqttProps {
-  uri: string
-  options?: IClientOptions
-  topicHandlers?: { topic: string; handler: (payload: any) => void }[]
-  onConnectedHandler?: (client: MqttClient) => void
+  uri: string;
+  options?: IClientOptions;
+  topicHandlers?: { topic: string; handler: (payload: any) => void }[];
+  onConnectedHandler?: (client: MqttClient) => void;
 }
 
 function useMqtt({
   uri,
   options = {},
-  topicHandlers = [{ topic: '', handler: ({ topic, payload, packet }) => {} }],
+  topicHandlers = [{ topic: "", handler: ({ topic, payload, packet }) => {} }],
   onConnectedHandler = (client) => {},
 }: useMqttProps) {
-  const clientRef = useRef<MqttClient | null>(null)
+  const clientRef = useRef<MqttClient | null>(null);
 
   useEffect(() => {
-    if (clientRef.current) return
-    if (!topicHandlers || topicHandlers.length === 0) return () => {}
+    if (clientRef.current) return;
+    if (!topicHandlers || topicHandlers.length === 0) return () => {};
 
     try {
       clientRef.current = options
         ? MQTT.connect(uri, options)
-        : MQTT.connect(uri)
+        : MQTT.connect(uri);
     } catch (error) {
-      console.error('error', error)
+      console.error("error", error);
     }
 
-    const client = clientRef.current
+    const client = clientRef.current;
     topicHandlers.forEach((th) => {
-      client?.subscribe(th.topic)
-    })
-    client?.on('message', (topic: string, rawPayload: any, packet: any) => {
-      const th = topicHandlers.find((t) => t.topic === topic)
-      let payload
+      client?.subscribe(th.topic);
+    });
+    client?.on("message", (topic: string, rawPayload: any, packet: any) => {
+      const th = topicHandlers.find((t) => t.topic === topic);
+      let payload;
       try {
-        payload = JSON.parse(rawPayload)
+        payload = JSON.parse(rawPayload);
       } catch {
-        payload = rawPayload
+        payload = rawPayload;
       }
-      if (th) th.handler({ topic, payload, packet })
-    })
+      if (th) th.handler({ topic, payload, packet });
+    });
 
-    client?.on('connect', () => {
-      if (onConnectedHandler) onConnectedHandler(client)
-    })
+    client?.on("connect", () => {
+      if (onConnectedHandler) onConnectedHandler(client);
+    });
 
     return () => {
       if (client) {
         topicHandlers.forEach((th) => {
-          client.unsubscribe(th.topic)
-        })
-        client.end()
+          client.unsubscribe(th.topic);
+        });
+        client.end();
       }
-    }
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, []);
 }
 
-export default useMqtt
+export default useMqtt;
diff --git a/examples/with-mqtt-js/pages/index.tsx b/examples/with-mqtt-js/pages/index.tsx
index a8cae982c1..93b2bf533f 100644
--- a/examples/with-mqtt-js/pages/index.tsx
+++ b/examples/with-mqtt-js/pages/index.tsx
@@ -1,29 +1,32 @@
-import { useState, useRef } from 'react'
-import type { MqttClient } from 'mqtt'
-import useMqtt from '../lib/useMqtt'
+import { useState, useRef } from "react";
+import type { MqttClient } from "mqtt";
+import useMqtt from "../lib/useMqtt";
 
 export default function Home() {
-  const [incommingMessages, setIncommingMessages] = useState<any[]>([])
+  const [incommingMessages, setIncommingMessages] = useState<any[]>([]);
   const addMessage = (message: any) => {
-    setIncommingMessages((incommingMessages) => [...incommingMessages, message])
-  }
+    setIncommingMessages((incommingMessages) => [
+      ...incommingMessages,
+      message,
+    ]);
+  };
   const clearMessages = () => {
-    setIncommingMessages(() => [])
-  }
+    setIncommingMessages(() => []);
+  };
 
   const incommingMessageHandlers = useRef([
     {
-      topic: 'topic1',
+      topic: "topic1",
       handler: (msg: string) => {
-        addMessage(msg)
+        addMessage(msg);
       },
     },
-  ])
+  ]);
 
-  const mqttClientRef = useRef<MqttClient | null>(null)
+  const mqttClientRef = useRef<MqttClient | null>(null);
   const setMqttClient = (client: MqttClient) => {
-    mqttClientRef.current = client
-  }
+    mqttClientRef.current = client;
+  };
   useMqtt({
     uri: process.env.NEXT_PUBLIC_MQTT_URI,
     options: {
@@ -33,16 +36,16 @@ export default function Home() {
     },
     topicHandlers: incommingMessageHandlers.current,
     onConnectedHandler: (client) => setMqttClient(client),
-  })
+  });
 
   const publishMessages = (client: any) => {
     if (!client) {
-      console.log('(publishMessages) Cannot publish, mqttClient: ', client)
-      return
+      console.log("(publishMessages) Cannot publish, mqttClient: ", client);
+      return;
     }
 
-    client.publish('topic1', '1st message from component')
-  }
+    client.publish("topic1", "1st message from component");
+  };
 
   return (
     <div>
@@ -59,5 +62,5 @@ export default function Home() {
       </button>
       <button onClick={() => clearMessages()}>Clear Test Messages</button>
     </div>
-  )
+  );
 }
diff --git a/examples/with-msw/mocks/browser.ts b/examples/with-msw/mocks/browser.ts
index b234fdae48..74df1dbec1 100644
--- a/examples/with-msw/mocks/browser.ts
+++ b/examples/with-msw/mocks/browser.ts
@@ -1,4 +1,4 @@
-import { setupWorker } from 'msw'
-import { handlers } from './handlers'
+import { setupWorker } from "msw";
+import { handlers } from "./handlers";
 
-export const worker = setupWorker(...handlers)
+export const worker = setupWorker(...handlers);
diff --git a/examples/with-msw/mocks/handlers.ts b/examples/with-msw/mocks/handlers.ts
index 16ded8ef10..3e8498a69e 100644
--- a/examples/with-msw/mocks/handlers.ts
+++ b/examples/with-msw/mocks/handlers.ts
@@ -1,26 +1,26 @@
-import { rest } from 'msw'
-import { Book, Review } from './types'
+import { rest } from "msw";
+import { Book, Review } from "./types";
 
 export const handlers = [
-  rest.get('https://my.backend/book', (_req, res, ctx) => {
+  rest.get("https://my.backend/book", (_req, res, ctx) => {
     return res(
       ctx.json<Book>({
-        title: 'Lord of the Rings',
-        imageUrl: '/book-cover.jpg',
+        title: "Lord of the Rings",
+        imageUrl: "/book-cover.jpg",
         description:
-          'The Lord of the Rings is an epic high-fantasy novel written by English author and scholar J. R. R. Tolkien.',
-      })
-    )
+          "The Lord of the Rings is an epic high-fantasy novel written by English author and scholar J. R. R. Tolkien.",
+      }),
+    );
   }),
-  rest.get('/reviews', (_req, res, ctx) => {
+  rest.get("/reviews", (_req, res, ctx) => {
     return res(
       ctx.json<Review[]>([
         {
-          id: '60333292-7ca1-4361-bf38-b6b43b90cb16',
-          author: 'John Maverick',
-          text: 'Lord of The Rings, is with no absolute hesitation, my most favored and adored book by‑far. The trilogy is wonderful‑ and I really consider this a legendary fantasy series. It will always keep you at the edge of your seat‑ and the characters you will grow and fall in love with!',
+          id: "60333292-7ca1-4361-bf38-b6b43b90cb16",
+          author: "John Maverick",
+          text: "Lord of The Rings, is with no absolute hesitation, my most favored and adored book by‑far. The trilogy is wonderful‑ and I really consider this a legendary fantasy series. It will always keep you at the edge of your seat‑ and the characters you will grow and fall in love with!",
         },
-      ])
-    )
+      ]),
+    );
   }),
-]
+];
diff --git a/examples/with-msw/mocks/index.ts b/examples/with-msw/mocks/index.ts
index 78f37eac91..39e266c6e1 100644
--- a/examples/with-msw/mocks/index.ts
+++ b/examples/with-msw/mocks/index.ts
@@ -1,13 +1,13 @@
 async function initMocks() {
-  if (typeof window === 'undefined') {
-    const { server } = await import('./server')
-    server.listen()
+  if (typeof window === "undefined") {
+    const { server } = await import("./server");
+    server.listen();
   } else {
-    const { worker } = await import('./browser')
-    worker.start()
+    const { worker } = await import("./browser");
+    worker.start();
   }
 }
 
-initMocks()
+initMocks();
 
-export {}
+export {};
diff --git a/examples/with-msw/mocks/server.ts b/examples/with-msw/mocks/server.ts
index 86f7d6154a..7b37f2acf2 100644
--- a/examples/with-msw/mocks/server.ts
+++ b/examples/with-msw/mocks/server.ts
@@ -1,4 +1,4 @@
-import { setupServer } from 'msw/node'
-import { handlers } from './handlers'
+import { setupServer } from "msw/node";
+import { handlers } from "./handlers";
 
-export const server = setupServer(...handlers)
+export const server = setupServer(...handlers);
diff --git a/examples/with-msw/mocks/types.ts b/examples/with-msw/mocks/types.ts
index afb1fa5807..2670423b00 100644
--- a/examples/with-msw/mocks/types.ts
+++ b/examples/with-msw/mocks/types.ts
@@ -1,11 +1,11 @@
 export type Book = {
-  title: string
-  description: string
-  imageUrl: string
-}
+  title: string;
+  description: string;
+  imageUrl: string;
+};
 
 export type Review = {
-  id: string
-  author: string
-  text: string
-}
+  id: string;
+  author: string;
+  text: string;
+};
diff --git a/examples/with-msw/pages/_app.tsx b/examples/with-msw/pages/_app.tsx
index 7c0695ea34..754ea1a993 100644
--- a/examples/with-msw/pages/_app.tsx
+++ b/examples/with-msw/pages/_app.tsx
@@ -1,9 +1,9 @@
-import { AppProps } from 'next/app'
+import { AppProps } from "next/app";
 
-if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') {
-  require('../mocks')
+if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") {
+  require("../mocks");
 }
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-msw/pages/index.tsx b/examples/with-msw/pages/index.tsx
index 295d803424..6618db3b39 100644
--- a/examples/with-msw/pages/index.tsx
+++ b/examples/with-msw/pages/index.tsx
@@ -1,19 +1,19 @@
-import { useState } from 'react'
-import { Book, Review } from '../mocks/types'
+import { useState } from "react";
+import { Book, Review } from "../mocks/types";
 
 type Props = {
-  book: Book
-}
+  book: Book;
+};
 
 export default function Home({ book }: Props) {
-  const [reviews, setReviews] = useState<Review[] | null>(null)
+  const [reviews, setReviews] = useState<Review[] | null>(null);
 
   const handleGetReviews = () => {
     // Client-side request are mocked by `mocks/browser.ts`.
-    fetch('/reviews')
+    fetch("/reviews")
       .then((res) => res.json())
-      .then(setReviews)
-  }
+      .then(setReviews);
+  };
 
   return (
     <div>
@@ -32,17 +32,17 @@ export default function Home({ book }: Props) {
         </ul>
       )}
     </div>
-  )
+  );
 }
 
 export async function getServerSideProps() {
   // Server-side requests are mocked by `mocks/server.ts`.
-  const res = await fetch('https://my.backend/book')
-  const book = await res.json()
+  const res = await fetch("https://my.backend/book");
+  const book = await res.json();
 
   return {
     props: {
       book,
     },
-  }
+  };
 }
diff --git a/examples/with-mux-video/components/button.tsx b/examples/with-mux-video/components/button.tsx
index f1349302c2..599521228a 100644
--- a/examples/with-mux-video/components/button.tsx
+++ b/examples/with-mux-video/components/button.tsx
@@ -1,6 +1,6 @@
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  children: React.ReactNode
-}
+  children: React.ReactNode;
+};
 
 export default function Button({ children, ...otherProps }: ButtonProps) {
   return (
@@ -30,5 +30,5 @@ export default function Button({ children, ...otherProps }: ButtonProps) {
         }
       `}</style>
     </>
-  )
+  );
 }
diff --git a/examples/with-mux-video/components/error-message.tsx b/examples/with-mux-video/components/error-message.tsx
index 140de09a21..56aa2f7e89 100644
--- a/examples/with-mux-video/components/error-message.tsx
+++ b/examples/with-mux-video/components/error-message.tsx
@@ -1,11 +1,11 @@
 interface ErrorMessageProps {
-  message?: string
+  message?: string;
 }
 
 export default function ErrorMessage({ message }: ErrorMessageProps) {
   return (
     <>
-      <div className="message">{message || 'Unknown error'}</div>
+      <div className="message">{message || "Unknown error"}</div>
       <style jsx>{`
         .message {
           color: #650303;
@@ -16,5 +16,5 @@ export default function ErrorMessage({ message }: ErrorMessageProps) {
         }
       `}</style>
     </>
-  )
+  );
 }
diff --git a/examples/with-mux-video/components/layout.tsx b/examples/with-mux-video/components/layout.tsx
index 3d3995190a..2b7fb8f3c7 100644
--- a/examples/with-mux-video/components/layout.tsx
+++ b/examples/with-mux-video/components/layout.tsx
@@ -1,22 +1,22 @@
-import Head from 'next/head'
-import { MUX_HOME_PAGE_URL } from '../constants'
+import Head from "next/head";
+import { MUX_HOME_PAGE_URL } from "../constants";
 
 interface LayoutProps {
-  title?: string
-  description?: string
-  metaTitle?: string
-  metaDescription?: string
-  image?: string
-  children: React.ReactNode
-  loadTwitterWidget?: boolean
+  title?: string;
+  description?: string;
+  metaTitle?: string;
+  metaDescription?: string;
+  image?: string;
+  children: React.ReactNode;
+  loadTwitterWidget?: boolean;
 }
 
 export default function Layout({
   title,
   description,
-  metaTitle = 'Mux + Next.js',
+  metaTitle = "Mux + Next.js",
   metaDescription,
-  image = 'https://with-mux-video.vercel.app/mux-nextjs-og-image.png',
+  image = "https://with-mux-video.vercel.app/mux-nextjs-og-image.png",
   children,
   loadTwitterWidget,
 }: LayoutProps) {
@@ -191,5 +191,5 @@ export default function Layout({
         }
       `}</style>
     </div>
-  )
+  );
 }
diff --git a/examples/with-mux-video/components/spinner.tsx b/examples/with-mux-video/components/spinner.tsx
index 59a861a3aa..d7e96c88aa 100644
--- a/examples/with-mux-video/components/spinner.tsx
+++ b/examples/with-mux-video/components/spinner.tsx
@@ -1,9 +1,9 @@
 interface SpinnerProps {
-  size?: Number
-  color?: string
+  size?: Number;
+  color?: string;
 }
 
-export default function Spinner({ size = 6, color = '#999' }: SpinnerProps) {
+export default function Spinner({ size = 6, color = "#999" }: SpinnerProps) {
   return (
     <>
       <div className="spinner" />
@@ -51,5 +51,5 @@ export default function Spinner({ size = 6, color = '#999' }: SpinnerProps) {
         }
       `}</style>
     </>
-  )
+  );
 }
diff --git a/examples/with-mux-video/components/upload-form.tsx b/examples/with-mux-video/components/upload-form.tsx
index e2b95ec21c..0cc6585fe2 100644
--- a/examples/with-mux-video/components/upload-form.tsx
+++ b/examples/with-mux-video/components/upload-form.tsx
@@ -1,86 +1,86 @@
-import { useEffect, useRef, useState } from 'react'
-import Router from 'next/router'
-import * as UpChunk from '@mux/upchunk'
-import useSwr from 'swr'
-import Button from './button'
-import Spinner from './spinner'
-import ErrorMessage from './error-message'
+import { useEffect, useRef, useState } from "react";
+import Router from "next/router";
+import * as UpChunk from "@mux/upchunk";
+import useSwr from "swr";
+import Button from "./button";
+import Spinner from "./spinner";
+import ErrorMessage from "./error-message";
 
 const fetcher = (url: string) => {
-  return fetch(url).then((res) => res.json())
-}
+  return fetch(url).then((res) => res.json());
+};
 
 const UploadForm = () => {
-  const [isUploading, setIsUploading] = useState(false)
-  const [isPreparing, setIsPreparing] = useState(false)
-  const [uploadId, setUploadId] = useState(null)
-  const [progress, setProgress] = useState<Number | null>(null)
-  const [errorMessage, setErrorMessage] = useState('')
-  const inputRef = useRef<HTMLInputElement>(null)
+  const [isUploading, setIsUploading] = useState(false);
+  const [isPreparing, setIsPreparing] = useState(false);
+  const [uploadId, setUploadId] = useState(null);
+  const [progress, setProgress] = useState<Number | null>(null);
+  const [errorMessage, setErrorMessage] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const { data, error } = useSwr(
     () => (isPreparing ? `/api/upload/${uploadId}` : null),
     fetcher,
-    { refreshInterval: 5000 }
-  )
+    { refreshInterval: 5000 },
+  );
 
-  const upload = data && data.upload
+  const upload = data && data.upload;
 
   useEffect(() => {
     if (upload && upload.asset_id) {
       Router.push({
         pathname: `/asset/${upload.asset_id}`,
-      })
+      });
     }
-  }, [upload])
+  }, [upload]);
 
-  if (error) return <ErrorMessage message="Error fetching api" />
-  if (data && data.error) return <ErrorMessage message={data.error} />
+  if (error) return <ErrorMessage message="Error fetching api" />;
+  if (data && data.error) return <ErrorMessage message={data.error} />;
 
   const createUpload = async () => {
     try {
-      return fetch('/api/upload', {
-        method: 'POST',
+      return fetch("/api/upload", {
+        method: "POST",
       })
         .then((res) => res.json())
         .then(({ id, url }) => {
-          setUploadId(id)
-          return url
-        })
+          setUploadId(id);
+          return url;
+        });
     } catch (e) {
-      console.error('Error in createUpload', e)
-      setErrorMessage('Error creating upload')
+      console.error("Error in createUpload", e);
+      setErrorMessage("Error creating upload");
     }
-  }
+  };
 
   const startUpload = () => {
-    setIsUploading(true)
+    setIsUploading(true);
 
-    const files = inputRef.current?.files
+    const files = inputRef.current?.files;
     if (!files) {
-      setErrorMessage('An unexpected issue occurred')
-      return
+      setErrorMessage("An unexpected issue occurred");
+      return;
     }
 
     const upload = UpChunk.createUpload({
       endpoint: createUpload,
       file: files[0],
-    })
+    });
 
-    upload.on('error', (err: any) => {
-      setErrorMessage(err.detail.message)
-    })
+    upload.on("error", (err: any) => {
+      setErrorMessage(err.detail.message);
+    });
 
-    upload.on('progress', (progress: any) => {
-      setProgress(Math.floor(progress.detail))
-    })
+    upload.on("progress", (progress: any) => {
+      setProgress(Math.floor(progress.detail));
+    });
 
-    upload.on('success', () => {
-      setIsPreparing(true)
-    })
-  }
+    upload.on("success", () => {
+      setIsPreparing(true);
+    });
+  };
 
-  if (errorMessage) return <ErrorMessage message={errorMessage} />
+  if (errorMessage) return <ErrorMessage message={errorMessage} />;
 
   return (
     <>
@@ -90,7 +90,7 @@ const UploadForm = () => {
             {isPreparing ? (
               <div>Preparing..</div>
             ) : (
-              <div>Uploading...{progress ? `${progress}%` : ''}</div>
+              <div>Uploading...{progress ? `${progress}%` : ""}</div>
             )}
             <Spinner />
           </>
@@ -109,7 +109,7 @@ const UploadForm = () => {
         }
       `}</style>
     </>
-  )
-}
+  );
+};
 
-export default UploadForm
+export default UploadForm;
diff --git a/examples/with-mux-video/components/upload-page.tsx b/examples/with-mux-video/components/upload-page.tsx
index 105a776c27..4eca20d55d 100644
--- a/examples/with-mux-video/components/upload-page.tsx
+++ b/examples/with-mux-video/components/upload-page.tsx
@@ -1,8 +1,8 @@
-import Layout from './layout'
-import { MUX_HOME_PAGE_URL } from '../constants'
+import Layout from "./layout";
+import { MUX_HOME_PAGE_URL } from "../constants";
 
 interface UploadPageProps {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 export default function UploadPage({ children }: UploadPageProps) {
@@ -20,7 +20,7 @@ export default function UploadPage({ children }: UploadPageProps) {
               rel="noopener noreferrer"
             >
               Mux
-            </a>{' '}
+            </a>{" "}
             provides APIs for developers working with video. This example is
             useful if you want to build:
           </p>
@@ -33,7 +33,7 @@ export default function UploadPage({ children }: UploadPageProps) {
             <li>Video into your custom CMS</li>
           </ul>
           <p>
-            Uploading a video uses the Mux{' '}
+            Uploading a video uses the Mux{" "}
             <a href="https://docs.mux.com/docs/direct-upload">
               direct upload API
             </a>
@@ -41,7 +41,7 @@ export default function UploadPage({ children }: UploadPageProps) {
             and available for playback on a sharable URL.
           </p>
           <p>
-            To learn more,{' '}
+            To learn more,{" "}
             <a
               href="https://github.com/vercel/next.js/tree/canary/examples/with-mux-video"
               target="_blank"
@@ -68,5 +68,5 @@ export default function UploadPage({ children }: UploadPageProps) {
         }
       `}</style>
     </Layout>
-  )
+  );
 }
diff --git a/examples/with-mux-video/constants.ts b/examples/with-mux-video/constants.ts
index 2134c53c2a..38bad2315d 100644
--- a/examples/with-mux-video/constants.ts
+++ b/examples/with-mux-video/constants.ts
@@ -1,2 +1,2 @@
 export const MUX_HOME_PAGE_URL =
-  'https://mux.com?utm_source=create-next-app&utm_medium=with-mux-video&utm_campaign=create-next-app'
+  "https://mux.com?utm_source=create-next-app&utm_medium=with-mux-video&utm_campaign=create-next-app";
diff --git a/examples/with-mux-video/pages/api/asset/[id].ts b/examples/with-mux-video/pages/api/asset/[id].ts
index 014ae2cb1c..3184057e92 100644
--- a/examples/with-mux-video/pages/api/asset/[id].ts
+++ b/examples/with-mux-video/pages/api/asset/[id].ts
@@ -1,17 +1,17 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import Mux from '@mux/mux-node'
-const { Video } = new Mux()
+import type { NextApiRequest, NextApiResponse } from "next";
+import Mux from "@mux/mux-node";
+const { Video } = new Mux();
 
 export default async function assetHandler(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  const { method } = req
+  const { method } = req;
 
   switch (method) {
-    case 'GET':
+    case "GET":
       try {
-        const asset = await Video.Assets.get(req.query.id as string)
+        const asset = await Video.Assets.get(req.query.id as string);
         res.json({
           asset: {
             id: asset.id,
@@ -19,14 +19,14 @@ export default async function assetHandler(
             errors: asset.errors,
             playback_id: asset.playback_ids![0].id,
           },
-        })
+        });
       } catch (e) {
-        console.error('Request error', e)
-        res.status(500).json({ error: 'Error getting upload/asset' })
+        console.error("Request error", e);
+        res.status(500).json({ error: "Error getting upload/asset" });
       }
-      break
+      break;
     default:
-      res.setHeader('Allow', ['GET'])
-      res.status(405).end(`Method ${method} Not Allowed`)
+      res.setHeader("Allow", ["GET"]);
+      res.status(405).end(`Method ${method} Not Allowed`);
   }
 }
diff --git a/examples/with-mux-video/pages/api/upload.ts b/examples/with-mux-video/pages/api/upload.ts
index a79a688a2e..7a8a51fced 100644
--- a/examples/with-mux-video/pages/api/upload.ts
+++ b/examples/with-mux-video/pages/api/upload.ts
@@ -1,31 +1,31 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import Mux from '@mux/mux-node'
-const { Video } = new Mux()
+import type { NextApiRequest, NextApiResponse } from "next";
+import Mux from "@mux/mux-node";
+const { Video } = new Mux();
 
 export default async function uploadHandler(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  const { method } = req
+  const { method } = req;
 
   switch (method) {
-    case 'POST':
+    case "POST":
       try {
         const upload = await Video.Uploads.create({
-          new_asset_settings: { playback_policy: 'public' },
-          cors_origin: '*',
-        })
+          new_asset_settings: { playback_policy: "public" },
+          cors_origin: "*",
+        });
         res.json({
           id: upload.id,
           url: upload.url,
-        })
+        });
       } catch (e) {
-        console.error('Request error', e)
-        res.status(500).json({ error: 'Error creating upload' })
+        console.error("Request error", e);
+        res.status(500).json({ error: "Error creating upload" });
       }
-      break
+      break;
     default:
-      res.setHeader('Allow', ['POST'])
-      res.status(405).end(`Method ${method} Not Allowed`)
+      res.setHeader("Allow", ["POST"]);
+      res.status(405).end(`Method ${method} Not Allowed`);
   }
 }
diff --git a/examples/with-mux-video/pages/api/upload/[id].ts b/examples/with-mux-video/pages/api/upload/[id].ts
index e681a15709..0c848f1215 100644
--- a/examples/with-mux-video/pages/api/upload/[id].ts
+++ b/examples/with-mux-video/pages/api/upload/[id].ts
@@ -1,31 +1,31 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import Mux from '@mux/mux-node'
-const { Video } = new Mux()
+import type { NextApiRequest, NextApiResponse } from "next";
+import Mux from "@mux/mux-node";
+const { Video } = new Mux();
 
 export default async function uploadHandler(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  const { method } = req
+  const { method } = req;
 
   switch (method) {
-    case 'GET':
+    case "GET":
       try {
-        const upload = await Video.Uploads.get(req.query.id as string)
+        const upload = await Video.Uploads.get(req.query.id as string);
         res.json({
           upload: {
             status: upload.status,
             url: upload.url,
             asset_id: upload.asset_id,
           },
-        })
+        });
       } catch (e) {
-        console.error('Request error', e)
-        res.status(500).json({ error: 'Error getting upload/asset' })
+        console.error("Request error", e);
+        res.status(500).json({ error: "Error getting upload/asset" });
       }
-      break
+      break;
     default:
-      res.setHeader('Allow', ['GET'])
-      res.status(405).end(`Method ${method} Not Allowed`)
+      res.setHeader("Allow", ["GET"]);
+      res.status(405).end(`Method ${method} Not Allowed`);
   }
 }
diff --git a/examples/with-mux-video/pages/asset/[id].tsx b/examples/with-mux-video/pages/asset/[id].tsx
index e1b2645c93..cf79a5a271 100644
--- a/examples/with-mux-video/pages/asset/[id].tsx
+++ b/examples/with-mux-video/pages/asset/[id].tsx
@@ -1,45 +1,45 @@
-import { useEffect } from 'react'
-import Router, { useRouter } from 'next/router'
-import Link from 'next/link'
-import useSwr from 'swr'
-import Spinner from '../../components/spinner'
-import ErrorMessage from '../../components/error-message'
-import UploadPage from '../../components/upload-page'
+import { useEffect } from "react";
+import Router, { useRouter } from "next/router";
+import Link from "next/link";
+import useSwr from "swr";
+import Spinner from "../../components/spinner";
+import ErrorMessage from "../../components/error-message";
+import UploadPage from "../../components/upload-page";
 
 const fetcher = (url: string) => {
-  return fetch(url).then((res) => res.json())
-}
+  return fetch(url).then((res) => res.json());
+};
 
 export default function Asset() {
-  const router = useRouter()
+  const router = useRouter();
 
   const { data, error } = useSwr(
     () => (router.query.id ? `/api/asset/${router.query.id}` : null),
     fetcher,
-    { refreshInterval: 5000 }
-  )
+    { refreshInterval: 5000 },
+  );
 
-  const asset = data && data.asset
+  const asset = data && data.asset;
 
   useEffect(() => {
-    if (asset && asset.playback_id && asset.status === 'ready') {
-      Router.push(`/v/${asset.playback_id}`)
+    if (asset && asset.playback_id && asset.status === "ready") {
+      Router.push(`/v/${asset.playback_id}`);
     }
-  }, [asset])
+  }, [asset]);
 
-  let errorMessage: string = ''
+  let errorMessage: string = "";
 
   if (error) {
-    errorMessage = 'Error fetching api'
+    errorMessage = "Error fetching api";
   }
 
   if (data && data.error) {
-    errorMessage = data.error
+    errorMessage = data.error;
   }
 
-  if (asset && asset.status === 'errored') {
-    const message = asset.errors && asset.errors.messages[0]
-    errorMessage = `Error creating this asset: ${message}`
+  if (asset && asset.status === "errored") {
+    const message = asset.errors && asset.errors.messages[0];
+    errorMessage = `Error creating this asset: ${message}`;
   }
 
   return (
@@ -58,5 +58,5 @@ export default function Asset() {
         </>
       )}
     </UploadPage>
-  )
+  );
 }
diff --git a/examples/with-mux-video/pages/index.tsx b/examples/with-mux-video/pages/index.tsx
index 87ecbfc0cc..d75871f13f 100644
--- a/examples/with-mux-video/pages/index.tsx
+++ b/examples/with-mux-video/pages/index.tsx
@@ -1,10 +1,10 @@
-import UploadForm from '../components/upload-form'
-import UploadPage from '../components/upload-page'
+import UploadForm from "../components/upload-form";
+import UploadPage from "../components/upload-page";
 
 export default function Home() {
   return (
     <UploadPage>
       <UploadForm />
     </UploadPage>
-  )
+  );
 }
diff --git a/examples/with-mux-video/pages/v/[id].tsx b/examples/with-mux-video/pages/v/[id].tsx
index 9c3c5de1d1..39b3ea5b6f 100644
--- a/examples/with-mux-video/pages/v/[id].tsx
+++ b/examples/with-mux-video/pages/v/[id].tsx
@@ -2,35 +2,35 @@ import type {
   InferGetStaticPropsType,
   GetStaticProps,
   GetStaticPaths,
-} from 'next'
-import MuxPlayer from '@mux/mux-player-react'
-import Link from 'next/link'
-import Layout from '../../components/layout'
-import Spinner from '../../components/spinner'
-import { MUX_HOME_PAGE_URL } from '../../constants'
-import { useRouter } from 'next/router'
+} from "next";
+import MuxPlayer from "@mux/mux-player-react";
+import Link from "next/link";
+import Layout from "../../components/layout";
+import Spinner from "../../components/spinner";
+import { MUX_HOME_PAGE_URL } from "../../constants";
+import { useRouter } from "next/router";
 
 type Params = {
-  id?: string
-}
+  id?: string;
+};
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
-  const { id: playbackId } = params as Params
-  const poster = `https://image.mux.com/${playbackId}/thumbnail.png`
+  const { id: playbackId } = params as Params;
+  const poster = `https://image.mux.com/${playbackId}/thumbnail.png`;
 
-  return { props: { playbackId, poster } }
-}
+  return { props: { playbackId, poster } };
+};
 
 export const getStaticPaths: GetStaticPaths = () => {
   return {
     paths: [],
     fallback: true,
-  }
-}
+  };
+};
 
 type CodeProps = {
-  children: React.ReactNode
-}
+  children: React.ReactNode;
+};
 
 const Code = ({ children }: CodeProps) => (
   <>
@@ -44,20 +44,20 @@ const Code = ({ children }: CodeProps) => (
       }
     `}</style>
   </>
-)
+);
 
 export default function Playback({
   playbackId,
   poster,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  const router = useRouter()
+  const router = useRouter();
 
   if (router.isFallback) {
     return (
       <Layout>
         <Spinner />
       </Layout>
-    )
+    );
   }
 
   return (
@@ -68,31 +68,31 @@ export default function Playback({
     >
       <div className="flash-message">This video is ready for playback</div>
       <MuxPlayer
-        style={{ width: '100%' }}
+        style={{ width: "100%" }}
         playbackId={playbackId}
-        metadata={{ player_name: 'with-mux-video' }}
+        metadata={{ player_name: "with-mux-video" }}
       />
       <p>
-        Go{' '}
+        Go{" "}
         <Link href="/" legacyBehavior>
           <a>back home</a>
-        </Link>{' '}
+        </Link>{" "}
         to upload another video.
       </p>
       <div className="about-playback">
         <p>
-          This video was uploaded and processed by{' '}
+          This video was uploaded and processed by{" "}
           <a href={MUX_HOME_PAGE_URL} target="_blank" rel="noopener noreferrer">
             Mux
           </a>
-          . This page was pre-rendered with{' '}
+          . This page was pre-rendered with{" "}
           <a
             href="https://nextjs.org/"
             target="_blank"
             rel="noopener noreferrer"
           >
             Next.js
-          </a>{' '}
+          </a>{" "}
           using <Code>`getStaticPaths`</Code> and <Code>`getStaticProps`</Code>.
         </p>
         <p>
@@ -112,7 +112,7 @@ export default function Playback({
           </a>
         </div>
         <p>
-          To learn more,{' '}
+          To learn more,{" "}
           <a
             href="https://github.com/vercel/next.js/tree/canary/examples/with-mux-video"
             target="_blank"
@@ -140,5 +140,5 @@ export default function Playback({
         }
       `}</style>
     </Layout>
-  )
+  );
 }
diff --git a/examples/with-mysql/components/Product.js b/examples/with-mysql/components/Product.js
index 16f32b3839..a2ec03a73d 100644
--- a/examples/with-mysql/components/Product.js
+++ b/examples/with-mysql/components/Product.js
@@ -1,7 +1,7 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Product({ product }) {
-  const { name, description, price, image, category } = product
+  const { name, description, price, image, category } = product;
 
   return (
     <div
@@ -27,5 +27,5 @@ export default function Product({ product }) {
         </span>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/with-mysql/lib/prisma.js b/examples/with-mysql/lib/prisma.js
index aa94609887..cc91a65908 100644
--- a/examples/with-mysql/lib/prisma.js
+++ b/examples/with-mysql/lib/prisma.js
@@ -1,14 +1,14 @@
-import { PrismaClient } from '@prisma/client'
+import { PrismaClient } from "@prisma/client";
 
-let prisma
+let prisma;
 
-if (process.env.NODE_ENV === 'production') {
-  prisma = new PrismaClient()
+if (process.env.NODE_ENV === "production") {
+  prisma = new PrismaClient();
 } else {
   if (!global.prisma) {
-    global.prisma = new PrismaClient()
+    global.prisma = new PrismaClient();
   }
-  prisma = global.prisma
+  prisma = global.prisma;
 }
 
-export default prisma
+export default prisma;
diff --git a/examples/with-mysql/next.config.js b/examples/with-mysql/next.config.js
index 8b61df4e50..3dd7ef1519 100644
--- a/examples/with-mysql/next.config.js
+++ b/examples/with-mysql/next.config.js
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
-}
+};
diff --git a/examples/with-mysql/pages/_app.js b/examples/with-mysql/pages/_app.js
index 70a3fbbda0..3844f96512 100644
--- a/examples/with-mysql/pages/_app.js
+++ b/examples/with-mysql/pages/_app.js
@@ -1,5 +1,5 @@
-import '../styles/globals.css'
+import "../styles/globals.css";
 
 export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-mysql/pages/api/products.js b/examples/with-mysql/pages/api/products.js
index 1f5c0012d9..b68acdd5c1 100644
--- a/examples/with-mysql/pages/api/products.js
+++ b/examples/with-mysql/pages/api/products.js
@@ -1,16 +1,16 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import prisma from './../../lib/prisma.js'
+import prisma from "./../../lib/prisma.js";
 
 export default async function handler(req, res) {
-  if (req.method === 'GET') {
+  if (req.method === "GET") {
     try {
-      const data = await prisma.product.findMany({})
-      return res.status(200).json({ data })
+      const data = await prisma.product.findMany({});
+      return res.status(200).json({ data });
     } catch (err) {
-      console.error(err)
-      return res.status(500).json({ msg: 'Something went wrong' })
+      console.error(err);
+      return res.status(500).json({ msg: "Something went wrong" });
     }
   } else {
-    return res.status(405).json({ msg: 'Method not allowed' })
+    return res.status(405).json({ msg: "Method not allowed" });
   }
 }
diff --git a/examples/with-mysql/pages/index.js b/examples/with-mysql/pages/index.js
index b0f15f7898..5ab0b204af 100644
--- a/examples/with-mysql/pages/index.js
+++ b/examples/with-mysql/pages/index.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Product from '../components/Product'
-import prisma from '../lib/prisma'
+import Head from "next/head";
+import Product from "../components/Product";
+import prisma from "../lib/prisma";
 
 export default function Home({ products }) {
   return (
@@ -25,7 +25,7 @@ export default function Home({ products }) {
 
       <footer></footer>
     </div>
-  )
+  );
 }
 
 export async function getStaticProps(context) {
@@ -33,14 +33,14 @@ export async function getStaticProps(context) {
     include: {
       category: true,
     },
-  })
+  });
 
   //convert decimal value to string to pass through as json
   const products = data.map((product) => ({
     ...product,
     price: product.price.toString(),
-  }))
+  }));
   return {
     props: { products },
-  }
+  };
 }
diff --git a/examples/with-mysql/postcss.config.js b/examples/with-mysql/postcss.config.js
index 33ad091d26..12a703d900 100644
--- a/examples/with-mysql/postcss.config.js
+++ b/examples/with-mysql/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/with-mysql/prisma/data.js b/examples/with-mysql/prisma/data.js
index ce11c7a817..85c040ec95 100644
--- a/examples/with-mysql/prisma/data.js
+++ b/examples/with-mysql/prisma/data.js
@@ -1,52 +1,52 @@
-const { Prisma } = require('@prisma/client')
+const { Prisma } = require("@prisma/client");
 
 const categories = [
   {
-    name: 'Hats',
-    description: 'Things you can wear on your head',
+    name: "Hats",
+    description: "Things you can wear on your head",
   },
   {
-    name: 'Socks',
-    description: 'Things you can wear on your feet',
+    name: "Socks",
+    description: "Things you can wear on your feet",
   },
   {
-    name: 'Shirts',
-    description: 'Things you wear on the top half of your body',
+    name: "Shirts",
+    description: "Things you wear on the top half of your body",
   },
-]
+];
 
 const products = [
   {
-    name: 'Cool helmet.',
-    description: 'A nice helmet to wear on your head',
+    name: "Cool helmet.",
+    description: "A nice helmet to wear on your head",
     price: new Prisma.Decimal(19.95),
-    image: '/images/helmet.jpg',
+    image: "/images/helmet.jpg",
     category_id: 1,
   },
   {
-    name: 'Grey T-Shirt',
-    description: 'A nice shirt that you can wear on your body',
+    name: "Grey T-Shirt",
+    description: "A nice shirt that you can wear on your body",
     price: new Prisma.Decimal(22.95),
-    image: '/images/shirt.jpg',
+    image: "/images/shirt.jpg",
     category_id: 3,
   },
   {
-    name: 'Socks',
-    description: 'Cool socks that you can wear on your feet',
+    name: "Socks",
+    description: "Cool socks that you can wear on your feet",
     price: new Prisma.Decimal(12.95),
-    image: '/images/socks.jpg',
+    image: "/images/socks.jpg",
     category_id: 2,
   },
   {
-    name: 'Sweatshirt',
-    description: 'Cool sweatshirt that you can wear on your body',
+    name: "Sweatshirt",
+    description: "Cool sweatshirt that you can wear on your body",
     price: new Prisma.Decimal(12.95),
-    image: '/images/sweatshirt.jpg',
+    image: "/images/sweatshirt.jpg",
     category_id: 3,
   },
-]
+];
 
 module.exports = {
   products,
   categories,
-}
+};
diff --git a/examples/with-mysql/prisma/seed.js b/examples/with-mysql/prisma/seed.js
index 574f2a3ae6..b943d2d44c 100644
--- a/examples/with-mysql/prisma/seed.js
+++ b/examples/with-mysql/prisma/seed.js
@@ -1,36 +1,36 @@
-const { PrismaClient } = require('@prisma/client')
-const { categories, products } = require('./data.js')
-const prisma = new PrismaClient()
+const { PrismaClient } = require("@prisma/client");
+const { categories, products } = require("./data.js");
+const prisma = new PrismaClient();
 
 const load = async () => {
   try {
-    await prisma.category.deleteMany()
-    console.log('Deleted records in category table')
+    await prisma.category.deleteMany();
+    console.log("Deleted records in category table");
 
-    await prisma.product.deleteMany()
-    console.log('Deleted records in product table')
+    await prisma.product.deleteMany();
+    console.log("Deleted records in product table");
 
-    await prisma.$queryRaw`ALTER TABLE Product AUTO_INCREMENT = 1`
-    console.log('reset product auto increment to 1')
+    await prisma.$queryRaw`ALTER TABLE Product AUTO_INCREMENT = 1`;
+    console.log("reset product auto increment to 1");
 
-    await prisma.$queryRaw`ALTER TABLE Category AUTO_INCREMENT = 1`
-    console.log('reset category auto increment to 1')
+    await prisma.$queryRaw`ALTER TABLE Category AUTO_INCREMENT = 1`;
+    console.log("reset category auto increment to 1");
 
     await prisma.category.createMany({
       data: categories,
-    })
-    console.log('Added category data')
+    });
+    console.log("Added category data");
 
     await prisma.product.createMany({
       data: products,
-    })
-    console.log('Added product data')
+    });
+    console.log("Added product data");
   } catch (e) {
-    console.error(e)
-    process.exit(1)
+    console.error(e);
+    process.exit(1);
   } finally {
-    await prisma.$disconnect()
+    await prisma.$disconnect();
   }
-}
+};
 
-load()
+load();
diff --git a/examples/with-mysql/tailwind.config.js b/examples/with-mysql/tailwind.config.js
index 6aa9dd3191..48429970a2 100644
--- a/examples/with-mysql/tailwind.config.js
+++ b/examples/with-mysql/tailwind.config.js
@@ -1,11 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
   },
   plugins: [],
-}
+};
diff --git a/examples/with-neo4j/components/footer.js b/examples/with-neo4j/components/footer.js
index 99be8c7f1c..901b7e8f14 100644
--- a/examples/with-neo4j/components/footer.js
+++ b/examples/with-neo4j/components/footer.js
@@ -33,5 +33,5 @@ export default function Footer() {
         `}
       </style>
     </footer>
-  )
+  );
 }
diff --git a/examples/with-neo4j/components/header.js b/examples/with-neo4j/components/header.js
index 145c93b79e..ab047825cd 100644
--- a/examples/with-neo4j/components/header.js
+++ b/examples/with-neo4j/components/header.js
@@ -31,5 +31,5 @@ export default function Header({ title }) {
         }
       `}</style>
     </header>
-  )
+  );
 }
diff --git a/examples/with-neo4j/lib/fetcher.js b/examples/with-neo4j/lib/fetcher.js
index 7675f2c2f8..e696ed98f3 100644
--- a/examples/with-neo4j/lib/fetcher.js
+++ b/examples/with-neo4j/lib/fetcher.js
@@ -1,4 +1,4 @@
 export default async function fetcher(...args) {
-  const res = await fetch(...args)
-  return res.json()
+  const res = await fetch(...args);
+  return res.json();
 }
diff --git a/examples/with-neo4j/pages/_app.js b/examples/with-neo4j/pages/_app.js
index 0d42a193a6..6eedfe6ff2 100644
--- a/examples/with-neo4j/pages/_app.js
+++ b/examples/with-neo4j/pages/_app.js
@@ -1,4 +1,4 @@
-import globalStyles from '../styles/global'
+import globalStyles from "../styles/global";
 
 export default function MyApp({ Component, pageProps }) {
   return (
@@ -8,5 +8,5 @@ export default function MyApp({ Component, pageProps }) {
         {globalStyles}
       </style>
     </>
-  )
+  );
 }
diff --git a/examples/with-neo4j/pages/actor/[name].js b/examples/with-neo4j/pages/actor/[name].js
index 230fd915a6..0659c2098d 100644
--- a/examples/with-neo4j/pages/actor/[name].js
+++ b/examples/with-neo4j/pages/actor/[name].js
@@ -1,19 +1,19 @@
-import Head from 'next/head'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import useSWR from 'swr'
-import fetcher from '../../lib/fetcher'
-import Header from '../../components/header'
-import Footer from '../../components/footer'
+import Head from "next/head";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import fetcher from "../../lib/fetcher";
+import Header from "../../components/header";
+import Footer from "../../components/footer";
 
 export default function Actor() {
-  const router = useRouter()
-  const { name } = router.query
-  const { data, error, isLoading } = useSWR(`/api/actors/${name}`, fetcher)
+  const router = useRouter();
+  const { name } = router.query;
+  const { data, error, isLoading } = useSWR(`/api/actors/${name}`, fetcher);
 
-  if (error) return <div>failed to load</div>
-  if (isLoading) return <div>loading...</div>
-  if (!data) return null
+  if (error) return <div>failed to load</div>;
+  if (isLoading) return <div>loading...</div>;
+  if (!data) return null;
 
   return (
     <div className="container">
@@ -97,5 +97,5 @@ export default function Actor() {
         `}
       </style>
     </div>
-  )
+  );
 }
diff --git a/examples/with-neo4j/pages/api/actors/[name].js b/examples/with-neo4j/pages/api/actors/[name].js
index e1fda7db27..8e073a51f5 100644
--- a/examples/with-neo4j/pages/api/actors/[name].js
+++ b/examples/with-neo4j/pages/api/actors/[name].js
@@ -1,17 +1,17 @@
-import getDriver from '../../../util/neo4j'
+import getDriver from "../../../util/neo4j";
 
-const driver = getDriver()
-const session = driver.session()
+const driver = getDriver();
+const session = driver.session();
 
 export default async function handler(req, res) {
   const {
     query: { name },
     method,
-  } = req
-  const actorName = decodeURIComponent(name)
+  } = req;
+  const actorName = decodeURIComponent(name);
 
   switch (method) {
-    case 'GET':
+    case "GET":
       try {
         const actorTxResultPromise = session.readTransaction(
           async (transaction) => {
@@ -20,21 +20,23 @@ export default async function handler(req, res) {
               RETURN actor {.*,
                 movies: [ (actor)-[:ACTED_IN]->(m) | m.title ]
               } as actor
-            `
+            `;
 
-            const actorTxResponse = await transaction.run(cypher, { actorName })
-            const [actor] = actorTxResponse.records.map((r) => r.get('actor'))
-            return actor
-          }
-        )
-        const actor = await actorTxResultPromise
-        res.status(200).json({ success: true, actor })
+            const actorTxResponse = await transaction.run(cypher, {
+              actorName,
+            });
+            const [actor] = actorTxResponse.records.map((r) => r.get("actor"));
+            return actor;
+          },
+        );
+        const actor = await actorTxResultPromise;
+        res.status(200).json({ success: true, actor });
       } catch (error) {
-        res.status(400).json({ success: false })
+        res.status(400).json({ success: false });
       }
-      break
+      break;
     default:
-      res.status(400).json({ success: false })
-      break
+      res.status(400).json({ success: false });
+      break;
   }
 }
diff --git a/examples/with-neo4j/pages/api/movies/[title].js b/examples/with-neo4j/pages/api/movies/[title].js
index 77551dc14d..feb9ee4a9f 100644
--- a/examples/with-neo4j/pages/api/movies/[title].js
+++ b/examples/with-neo4j/pages/api/movies/[title].js
@@ -1,17 +1,17 @@
-import getDriver from '../../../util/neo4j'
+import getDriver from "../../../util/neo4j";
 
-const driver = getDriver()
-const session = driver.session()
+const driver = getDriver();
+const session = driver.session();
 
 export default async function handler(req, res) {
   const {
     query: { title },
     method,
-  } = req
-  const movieTitle = decodeURIComponent(title)
+  } = req;
+  const movieTitle = decodeURIComponent(title);
 
   switch (method) {
-    case 'GET':
+    case "GET":
       try {
         const movieTxResultPromise = session.readTransaction(
           async (transaction) => {
@@ -21,23 +21,23 @@ export default async function handler(req, res) {
                 actors: [ (actor)-[:ACTED_IN]->(movie) | actor.name ],
                 directed: [ (director)-[:DIRECTED]->(movie) | director.name ]
               } as movie
-            `
+            `;
 
             const movieTxResponse = await transaction.run(cypher, {
               movieTitle,
-            })
-            const [movie] = movieTxResponse.records.map((r) => r.get('movie'))
-            return movie
-          }
-        )
-        const movie = await movieTxResultPromise
-        res.status(200).json({ success: true, movie })
+            });
+            const [movie] = movieTxResponse.records.map((r) => r.get("movie"));
+            return movie;
+          },
+        );
+        const movie = await movieTxResultPromise;
+        res.status(200).json({ success: true, movie });
       } catch (error) {
-        res.status(400).json({ success: false })
+        res.status(400).json({ success: false });
       }
-      break
+      break;
     default:
-      res.status(400).json({ success: false })
-      break
+      res.status(400).json({ success: false });
+      break;
   }
 }
diff --git a/examples/with-neo4j/pages/api/movies/index.js b/examples/with-neo4j/pages/api/movies/index.js
index 4223894f15..0a3bad0874 100644
--- a/examples/with-neo4j/pages/api/movies/index.js
+++ b/examples/with-neo4j/pages/api/movies/index.js
@@ -1,13 +1,13 @@
-import getDriver from '../../../util/neo4j'
+import getDriver from "../../../util/neo4j";
 
-const driver = getDriver()
-const session = driver.session()
+const driver = getDriver();
+const session = driver.session();
 
 export default async function handler(req, res) {
-  const { method } = req
+  const { method } = req;
 
   switch (method) {
-    case 'GET':
+    case "GET":
       try {
         const moviesTxResultPromise = session.readTransaction(
           async (transaction) => {
@@ -18,21 +18,21 @@ export default async function handler(req, res) {
                 directed: [ (movie)<-[:DIRECTED]-(director) | director.name ]
               } as movie
               ORDER BY movie.title ASC
-            `
+            `;
 
-            const moviesTxResponse = await transaction.run(cypher)
-            const movies = moviesTxResponse.records.map((r) => r.get('movie'))
-            return movies
-          }
-        )
-        const movies = await moviesTxResultPromise
-        res.status(200).json({ success: true, movies })
+            const moviesTxResponse = await transaction.run(cypher);
+            const movies = moviesTxResponse.records.map((r) => r.get("movie"));
+            return movies;
+          },
+        );
+        const movies = await moviesTxResultPromise;
+        res.status(200).json({ success: true, movies });
       } catch (error) {
-        res.status(400).json({ success: false })
+        res.status(400).json({ success: false });
       }
-      break
+      break;
     default:
-      res.status(400).json({ success: false })
-      break
+      res.status(400).json({ success: false });
+      break;
   }
 }
diff --git a/examples/with-neo4j/pages/index.js b/examples/with-neo4j/pages/index.js
index f7c103eccf..e2107fad35 100644
--- a/examples/with-neo4j/pages/index.js
+++ b/examples/with-neo4j/pages/index.js
@@ -1,16 +1,16 @@
-import Head from 'next/head'
-import Link from 'next/link'
-import useSWR from 'swr'
-import fetcher from '../lib/fetcher'
-import Header from '../components/header'
-import Footer from '../components/footer'
+import Head from "next/head";
+import Link from "next/link";
+import useSWR from "swr";
+import fetcher from "../lib/fetcher";
+import Header from "../components/header";
+import Footer from "../components/footer";
 
 export default function Home() {
-  const { data, error, isLoading } = useSWR('/api/movies', fetcher)
+  const { data, error, isLoading } = useSWR("/api/movies", fetcher);
 
-  if (error) return <div>failed to load</div>
-  if (isLoading) return <div>loading...</div>
-  if (!data) return null
+  if (error) return <div>failed to load</div>;
+  if (isLoading) return <div>loading...</div>;
+  if (!data) return null;
 
   return (
     <div className="container">
@@ -132,5 +132,5 @@ export default function Home() {
         }
       `}</style>
     </div>
-  )
+  );
 }
diff --git a/examples/with-neo4j/pages/movie/[title].js b/examples/with-neo4j/pages/movie/[title].js
index dc5dc56c19..af0df43fbf 100644
--- a/examples/with-neo4j/pages/movie/[title].js
+++ b/examples/with-neo4j/pages/movie/[title].js
@@ -1,18 +1,18 @@
-import Head from 'next/head'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import useSWR from 'swr'
-import fetcher from '../../lib/fetcher'
-import Header from '../../components/header'
-import Footer from '../../components/footer'
+import Head from "next/head";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import fetcher from "../../lib/fetcher";
+import Header from "../../components/header";
+import Footer from "../../components/footer";
 
 export default function Movie() {
-  const router = useRouter()
-  const { title } = router.query
-  const { data, error } = useSWR(`/api/movies/${title}`, fetcher)
+  const router = useRouter();
+  const { title } = router.query;
+  const { data, error } = useSWR(`/api/movies/${title}`, fetcher);
 
-  if (error) return <div>failed to load</div>
-  if (!data) return <div>loading...</div>
+  if (error) return <div>failed to load</div>;
+  if (!data) return <div>loading...</div>;
 
   return (
     <div className="container">
@@ -101,5 +101,5 @@ export default function Movie() {
         `}
       </style>
     </div>
-  )
+  );
 }
diff --git a/examples/with-neo4j/styles/global.js b/examples/with-neo4j/styles/global.js
index 8121d0c48f..4a80ee8e87 100644
--- a/examples/with-neo4j/styles/global.js
+++ b/examples/with-neo4j/styles/global.js
@@ -1,4 +1,4 @@
-import css from 'styled-jsx/css'
+import css from "styled-jsx/css";
 
 export default css.global`
   html,
@@ -15,4 +15,4 @@ export default css.global`
     color: inherit;
     text-decoration: none;
   }
-`
+`;
diff --git a/examples/with-neo4j/util/neo4j.js b/examples/with-neo4j/util/neo4j.js
index 781f12a411..ee1744b8fb 100644
--- a/examples/with-neo4j/util/neo4j.js
+++ b/examples/with-neo4j/util/neo4j.js
@@ -1,23 +1,23 @@
-import neo4j from 'neo4j-driver'
+import neo4j from "neo4j-driver";
 
-let driver
+let driver;
 
 const defaultOptions = {
   uri: process.env.NEO4J_URI,
   username: process.env.NEO4J_USER,
   password: process.env.NEO4J_PASSWORD,
-}
+};
 
 export default function getDriver() {
-  const { uri, username, password } = defaultOptions
+  const { uri, username, password } = defaultOptions;
   if (!driver) {
     // Note: There is a disparity between Neo4j (Java) Integers and JavaScript integers
     // I have used `disableLosslessIntegers` to remove the need to call `.toNumber()` on each integer value
     // For more info see: https://github.com/neo4j/neo4j-javascript-driver/#numbers-and-the-integer-type
     driver = neo4j.driver(uri, neo4j.auth.basic(username, password), {
       disableLosslessIntegers: true,
-    })
+    });
   }
 
-  return driver
+  return driver;
 }
diff --git a/examples/with-next-page-transitions/components/Loader.js b/examples/with-next-page-transitions/components/Loader.js
index 200a33f145..59cb082817 100644
--- a/examples/with-next-page-transitions/components/Loader.js
+++ b/examples/with-next-page-transitions/components/Loader.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 
 const Loader = () => (
   <div className="loader">
@@ -25,6 +25,6 @@ const Loader = () => (
       }
     `}</style>
   </div>
-)
+);
 
-export default Loader
+export default Loader;
diff --git a/examples/with-next-page-transitions/pages/_app.js b/examples/with-next-page-transitions/pages/_app.js
index 8879b5d220..1ac96aff83 100644
--- a/examples/with-next-page-transitions/pages/_app.js
+++ b/examples/with-next-page-transitions/pages/_app.js
@@ -1,9 +1,9 @@
-import Head from 'next/head'
-import { PageTransition } from 'next-page-transitions'
+import Head from "next/head";
+import { PageTransition } from "next-page-transitions";
 
-import Loader from '../components/Loader'
+import Loader from "../components/Loader";
 
-const TIMEOUT = 400
+const TIMEOUT = 400;
 
 function MyApp({ Component, pageProps }) {
   return (
@@ -52,7 +52,7 @@ function MyApp({ Component, pageProps }) {
         }
       `}</style>
     </>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-next-page-transitions/pages/_document.js b/examples/with-next-page-transitions/pages/_document.js
index 6fc3e03256..573f9fdaaf 100644
--- a/examples/with-next-page-transitions/pages/_document.js
+++ b/examples/with-next-page-transitions/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -21,5 +21,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/with-next-page-transitions/pages/about.js b/examples/with-next-page-transitions/pages/about.js
index f65ef54a28..d37e0ddb34 100644
--- a/examples/with-next-page-transitions/pages/about.js
+++ b/examples/with-next-page-transitions/pages/about.js
@@ -1,22 +1,22 @@
-import { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
-import Link from 'next/link'
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import Link from "next/link";
 
 const About = (props) => {
-  const [loaded, setLoaded] = useState(false)
-  const { pageTransitionReadyToEnter } = props
+  const [loaded, setLoaded] = useState(false);
+  const { pageTransitionReadyToEnter } = props;
 
   useEffect(() => {
     const timeoutId = setTimeout(() => {
-      pageTransitionReadyToEnter()
-      setLoaded(true)
-    }, 2000)
+      pageTransitionReadyToEnter();
+      setLoaded(true);
+    }, 2000);
     return () => {
-      clearTimeout(timeoutId)
-    }
-  }, [pageTransitionReadyToEnter])
+      clearTimeout(timeoutId);
+    };
+  }, [pageTransitionReadyToEnter]);
 
-  if (!loaded) return null
+  if (!loaded) return null;
 
   return (
     <div className="container bg-success page">
@@ -29,17 +29,17 @@ const About = (props) => {
         Go back home
       </Link>
     </div>
-  )
-}
+  );
+};
 
 About.propTypes = {
   pageTransitionReadyToEnter: PropTypes.func,
-}
+};
 
 About.defaultProps = {
   pageTransitionReadyToEnter: () => {},
-}
+};
 
-About.pageTransitionDelayEnter = true
+About.pageTransitionDelayEnter = true;
 
-export default About
+export default About;
diff --git a/examples/with-next-page-transitions/pages/index.js b/examples/with-next-page-transitions/pages/index.js
index 3f05482da5..ca086835df 100644
--- a/examples/with-next-page-transitions/pages/index.js
+++ b/examples/with-next-page-transitions/pages/index.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 const Index = () => (
   <div className="container bg-primary page">
@@ -7,6 +7,6 @@ const Index = () => (
       About us
     </Link>
   </div>
-)
+);
 
-export default Index
+export default Index;
diff --git a/examples/with-next-sass/components/hello-world.js b/examples/with-next-sass/components/hello-world.js
index 49b60bdda4..7c17610497 100644
--- a/examples/with-next-sass/components/hello-world.js
+++ b/examples/with-next-sass/components/hello-world.js
@@ -1,9 +1,9 @@
-import styles from './hello-world.module.scss'
+import styles from "./hello-world.module.scss";
 
 export default function HelloWorld() {
   return (
     <div className={styles.hello}>
       Hello World, I am being styled using SCSS Modules!
     </div>
-  )
+  );
 }
diff --git a/examples/with-next-sass/pages/_app.js b/examples/with-next-sass/pages/_app.js
index 569ae43d20..4b9586692e 100644
--- a/examples/with-next-sass/pages/_app.js
+++ b/examples/with-next-sass/pages/_app.js
@@ -1,7 +1,7 @@
-import '../styles.scss'
+import "../styles.scss";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-next-sass/pages/index.js b/examples/with-next-sass/pages/index.js
index 5d1adb28aa..579aeb8c2f 100644
--- a/examples/with-next-sass/pages/index.js
+++ b/examples/with-next-sass/pages/index.js
@@ -1,9 +1,9 @@
-import HelloWorld from '../components/hello-world'
+import HelloWorld from "../components/hello-world";
 
 export default function Home() {
   return (
     <div className="app">
       <HelloWorld />
     </div>
-  )
+  );
 }
diff --git a/examples/with-next-seo/next-seo.config.js b/examples/with-next-seo/next-seo.config.js
index 6a215ba9b7..231aa3feff 100644
--- a/examples/with-next-seo/next-seo.config.js
+++ b/examples/with-next-seo/next-seo.config.js
@@ -1,12 +1,12 @@
 export default {
   openGraph: {
-    type: 'website',
-    locale: 'en_IE',
-    site_name: 'SiteName',
+    type: "website",
+    locale: "en_IE",
+    site_name: "SiteName",
   },
   twitter: {
-    handle: '@handle',
-    site: '@site',
-    cardType: 'summary_large_image',
+    handle: "@handle",
+    site: "@site",
+    cardType: "summary_large_image",
   },
-}
+};
diff --git a/examples/with-next-seo/pages/_app.js b/examples/with-next-seo/pages/_app.js
index e7be87169c..485ea70c96 100644
--- a/examples/with-next-seo/pages/_app.js
+++ b/examples/with-next-seo/pages/_app.js
@@ -3,9 +3,9 @@
  * that will apply to every page. Full info on how the default works
  * can be found here: https://github.com/garmeeh/next-seo#default-seo-configuration
  */
-import { DefaultSeo } from 'next-seo'
+import { DefaultSeo } from "next-seo";
 
-import SEO from '../next-seo.config'
+import SEO from "../next-seo.config";
 
 export default function MyApp({ Component, pageProps }) {
   return (
@@ -14,5 +14,5 @@ export default function MyApp({ Component, pageProps }) {
       <DefaultSeo {...SEO} />
       <Component {...pageProps} />
     </>
-  )
+  );
 }
diff --git a/examples/with-next-seo/pages/index.js b/examples/with-next-seo/pages/index.js
index cbb1b186b5..17e9a29ac0 100644
--- a/examples/with-next-seo/pages/index.js
+++ b/examples/with-next-seo/pages/index.js
@@ -1,5 +1,5 @@
-import { NextSeo } from 'next-seo'
-import Link from 'next/link'
+import { NextSeo } from "next-seo";
+import Link from "next/link";
 
 export default function Home() {
   return (
@@ -9,24 +9,24 @@ export default function Home() {
         description="This will be the page meta description"
         canonical="https://www.canonicalurl.ie/"
         openGraph={{
-          url: 'https://www.canonicalurl.ie/',
-          title: 'Open Graph Title',
-          description: 'Open Graph Description',
+          url: "https://www.canonicalurl.ie/",
+          title: "Open Graph Title",
+          description: "Open Graph Description",
           images: [
             {
-              url: 'https://www.example.ie/og-image-01.jpg',
+              url: "https://www.example.ie/og-image-01.jpg",
               width: 800,
               height: 600,
-              alt: 'Og Image Alt',
+              alt: "Og Image Alt",
             },
             {
-              url: 'https://www.example.ie/og-image-02.jpg',
+              url: "https://www.example.ie/og-image-02.jpg",
               width: 900,
               height: 800,
-              alt: 'Og Image Alt Second',
+              alt: "Og Image Alt Second",
             },
-            { url: 'https://www.example.ie/og-image-03.jpg' },
-            { url: 'https://www.example.ie/og-image-04.jpg' },
+            { url: "https://www.example.ie/og-image-03.jpg" },
+            { url: "https://www.example.ie/og-image-04.jpg" },
           ],
         }}
       />
@@ -37,5 +37,5 @@ export default function Home() {
         added
       </p>
     </div>
-  )
+  );
 }
diff --git a/examples/with-next-seo/pages/jsonld.js b/examples/with-next-seo/pages/jsonld.js
index 7279dc2959..749708cf43 100644
--- a/examples/with-next-seo/pages/jsonld.js
+++ b/examples/with-next-seo/pages/jsonld.js
@@ -1,4 +1,4 @@
-import { ArticleJsonLd } from 'next-seo'
+import { ArticleJsonLd } from "next-seo";
 
 // See all available JSON-LD here:
 // https://github.com/garmeeh/next-seo#json-ld
@@ -9,9 +9,9 @@ export default function JsonLd() {
         url="https://example.com/article"
         title="Article headline"
         images={[
-          'https://example.com/photos/1x1/photo.jpg',
-          'https://example.com/photos/4x3/photo.jpg',
-          'https://example.com/photos/16x9/photo.jpg',
+          "https://example.com/photos/1x1/photo.jpg",
+          "https://example.com/photos/4x3/photo.jpg",
+          "https://example.com/photos/16x9/photo.jpg",
         ]}
         datePublished="2015-02-05T08:00:00+08:00"
         dateModified="2015-02-05T09:00:00+08:00"
@@ -26,5 +26,5 @@ export default function JsonLd() {
         a script tag of type "application/ld+json".
       </p>
     </div>
-  )
+  );
 }
diff --git a/examples/with-next-sitemap/next-sitemap.config.js b/examples/with-next-sitemap/next-sitemap.config.js
index c127ef9e53..b915247686 100644
--- a/examples/with-next-sitemap/next-sitemap.config.js
+++ b/examples/with-next-sitemap/next-sitemap.config.js
@@ -1,13 +1,13 @@
 /** @type {import('next-sitemap').IConfig} */
 module.exports = {
-  siteUrl: 'https://example.com',
+  siteUrl: "https://example.com",
   generateRobotsTxt: true,
   // optional
   robotsTxtOptions: {
     additionalSitemaps: [
-      'https://example.com/my-custom-sitemap-1.xml',
-      'https://example.com/my-custom-sitemap-2.xml',
-      'https://example.com/my-custom-sitemap-3.xml',
+      "https://example.com/my-custom-sitemap-1.xml",
+      "https://example.com/my-custom-sitemap-2.xml",
+      "https://example.com/my-custom-sitemap-3.xml",
     ],
   },
-}
+};
diff --git a/examples/with-next-sitemap/pages/[dynamic].tsx b/examples/with-next-sitemap/pages/[dynamic].tsx
index ef76099e22..452c449328 100644
--- a/examples/with-next-sitemap/pages/[dynamic].tsx
+++ b/examples/with-next-sitemap/pages/[dynamic].tsx
@@ -1,23 +1,23 @@
-import { GetStaticPaths, GetStaticProps } from 'next'
-import { useRouter } from 'next/router'
+import { GetStaticPaths, GetStaticProps } from "next";
+import { useRouter } from "next/router";
 
 const DynamicPage = () => {
-  const { query } = useRouter()
+  const { query } = useRouter();
   return (
     <>
       <h1>Dynamic Page</h1>
       <h2>Query: {query.dynamic}</h2>
     </>
-  )
-}
+  );
+};
 
 export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
-      dynamic: 'hello',
+      dynamic: "hello",
     },
-  }
-}
+  };
+};
 
 export const getStaticPaths: GetStaticPaths = async () => {
   return {
@@ -27,7 +27,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
       },
     })),
     fallback: false,
-  }
-}
+  };
+};
 
-export default DynamicPage
+export default DynamicPage;
diff --git a/examples/with-next-sitemap/pages/index.tsx b/examples/with-next-sitemap/pages/index.tsx
index 4f7a8b67b4..c4ee640e30 100644
--- a/examples/with-next-sitemap/pages/index.tsx
+++ b/examples/with-next-sitemap/pages/index.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 const IndexPage = () => (
   <>
@@ -31,6 +31,6 @@ const IndexPage = () => (
       </li>
     </ol>
   </>
-)
+);
 
-export default IndexPage
+export default IndexPage;
diff --git a/examples/with-next-translate/app/[lang]/page.js b/examples/with-next-translate/app/[lang]/page.js
index a577ea1741..039b796cd1 100644
--- a/examples/with-next-translate/app/[lang]/page.js
+++ b/examples/with-next-translate/app/[lang]/page.js
@@ -1,14 +1,14 @@
-import Link from 'next/link'
-import Trans from 'next-translate/Trans'
-import useTranslation from 'next-translate/useTranslation'
+import Link from "next/link";
+import Trans from "next-translate/Trans";
+import useTranslation from "next-translate/useTranslation";
 
 export default function Home() {
-  const { t, lang } = useTranslation()
-  const isRTL = lang === 'ar' || lang === 'he'
-  const arrow = isRTL ? String.fromCharCode(8592) : String.fromCharCode(8594)
+  const { t, lang } = useTranslation();
+  const isRTL = lang === "ar" || lang === "he";
+  const arrow = isRTL ? String.fromCharCode(8592) : String.fromCharCode(8594);
 
   return (
-    <main dir={isRTL ? 'rtl' : 'ltr'}>
+    <main dir={isRTL ? "rtl" : "ltr"}>
       <Trans
         i18nKey="home:title"
         components={[
@@ -18,56 +18,56 @@ export default function Home() {
       />
 
       <p className="description">
-        {t('home:description')} <code>_pages/index.js</code>
+        {t("home:description")} <code>_pages/index.js</code>
       </p>
 
       <div className="grid">
         <Link href="/en">
           <div className="card">
-            <h3>{t('home:english')}</h3>
+            <h3>{t("home:english")}</h3>
             <p>
-              {t('home:change-to')} {t('home:english')}
+              {t("home:change-to")} {t("home:english")}
             </p>
           </div>
         </Link>
 
         <Link href="/ca">
           <div className="card">
-            <h3>{t('home:catalan')}</h3>
+            <h3>{t("home:catalan")}</h3>
             <p>
-              {t('home:change-to')} {t('home:catalan')}
+              {t("home:change-to")} {t("home:catalan")}
             </p>
           </div>
         </Link>
 
         <Link href="/ar">
           <div className="card">
-            <h3>{t('home:arabic')}</h3>
+            <h3>{t("home:arabic")}</h3>
             <p>
-              {t('home:change-to')} {t('home:arabic')}
+              {t("home:change-to")} {t("home:arabic")}
             </p>
           </div>
         </Link>
 
         <Link href="/he">
           <div className="card">
-            <h3>{t('home:hebrew')}</h3>
+            <h3>{t("home:hebrew")}</h3>
             <p>
-              {t('home:change-to')} {t('home:hebrew')}
+              {t("home:change-to")} {t("home:hebrew")}
             </p>
           </div>
         </Link>
 
         <a href="https://nextjs.org/docs" className="card">
           <h3>Next.{`js ${arrow}`}</h3>
-          <p>{t('home:next-docs')}</p>
+          <p>{t("home:next-docs")}</p>
         </a>
 
         <a href="https://github.com/vinissimus/next-translate" className="card">
           <h3>{`Learn ${arrow}`}</h3>
-          <p>{t('home:plugin-docs')}</p>
+          <p>{t("home:plugin-docs")}</p>
         </a>
       </div>
     </main>
-  )
+  );
 }
diff --git a/examples/with-next-translate/app/layout.js b/examples/with-next-translate/app/layout.js
index 39cce59f49..50048ed6e4 100644
--- a/examples/with-next-translate/app/layout.js
+++ b/examples/with-next-translate/app/layout.js
@@ -1,18 +1,18 @@
-import useTranslation from 'next-translate/useTranslation'
-import './style.css'
+import useTranslation from "next-translate/useTranslation";
+import "./style.css";
 
 export const metadata = {
-  title: 'Next.js',
-}
+  title: "Next.js",
+};
 
 export default function Layout(props) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
 
   return (
     <div className="container">
       {props.children}
       <footer>
-        <span>{t('common:powered')} </span>
+        <span>{t("common:powered")} </span>
         <a href="https://vercel.com" target="_blank" rel="noopener noreferrer">
           ▲ vercel
         </a>
@@ -26,5 +26,5 @@ export default function Layout(props) {
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-next-translate/app/style.css b/examples/with-next-translate/app/style.css
index 683791f5b4..bb1827279f 100644
--- a/examples/with-next-translate/app/style.css
+++ b/examples/with-next-translate/app/style.css
@@ -133,7 +133,7 @@ footer a {
   height: 1em;
 }
 
-[dir='rtl'] p {
+[dir="rtl"] p {
   text-align: right;
 }
 
diff --git a/examples/with-next-translate/next.config.js b/examples/with-next-translate/next.config.js
index 068742643f..6ccbeeff19 100644
--- a/examples/with-next-translate/next.config.js
+++ b/examples/with-next-translate/next.config.js
@@ -1,3 +1,3 @@
-const nextTranslate = require('next-translate-plugin')
+const nextTranslate = require("next-translate-plugin");
 
-module.exports = nextTranslate({})
+module.exports = nextTranslate({});
diff --git a/examples/with-next-ui/common/interface.ts b/examples/with-next-ui/common/interface.ts
index 586bc4976b..b937b19c1c 100644
--- a/examples/with-next-ui/common/interface.ts
+++ b/examples/with-next-ui/common/interface.ts
@@ -1,6 +1,6 @@
 export interface SvgProp {
-  fill?: string
-  size?: number
-  height?: number
-  width?: number
+  fill?: string;
+  size?: number;
+  height?: number;
+  width?: number;
 }
diff --git a/examples/with-next-ui/components/Checkbox.tsx b/examples/with-next-ui/components/Checkbox.tsx
index a81e3a8e70..6ce305aebf 100644
--- a/examples/with-next-ui/components/Checkbox.tsx
+++ b/examples/with-next-ui/components/Checkbox.tsx
@@ -1,4 +1,4 @@
-import { Checkbox } from '@nextui-org/react'
+import { Checkbox } from "@nextui-org/react";
 
 const CustomCheckbox = () => {
   return (
@@ -6,14 +6,14 @@ const CustomCheckbox = () => {
       label="Select cities"
       orientation="horizontal"
       color="secondary"
-      defaultValue={['buenos-aires']}
+      defaultValue={["buenos-aires"]}
     >
       <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
       <Checkbox value="sydney">Sydney</Checkbox>
       <Checkbox value="london">London</Checkbox>
       <Checkbox value="tokyo">Tokyo</Checkbox>
     </Checkbox.Group>
-  )
-}
+  );
+};
 
-export default CustomCheckbox
+export default CustomCheckbox;
diff --git a/examples/with-next-ui/components/Collapse.tsx b/examples/with-next-ui/components/Collapse.tsx
index 6f420347bd..af5df2ae65 100644
--- a/examples/with-next-ui/components/Collapse.tsx
+++ b/examples/with-next-ui/components/Collapse.tsx
@@ -1,4 +1,4 @@
-import { Collapse, Text } from '@nextui-org/react'
+import { Collapse, Text } from "@nextui-org/react";
 
 const CustomCollapse = () => {
   return (
@@ -23,7 +23,7 @@ const CustomCollapse = () => {
         </Text>
       </Collapse>
     </Collapse.Group>
-  )
-}
+  );
+};
 
-export default CustomCollapse
+export default CustomCollapse;
diff --git a/examples/with-next-ui/components/Mail.tsx b/examples/with-next-ui/components/Mail.tsx
index 2bdb10c9ad..6103af3cfa 100644
--- a/examples/with-next-ui/components/Mail.tsx
+++ b/examples/with-next-ui/components/Mail.tsx
@@ -1,4 +1,4 @@
-import { SvgProp } from '../common/interface'
+import { SvgProp } from "../common/interface";
 
 export const Mail = ({ fill, size, height, width, ...props }: SvgProp) => {
   return (
@@ -19,5 +19,5 @@ export const Mail = ({ fill, size, height, width, ...props }: SvgProp) => {
         <path d="M17 9l-3.13 2.5a3.166 3.166 0 01-3.75 0L7 9M19.21 14.77l-3.539 3.54a1.232 1.232 0 00-.3.59l-.19 1.35a.635.635 0 00.76.76l1.35-.19a1.189 1.189 0 00.59-.3l3.54-3.54a1.365 1.365 0 000-2.22 1.361 1.361 0 00-2.211.01zM18.7 15.28a3.185 3.185 0 002.22 2.22" />
       </g>
     </svg>
-  )
-}
+  );
+};
diff --git a/examples/with-next-ui/components/Password.tsx b/examples/with-next-ui/components/Password.tsx
index d0f79199c6..7b575d4b03 100644
--- a/examples/with-next-ui/components/Password.tsx
+++ b/examples/with-next-ui/components/Password.tsx
@@ -1,4 +1,4 @@
-import { SvgProp } from '../common/interface'
+import { SvgProp } from "../common/interface";
 
 export const Password = ({ fill, size, height, width, ...props }: SvgProp) => {
   return (
@@ -13,5 +13,5 @@ export const Password = ({ fill, size, height, width, ...props }: SvgProp) => {
         <path d="M18.75 10.1a12.984 12.984 0 00-1.5-.1H6.75a12.984 12.984 0 00-1.5.1C2.7 10.41 2 11.66 2 15v2c0 4 1 5 5 5h10c4 0 5-1 5-5v-2c0-3.34-.7-4.59-3.25-4.9zM8.71 16.71A1.052 1.052 0 018 17a1 1 0 01-.38-.08 1.032 1.032 0 01-.33-.21A1.052 1.052 0 017 16a1 1 0 01.08-.38 1.155 1.155 0 01.21-.33 1.032 1.032 0 01.33-.21 1 1 0 011.09.21 1.155 1.155 0 01.21.33A1 1 0 019 16a1.052 1.052 0 01-.29.71zm4.21-.33a1.155 1.155 0 01-.21.33A1.052 1.052 0 0112 17a1.033 1.033 0 01-.71-.29 1.155 1.155 0 01-.21-.33A1 1 0 0111 16a1.033 1.033 0 01.29-.71 1.047 1.047 0 011.42 0A1.033 1.033 0 0113 16a1 1 0 01-.08.38zm3.79.33a1.014 1.014 0 01-1.42 0 1.014 1.014 0 010-1.42 1.047 1.047 0 011.42 0c.04.05.08.1.12.16a.556.556 0 01.09.17.636.636 0 01.06.18 1.5 1.5 0 01.02.2 1.052 1.052 0 01-.29.71z" />
       </g>
     </svg>
-  )
-}
+  );
+};
diff --git a/examples/with-next-ui/components/Table.tsx b/examples/with-next-ui/components/Table.tsx
index 9e61639d59..dfcd5003c3 100644
--- a/examples/with-next-ui/components/Table.tsx
+++ b/examples/with-next-ui/components/Table.tsx
@@ -1,12 +1,12 @@
-import { Table } from '@nextui-org/react'
+import { Table } from "@nextui-org/react";
 
 const CustomTable = () => {
   return (
     <Table
       aria-label="Example table with static content"
       css={{
-        height: 'auto',
-        minWidth: '100%',
+        height: "auto",
+        minWidth: "100%",
       }}
     >
       <Table.Header>
@@ -37,7 +37,7 @@ const CustomTable = () => {
         </Table.Row>
       </Table.Body>
     </Table>
-  )
-}
+  );
+};
 
-export default CustomTable
+export default CustomTable;
diff --git a/examples/with-next-ui/next.config.js b/examples/with-next-ui/next.config.js
index 3686d38b98..8bdb3805e8 100755
--- a/examples/with-next-ui/next.config.js
+++ b/examples/with-next-ui/next.config.js
@@ -2,6 +2,6 @@
 
 const nextConfig = {
   reactStrictMode: false,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-next-ui/pages/_app.tsx b/examples/with-next-ui/pages/_app.tsx
index 4f774da1d7..e658f2b417 100755
--- a/examples/with-next-ui/pages/_app.tsx
+++ b/examples/with-next-ui/pages/_app.tsx
@@ -1,12 +1,12 @@
-import '../styles/globals.css'
-import { NextUIProvider } from '@nextui-org/react'
+import "../styles/globals.css";
+import { NextUIProvider } from "@nextui-org/react";
 
-import type { AppProps } from 'next/app'
+import type { AppProps } from "next/app";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (
     <NextUIProvider>
       <Component {...pageProps} />
     </NextUIProvider>
-  )
+  );
 }
diff --git a/examples/with-next-ui/pages/_document.tsx b/examples/with-next-ui/pages/_document.tsx
index c7d9c43257..d0ce870412 100644
--- a/examples/with-next-ui/pages/_document.tsx
+++ b/examples/with-next-ui/pages/_document.tsx
@@ -5,22 +5,22 @@ import Document, {
   NextScript,
   DocumentContext,
   DocumentInitialProps,
-} from 'next/document'
+} from "next/document";
 
-import { CssBaseline } from '@nextui-org/react'
+import { CssBaseline } from "@nextui-org/react";
 
-import { Children } from 'react'
+import { Children } from "react";
 
 export default class MyDocument extends Document {
   static async getInitialProps(
-    ctx: DocumentContext
+    ctx: DocumentContext,
   ): Promise<DocumentInitialProps> {
-    const initialProps = await Document.getInitialProps(ctx)
+    const initialProps = await Document.getInitialProps(ctx);
 
     return {
       ...initialProps,
       styles: Children.toArray([initialProps.styles]),
-    }
+    };
   }
 
   render() {
@@ -32,6 +32,6 @@ export default class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
diff --git a/examples/with-next-ui/pages/index.tsx b/examples/with-next-ui/pages/index.tsx
index 8482e38237..849de1f4d6 100755
--- a/examples/with-next-ui/pages/index.tsx
+++ b/examples/with-next-ui/pages/index.tsx
@@ -1,12 +1,12 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
-import dynamic from 'next/dynamic'
-import { Avatar, Pagination } from '@nextui-org/react'
+import Head from "next/head";
+import Image from "next/image";
+import styles from "../styles/Home.module.css";
+import dynamic from "next/dynamic";
+import { Avatar, Pagination } from "@nextui-org/react";
 
-const CustomCheckbox = dynamic(() => import('../components/Checkbox'))
-const CustomTable = dynamic(() => import('../components/Table'))
-const CustomCollapse = dynamic(() => import('../components/Collapse'))
+const CustomCheckbox = dynamic(() => import("../components/Checkbox"));
+const CustomTable = dynamic(() => import("../components/Table"));
+const CustomCollapse = dynamic(() => import("../components/Collapse"));
 
 export default function Home() {
   return (
@@ -18,7 +18,7 @@ export default function Home() {
       </Head>
       <main className={styles.main}>
         <h1>
-          <Avatar text="Hi" color="gradient" textColor={'white'} size={'xl'} />
+          <Avatar text="Hi" color="gradient" textColor={"white"} size={"xl"} />
         </h1>
         <h1 className={styles.title}>
           Welcome to use <a href="https://nextui.org/">NextUI!</a>
@@ -42,12 +42,12 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <span className={styles.logo}>
             <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
           </span>
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-nhost-auth-realtime-graphql/components/private-route.js b/examples/with-nhost-auth-realtime-graphql/components/private-route.js
index ae7d89ac67..0333fc7286 100644
--- a/examples/with-nhost-auth-realtime-graphql/components/private-route.js
+++ b/examples/with-nhost-auth-realtime-graphql/components/private-route.js
@@ -1,22 +1,22 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { useRouter } from 'next/router'
-import { useAuth } from '@nhost/react-auth'
+import { useRouter } from "next/router";
+import { useAuth } from "@nhost/react-auth";
 
 export function PrivateRoute(Component) {
   return (props) => {
-    const router = useRouter()
-    const { signedIn } = useAuth()
+    const router = useRouter();
+    const { signedIn } = useAuth();
 
     // wait to see if the user is logged in or not.
     if (signedIn === null) {
-      return <div>Checking auth...</div>
+      return <div>Checking auth...</div>;
     }
 
     if (!signedIn) {
-      router.push('/login')
-      return <div>Redirecting...</div>
+      router.push("/login");
+      return <div>Redirecting...</div>;
     }
 
-    return <Component {...props} />
-  }
+    return <Component {...props} />;
+  };
 }
diff --git a/examples/with-nhost-auth-realtime-graphql/pages/_app.js b/examples/with-nhost-auth-realtime-graphql/pages/_app.js
index a6551a3803..e9b87c7977 100644
--- a/examples/with-nhost-auth-realtime-graphql/pages/_app.js
+++ b/examples/with-nhost-auth-realtime-graphql/pages/_app.js
@@ -1,7 +1,7 @@
-import { NhostAuthProvider } from '@nhost/react-auth'
-import { NhostApolloProvider } from '@nhost/react-apollo'
+import { NhostAuthProvider } from "@nhost/react-auth";
+import { NhostApolloProvider } from "@nhost/react-apollo";
 
-import { nhost } from '../utils/nhost'
+import { nhost } from "../utils/nhost";
 
 function MyApp({ Component, pageProps }) {
   return (
@@ -13,7 +13,7 @@ function MyApp({ Component, pageProps }) {
         <Component {...pageProps} />
       </NhostApolloProvider>
     </NhostAuthProvider>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-nhost-auth-realtime-graphql/pages/api/hello.js b/examples/with-nhost-auth-realtime-graphql/pages/api/hello.js
index 8f603094bd..7b8d9c753c 100644
--- a/examples/with-nhost-auth-realtime-graphql/pages/api/hello.js
+++ b/examples/with-nhost-auth-realtime-graphql/pages/api/hello.js
@@ -1,3 +1,3 @@
 export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: "John Doe" });
 }
diff --git a/examples/with-nhost-auth-realtime-graphql/pages/index.js b/examples/with-nhost-auth-realtime-graphql/pages/index.js
index ae8e9b19ed..463651a5a7 100644
--- a/examples/with-nhost-auth-realtime-graphql/pages/index.js
+++ b/examples/with-nhost-auth-realtime-graphql/pages/index.js
@@ -1,7 +1,7 @@
-import { useState } from 'react'
-import { useSubscription, useMutation, gql } from '@apollo/client'
-import { PrivateRoute } from '../components/private-route'
-import { nhost } from '../utils/nhost'
+import { useState } from "react";
+import { useSubscription, useMutation, gql } from "@apollo/client";
+import { PrivateRoute } from "../components/private-route";
+import { nhost } from "../utils/nhost";
 
 const INSERT_ITEM = gql`
   mutation insertItem($item: items_insert_input!) {
@@ -9,7 +9,7 @@ const INSERT_ITEM = gql`
       id
     }
   }
-`
+`;
 
 const S_GET_ITEMS = gql`
   subscription sGetItems {
@@ -18,7 +18,7 @@ const S_GET_ITEMS = gql`
       name
     }
   }
-`
+`;
 
 const DELETE_ITEM = gql`
   mutation deleteItem($item_id: uuid!) {
@@ -26,14 +26,14 @@ const DELETE_ITEM = gql`
       id
     }
   }
-`
+`;
 
 function InsertItem() {
-  const [name, setName] = useState('')
-  const [insertItem] = useMutation(INSERT_ITEM)
+  const [name, setName] = useState("");
+  const [insertItem] = useMutation(INSERT_ITEM);
 
   async function handleFormSubmit(e) {
-    e.preventDefault()
+    e.preventDefault();
     try {
       insertItem({
         variables: {
@@ -41,17 +41,17 @@ function InsertItem() {
             name,
           },
         },
-      })
+      });
     } catch (error) {
-      console.error(error)
-      return alert('Error inserting item')
+      console.error(error);
+      return alert("Error inserting item");
     }
 
-    setName('')
+    setName("");
   }
 
   return (
-    <div style={{ padding: '10px' }}>
+    <div style={{ padding: "10px" }}>
       <form onSubmit={handleFormSubmit}>
         <div>
           <input
@@ -65,12 +65,12 @@ function InsertItem() {
         </div>
       </form>
     </div>
-  )
+  );
 }
 
 function ListItems() {
-  const { loading, error, data } = useSubscription(S_GET_ITEMS)
-  const [deleteItem] = useMutation(DELETE_ITEM)
+  const { loading, error, data } = useSubscription(S_GET_ITEMS);
+  const [deleteItem] = useMutation(DELETE_ITEM);
 
   async function handleDeleteItem(itemId) {
     try {
@@ -78,43 +78,43 @@ function ListItems() {
         variables: {
           item_id: itemId,
         },
-      })
+      });
     } catch (error) {
-      console.log(error)
-      return alert('Error deleting item')
+      console.log(error);
+      return alert("Error deleting item");
     }
   }
 
   if (loading && !data) {
-    return <div>Loading...</div>
+    return <div>Loading...</div>;
   }
 
   if (error) {
-    return <div>Error loading items</div>
+    return <div>Error loading items</div>;
   }
 
-  const { items } = data
+  const { items } = data;
 
   return (
-    <div style={{ padding: '10px' }}>
+    <div style={{ padding: "10px" }}>
       {items.map((item) => {
         return (
           <li key={item.id}>
             {item.name} [
             <span onClick={() => handleDeleteItem(item.id)}>delete</span>]
           </li>
-        )
+        );
       })}
     </div>
-  )
+  );
 }
 
 function Home() {
   return (
     <div>
-      <div style={{ display: 'flex', alignItems: 'center' }}>
+      <div style={{ display: "flex", alignItems: "center" }}>
         <pre>{nhost.auth.user().display_name}</pre>
-        <div style={{ paddingLeft: '10px' }}>
+        <div style={{ paddingLeft: "10px" }}>
           <button onClick={() => nhost.auth.logout()}>logout</button>
         </div>
       </div>
@@ -122,7 +122,7 @@ function Home() {
       <InsertItem />
       <ListItems />
     </div>
-  )
+  );
 }
 
-export default PrivateRoute(Home)
+export default PrivateRoute(Home);
diff --git a/examples/with-nhost-auth-realtime-graphql/pages/login.js b/examples/with-nhost-auth-realtime-graphql/pages/login.js
index 838e123501..ebbf4914f9 100644
--- a/examples/with-nhost-auth-realtime-graphql/pages/login.js
+++ b/examples/with-nhost-auth-realtime-graphql/pages/login.js
@@ -1,25 +1,25 @@
-import { useState } from 'react'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
+import { useState } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
 
-import { nhost } from '../utils/nhost'
+import { nhost } from "../utils/nhost";
 
 export default function Login() {
-  const router = useRouter()
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
 
   async function handleLogin(e) {
-    e.preventDefault()
+    e.preventDefault();
 
     try {
-      await nhost.auth.login({ email, password })
+      await nhost.auth.login({ email, password });
     } catch (error) {
-      console.error(error)
-      return alert('failed to login')
+      console.error(error);
+      return alert("failed to login");
     }
 
-    router.push('/')
+    router.push("/");
   }
 
   return (
@@ -50,5 +50,5 @@ export default function Login() {
         <Link href="/register">Register</Link>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/with-nhost-auth-realtime-graphql/pages/register.js b/examples/with-nhost-auth-realtime-graphql/pages/register.js
index 62475f83a6..9330de90ee 100644
--- a/examples/with-nhost-auth-realtime-graphql/pages/register.js
+++ b/examples/with-nhost-auth-realtime-graphql/pages/register.js
@@ -1,17 +1,17 @@
-import { useState } from 'react'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
+import { useState } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
 
-import { nhost } from '../utils/nhost'
+import { nhost } from "../utils/nhost";
 
 export default function Login() {
-  const router = useRouter()
-  const [displayName, setDisplayName] = useState('')
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
+  const router = useRouter();
+  const [displayName, setDisplayName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
 
   async function handleLogin(e) {
-    e.preventDefault()
+    e.preventDefault();
 
     try {
       await nhost.auth.register({
@@ -22,13 +22,13 @@ export default function Login() {
             display_name: displayName,
           },
         },
-      })
+      });
     } catch (error) {
-      console.error(error)
-      return alert('failed to register')
+      console.error(error);
+      return alert("failed to register");
     }
 
-    router.push('/')
+    router.push("/");
   }
 
   return (
@@ -67,5 +67,5 @@ export default function Login() {
         <Link href="/login">Login</Link>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/with-nhost-auth-realtime-graphql/utils/nhost.js b/examples/with-nhost-auth-realtime-graphql/utils/nhost.js
index d661a52c57..fd1c897e9e 100644
--- a/examples/with-nhost-auth-realtime-graphql/utils/nhost.js
+++ b/examples/with-nhost-auth-realtime-graphql/utils/nhost.js
@@ -1,5 +1,5 @@
-import { createClient } from 'nhost-js-sdk'
+import { createClient } from "nhost-js-sdk";
 
 export const nhost = createClient({
   baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
-})
+});
diff --git a/examples/with-opentelemetry/app/layout.tsx b/examples/with-opentelemetry/app/layout.tsx
index 7ff2900248..d09efeea58 100644
--- a/examples/with-opentelemetry/app/layout.tsx
+++ b/examples/with-opentelemetry/app/layout.tsx
@@ -1,18 +1,18 @@
-import type { Metadata } from 'next'
+import type { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Next.js with OpenTelemetry',
-  description: 'Next.js with OpenTelemetry',
-}
+  title: "Next.js with OpenTelemetry",
+  description: "Next.js with OpenTelemetry",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-opentelemetry/app/page.tsx b/examples/with-opentelemetry/app/page.tsx
index 3d8390a4ba..7d13c0bf9e 100644
--- a/examples/with-opentelemetry/app/page.tsx
+++ b/examples/with-opentelemetry/app/page.tsx
@@ -1,6 +1,6 @@
-import { fetchGithubStars } from '../shared/fetch-github-stars'
+import { fetchGithubStars } from "../shared/fetch-github-stars";
 
 export default async function Page() {
-  const stars = await fetchGithubStars()
-  return <p>Next.js has {stars} ⭐️</p>
+  const stars = await fetchGithubStars();
+  return <p>Next.js has {stars} ⭐️</p>;
 }
diff --git a/examples/with-opentelemetry/instrumentation.ts b/examples/with-opentelemetry/instrumentation.ts
index de431f2a0b..a126ce105b 100644
--- a/examples/with-opentelemetry/instrumentation.ts
+++ b/examples/with-opentelemetry/instrumentation.ts
@@ -1,5 +1,5 @@
-import { registerOTel } from '@vercel/otel'
+import { registerOTel } from "@vercel/otel";
 
 export function register() {
-  registerOTel('next-app')
+  registerOTel("next-app");
 }
diff --git a/examples/with-opentelemetry/next.config.js b/examples/with-opentelemetry/next.config.js
index c4cf84a765..a160e4acac 100644
--- a/examples/with-opentelemetry/next.config.js
+++ b/examples/with-opentelemetry/next.config.js
@@ -2,4 +2,4 @@ module.exports = {
   experimental: {
     instrumentationHook: true,
   },
-}
+};
diff --git a/examples/with-opentelemetry/pages/api/github-stars.ts b/examples/with-opentelemetry/pages/api/github-stars.ts
index cb5a62705a..506dbeb6ed 100644
--- a/examples/with-opentelemetry/pages/api/github-stars.ts
+++ b/examples/with-opentelemetry/pages/api/github-stars.ts
@@ -1,10 +1,10 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import { fetchGithubStars } from '../../shared/fetch-github-stars'
+import { NextApiRequest, NextApiResponse } from "next";
+import { fetchGithubStars } from "../../shared/fetch-github-stars";
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  const stars = await fetchGithubStars()
-  res.status(200).json({ stars })
+  const stars = await fetchGithubStars();
+  res.status(200).json({ stars });
 }
diff --git a/examples/with-opentelemetry/pages/legacy.tsx b/examples/with-opentelemetry/pages/legacy.tsx
index 1621fb737f..07553f8282 100644
--- a/examples/with-opentelemetry/pages/legacy.tsx
+++ b/examples/with-opentelemetry/pages/legacy.tsx
@@ -1,13 +1,13 @@
-import Link from 'next/link'
-import { fetchGithubStars } from '../shared/fetch-github-stars'
+import Link from "next/link";
+import { fetchGithubStars } from "../shared/fetch-github-stars";
 
 export async function getServerSideProps() {
-  const stars = await fetchGithubStars()
+  const stars = await fetchGithubStars();
   return {
     props: {
       stars,
     },
-  }
+  };
 }
 
 export default function IndexPage({ stars }) {
@@ -16,5 +16,5 @@ export default function IndexPage({ stars }) {
       <p>Next.js has {stars} ⭐️</p>
       <Link href="/preact-stars">How about preact?</Link>
     </>
-  )
+  );
 }
diff --git a/examples/with-opentelemetry/shared/fetch-github-stars.ts b/examples/with-opentelemetry/shared/fetch-github-stars.ts
index aeb202097b..9b80b399e0 100644
--- a/examples/with-opentelemetry/shared/fetch-github-stars.ts
+++ b/examples/with-opentelemetry/shared/fetch-github-stars.ts
@@ -1,19 +1,19 @@
-import { trace } from '@opentelemetry/api'
+import { trace } from "@opentelemetry/api";
 
 export async function fetchGithubStars() {
   return await trace
-    .getTracer('nextjs-example')
-    .startActiveSpan('fetchGithubStars', async (span) => {
+    .getTracer("nextjs-example")
+    .startActiveSpan("fetchGithubStars", async (span) => {
       try {
-        const res = await fetch('https://api.github.com/repos/vercel/next.js', {
+        const res = await fetch("https://api.github.com/repos/vercel/next.js", {
           next: {
             revalidate: 0,
           },
-        })
-        const data = await res.json()
-        return data.stargazers_count
+        });
+        const data = await res.json();
+        return data.stargazers_count;
       } finally {
-        span.end()
+        span.end();
       }
-    })
+    });
 }
diff --git a/examples/with-orbit-components/pages/_app.js b/examples/with-orbit-components/pages/_app.js
index 17e69f8ad5..6466e7d358 100644
--- a/examples/with-orbit-components/pages/_app.js
+++ b/examples/with-orbit-components/pages/_app.js
@@ -1,5 +1,5 @@
-import { getTokens } from '@kiwicom/orbit-components'
-import { ThemeProvider, createGlobalStyle } from 'styled-components'
+import { getTokens } from "@kiwicom/orbit-components";
+import { ThemeProvider, createGlobalStyle } from "styled-components";
 
 const GlobalStyle = createGlobalStyle`
   body {
@@ -8,9 +8,9 @@ const GlobalStyle = createGlobalStyle`
     margin: 0 auto;
     background-color: ${({ theme }) => theme.orbit.paletteCloudLight};
   }
-`
+`;
 
-const tokens = getTokens()
+const tokens = getTokens();
 
 export default function App({ Component, pageProps }) {
   return (
@@ -20,5 +20,5 @@ export default function App({ Component, pageProps }) {
         <Component {...pageProps} />
       </>
     </ThemeProvider>
-  )
+  );
 }
diff --git a/examples/with-orbit-components/pages/_document.js b/examples/with-orbit-components/pages/_document.js
index 2a59afeb93..00af3db46f 100644
--- a/examples/with-orbit-components/pages/_document.js
+++ b/examples/with-orbit-components/pages/_document.js
@@ -1,19 +1,19 @@
-import Document from 'next/document'
-import { ServerStyleSheet } from 'styled-components'
+import Document from "next/document";
+import { ServerStyleSheet } from "styled-components";
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const sheet = new ServerStyleSheet()
-    const originalRenderPage = ctx.renderPage
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
 
     try {
       ctx.renderPage = () =>
         originalRenderPage({
           enhanceApp: (App) => (props) =>
             sheet.collectStyles(<App {...props} />),
-        })
+        });
 
-      const initialProps = await Document.getInitialProps(ctx)
+      const initialProps = await Document.getInitialProps(ctx);
       return {
         ...initialProps,
         styles: (
@@ -22,9 +22,9 @@ export default class MyDocument extends Document {
             {sheet.getStyleElement()}
           </>
         ),
-      }
+      };
     } finally {
-      sheet.seal()
+      sheet.seal();
     }
   }
 }
diff --git a/examples/with-orbit-components/pages/index.js b/examples/with-orbit-components/pages/index.js
index fb983e512d..ba60ce9d03 100644
--- a/examples/with-orbit-components/pages/index.js
+++ b/examples/with-orbit-components/pages/index.js
@@ -1,5 +1,5 @@
-import React from 'react'
-import { Alert, Illustration } from '@kiwicom/orbit-components'
+import React from "react";
+import { Alert, Illustration } from "@kiwicom/orbit-components";
 
 export default function Home() {
   return (
@@ -9,5 +9,5 @@ export default function Home() {
       </Alert>
       <Illustration name="Success" />
     </React.Fragment>
-  )
+  );
 }
diff --git a/examples/with-overmind/components/Header.js b/examples/with-overmind/components/Header.js
index 5809a4f2b9..6a238807fd 100644
--- a/examples/with-overmind/components/Header.js
+++ b/examples/with-overmind/components/Header.js
@@ -1,9 +1,9 @@
-import Link from 'next/link'
-import React from 'react'
-import { useOvermind } from '../overmind'
+import Link from "next/link";
+import React from "react";
+import { useOvermind } from "../overmind";
 
 function Header() {
-  const { state } = useOvermind()
+  const { state } = useOvermind();
 
   return (
     <div>
@@ -11,7 +11,7 @@ function Header() {
       <Link href="/">Home page</Link>
       <Link href="/about">About Page</Link>
     </div>
-  )
+  );
 }
 
-export default Header
+export default Header;
diff --git a/examples/with-overmind/components/Items.js b/examples/with-overmind/components/Items.js
index 08240c36ba..48990fd2ab 100644
--- a/examples/with-overmind/components/Items.js
+++ b/examples/with-overmind/components/Items.js
@@ -1,8 +1,8 @@
-import React from 'react'
-import { useOvermind } from '../overmind'
+import React from "react";
+import { useOvermind } from "../overmind";
 
 function Items() {
-  const { state } = useOvermind()
+  const { state } = useOvermind();
 
   return (
     <ul>
@@ -10,7 +10,7 @@ function Items() {
         <li key={item.id}>{item.title}</li>
       ))}
     </ul>
-  )
+  );
 }
 
-export default Items
+export default Items;
diff --git a/examples/with-overmind/overmind/index.js b/examples/with-overmind/overmind/index.js
index 1e9e0b7f6c..6fd2bdd308 100644
--- a/examples/with-overmind/overmind/index.js
+++ b/examples/with-overmind/overmind/index.js
@@ -1,5 +1,5 @@
-import { rehydrate } from 'overmind'
-import { createHook } from 'overmind-react'
+import { rehydrate } from "overmind";
+import { createHook } from "overmind-react";
 
 export const config = {
   state: {
@@ -8,20 +8,20 @@ export const config = {
   },
   actions: {
     changePage({ state }, mutations) {
-      rehydrate(state, mutations || [])
+      rehydrate(state, mutations || []);
 
       switch (state.page) {
-        case 'Index':
+        case "Index":
           // Do some additional logic
-          break
-        case 'About':
+          break;
+        case "About":
           // Do some additional logic
-          break
+          break;
         default:
-          break
+          break;
       }
     },
   },
-}
+};
 
-export const useOvermind = createHook()
+export const useOvermind = createHook();
diff --git a/examples/with-overmind/pages/_app.js b/examples/with-overmind/pages/_app.js
index 62706cc54a..74d2107c6f 100644
--- a/examples/with-overmind/pages/_app.js
+++ b/examples/with-overmind/pages/_app.js
@@ -1,46 +1,46 @@
-import React from 'react'
-import App from 'next/app'
-import { createOvermind, createOvermindSSR, rehydrate } from 'overmind'
-import { Provider } from 'overmind-react'
-import { config } from '../overmind'
+import React from "react";
+import App from "next/app";
+import { createOvermind, createOvermindSSR, rehydrate } from "overmind";
+import { Provider } from "overmind-react";
+import { config } from "../overmind";
 
 class MyApp extends App {
   // CLIENT: On initial route
   // SERVER: On initial route
   constructor(props) {
-    super(props)
+    super(props);
 
-    const mutations = props.pageProps.mutations || []
+    const mutations = props.pageProps.mutations || [];
 
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       // On the client we just instantiate the Overmind instance and run
       // the "changePage" action
-      this.overmind = createOvermind(config)
-      this.overmind.actions.changePage(mutations)
+      this.overmind = createOvermind(config);
+      this.overmind.actions.changePage(mutations);
     } else {
       // On the server we rehydrate the mutations to an SSR instance of Overmind,
       // as we do not want to run any additional logic here
-      this.overmind = createOvermindSSR(config)
-      rehydrate(this.overmind.state, mutations)
+      this.overmind = createOvermindSSR(config);
+      rehydrate(this.overmind.state, mutations);
     }
   }
   // CLIENT: After initial route, on page change
   // SERVER: never
   componentDidUpdate() {
     // This runs whenever the client routes to a new page
-    this.overmind.actions.changePage(this.props.pageProps.mutations || [])
+    this.overmind.actions.changePage(this.props.pageProps.mutations || []);
   }
   // CLIENT: On every page change
   // SERVER: On initial route
   render() {
-    const { Component } = this.props
+    const { Component } = this.props;
 
     return (
       <Provider value={this.overmind}>
         <Component />
       </Provider>
-    )
+    );
   }
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-overmind/pages/about.js b/examples/with-overmind/pages/about.js
index 01940e1b93..252af563cc 100644
--- a/examples/with-overmind/pages/about.js
+++ b/examples/with-overmind/pages/about.js
@@ -1,19 +1,19 @@
-import Header from '../components/Header'
-import { createOvermindSSR } from 'overmind'
-import { config } from '../overmind'
+import Header from "../components/Header";
+import { createOvermindSSR } from "overmind";
+import { config } from "../overmind";
 
 export async function getStaticProps() {
   // If we want to produce some mutations we do so by instantiating
   // an Overmind SSR instance, do whatever datafetching is needed and
   // change the state directly. We return the mutations performed with
   // "hydrate"
-  const overmind = createOvermindSSR(config)
+  const overmind = createOvermindSSR(config);
 
-  overmind.state.page = 'About'
+  overmind.state.page = "About";
 
   return {
     props: { mutations: overmind.hydrate() },
-  }
+  };
 }
 
 export default function AboutPage() {
@@ -21,5 +21,5 @@ export default function AboutPage() {
     <div>
       <Header />
     </div>
-  )
+  );
 }
diff --git a/examples/with-overmind/pages/index.js b/examples/with-overmind/pages/index.js
index d7f0e2faee..56f92cb35a 100644
--- a/examples/with-overmind/pages/index.js
+++ b/examples/with-overmind/pages/index.js
@@ -1,30 +1,30 @@
-import { createOvermindSSR } from 'overmind'
-import { config } from '../overmind'
-import Header from '../components/Header'
-import Items from '../components/Items'
+import { createOvermindSSR } from "overmind";
+import { config } from "../overmind";
+import Header from "../components/Header";
+import Items from "../components/Items";
 
 export async function getStaticProps() {
   // If we want to produce some mutations we do so by instantiating
   // an Overmind SSR instance, do whatever datafetching is needed and
   // change the state directly. We return the mutations performed with
   // "hydrate"
-  const overmind = createOvermindSSR(config)
+  const overmind = createOvermindSSR(config);
 
-  overmind.state.page = 'Index'
+  overmind.state.page = "Index";
   overmind.state.items = [
     {
       id: 0,
-      title: 'foo',
+      title: "foo",
     },
     {
       id: 1,
-      title: 'bar',
+      title: "bar",
     },
-  ]
+  ];
 
   return {
     props: { mutations: overmind.hydrate() },
-  }
+  };
 }
 
 export default function IndexPage() {
@@ -33,5 +33,5 @@ export default function IndexPage() {
       <Header />
       <Items />
     </div>
-  )
+  );
 }
diff --git a/examples/with-particles/components/particles.tsx b/examples/with-particles/components/particles.tsx
index 2abac1e047..e76b0ba298 100644
--- a/examples/with-particles/components/particles.tsx
+++ b/examples/with-particles/components/particles.tsx
@@ -1,5 +1,5 @@
-import type { Container, Engine, ISourceOptions } from 'tsparticles-engine'
-import Particles from 'react-tsparticles'
+import type { Container, Engine, ISourceOptions } from "tsparticles-engine";
+import Particles from "react-tsparticles";
 
 const ParticlesComponent = () => {
   const particlesInit = async (engine: Engine) => {
@@ -24,12 +24,12 @@ const ParticlesComponent = () => {
     // https://github.com/matteobruni/tsparticles/tree/main/updaters all official tsParticles additional updaters
     // for example
     // await loadOrbitUpdater(engine); // it requires "tsparticles-updater-orbit" dependency
-  }
+  };
 
   const particlesLoaded = async (container: Container) => {
     // the container is the current particles instance, it has methods like refresh(), start(), stop(), play(), pause()
     // the documentation can be found here: https://particles.js.org/docs/modules/Core_Container.html
-  }
+  };
 
   // options variable is the particles configuration
   // many configurations can be found here: https://particles.js.org
@@ -49,10 +49,10 @@ const ParticlesComponent = () => {
         },
       },
       color: {
-        value: ['#2EB67D', '#ECB22E', '#E01E5B', '#36C5F0'],
+        value: ["#2EB67D", "#ECB22E", "#E01E5B", "#36C5F0"],
       },
       shape: {
-        type: 'circle',
+        type: "circle",
       },
       opacity: {
         value: 1,
@@ -63,7 +63,7 @@ const ParticlesComponent = () => {
       links: {
         enable: true,
         distance: 150,
-        color: '#808080',
+        color: "#808080",
         opacity: 0.4,
         width: 1,
       },
@@ -71,7 +71,7 @@ const ParticlesComponent = () => {
         enable: true,
         speed: 5,
         outModes: {
-          default: 'out',
+          default: "out",
         },
       },
     },
@@ -79,11 +79,11 @@ const ParticlesComponent = () => {
       events: {
         onHover: {
           enable: true,
-          mode: 'grab',
+          mode: "grab",
         },
         onClick: {
           enable: true,
-          mode: 'push',
+          mode: "push",
         },
       },
       modes: {
@@ -91,7 +91,7 @@ const ParticlesComponent = () => {
           distance: 280,
           links: {
             opacity: 1,
-            color: '#808080',
+            color: "#808080",
           },
         },
         push: {
@@ -99,7 +99,7 @@ const ParticlesComponent = () => {
         },
       },
     },
-  }
+  };
 
   return (
     <Particles
@@ -108,7 +108,7 @@ const ParticlesComponent = () => {
       loaded={particlesLoaded}
       options={options}
     />
-  )
-}
+  );
+};
 
-export default ParticlesComponent
+export default ParticlesComponent;
diff --git a/examples/with-particles/next.config.js b/examples/with-particles/next.config.js
index a843cbee09..91ef62f0db 100644
--- a/examples/with-particles/next.config.js
+++ b/examples/with-particles/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-particles/pages/_app.tsx b/examples/with-particles/pages/_app.tsx
index 3f5c9d5485..8c4d5de82a 100644
--- a/examples/with-particles/pages/_app.tsx
+++ b/examples/with-particles/pages/_app.tsx
@@ -1,8 +1,8 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-particles/pages/index.tsx b/examples/with-particles/pages/index.tsx
index 602ef23288..20b5151ef7 100644
--- a/examples/with-particles/pages/index.tsx
+++ b/examples/with-particles/pages/index.tsx
@@ -1,8 +1,8 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
-import Particles from '../components/particles'
-import styles from '../styles/Home.module.css'
+import type { NextPage } from "next";
+import Head from "next/head";
+import Image from "next/image";
+import Particles from "../components/particles";
+import styles from "../styles/Home.module.css";
 
 const Home: NextPage = () => {
   return (
@@ -20,7 +20,7 @@ const Home: NextPage = () => {
         </h1>
 
         <p className={styles.description}>
-          Get started by editing{' '}
+          Get started by editing{" "}
           <code className={styles.code}>pages/index.tsx</code>
         </p>
 
@@ -63,14 +63,14 @@ const Home: NextPage = () => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <span className={styles.logo}>
             <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
           </span>
         </a>
       </footer>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/examples/with-passport-and-next-connect/components/Navbar.js b/examples/with-passport-and-next-connect/components/Navbar.js
index aa77e9f645..35dd058a6c 100644
--- a/examples/with-passport-and-next-connect/components/Navbar.js
+++ b/examples/with-passport-and-next-connect/components/Navbar.js
@@ -1,12 +1,12 @@
-import Link from 'next/link'
-import { useUser } from '../lib/hooks'
+import Link from "next/link";
+import { useUser } from "../lib/hooks";
 
 export default function Navbar() {
-  const [user, { mutate }] = useUser()
+  const [user, { mutate }] = useUser();
 
   async function handleLogout() {
-    await fetch('/api/logout')
-    mutate({ user: null })
+    await fetch("/api/logout");
+    mutate({ user: null });
   }
 
   return (
@@ -76,5 +76,5 @@ export default function Navbar() {
         }
       `}</style>
     </header>
-  )
+  );
 }
diff --git a/examples/with-passport-and-next-connect/lib/auth.js b/examples/with-passport-and-next-connect/lib/auth.js
index c76d31a873..b0856bc6a5 100644
--- a/examples/with-passport-and-next-connect/lib/auth.js
+++ b/examples/with-passport-and-next-connect/lib/auth.js
@@ -1,21 +1,21 @@
-import Iron from '@hapi/iron'
+import Iron from "@hapi/iron";
 
 export async function createLoginSession(session, secret) {
-  const createdAt = Date.now()
-  const obj = { ...session, createdAt }
-  const token = await Iron.seal(obj, secret, Iron.defaults)
+  const createdAt = Date.now();
+  const obj = { ...session, createdAt };
+  const token = await Iron.seal(obj, secret, Iron.defaults);
 
-  return token
+  return token;
 }
 
 export async function getLoginSession(token, secret) {
-  const session = await Iron.unseal(token, secret, Iron.defaults)
-  const expiresAt = session.createdAt + session.maxAge * 1000
+  const session = await Iron.unseal(token, secret, Iron.defaults);
+  const expiresAt = session.createdAt + session.maxAge * 1000;
 
   // Validate the expiration date of the session
   if (session.maxAge && Date.now() > expiresAt) {
-    throw new Error('Session expired')
+    throw new Error("Session expired");
   }
 
-  return session
+  return session;
 }
diff --git a/examples/with-passport-and-next-connect/lib/db.js b/examples/with-passport-and-next-connect/lib/db.js
index 03f767ea95..9143571678 100644
--- a/examples/with-passport-and-next-connect/lib/db.js
+++ b/examples/with-passport-and-next-connect/lib/db.js
@@ -1,18 +1,18 @@
-import crypto from 'crypto'
-import { v4 as uuidv4 } from 'uuid'
+import crypto from "crypto";
+import { v4 as uuidv4 } from "uuid";
 
 export function getAllUsers(req) {
   // For demo purpose only. You are not likely to have to return all users.
-  return req.session.users
+  return req.session.users;
 }
 
 export function createUser(req, { username, password, name }) {
   // Here you should create the user and save the salt and hashed password (some dbs may have
   // authentication methods that will do it for you so you don't have to worry about it):
-  const salt = crypto.randomBytes(16).toString('hex')
+  const salt = crypto.randomBytes(16).toString("hex");
   const hash = crypto
-    .pbkdf2Sync(password, salt, 1000, 64, 'sha512')
-    .toString('hex')
+    .pbkdf2Sync(password, salt, 1000, 64, "sha512")
+    .toString("hex");
   const user = {
     id: uuidv4(),
     createdAt: Date.now(),
@@ -20,41 +20,41 @@ export function createUser(req, { username, password, name }) {
     name,
     hash,
     salt,
-  }
+  };
 
   // Here you should insert the user into the database
   // await db.createUser(user)
-  req.session.users.push(user)
+  req.session.users.push(user);
 }
 
 export function findUserByUsername(req, username) {
   // Here you find the user based on id/username in the database
   // const user = await db.findUserById(id)
-  return req.session.users.find((user) => user.username === username)
+  return req.session.users.find((user) => user.username === username);
 }
 
 export function updateUserByUsername(req, username, update) {
   // Here you update the user based on id/username in the database
   // const user = await db.updateUserById(id, update)
-  const user = req.session.users.find((u) => u.username === username)
-  Object.assign(user, update)
-  return user
+  const user = req.session.users.find((u) => u.username === username);
+  Object.assign(user, update);
+  return user;
 }
 
 export function deleteUser(req, username) {
   // Here you should delete the user in the database
   // await db.deleteUser(req.user)
   req.session.users = req.session.users.filter(
-    (user) => user.username !== req.user.username
-  )
+    (user) => user.username !== req.user.username,
+  );
 }
 
 // Compare the password of an already fetched user (using `findUserByUsername`) and compare the
 // password for a potential match
 export function validatePassword(user, inputPassword) {
   const inputHash = crypto
-    .pbkdf2Sync(inputPassword, user.salt, 1000, 64, 'sha512')
-    .toString('hex')
-  const passwordsMatch = user.hash === inputHash
-  return passwordsMatch
+    .pbkdf2Sync(inputPassword, user.salt, 1000, 64, "sha512")
+    .toString("hex");
+  const passwordsMatch = user.hash === inputHash;
+  return passwordsMatch;
 }
diff --git a/examples/with-passport-and-next-connect/lib/hooks.jsx b/examples/with-passport-and-next-connect/lib/hooks.jsx
index ba73b7ceb5..8d28dcc991 100644
--- a/examples/with-passport-and-next-connect/lib/hooks.jsx
+++ b/examples/with-passport-and-next-connect/lib/hooks.jsx
@@ -1,11 +1,11 @@
-import useSWR from 'swr'
+import useSWR from "swr";
 
-export const fetcher = (url) => fetch(url).then((r) => r.json())
+export const fetcher = (url) => fetch(url).then((r) => r.json());
 
 export function useUser() {
-  const { data, mutate, isLoading } = useSWR('/api/user', fetcher)
+  const { data, mutate, isLoading } = useSWR("/api/user", fetcher);
   // if data is not defined, the query has not completed
-  const loading = isLoading || !data
-  const user = data?.user
-  return [user, { mutate, loading }]
+  const loading = isLoading || !data;
+  const user = data?.user;
+  return [user, { mutate, loading }];
 }
diff --git a/examples/with-passport-and-next-connect/lib/passport.js b/examples/with-passport-and-next-connect/lib/passport.js
index 46ad5fbf5f..9d00fd2f04 100644
--- a/examples/with-passport-and-next-connect/lib/passport.js
+++ b/examples/with-passport-and-next-connect/lib/passport.js
@@ -1,33 +1,33 @@
-import passport from 'passport'
-import LocalStrategy from 'passport-local'
-import { findUserByUsername, validatePassword } from './db'
+import passport from "passport";
+import LocalStrategy from "passport-local";
+import { findUserByUsername, validatePassword } from "./db";
 
 passport.serializeUser(function (user, done) {
   // serialize the username into session
-  done(null, user.username)
-})
+  done(null, user.username);
+});
 
 passport.deserializeUser(function (req, id, done) {
   // deserialize the username back into user object
-  const user = findUserByUsername(req, id)
-  done(null, user)
-})
+  const user = findUserByUsername(req, id);
+  done(null, user);
+});
 
 passport.use(
   new LocalStrategy(
     { passReqToCallback: true },
     (req, username, password, done) => {
       // Here you lookup the user in your DB and compare the password/hashed password
-      const user = findUserByUsername(req, username)
+      const user = findUserByUsername(req, username);
       // Security-wise, if you hashed the password earlier, you must verify it
       // if (!user || await argon2.verify(user.password, password))
       if (!user || !validatePassword(user, password)) {
-        done(null, null)
+        done(null, null);
       } else {
-        done(null, user)
+        done(null, user);
       }
-    }
-  )
-)
+    },
+  ),
+);
 
-export default passport
+export default passport;
diff --git a/examples/with-passport-and-next-connect/lib/session.js b/examples/with-passport-and-next-connect/lib/session.js
index eb2792d659..ed0c6840e2 100644
--- a/examples/with-passport-and-next-connect/lib/session.js
+++ b/examples/with-passport-and-next-connect/lib/session.js
@@ -1,46 +1,46 @@
-import { parse, serialize } from 'cookie'
-import { createLoginSession, getLoginSession } from './auth'
+import { parse, serialize } from "cookie";
+import { createLoginSession, getLoginSession } from "./auth";
 
 function parseCookies(req) {
   // For API Routes we don't need to parse the cookies.
-  if (req.cookies) return req.cookies
+  if (req.cookies) return req.cookies;
 
   // For pages we do need to parse the cookies.
-  const cookie = req.headers?.cookie
-  return parse(cookie || '')
+  const cookie = req.headers?.cookie;
+  return parse(cookie || "");
 }
 
 export default function session({ name, secret, cookie: cookieOpts }) {
   return async (req, res, next) => {
-    const cookies = parseCookies(req)
-    const token = cookies[name]
-    let unsealed = {}
+    const cookies = parseCookies(req);
+    const token = cookies[name];
+    let unsealed = {};
 
     if (token) {
       try {
         // the cookie needs to be unsealed using the password `secret`
-        unsealed = await getLoginSession(token, secret)
+        unsealed = await getLoginSession(token, secret);
       } catch (e) {
         // The cookie is invalid
       }
     }
 
-    req.session = unsealed
+    req.session = unsealed;
 
     // We are proxying res.end to commit the session cookie
-    const oldEnd = res.end
+    const oldEnd = res.end;
     res.end = async function resEndProxy(...args) {
-      if (res.finished || res.writableEnded || res.headersSent) return
+      if (res.finished || res.writableEnded || res.headersSent) return;
       if (cookieOpts.maxAge) {
-        req.session.maxAge = cookieOpts.maxAge
+        req.session.maxAge = cookieOpts.maxAge;
       }
 
-      const token = await createLoginSession(req.session, secret)
+      const token = await createLoginSession(req.session, secret);
 
-      res.setHeader('Set-Cookie', serialize(name, token, cookieOpts))
-      oldEnd.apply(this, args)
-    }
+      res.setHeader("Set-Cookie", serialize(name, token, cookieOpts));
+      oldEnd.apply(this, args);
+    };
 
-    next()
-  }
+    next();
+  };
 }
diff --git a/examples/with-passport-and-next-connect/middleware/auth.js b/examples/with-passport-and-next-connect/middleware/auth.js
index 388e58e571..e4e1f65e6f 100644
--- a/examples/with-passport-and-next-connect/middleware/auth.js
+++ b/examples/with-passport-and-next-connect/middleware/auth.js
@@ -1,28 +1,28 @@
-import nextConnect from 'next-connect'
-import passport from '../lib/passport'
-import session from '../lib/session'
+import nextConnect from "next-connect";
+import passport from "../lib/passport";
+import session from "../lib/session";
 
 const auth = nextConnect()
   .use(
     session({
-      name: 'sess',
+      name: "sess",
       secret: process.env.TOKEN_SECRET,
       cookie: {
         maxAge: 60 * 60 * 8, // 8 hours,
         httpOnly: true,
-        secure: process.env.NODE_ENV === 'production',
-        path: '/',
-        sameSite: 'lax',
+        secure: process.env.NODE_ENV === "production",
+        path: "/",
+        sameSite: "lax",
       },
-    })
+    }),
   )
   .use((req, res, next) => {
     // Initialize mocked database
     // Remove this after you add your own database
-    req.session.users = req.session.users || []
-    next()
+    req.session.users = req.session.users || [];
+    next();
   })
   .use(passport.initialize())
-  .use(passport.session())
+  .use(passport.session());
 
-export default auth
+export default auth;
diff --git a/examples/with-passport-and-next-connect/pages/_app.js b/examples/with-passport-and-next-connect/pages/_app.js
index 22b87a6233..6e05618bff 100644
--- a/examples/with-passport-and-next-connect/pages/_app.js
+++ b/examples/with-passport-and-next-connect/pages/_app.js
@@ -1,5 +1,5 @@
-import Navbar from '../components/Navbar'
-import '../styles.css'
+import Navbar from "../components/Navbar";
+import "../styles.css";
 
 export default function MyApp({ Component, pageProps }) {
   return (
@@ -11,5 +11,5 @@ export default function MyApp({ Component, pageProps }) {
         </div>
       </main>
     </>
-  )
+  );
 }
diff --git a/examples/with-passport-and-next-connect/pages/api/login.js b/examples/with-passport-and-next-connect/pages/api/login.js
index 7e15e6a548..7df1b333d6 100644
--- a/examples/with-passport-and-next-connect/pages/api/login.js
+++ b/examples/with-passport-and-next-connect/pages/api/login.js
@@ -1,11 +1,11 @@
-import nextConnect from 'next-connect'
-import auth from '../../middleware/auth'
-import passport from '../../lib/passport'
+import nextConnect from "next-connect";
+import auth from "../../middleware/auth";
+import passport from "../../lib/passport";
 
-const handler = nextConnect()
+const handler = nextConnect();
 
-handler.use(auth).post(passport.authenticate('local'), (req, res) => {
-  res.json({ user: req.user })
-})
+handler.use(auth).post(passport.authenticate("local"), (req, res) => {
+  res.json({ user: req.user });
+});
 
-export default handler
+export default handler;
diff --git a/examples/with-passport-and-next-connect/pages/api/logout.js b/examples/with-passport-and-next-connect/pages/api/logout.js
index 6602ddae27..a8803b6550 100644
--- a/examples/with-passport-and-next-connect/pages/api/logout.js
+++ b/examples/with-passport-and-next-connect/pages/api/logout.js
@@ -1,11 +1,11 @@
-import nextConnect from 'next-connect'
-import auth from '../../middleware/auth'
+import nextConnect from "next-connect";
+import auth from "../../middleware/auth";
 
-const handler = nextConnect()
+const handler = nextConnect();
 
 handler.use(auth).get((req, res) => {
-  req.logOut()
-  res.status(204).end()
-})
+  req.logOut();
+  res.status(204).end();
+});
 
-export default handler
+export default handler;
diff --git a/examples/with-passport-and-next-connect/pages/api/user.js b/examples/with-passport-and-next-connect/pages/api/user.js
index 24c53e324a..d61c3af664 100644
--- a/examples/with-passport-and-next-connect/pages/api/user.js
+++ b/examples/with-passport-and-next-connect/pages/api/user.js
@@ -1,8 +1,8 @@
-import nextConnect from 'next-connect'
-import auth from '../../middleware/auth'
-import { deleteUser, createUser, updateUserByUsername } from '../../lib/db'
+import nextConnect from "next-connect";
+import auth from "../../middleware/auth";
+import { deleteUser, createUser, updateUserByUsername } from "../../lib/db";
 
-const handler = nextConnect()
+const handler = nextConnect();
 
 handler
   .use(auth)
@@ -11,31 +11,31 @@ handler
     // because it may contain sensitive fields such as !!password!! Only return what is needed
     // const { name, username, favoriteColor } = req.user
     // res.json({ user: { name, username, favoriteColor } })
-    res.json({ user: req.user })
+    res.json({ user: req.user });
   })
   .post((req, res) => {
-    const { username, password, name } = req.body
-    createUser(req, { username, password, name })
-    res.status(200).json({ success: true, message: 'created new user' })
+    const { username, password, name } = req.body;
+    createUser(req, { username, password, name });
+    res.status(200).json({ success: true, message: "created new user" });
   })
   .use((req, res, next) => {
     // handlers after this (PUT, DELETE) all require an authenticated user
     // This middleware to check if user is authenticated before continuing
     if (!req.user) {
-      res.status(401).send('unauthenticated')
+      res.status(401).send("unauthenticated");
     } else {
-      next()
+      next();
     }
   })
   .put((req, res) => {
-    const { name } = req.body
-    const user = updateUserByUsername(req, req.user.username, { name })
-    res.json({ user })
+    const { name } = req.body;
+    const user = updateUserByUsername(req, req.user.username, { name });
+    res.json({ user });
   })
   .delete((req, res) => {
-    deleteUser(req)
-    req.logOut()
-    res.status(204).end()
-  })
+    deleteUser(req);
+    req.logOut();
+    res.status(204).end();
+  });
 
-export default handler
+export default handler;
diff --git a/examples/with-passport-and-next-connect/pages/api/users.js b/examples/with-passport-and-next-connect/pages/api/users.js
index 7ef4d030ac..ec82951cf0 100644
--- a/examples/with-passport-and-next-connect/pages/api/users.js
+++ b/examples/with-passport-and-next-connect/pages/api/users.js
@@ -1,38 +1,38 @@
-import nextConnect from 'next-connect'
-import auth from '../../middleware/auth'
-import { getAllUsers, createUser, findUserByUsername } from '../../lib/db'
+import nextConnect from "next-connect";
+import auth from "../../middleware/auth";
+import { getAllUsers, createUser, findUserByUsername } from "../../lib/db";
 
-const handler = nextConnect()
+const handler = nextConnect();
 
 handler
   .use(auth)
   .get((req, res) => {
     // For demo purpose only. You will never have an endpoint which returns all users.
     // Remove this in production
-    res.json({ users: getAllUsers(req) })
+    res.json({ users: getAllUsers(req) });
   })
   .post((req, res) => {
-    const { username, password, name } = req.body
+    const { username, password, name } = req.body;
     if (!username || !password || !name) {
-      return res.status(400).send('Missing fields')
+      return res.status(400).send("Missing fields");
     }
     // Here you check if the username has already been used
-    const usernameExisted = !!findUserByUsername(req, username)
+    const usernameExisted = !!findUserByUsername(req, username);
     if (usernameExisted) {
-      return res.status(409).send('The username has already been used')
+      return res.status(409).send("The username has already been used");
     }
-    const user = { username, password, name }
+    const user = { username, password, name };
     // Security-wise, you must hash the password before saving it
     // const hashedPass = await argon2.hash(password);
     // const user = { username, password: hashedPass, name }
-    createUser(req, user)
+    createUser(req, user);
     req.logIn(user, (err) => {
-      if (err) throw err
+      if (err) throw err;
       // Log the signed up user in
       res.status(201).json({
         user,
-      })
-    })
-  })
+      });
+    });
+  });
 
-export default handler
+export default handler;
diff --git a/examples/with-passport-and-next-connect/pages/index.js b/examples/with-passport-and-next-connect/pages/index.js
index 3591086408..8b849b2b2f 100644
--- a/examples/with-passport-and-next-connect/pages/index.js
+++ b/examples/with-passport-and-next-connect/pages/index.js
@@ -1,8 +1,8 @@
-import { useUser, fetcher } from '../lib/hooks'
-import useSWR from 'swr'
+import { useUser, fetcher } from "../lib/hooks";
+import useSWR from "swr";
 
 function UserList() {
-  const { data: { users } = {} } = useSWR('/api/users', fetcher)
+  const { data: { users } = {} } = useSWR("/api/users", fetcher);
   return (
     <>
       <h2>All users</h2>
@@ -23,16 +23,16 @@ function UserList() {
         </ul>
       )}
     </>
-  )
+  );
 }
 
 export default function HomePage() {
-  const [user] = useUser()
+  const [user] = useUser();
   return (
     <>
       <h1>
-        <a href="http://www.passportjs.org/">Passport.js</a> +{' '}
-        <a href="https://github.com/hoangvvo/next-connect">next-connect</a>{' '}
+        <a href="http://www.passportjs.org/">Passport.js</a> +{" "}
+        <a href="https://github.com/hoangvvo/next-connect">next-connect</a>{" "}
         Example
       </h1>
       <h2>Steps to test the example:</h2>
@@ -79,5 +79,5 @@ export default function HomePage() {
         }
       `}</style>
     </>
-  )
+  );
 }
diff --git a/examples/with-passport-and-next-connect/pages/login.js b/examples/with-passport-and-next-connect/pages/login.js
index 125fdc2598..e908b23591 100644
--- a/examples/with-passport-and-next-connect/pages/login.js
+++ b/examples/with-passport-and-next-connect/pages/login.js
@@ -1,38 +1,38 @@
-import { useState, useEffect } from 'react'
-import Router from 'next/router'
-import Link from 'next/link'
-import { useUser } from '../lib/hooks'
+import { useState, useEffect } from "react";
+import Router from "next/router";
+import Link from "next/link";
+import { useUser } from "../lib/hooks";
 
 export default function LoginPage() {
-  const [user, { mutate }] = useUser()
-  const [errorMsg, setErrorMsg] = useState('')
+  const [user, { mutate }] = useUser();
+  const [errorMsg, setErrorMsg] = useState("");
 
   async function onSubmit(e) {
-    e.preventDefault()
+    e.preventDefault();
 
     const body = {
       username: e.currentTarget.username.value,
       password: e.currentTarget.password.value,
-    }
-    const res = await fetch('/api/login', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+    };
+    const res = await fetch("/api/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
       body: JSON.stringify(body),
-    })
+    });
 
     if (res.status === 200) {
-      const userObj = await res.json()
+      const userObj = await res.json();
       // set user to useSWR state
-      mutate(userObj)
+      mutate(userObj);
     } else {
-      setErrorMsg('Incorrect username or password. Try better!')
+      setErrorMsg("Incorrect username or password. Try better!");
     }
   }
 
   useEffect(() => {
     // redirect to home if user is authenticated
-    if (user) Router.push('/')
-  }, [user])
+    if (user) Router.push("/");
+  }, [user]);
 
   return (
     <>
@@ -55,5 +55,5 @@ export default function LoginPage() {
         </form>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/with-passport-and-next-connect/pages/profile.js b/examples/with-passport-and-next-connect/pages/profile.js
index 160f18a4fc..99ab232f26 100644
--- a/examples/with-passport-and-next-connect/pages/profile.js
+++ b/examples/with-passport-and-next-connect/pages/profile.js
@@ -1,40 +1,40 @@
-import { useEffect, useRef } from 'react'
-import Router from 'next/router'
-import { useUser } from '../lib/hooks'
+import { useEffect, useRef } from "react";
+import Router from "next/router";
+import { useUser } from "../lib/hooks";
 
 function ProfileEdit() {
-  const [user, { mutate }] = useUser()
-  const nameRef = useRef()
+  const [user, { mutate }] = useUser();
+  const nameRef = useRef();
 
   useEffect(() => {
-    if (!user) return
-    nameRef.current.value = user.name
-  }, [user])
+    if (!user) return;
+    nameRef.current.value = user.name;
+  }, [user]);
 
   async function handleEditProfile(e) {
-    e.preventDefault()
+    e.preventDefault();
 
     const body = {
       name: nameRef.current.value,
-    }
+    };
     const res = await fetch(`/api/user`, {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
       body: JSON.stringify(body),
-    })
-    const updatedUser = await res.json()
+    });
+    const updatedUser = await res.json();
 
-    mutate(updatedUser)
+    mutate(updatedUser);
   }
 
   async function handleDeleteProfile() {
     const res = await fetch(`/api/user`, {
-      method: 'DELETE',
-    })
+      method: "DELETE",
+    });
 
     if (res.status === 204) {
-      mutate({ user: null })
-      Router.replace('/')
+      mutate({ user: null });
+      Router.replace("/");
     }
   }
 
@@ -64,16 +64,16 @@ function ProfileEdit() {
         }
       `}</style>
     </>
-  )
+  );
 }
 
 export default function ProfilePage() {
-  const [user, { loading }] = useUser()
+  const [user, { loading }] = useUser();
 
   useEffect(() => {
     // redirect user to login if not authenticated
-    if (!loading && !user) Router.replace('/login')
-  }, [user, loading])
+    if (!loading && !user) Router.replace("/login");
+  }, [user, loading]);
 
   return (
     <>
@@ -94,5 +94,5 @@ export default function ProfilePage() {
         }
       `}</style>
     </>
-  )
+  );
 }
diff --git a/examples/with-passport-and-next-connect/pages/signup.js b/examples/with-passport-and-next-connect/pages/signup.js
index 77ce61061f..1f3518fb5a 100644
--- a/examples/with-passport-and-next-connect/pages/signup.js
+++ b/examples/with-passport-and-next-connect/pages/signup.js
@@ -1,45 +1,45 @@
-import { useState, useEffect } from 'react'
-import Router from 'next/router'
-import Link from 'next/link'
-import { useUser } from '../lib/hooks'
+import { useState, useEffect } from "react";
+import Router from "next/router";
+import Link from "next/link";
+import { useUser } from "../lib/hooks";
 
 export default function SignupPage() {
-  const [user, { mutate }] = useUser()
-  const [errorMsg, setErrorMsg] = useState('')
+  const [user, { mutate }] = useUser();
+  const [errorMsg, setErrorMsg] = useState("");
 
   async function onSubmit(e) {
-    e.preventDefault()
+    e.preventDefault();
 
     const body = {
       username: e.currentTarget.username.value,
       password: e.currentTarget.password.value,
       name: e.currentTarget.name.value,
-    }
+    };
 
     if (body.password !== e.currentTarget.rpassword.value) {
-      setErrorMsg(`The passwords don't match`)
-      return
+      setErrorMsg(`The passwords don't match`);
+      return;
     }
 
-    const res = await fetch('/api/users', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+    const res = await fetch("/api/users", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
       body: JSON.stringify(body),
-    })
+    });
 
     if (res.status === 201) {
-      const userObj = await res.json()
+      const userObj = await res.json();
       // set user to useSWR state
-      mutate(userObj)
+      mutate(userObj);
     } else {
-      setErrorMsg(await res.text())
+      setErrorMsg(await res.text());
     }
   }
 
   useEffect(() => {
     // redirect to home if user is authenticated
-    if (user) Router.push('/')
-  }, [user])
+    if (user) Router.push("/");
+  }, [user]);
 
   return (
     <>
@@ -70,5 +70,5 @@ export default function SignupPage() {
         </form>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/with-passport-and-next-connect/styles.css b/examples/with-passport-and-next-connect/styles.css
index e34bd2f38d..80c210850a 100644
--- a/examples/with-passport-and-next-connect/styles.css
+++ b/examples/with-passport-and-next-connect/styles.css
@@ -6,9 +6,9 @@
 body {
   margin: 0;
   color: #333;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, Noto Sans, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 .container {
   max-width: 42rem;
diff --git a/examples/with-passport/components/form.js b/examples/with-passport/components/form.js
index 3e9f5bbfd5..ad8670f492 100644
--- a/examples/with-passport/components/form.js
+++ b/examples/with-passport/components/form.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 const Form = ({ isLogin, errorMessage, onSubmit }) => (
   <form onSubmit={onSubmit}>
@@ -77,6 +77,6 @@ const Form = ({ isLogin, errorMessage, onSubmit }) => (
       }
     `}</style>
   </form>
-)
+);
 
-export default Form
+export default Form;
diff --git a/examples/with-passport/components/header.js b/examples/with-passport/components/header.js
index 746ad5d791..597b82589b 100644
--- a/examples/with-passport/components/header.js
+++ b/examples/with-passport/components/header.js
@@ -1,8 +1,8 @@
-import Link from 'next/link'
-import { useUser } from '../lib/hooks'
+import Link from "next/link";
+import { useUser } from "../lib/hooks";
 
 const Header = () => {
-  const user = useUser()
+  const user = useUser();
 
   return (
     <header>
@@ -61,7 +61,7 @@ const Header = () => {
         }
       `}</style>
     </header>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;
diff --git a/examples/with-passport/components/layout.js b/examples/with-passport/components/layout.js
index 5456e1ca45..450121b365 100644
--- a/examples/with-passport/components/layout.js
+++ b/examples/with-passport/components/layout.js
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import Header from './header'
+import Head from "next/head";
+import Header from "./header";
 
 const Layout = (props) => (
   <>
@@ -22,9 +22,9 @@ const Layout = (props) => (
       body {
         margin: 0;
         color: #333;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-          'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
-          'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          "Helvetica Neue", Arial, Noto Sans, sans-serif, "Apple Color Emoji",
+          "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
       }
       .container {
         max-width: 42rem;
@@ -33,6 +33,6 @@ const Layout = (props) => (
       }
     `}</style>
   </>
-)
+);
 
-export default Layout
+export default Layout;
diff --git a/examples/with-passport/lib/auth-cookies.js b/examples/with-passport/lib/auth-cookies.js
index b0fbf5030b..6e829c760c 100644
--- a/examples/with-passport/lib/auth-cookies.js
+++ b/examples/with-passport/lib/auth-cookies.js
@@ -1,41 +1,41 @@
-import { serialize, parse } from 'cookie'
+import { serialize, parse } from "cookie";
 
-const TOKEN_NAME = 'token'
+const TOKEN_NAME = "token";
 
-export const MAX_AGE = 60 * 60 * 8 // 8 hours
+export const MAX_AGE = 60 * 60 * 8; // 8 hours
 
 export function setTokenCookie(res, token) {
   const cookie = serialize(TOKEN_NAME, token, {
     maxAge: MAX_AGE,
     expires: new Date(Date.now() + MAX_AGE * 1000),
     httpOnly: true,
-    secure: process.env.NODE_ENV === 'production',
-    path: '/',
-    sameSite: 'lax',
-  })
+    secure: process.env.NODE_ENV === "production",
+    path: "/",
+    sameSite: "lax",
+  });
 
-  res.setHeader('Set-Cookie', cookie)
+  res.setHeader("Set-Cookie", cookie);
 }
 
 export function removeTokenCookie(res) {
-  const cookie = serialize(TOKEN_NAME, '', {
+  const cookie = serialize(TOKEN_NAME, "", {
     maxAge: -1,
-    path: '/',
-  })
+    path: "/",
+  });
 
-  res.setHeader('Set-Cookie', cookie)
+  res.setHeader("Set-Cookie", cookie);
 }
 
 export function parseCookies(req) {
   // For API Routes we don't need to parse the cookies.
-  if (req.cookies) return req.cookies
+  if (req.cookies) return req.cookies;
 
   // For pages we do need to parse the cookies.
-  const cookie = req.headers?.cookie
-  return parse(cookie || '')
+  const cookie = req.headers?.cookie;
+  return parse(cookie || "");
 }
 
 export function getTokenCookie(req) {
-  const cookies = parseCookies(req)
-  return cookies[TOKEN_NAME]
+  const cookies = parseCookies(req);
+  return cookies[TOKEN_NAME];
 }
diff --git a/examples/with-passport/lib/auth.js b/examples/with-passport/lib/auth.js
index fe830e95d5..15bcaec77a 100644
--- a/examples/with-passport/lib/auth.js
+++ b/examples/with-passport/lib/auth.js
@@ -1,29 +1,29 @@
-import Iron from '@hapi/iron'
-import { MAX_AGE, setTokenCookie, getTokenCookie } from './auth-cookies'
+import Iron from "@hapi/iron";
+import { MAX_AGE, setTokenCookie, getTokenCookie } from "./auth-cookies";
 
-const TOKEN_SECRET = process.env.TOKEN_SECRET
+const TOKEN_SECRET = process.env.TOKEN_SECRET;
 
 export async function setLoginSession(res, session) {
-  const createdAt = Date.now()
+  const createdAt = Date.now();
   // Create a session object with a max age that we can validate later
-  const obj = { ...session, createdAt, maxAge: MAX_AGE }
-  const token = await Iron.seal(obj, TOKEN_SECRET, Iron.defaults)
+  const obj = { ...session, createdAt, maxAge: MAX_AGE };
+  const token = await Iron.seal(obj, TOKEN_SECRET, Iron.defaults);
 
-  setTokenCookie(res, token)
+  setTokenCookie(res, token);
 }
 
 export async function getLoginSession(req) {
-  const token = getTokenCookie(req)
+  const token = getTokenCookie(req);
 
-  if (!token) return
+  if (!token) return;
 
-  const session = await Iron.unseal(token, TOKEN_SECRET, Iron.defaults)
-  const expiresAt = session.createdAt + session.maxAge * 1000
+  const session = await Iron.unseal(token, TOKEN_SECRET, Iron.defaults);
+  const expiresAt = session.createdAt + session.maxAge * 1000;
 
   // Validate the expiration date of the session
   if (Date.now() > expiresAt) {
-    throw new Error('Session expired')
+    throw new Error("Session expired");
   }
 
-  return session
+  return session;
 }
diff --git a/examples/with-passport/lib/hooks.js b/examples/with-passport/lib/hooks.js
index f3a6885fbb..72a7db9413 100644
--- a/examples/with-passport/lib/hooks.js
+++ b/examples/with-passport/lib/hooks.js
@@ -1,31 +1,31 @@
-import { useEffect } from 'react'
-import Router from 'next/router'
-import useSWR from 'swr'
+import { useEffect } from "react";
+import Router from "next/router";
+import useSWR from "swr";
 
 const fetcher = (url) =>
   fetch(url)
     .then((r) => r.json())
     .then((data) => {
-      return { user: data?.user || null }
-    })
+      return { user: data?.user || null };
+    });
 
 export function useUser({ redirectTo, redirectIfFound } = {}) {
-  const { data, error } = useSWR('/api/user', fetcher)
-  const user = data?.user
-  const finished = Boolean(data)
-  const hasUser = Boolean(user)
+  const { data, error } = useSWR("/api/user", fetcher);
+  const user = data?.user;
+  const finished = Boolean(data);
+  const hasUser = Boolean(user);
 
   useEffect(() => {
-    if (!redirectTo || !finished) return
+    if (!redirectTo || !finished) return;
     if (
       // If redirectTo is set, redirect if the user was not found.
       (redirectTo && !redirectIfFound && !hasUser) ||
       // If redirectIfFound is also set, redirect if the user was found
       (redirectIfFound && hasUser)
     ) {
-      Router.push(redirectTo)
+      Router.push(redirectTo);
     }
-  }, [redirectTo, redirectIfFound, finished, hasUser])
+  }, [redirectTo, redirectIfFound, finished, hasUser]);
 
-  return error ? null : user
+  return error ? null : user;
 }
diff --git a/examples/with-passport/lib/password-local.js b/examples/with-passport/lib/password-local.js
index bdd9dcc6b1..f868e23de7 100644
--- a/examples/with-passport/lib/password-local.js
+++ b/examples/with-passport/lib/password-local.js
@@ -1,20 +1,20 @@
-import Local from 'passport-local'
-import { findUser, validatePassword } from './user'
+import Local from "passport-local";
+import { findUser, validatePassword } from "./user";
 
 export const localStrategy = new Local.Strategy(function (
   username,
   password,
-  done
+  done,
 ) {
   findUser({ username })
     .then((user) => {
       if (user && validatePassword(user, password)) {
-        done(null, user)
+        done(null, user);
       } else {
-        done(new Error('Invalid username and password combination'))
+        done(new Error("Invalid username and password combination"));
       }
     })
     .catch((error) => {
-      done(error)
-    })
-})
+      done(error);
+    });
+});
diff --git a/examples/with-passport/lib/user.js b/examples/with-passport/lib/user.js
index 1c4dc62976..b0211b2d2f 100644
--- a/examples/with-passport/lib/user.js
+++ b/examples/with-passport/lib/user.js
@@ -1,46 +1,46 @@
-import crypto from 'crypto'
-import { v4 as uuidv4 } from 'uuid'
+import crypto from "crypto";
+import { v4 as uuidv4 } from "uuid";
 
 /**
  * User methods. The example doesn't contain a DB, but for real applications you must use a
  * db here, such as MongoDB, Fauna, SQL, etc.
  */
 
-const users = []
+const users = [];
 
 export async function createUser({ username, password }) {
   // Here you should create the user and save the salt and hashed password (some dbs may have
   // authentication methods that will do it for you so you don't have to worry about it):
-  const salt = crypto.randomBytes(16).toString('hex')
+  const salt = crypto.randomBytes(16).toString("hex");
   const hash = crypto
-    .pbkdf2Sync(password, salt, 1000, 64, 'sha512')
-    .toString('hex')
+    .pbkdf2Sync(password, salt, 1000, 64, "sha512")
+    .toString("hex");
   const user = {
     id: uuidv4(),
     createdAt: Date.now(),
     username,
     hash,
     salt,
-  }
+  };
 
   // This is an in memory store for users, there is no data persistence without a proper DB
-  users.push(user)
+  users.push(user);
 
-  return { username, createdAt: Date.now() }
+  return { username, createdAt: Date.now() };
 }
 
 // Here you should lookup for the user in your DB
 export async function findUser({ username }) {
   // This is an in memory store for users, there is no data persistence without a proper DB
-  return users.find((user) => user.username === username)
+  return users.find((user) => user.username === username);
 }
 
 // Compare the password of an already fetched user (using `findUser`) and compare the
 // password for a potential match
 export function validatePassword(user, inputPassword) {
   const inputHash = crypto
-    .pbkdf2Sync(inputPassword, user.salt, 1000, 64, 'sha512')
-    .toString('hex')
-  const passwordsMatch = user.hash === inputHash
-  return passwordsMatch
+    .pbkdf2Sync(inputPassword, user.salt, 1000, 64, "sha512")
+    .toString("hex");
+  const passwordsMatch = user.hash === inputHash;
+  return passwordsMatch;
 }
diff --git a/examples/with-passport/pages/api/login.js b/examples/with-passport/pages/api/login.js
index cb72f79292..749dfb957f 100644
--- a/examples/with-passport/pages/api/login.js
+++ b/examples/with-passport/pages/api/login.js
@@ -1,34 +1,34 @@
-import passport from 'passport'
-import nextConnect from 'next-connect'
-import { localStrategy } from '../../lib/password-local'
-import { setLoginSession } from '../../lib/auth'
+import passport from "passport";
+import nextConnect from "next-connect";
+import { localStrategy } from "../../lib/password-local";
+import { setLoginSession } from "../../lib/auth";
 
 const authenticate = (method, req, res) =>
   new Promise((resolve, reject) => {
     passport.authenticate(method, { session: false }, (error, token) => {
       if (error) {
-        reject(error)
+        reject(error);
       } else {
-        resolve(token)
+        resolve(token);
       }
-    })(req, res)
-  })
+    })(req, res);
+  });
 
-passport.use(localStrategy)
+passport.use(localStrategy);
 
 export default nextConnect()
   .use(passport.initialize())
   .post(async (req, res) => {
     try {
-      const user = await authenticate('local', req, res)
+      const user = await authenticate("local", req, res);
       // session is the payload to save in the token, it may contain basic info about the user
-      const session = { ...user }
+      const session = { ...user };
 
-      await setLoginSession(res, session)
+      await setLoginSession(res, session);
 
-      res.status(200).send({ done: true })
+      res.status(200).send({ done: true });
     } catch (error) {
-      console.error(error)
-      res.status(401).send(error.message)
+      console.error(error);
+      res.status(401).send(error.message);
     }
-  })
+  });
diff --git a/examples/with-passport/pages/api/logout.js b/examples/with-passport/pages/api/logout.js
index 1fe3096cdc..4cf886ad77 100644
--- a/examples/with-passport/pages/api/logout.js
+++ b/examples/with-passport/pages/api/logout.js
@@ -1,7 +1,7 @@
-import { removeTokenCookie } from '../../lib/auth-cookies'
+import { removeTokenCookie } from "../../lib/auth-cookies";
 
 export default async function logout(req, res) {
-  removeTokenCookie(res)
-  res.writeHead(302, { Location: '/' })
-  res.end()
+  removeTokenCookie(res);
+  res.writeHead(302, { Location: "/" });
+  res.end();
 }
diff --git a/examples/with-passport/pages/api/signup.js b/examples/with-passport/pages/api/signup.js
index 7972d47838..99f6fcca01 100644
--- a/examples/with-passport/pages/api/signup.js
+++ b/examples/with-passport/pages/api/signup.js
@@ -1,11 +1,11 @@
-import { createUser } from '../../lib/user'
+import { createUser } from "../../lib/user";
 
 export default async function signup(req, res) {
   try {
-    await createUser(req.body)
-    res.status(200).send({ done: true })
+    await createUser(req.body);
+    res.status(200).send({ done: true });
   } catch (error) {
-    console.error(error)
-    res.status(500).end(error.message)
+    console.error(error);
+    res.status(500).end(error.message);
   }
 }
diff --git a/examples/with-passport/pages/api/user.js b/examples/with-passport/pages/api/user.js
index 873a44b4d4..a0e4f339e8 100644
--- a/examples/with-passport/pages/api/user.js
+++ b/examples/with-passport/pages/api/user.js
@@ -1,14 +1,14 @@
-import { getLoginSession } from '../../lib/auth'
-import { findUser } from '../../lib/user'
+import { getLoginSession } from "../../lib/auth";
+import { findUser } from "../../lib/user";
 
 export default async function user(req, res) {
   try {
-    const session = await getLoginSession(req)
-    const user = (session && (await findUser(session))) ?? null
+    const session = await getLoginSession(req);
+    const user = (session && (await findUser(session))) ?? null;
 
-    res.status(200).json({ user })
+    res.status(200).json({ user });
   } catch (error) {
-    console.error(error)
-    res.status(500).end('Authentication token is invalid, please log in')
+    console.error(error);
+    res.status(500).end("Authentication token is invalid, please log in");
   }
 }
diff --git a/examples/with-passport/pages/index.js b/examples/with-passport/pages/index.js
index 1ca76dee2b..52d68d1f20 100644
--- a/examples/with-passport/pages/index.js
+++ b/examples/with-passport/pages/index.js
@@ -1,8 +1,8 @@
-import { useUser } from '../lib/hooks'
-import Layout from '../components/layout'
+import { useUser } from "../lib/hooks";
+import Layout from "../components/layout";
 
 const Home = () => {
-  const user = useUser()
+  const user = useUser();
 
   return (
     <Layout>
@@ -39,7 +39,7 @@ const Home = () => {
         }
       `}</style>
     </Layout>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/examples/with-passport/pages/login.js b/examples/with-passport/pages/login.js
index 6935f3261d..6a6a7f7500 100644
--- a/examples/with-passport/pages/login.js
+++ b/examples/with-passport/pages/login.js
@@ -1,38 +1,38 @@
-import { useState } from 'react'
-import Router from 'next/router'
-import { useUser } from '../lib/hooks'
-import Layout from '../components/layout'
-import Form from '../components/form'
+import { useState } from "react";
+import Router from "next/router";
+import { useUser } from "../lib/hooks";
+import Layout from "../components/layout";
+import Form from "../components/form";
 
 const Login = () => {
-  useUser({ redirectTo: '/', redirectIfFound: true })
+  useUser({ redirectTo: "/", redirectIfFound: true });
 
-  const [errorMsg, setErrorMsg] = useState('')
+  const [errorMsg, setErrorMsg] = useState("");
 
   async function handleSubmit(e) {
-    e.preventDefault()
+    e.preventDefault();
 
-    if (errorMsg) setErrorMsg('')
+    if (errorMsg) setErrorMsg("");
 
     const body = {
       username: e.currentTarget.username.value,
       password: e.currentTarget.password.value,
-    }
+    };
 
     try {
-      const res = await fetch('/api/login', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+      const res = await fetch("/api/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify(body),
-      })
+      });
       if (res.status === 200) {
-        Router.push('/')
+        Router.push("/");
       } else {
-        throw new Error(await res.text())
+        throw new Error(await res.text());
       }
     } catch (error) {
-      console.error('An unexpected error happened occurred:', error)
-      setErrorMsg(error.message)
+      console.error("An unexpected error happened occurred:", error);
+      setErrorMsg(error.message);
     }
   }
 
@@ -51,7 +51,7 @@ const Login = () => {
         }
       `}</style>
     </Layout>
-  )
-}
+  );
+};
 
-export default Login
+export default Login;
diff --git a/examples/with-passport/pages/profile.js b/examples/with-passport/pages/profile.js
index 6c02924bfe..b0fd5fbf0a 100644
--- a/examples/with-passport/pages/profile.js
+++ b/examples/with-passport/pages/profile.js
@@ -1,8 +1,8 @@
-import { useUser } from '../lib/hooks'
-import Layout from '../components/layout'
+import { useUser } from "../lib/hooks";
+import Layout from "../components/layout";
 
 const Profile = () => {
-  const user = useUser({ redirectTo: '/login' })
+  const user = useUser({ redirectTo: "/login" });
 
   return (
     <Layout>
@@ -21,7 +21,7 @@ const Profile = () => {
         }
       `}</style>
     </Layout>
-  )
-}
+  );
+};
 
-export default Profile
+export default Profile;
diff --git a/examples/with-passport/pages/signup.js b/examples/with-passport/pages/signup.js
index bcc2080177..627c4fa41c 100644
--- a/examples/with-passport/pages/signup.js
+++ b/examples/with-passport/pages/signup.js
@@ -1,43 +1,43 @@
-import { useState } from 'react'
-import Router from 'next/router'
-import { useUser } from '../lib/hooks'
-import Layout from '../components/layout'
-import Form from '../components/form'
+import { useState } from "react";
+import Router from "next/router";
+import { useUser } from "../lib/hooks";
+import Layout from "../components/layout";
+import Form from "../components/form";
 
 const Signup = () => {
-  useUser({ redirectTo: '/', redirectIfFound: true })
+  useUser({ redirectTo: "/", redirectIfFound: true });
 
-  const [errorMsg, setErrorMsg] = useState('')
+  const [errorMsg, setErrorMsg] = useState("");
 
   async function handleSubmit(e) {
-    e.preventDefault()
+    e.preventDefault();
 
-    if (errorMsg) setErrorMsg('')
+    if (errorMsg) setErrorMsg("");
 
     const body = {
       username: e.currentTarget.username.value,
       password: e.currentTarget.password.value,
-    }
+    };
 
     if (body.password !== e.currentTarget.rpassword.value) {
-      setErrorMsg(`The passwords don't match`)
-      return
+      setErrorMsg(`The passwords don't match`);
+      return;
     }
 
     try {
-      const res = await fetch('/api/signup', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+      const res = await fetch("/api/signup", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify(body),
-      })
+      });
       if (res.status === 200) {
-        Router.push('/login')
+        Router.push("/login");
       } else {
-        throw new Error(await res.text())
+        throw new Error(await res.text());
       }
     } catch (error) {
-      console.error('An unexpected error happened occurred:', error)
-      setErrorMsg(error.message)
+      console.error("An unexpected error happened occurred:", error);
+      setErrorMsg(error.message);
     }
   }
 
@@ -56,7 +56,7 @@ const Signup = () => {
         }
       `}</style>
     </Layout>
-  )
-}
+  );
+};
 
-export default Signup
+export default Signup;
diff --git a/examples/with-paste-typescript/pages/_app.tsx b/examples/with-paste-typescript/pages/_app.tsx
index b233879eb5..b93dafe437 100644
--- a/examples/with-paste-typescript/pages/_app.tsx
+++ b/examples/with-paste-typescript/pages/_app.tsx
@@ -1,11 +1,11 @@
-import { Theme } from '@twilio-paste/core/theme'
+import { Theme } from "@twilio-paste/core/theme";
 
 function MyApp({ Component, pageProps }) {
   return (
     <Theme.Provider theme="default">
       <Component {...pageProps} />
     </Theme.Provider>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-paste-typescript/pages/index.tsx b/examples/with-paste-typescript/pages/index.tsx
index 834f59a31b..5d05f13bcd 100644
--- a/examples/with-paste-typescript/pages/index.tsx
+++ b/examples/with-paste-typescript/pages/index.tsx
@@ -1,11 +1,11 @@
-import Head from 'next/head'
-import { Anchor } from '@twilio-paste/core/anchor'
-import { Heading } from '@twilio-paste/core/heading'
-import { Box } from '@twilio-paste/core/box'
-import { Paragraph } from '@twilio-paste/core/paragraph'
-import { ListItem, UnorderedList } from '@twilio-paste/core/list'
-import { ArrowForwardIcon } from '@twilio-paste/icons/cjs/ArrowForwardIcon'
-import { Separator } from '@twilio-paste/core/separator'
+import Head from "next/head";
+import { Anchor } from "@twilio-paste/core/anchor";
+import { Heading } from "@twilio-paste/core/heading";
+import { Box } from "@twilio-paste/core/box";
+import { Paragraph } from "@twilio-paste/core/paragraph";
+import { ListItem, UnorderedList } from "@twilio-paste/core/list";
+import { ArrowForwardIcon } from "@twilio-paste/icons/cjs/ArrowForwardIcon";
+import { Separator } from "@twilio-paste/core/separator";
 
 export default function Home() {
   return (
@@ -16,7 +16,7 @@ export default function Home() {
       </Head>
 
       <Heading as="h1" variant="heading10">
-        Welcome to the{' '}
+        Welcome to the{" "}
         <Anchor href="https://paste.twilio.design">Paste Next.js App!</Anchor>
       </Heading>
 
@@ -36,7 +36,7 @@ export default function Home() {
           <Heading as="h3" variant="heading30">
             <Anchor href="https://paste.twilio.design">
               <Box as="span" display="flex" alignItems="center">
-                Paste Documentation{' '}
+                Paste Documentation{" "}
                 <ArrowForwardIcon decorative size="sizeIcon60" />
               </Box>
             </Anchor>
@@ -50,7 +50,7 @@ export default function Home() {
           <Heading as="h3" variant="heading30">
             <Anchor href="https://nextjs.org/docs">
               <Box as="span" display="flex" alignItems="center">
-                Next.js Documentation{' '}
+                Next.js Documentation{" "}
                 <ArrowForwardIcon decorative size="sizeIcon60" />
               </Box>
             </Anchor>
@@ -73,5 +73,5 @@ export default function Home() {
         </ListItem>
       </UnorderedList>
     </Box>
-  )
+  );
 }
diff --git a/examples/with-plausible/components/Header.js b/examples/with-plausible/components/Header.js
index 68edfe2512..46d49a3b3d 100644
--- a/examples/with-plausible/components/Header.js
+++ b/examples/with-plausible/components/Header.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -17,5 +17,5 @@ export default function Header() {
         </ul>
       </nav>
     </header>
-  )
+  );
 }
diff --git a/examples/with-plausible/components/Page.js b/examples/with-plausible/components/Page.js
index 3420951b7d..9ecadce7f7 100644
--- a/examples/with-plausible/components/Page.js
+++ b/examples/with-plausible/components/Page.js
@@ -1,4 +1,4 @@
-import Header from './Header'
+import Header from "./Header";
 
 export default function Page({ children }) {
   return (
@@ -6,5 +6,5 @@ export default function Page({ children }) {
       <Header />
       {children}
     </div>
-  )
+  );
 }
diff --git a/examples/with-plausible/pages/_app.js b/examples/with-plausible/pages/_app.js
index d187fc70b0..0067d57686 100644
--- a/examples/with-plausible/pages/_app.js
+++ b/examples/with-plausible/pages/_app.js
@@ -1,9 +1,9 @@
-import PlausibleProvider from 'next-plausible'
+import PlausibleProvider from "next-plausible";
 
 export default function MyApp({ Component, pageProps }) {
   return (
     <PlausibleProvider domain={process.env.NEXT_PUBLIC_DOMAIN}>
       <Component {...pageProps} />
     </PlausibleProvider>
-  )
+  );
 }
diff --git a/examples/with-plausible/pages/about.js b/examples/with-plausible/pages/about.js
index 2b0ac9e8ef..425faf7c40 100644
--- a/examples/with-plausible/pages/about.js
+++ b/examples/with-plausible/pages/about.js
@@ -1,9 +1,9 @@
-import Page from '../components/Page'
+import Page from "../components/Page";
 
 export default function About() {
   return (
     <Page>
       <h1>This is the About page</h1>
     </Page>
-  )
+  );
 }
diff --git a/examples/with-plausible/pages/contact.js b/examples/with-plausible/pages/contact.js
index a2cefd45a7..51896d6a14 100644
--- a/examples/with-plausible/pages/contact.js
+++ b/examples/with-plausible/pages/contact.js
@@ -1,24 +1,24 @@
-import { useState } from 'react'
-import Page from '../components/Page'
-import { usePlausible } from 'next-plausible'
+import { useState } from "react";
+import Page from "../components/Page";
+import { usePlausible } from "next-plausible";
 
 export default function Contact() {
-  const [message, setMessage] = useState('')
-  const plausible = usePlausible()
+  const [message, setMessage] = useState("");
+  const plausible = usePlausible();
 
   const handleSubmit = (e) => {
-    e.preventDefault()
+    e.preventDefault();
 
-    plausible('customEventName', {
+    plausible("customEventName", {
       props: {
         message,
       },
-    })
+    });
 
     // your own submit logic
 
-    setMessage('')
-  }
+    setMessage("");
+  };
 
   return (
     <Page>
@@ -34,5 +34,5 @@ export default function Contact() {
         <button type="submit">submit</button>
       </form>
     </Page>
-  )
+  );
 }
diff --git a/examples/with-plausible/pages/index.js b/examples/with-plausible/pages/index.js
index 5dc3dadfcc..fcda57a616 100644
--- a/examples/with-plausible/pages/index.js
+++ b/examples/with-plausible/pages/index.js
@@ -1,9 +1,9 @@
-import Page from '../components/Page'
+import Page from "../components/Page";
 
 export default function Home() {
   return (
     <Page>
       <h1>This is the Home page</h1>
     </Page>
-  )
+  );
 }
diff --git a/examples/with-playwright/app/about/page.tsx b/examples/with-playwright/app/about/page.tsx
index 64d02da08d..43c34642d2 100644
--- a/examples/with-playwright/app/about/page.tsx
+++ b/examples/with-playwright/app/about/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Page() {
   return (
@@ -6,5 +6,5 @@ export default function Page() {
       <h1>About</h1>
       <Link href="/">Home</Link>
     </div>
-  )
+  );
 }
diff --git a/examples/with-playwright/app/layout.tsx b/examples/with-playwright/app/layout.tsx
index dbce4ea8e3..225b6038d7 100644
--- a/examples/with-playwright/app/layout.tsx
+++ b/examples/with-playwright/app/layout.tsx
@@ -1,11 +1,11 @@
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-playwright/app/page.tsx b/examples/with-playwright/app/page.tsx
index 5b67d3ed29..55816c6e06 100644
--- a/examples/with-playwright/app/page.tsx
+++ b/examples/with-playwright/app/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Page() {
   return (
@@ -6,5 +6,5 @@ export default function Page() {
       <h1>Home</h1>
       <Link href="/about">About</Link>
     </div>
-  )
+  );
 }
diff --git a/examples/with-playwright/e2e/app.spec.ts b/examples/with-playwright/e2e/app.spec.ts
index 08f59e70fd..f2f703df4b 100644
--- a/examples/with-playwright/e2e/app.spec.ts
+++ b/examples/with-playwright/e2e/app.spec.ts
@@ -1,12 +1,12 @@
-import { test, expect } from '@playwright/test'
+import { test, expect } from "@playwright/test";
 
-test('should navigate to the about page', async ({ page }) => {
+test("should navigate to the about page", async ({ page }) => {
   // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
-  await page.goto('/')
+  await page.goto("/");
   // Find an element with the text 'About' and click on it
-  await page.click('text=About')
+  await page.click("text=About");
   // The new URL should be "/about" (baseURL is used there)
-  await expect(page).toHaveURL('/about')
+  await expect(page).toHaveURL("/about");
   // The new page should contain an h1 with "About"
-  await expect(page.locator('h1')).toContainText('About')
-})
+  await expect(page.locator("h1")).toContainText("About");
+});
diff --git a/examples/with-playwright/e2e/pages.spec.ts b/examples/with-playwright/e2e/pages.spec.ts
index 72cf32f827..d3bc3d1c81 100644
--- a/examples/with-playwright/e2e/pages.spec.ts
+++ b/examples/with-playwright/e2e/pages.spec.ts
@@ -1,14 +1,14 @@
-import { test, expect } from '@playwright/test'
+import { test, expect } from "@playwright/test";
 
-test('should navigate to the about page', async ({ page }) => {
+test("should navigate to the about page", async ({ page }) => {
   // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
-  await page.goto('/home')
+  await page.goto("/home");
   // Find an element with the text 'About Page' and click on it
-  await page.getByText('About Page').click()
+  await page.getByText("About Page").click();
   // The new url should be "/about" (baseURL is used there)
-  await expect(page).toHaveURL('/home/about')
+  await expect(page).toHaveURL("/home/about");
   // The new page should contain an h1 with "About Page"
-  await expect(page.getByRole('heading', { level: 1 })).toContainText(
-    'About Page'
-  )
-})
+  await expect(page.getByRole("heading", { level: 1 })).toContainText(
+    "About Page",
+  );
+});
diff --git a/examples/with-playwright/pages/_app.tsx b/examples/with-playwright/pages/_app.tsx
index 1e1cec9242..2fc3e07009 100644
--- a/examples/with-playwright/pages/_app.tsx
+++ b/examples/with-playwright/pages/_app.tsx
@@ -1,7 +1,7 @@
-import '../styles/globals.css'
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-playwright/pages/home/about.tsx b/examples/with-playwright/pages/home/about.tsx
index cff45f184e..3e0488ca69 100644
--- a/examples/with-playwright/pages/home/about.tsx
+++ b/examples/with-playwright/pages/home/about.tsx
@@ -1,5 +1,5 @@
-import styles from '../../styles/Home.module.css'
-import Link from 'next/link'
+import styles from "../../styles/Home.module.css";
+import Link from "next/link";
 
 export default function About() {
   return (
@@ -11,5 +11,5 @@ export default function About() {
         </p>
       </main>
     </div>
-  )
+  );
 }
diff --git a/examples/with-playwright/pages/home/index.tsx b/examples/with-playwright/pages/home/index.tsx
index 1e379aaa75..cddbf1db06 100644
--- a/examples/with-playwright/pages/home/index.tsx
+++ b/examples/with-playwright/pages/home/index.tsx
@@ -1,7 +1,7 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import Link from 'next/link'
-import styles from '../../styles/Home.module.css'
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+import styles from "../../styles/Home.module.css";
 
 export default function Home() {
   return (
@@ -18,7 +18,7 @@ export default function Home() {
         </h1>
 
         <p className={styles.description}>
-          Get started by editing{' '}
+          Get started by editing{" "}
           <code className={styles.code}>pages/index.js</code>
         </p>
 
@@ -66,12 +66,12 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <span className={styles.logo}>
             <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
           </span>
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-playwright/playwright.config.ts b/examples/with-playwright/playwright.config.ts
index b488d21784..5c2abe1d23 100644
--- a/examples/with-playwright/playwright.config.ts
+++ b/examples/with-playwright/playwright.config.ts
@@ -1,27 +1,27 @@
-import { defineConfig, devices } from '@playwright/test'
-import path from 'path'
+import { defineConfig, devices } from "@playwright/test";
+import path from "path";
 
 // Use process.env.PORT by default and fallback to port 3000
-const PORT = process.env.PORT || 3000
+const PORT = process.env.PORT || 3000;
 
 // Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port
-const baseURL = `http://localhost:${PORT}`
+const baseURL = `http://localhost:${PORT}`;
 
 // Reference: https://playwright.dev/docs/test-configuration
 export default defineConfig({
   // Timeout per test
   timeout: 30 * 1000,
   // Test directory
-  testDir: path.join(__dirname, 'e2e'),
+  testDir: path.join(__dirname, "e2e"),
   // If a test fails, retry it additional 2 times
   retries: 2,
   // Artifacts folder where screenshots, videos, and traces are stored.
-  outputDir: 'test-results/',
+  outputDir: "test-results/",
 
   // Run your local dev server before starting the tests:
   // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
   webServer: {
-    command: 'npm run dev',
+    command: "npm run dev",
     url: baseURL,
     timeout: 120 * 1000,
     reuseExistingServer: !process.env.CI,
@@ -34,7 +34,7 @@ export default defineConfig({
 
     // Retry a test if its failing with enabled tracing. This allows you to analyze the DOM, console logs, network traffic etc.
     // More information: https://playwright.dev/docs/trace-viewer
-    trace: 'retry-with-trace',
+    trace: "retry-with-trace",
 
     // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
     // contextOptions: {
@@ -44,9 +44,9 @@ export default defineConfig({
 
   projects: [
     {
-      name: 'Desktop Chrome',
+      name: "Desktop Chrome",
       use: {
-        ...devices['Desktop Chrome'],
+        ...devices["Desktop Chrome"],
       },
     },
     // {
@@ -63,14 +63,14 @@ export default defineConfig({
     // },
     // Test against mobile viewports.
     {
-      name: 'Mobile Chrome',
+      name: "Mobile Chrome",
       use: {
-        ...devices['Pixel 5'],
+        ...devices["Pixel 5"],
       },
     },
     {
-      name: 'Mobile Safari',
-      use: devices['iPhone 12'],
+      name: "Mobile Safari",
+      use: devices["iPhone 12"],
     },
   ],
-})
+});
diff --git a/examples/with-polyfills/pages/_app.js b/examples/with-polyfills/pages/_app.js
index c90fee1e72..e0a32060e1 100644
--- a/examples/with-polyfills/pages/_app.js
+++ b/examples/with-polyfills/pages/_app.js
@@ -3,7 +3,7 @@
 // import 'resize-observer-polyfill'
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-polyfills/pages/index.js b/examples/with-polyfills/pages/index.js
index 8f5129010b..50ed731814 100644
--- a/examples/with-polyfills/pages/index.js
+++ b/examples/with-polyfills/pages/index.js
@@ -1,3 +1,3 @@
 export default function Home() {
-  return <div>Hello World</div>
+  return <div>Hello World</div>;
 }
diff --git a/examples/with-portals-ssr/pages/_app.js b/examples/with-portals-ssr/pages/_app.js
index 65aea8af7d..6ece108c8f 100644
--- a/examples/with-portals-ssr/pages/_app.js
+++ b/examples/with-portals-ssr/pages/_app.js
@@ -1,10 +1,10 @@
-import { prepareClientPortals } from '@jesstelford/react-portal-universal'
+import { prepareClientPortals } from "@jesstelford/react-portal-universal";
 
-if (typeof window !== 'undefined') {
+if (typeof window !== "undefined") {
   // On the client, we have to run this once before React attempts a render.
   // Here in _app is a great place to do it as this file is only required once,
   // and right now (outside the constructor) is before React is invoked.
-  prepareClientPortals()
+  prepareClientPortals();
 }
 
 export default function App({ Component, pageProps }) {
@@ -14,5 +14,5 @@ export default function App({ Component, pageProps }) {
       <div id="modal" />
       <Component {...pageProps} />
     </>
-  )
+  );
 }
diff --git a/examples/with-portals-ssr/pages/_document.js b/examples/with-portals-ssr/pages/_document.js
index 67b99ebbba..992f20f8c8 100644
--- a/examples/with-portals-ssr/pages/_document.js
+++ b/examples/with-portals-ssr/pages/_document.js
@@ -1,24 +1,24 @@
-import Document from 'next/document'
-import { ServerPortal } from '@jesstelford/react-portal-universal/server'
+import Document from "next/document";
+import { ServerPortal } from "@jesstelford/react-portal-universal/server";
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const portals = new ServerPortal()
-    const originalRenderPage = ctx.renderPage
+    const portals = new ServerPortal();
+    const originalRenderPage = ctx.renderPage;
 
     ctx.renderPage = () =>
       originalRenderPage({
         enhanceApp: (App) => (props) =>
           portals.collectPortals(<App {...props} />),
-      })
+      });
 
-    const { html, ...props } = await Document.getInitialProps(ctx)
+    const { html, ...props } = await Document.getInitialProps(ctx);
 
-    const htmlWithPortals = portals.appendUniversalPortals(html)
+    const htmlWithPortals = portals.appendUniversalPortals(html);
 
     return {
       html: htmlWithPortals,
       ...props,
-    }
+    };
   }
 }
diff --git a/examples/with-portals-ssr/pages/index.js b/examples/with-portals-ssr/pages/index.js
index f00a3822e2..8299c563f2 100644
--- a/examples/with-portals-ssr/pages/index.js
+++ b/examples/with-portals-ssr/pages/index.js
@@ -1,8 +1,8 @@
-import { useState } from 'react'
-import { UniversalPortal } from '@jesstelford/react-portal-universal'
+import { useState } from "react";
+import { UniversalPortal } from "@jesstelford/react-portal-universal";
 
 const Index = () => {
-  const [isOpen, toggle] = useState(true)
+  const [isOpen, toggle] = useState(true);
 
   return (
     <>
@@ -20,8 +20,8 @@ const Index = () => {
         <UniversalPortal selector="#modal">
           <div
             style={{
-              position: 'fixed',
-              backgroundColor: 'rgba(0, 0, 0, 0.7)',
+              position: "fixed",
+              backgroundColor: "rgba(0, 0, 0, 0.7)",
               top: 0,
               right: 0,
               bottom: 0,
@@ -30,17 +30,17 @@ const Index = () => {
           >
             <div
               style={{
-                backgroundColor: 'white',
-                position: 'absolute',
-                top: '10%',
-                right: '10%',
-                bottom: '10%',
-                left: '10%',
-                padding: '1em',
+                backgroundColor: "white",
+                position: "absolute",
+                top: "10%",
+                right: "10%",
+                bottom: "10%",
+                left: "10%",
+                padding: "1em",
               }}
             >
               <p>
-                This modal is rendered using{' '}
+                This modal is rendered using{" "}
                 <a href="https://www.npmjs.com/package/@jesstelford/react-portal-universal">
                   <code>@jesstelford/react-portal-universal</code>
                 </a>
@@ -54,7 +54,7 @@ const Index = () => {
         </UniversalPortal>
       )}
     </>
-  )
-}
+  );
+};
 
-export default Index
+export default Index;
diff --git a/examples/with-portals/components/ClientOnlyPortal.js b/examples/with-portals/components/ClientOnlyPortal.js
index e925992b34..a03df75861 100644
--- a/examples/with-portals/components/ClientOnlyPortal.js
+++ b/examples/with-portals/components/ClientOnlyPortal.js
@@ -1,14 +1,14 @@
-import { useRef, useEffect, useState } from 'react'
-import { createPortal } from 'react-dom'
+import { useRef, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 
 export default function ClientOnlyPortal({ children, selector }) {
-  const ref = useRef()
-  const [mounted, setMounted] = useState(false)
+  const ref = useRef();
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    ref.current = document.querySelector(selector)
-    setMounted(true)
-  }, [selector])
+    ref.current = document.querySelector(selector);
+    setMounted(true);
+  }, [selector]);
 
-  return mounted ? createPortal(children, ref.current) : null
+  return mounted ? createPortal(children, ref.current) : null;
 }
diff --git a/examples/with-portals/components/Modal.js b/examples/with-portals/components/Modal.js
index 0c47410e3a..07335def24 100644
--- a/examples/with-portals/components/Modal.js
+++ b/examples/with-portals/components/Modal.js
@@ -1,8 +1,8 @@
-import { useState } from 'react'
-import ClientOnlyPortal from './ClientOnlyPortal'
+import { useState } from "react";
+import ClientOnlyPortal from "./ClientOnlyPortal";
 
 export default function Modal() {
-  const [open, setOpen] = useState()
+  const [open, setOpen] = useState();
 
   return (
     <>
@@ -14,7 +14,7 @@ export default function Modal() {
           <div className="backdrop">
             <div className="modal">
               <p>
-                This modal is rendered using{' '}
+                This modal is rendered using{" "}
                 <a
                   href="https://react.dev/reference/react-dom/createPortal"
                   target="_blank"
@@ -56,5 +56,5 @@ export default function Modal() {
         </ClientOnlyPortal>
       )}
     </>
-  )
+  );
 }
diff --git a/examples/with-portals/pages/_document.js b/examples/with-portals/pages/_document.js
index 980f43e232..30532c2330 100644
--- a/examples/with-portals/pages/_document.js
+++ b/examples/with-portals/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -11,5 +11,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/with-portals/pages/index.js b/examples/with-portals/pages/index.js
index 394820f571..03c7b84144 100644
--- a/examples/with-portals/pages/index.js
+++ b/examples/with-portals/pages/index.js
@@ -1,5 +1,5 @@
-import Modal from '../components/Modal'
+import Modal from "../components/Modal";
 
 export default function Home() {
-  return <Modal />
+  return <Modal />;
 }
diff --git a/examples/with-postgres/ley.config.js b/examples/with-postgres/ley.config.js
index 7569f8bc2d..2b87d0f975 100644
--- a/examples/with-postgres/ley.config.js
+++ b/examples/with-postgres/ley.config.js
@@ -1,8 +1,8 @@
-const dotenv = require('dotenv')
-const { parse } = require('pg-connection-string')
+const dotenv = require("dotenv");
+const { parse } = require("pg-connection-string");
 
-dotenv.config({ path: '.env.local' })
+dotenv.config({ path: ".env.local" });
 
-const options = parse(process.env.DATABASE_URL || '')
+const options = parse(process.env.DATABASE_URL || "");
 
-module.exports = options
+module.exports = options;
diff --git a/examples/with-postgres/lib/db.ts b/examples/with-postgres/lib/db.ts
index d9c215dae2..c496e662f2 100644
--- a/examples/with-postgres/lib/db.ts
+++ b/examples/with-postgres/lib/db.ts
@@ -1,5 +1,5 @@
-import postgres from 'postgres'
+import postgres from "postgres";
 
-const sql = postgres(process.env.DATABASE_URL as string)
+const sql = postgres(process.env.DATABASE_URL as string);
 
-export default sql
+export default sql;
diff --git a/examples/with-postgres/lib/todos.ts b/examples/with-postgres/lib/todos.ts
index 8a6c8c0604..6c8448562f 100644
--- a/examples/with-postgres/lib/todos.ts
+++ b/examples/with-postgres/lib/todos.ts
@@ -1,35 +1,35 @@
-import sql from './db'
+import sql from "./db";
 
 export interface ToDo {
-  id: number
-  text: string
-  done: boolean
+  id: number;
+  text: string;
+  done: boolean;
 }
 
 export async function list() {
   return await sql<ToDo[]>`
     SELECT id, text, done FROM todos
     ORDER BY id
-  `
+  `;
 }
 
 export async function create(todo: ToDo) {
   return await sql<ToDo[]>`
     INSERT INTO todos (text, done) VALUES (${todo.text}, false)
     RETURNING id, text, done
-  `
+  `;
 }
 
 export async function update(todo: ToDo) {
   return await sql<ToDo[]>`
     UPDATE todos SET done=${todo.done} WHERE id=${todo.id}
     RETURNING id, text, done
-  `
+  `;
 }
 
 export async function remove(todo: ToDo) {
   return await sql<ToDo[]>`
     DELETE FROM todos WHERE id=${todo.id}
     RETURNING id, text, done
-  `
+  `;
 }
diff --git a/examples/with-postgres/migrations/000-todos.js b/examples/with-postgres/migrations/000-todos.js
index 807923460b..e5eac9626c 100644
--- a/examples/with-postgres/migrations/000-todos.js
+++ b/examples/with-postgres/migrations/000-todos.js
@@ -5,11 +5,11 @@ exports.up = async function (sql) {
         text CHARACTER VARYING(255) NOT NULL,
         done BOOLEAN NOT NULL DEFAULT FALSE
     )
-  `
-}
+  `;
+};
 
 exports.down = async function (sql) {
   await sql`
     DROP TABLE IF EXISTS todos
-  `
-}
+  `;
+};
diff --git a/examples/with-postgres/next.config.js b/examples/with-postgres/next.config.js
index a843cbee09..91ef62f0db 100644
--- a/examples/with-postgres/next.config.js
+++ b/examples/with-postgres/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-postgres/pages/_app.tsx b/examples/with-postgres/pages/_app.tsx
index b5c205f9e7..c1d0a8adc2 100644
--- a/examples/with-postgres/pages/_app.tsx
+++ b/examples/with-postgres/pages/_app.tsx
@@ -1,7 +1,7 @@
-import type { AppProps } from 'next/app'
+import type { AppProps } from "next/app";
 
-import '../styles/globals.css'
+import "../styles/globals.css";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-postgres/pages/api/todos.ts b/examples/with-postgres/pages/api/todos.ts
index d61864fc5b..6ce72ccb95 100644
--- a/examples/with-postgres/pages/api/todos.ts
+++ b/examples/with-postgres/pages/api/todos.ts
@@ -1,23 +1,23 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { type ToDo } from '../../lib/todos'
-import * as todos from '../../lib/todos'
+import type { NextApiRequest, NextApiResponse } from "next";
+import { type ToDo } from "../../lib/todos";
+import * as todos from "../../lib/todos";
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse<ToDo[] | string>
+  res: NextApiResponse<ToDo[] | string>,
 ) {
   switch (req.method) {
-    case 'GET':
-      return res.status(200).json(await todos.list())
-    case 'POST':
-      return res.status(201).json(await todos.create(req.body))
-    case 'PUT':
-      const updated = await todos.update(req.body)
-      return res.status(updated.length > 0 ? 200 : 404).json(updated)
-    case 'DELETE':
-      const removed = await todos.remove(req.body)
-      return res.status(removed.length > 0 ? 204 : 404).end()
+    case "GET":
+      return res.status(200).json(await todos.list());
+    case "POST":
+      return res.status(201).json(await todos.create(req.body));
+    case "PUT":
+      const updated = await todos.update(req.body);
+      return res.status(updated.length > 0 ? 200 : 404).json(updated);
+    case "DELETE":
+      const removed = await todos.remove(req.body);
+      return res.status(removed.length > 0 ? 204 : 404).end();
     default:
-      return res.status(405).send('Method Not Allowed')
+      return res.status(405).send("Method Not Allowed");
   }
 }
diff --git a/examples/with-postgres/pages/index.tsx b/examples/with-postgres/pages/index.tsx
index c4c2c51f6e..8b84af9beb 100644
--- a/examples/with-postgres/pages/index.tsx
+++ b/examples/with-postgres/pages/index.tsx
@@ -1,16 +1,16 @@
-import { useState, useEffect } from 'react'
-import Head from 'next/head'
+import { useState, useEffect } from "react";
+import Head from "next/head";
 
-import { type ToDo } from '../lib/todos'
+import { type ToDo } from "../lib/todos";
 
-import styles from '../styles/Home.module.css'
+import styles from "../styles/Home.module.css";
 
 interface ToDoComponentProps {
-  key: number
-  text: string
-  done: boolean
-  onChange: () => void
-  onRemove: () => void
+  key: number;
+  text: string;
+  done: boolean;
+  onChange: () => void;
+  onRemove: () => void;
 }
 
 const ToDoComponent = ({
@@ -19,13 +19,13 @@ const ToDoComponent = ({
   onChange,
   onRemove,
 }: ToDoComponentProps) => {
-  const cards = ['card', 'card2', 'card3', 'card4', 'card5']
+  const cards = ["card", "card2", "card3", "card4", "card5"];
 
   return (
     <div className={styles[cards[Math.floor(Math.random() * cards.length)]]}>
       <div
         className={styles.text}
-        style={{ textDecoration: done ? 'line-through' : '' }}
+        style={{ textDecoration: done ? "line-through" : "" }}
       >
         {text}
       </div>
@@ -41,66 +41,66 @@ const ToDoComponent = ({
         </button>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export default function Home() {
-  const [newText, setNewText] = useState('')
-  const [toDos, setToDos] = useState<ToDo[]>([])
+  const [newText, setNewText] = useState("");
+  const [toDos, setToDos] = useState<ToDo[]>([]);
 
   const getToDos = async () => {
-    const resp = await fetch('api/todos')
-    const toDos = await resp.json()
-    setToDos(toDos)
-  }
+    const resp = await fetch("api/todos");
+    const toDos = await resp.json();
+    setToDos(toDos);
+  };
 
   const createToDo = async () => {
-    await fetch('api/todos', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+    await fetch("api/todos", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ text: newText }),
-    })
+    });
 
-    setNewText('')
+    setNewText("");
 
-    await getToDos()
-  }
+    await getToDos();
+  };
 
   const updateToDo = async (todo: ToDo) => {
     const newBody = {
       id: todo.id,
       done: !todo.done,
-    }
+    };
 
-    await fetch('api/todos', {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
+    await fetch("api/todos", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
       body: JSON.stringify(newBody),
-    })
+    });
 
-    await getToDos()
-  }
+    await getToDos();
+  };
 
   const removeToDo = async (todo: ToDo) => {
     const newBody = {
       id: todo.id,
-    }
+    };
 
-    await fetch('api/todos', {
-      method: 'DELETE',
-      headers: { 'Content-Type': 'application/json' },
+    await fetch("api/todos", {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
       body: JSON.stringify(newBody),
-    })
+    });
 
-    await getToDos()
-  }
+    await getToDos();
+  };
 
   useEffect(() => {
-    getToDos()
-  }, [])
+    getToDos();
+  }, []);
 
-  const done = toDos.filter((todo) => todo.done)
-  const undone = toDos.filter((todo) => !todo.done)
+  const done = toDos.filter((todo) => todo.done);
+  const undone = toDos.filter((todo) => !todo.done);
 
   return (
     <div className={styles.container}>
@@ -110,7 +110,7 @@ export default function Home() {
       </Head>
       <header className={styles.header}>
         <h2>
-          <a href="https://github.com/porsager/postgres">postgres.js</a> +{' '}
+          <a href="https://github.com/porsager/postgres">postgres.js</a> +{" "}
           <a href="https://nextjs.org">next.js</a> to dos
         </h2>
       </header>
@@ -123,7 +123,7 @@ export default function Home() {
                 className={styles.input}
                 value={newText}
                 onChange={(e) => setNewText(e.target.value)}
-                onKeyDown={(e) => e.code === 'Enter' && createToDo()}
+                onKeyDown={(e) => e.code === "Enter" && createToDo()}
               ></input>
               <button className={styles.createBtn} onClick={createToDo}>
                 &#10011;
@@ -171,5 +171,5 @@ export default function Home() {
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-postgres/styles/globals.css b/examples/with-postgres/styles/globals.css
index b9d1610084..3913c36f79 100644
--- a/examples/with-postgres/styles/globals.css
+++ b/examples/with-postgres/styles/globals.css
@@ -4,7 +4,7 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: 'Source Code Pro', Courier New, monospace;
+  font-family: "Source Code Pro", Courier New, monospace;
 }
 
 a {
@@ -14,7 +14,7 @@ a {
 
 input,
 button {
-  font-family: 'Source Code Pro', Arial, sans-serif;
+  font-family: "Source Code Pro", Arial, sans-serif;
 }
 
 a:hover,
diff --git a/examples/with-prefetching/components/Nav.tsx b/examples/with-prefetching/components/Nav.tsx
index f700dd3c36..6fc0d4e176 100644
--- a/examples/with-prefetching/components/Nav.tsx
+++ b/examples/with-prefetching/components/Nav.tsx
@@ -1,8 +1,8 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
+import Link from "next/link";
+import { useRouter } from "next/router";
 
 export default function Nav() {
-  const router = useRouter()
+  const router = useRouter();
   return (
     <div className="root">
       <h2>Default</h2>
@@ -12,7 +12,7 @@ export default function Nav() {
       </p>
       <Link href="/" legacyBehavior>
         <a>Home</a>
-      </Link>{' '}
+      </Link>{" "}
       <Link href="/features" legacyBehavior>
         <a>Features</a>
       </Link>
@@ -21,8 +21,8 @@ export default function Nav() {
       <Link prefetch={false} href="/about" legacyBehavior>
         <a
           onMouseEnter={() => {
-            router.prefetch('/about')
-            console.log('prefetching /about!')
+            router.prefetch("/about");
+            console.log("prefetching /about!");
           }}
         >
           About
@@ -43,5 +43,5 @@ export default function Nav() {
         }
       `}</style>
     </div>
-  )
+  );
 }
diff --git a/examples/with-prefetching/pages/_app.tsx b/examples/with-prefetching/pages/_app.tsx
index 8e57bb3bd8..1ff8ba6022 100644
--- a/examples/with-prefetching/pages/_app.tsx
+++ b/examples/with-prefetching/pages/_app.tsx
@@ -1,5 +1,5 @@
-import type { AppProps } from 'next/app'
-import Nav from '../components/Nav'
+import type { AppProps } from "next/app";
+import Nav from "../components/Nav";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
@@ -7,5 +7,5 @@ export default function App({ Component, pageProps }: AppProps) {
       <Nav />
       <Component {...pageProps} />
     </>
-  )
+  );
 }
diff --git a/examples/with-prefetching/pages/about.tsx b/examples/with-prefetching/pages/about.tsx
index b5d98c3757..e1eea83e5e 100644
--- a/examples/with-prefetching/pages/about.tsx
+++ b/examples/with-prefetching/pages/about.tsx
@@ -1,3 +1,3 @@
 export default function About() {
-  return <h1>This is the ABOUT page.</h1>
+  return <h1>This is the ABOUT page.</h1>;
 }
diff --git a/examples/with-prefetching/pages/contact.tsx b/examples/with-prefetching/pages/contact.tsx
index 7a36738284..2ad73c18ae 100644
--- a/examples/with-prefetching/pages/contact.tsx
+++ b/examples/with-prefetching/pages/contact.tsx
@@ -1,3 +1,3 @@
 export default function Contact() {
-  return <h1>This is the CONTACT page.</h1>
+  return <h1>This is the CONTACT page.</h1>;
 }
diff --git a/examples/with-prefetching/pages/features.tsx b/examples/with-prefetching/pages/features.tsx
index 71f9132120..683b01c4bb 100644
--- a/examples/with-prefetching/pages/features.tsx
+++ b/examples/with-prefetching/pages/features.tsx
@@ -1,3 +1,3 @@
 export default function Features() {
-  return <h1>This is the FEATURES page.</h1>
+  return <h1>This is the FEATURES page.</h1>;
 }
diff --git a/examples/with-prefetching/pages/index.tsx b/examples/with-prefetching/pages/index.tsx
index 8727cfe538..de7e85bd80 100644
--- a/examples/with-prefetching/pages/index.tsx
+++ b/examples/with-prefetching/pages/index.tsx
@@ -1,3 +1,3 @@
 export default function Home() {
-  return <h1>This is the HOME page</h1>
+  return <h1>This is the HOME page</h1>;
 }
diff --git a/examples/with-quill-js/pages/_app.js b/examples/with-quill-js/pages/_app.js
index d4fbd69dc8..3a71dcc5f6 100644
--- a/examples/with-quill-js/pages/_app.js
+++ b/examples/with-quill-js/pages/_app.js
@@ -1,7 +1,7 @@
-import 'react-quill/dist/quill.snow.css'
+import "react-quill/dist/quill.snow.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-quill-js/pages/index.js b/examples/with-quill-js/pages/index.js
index 993f09abc9..53679b1f1c 100644
--- a/examples/with-quill-js/pages/index.js
+++ b/examples/with-quill-js/pages/index.js
@@ -1,50 +1,50 @@
-import dynamic from 'next/dynamic'
+import dynamic from "next/dynamic";
 
-const QuillNoSSRWrapper = dynamic(import('react-quill'), {
+const QuillNoSSRWrapper = dynamic(import("react-quill"), {
   ssr: false,
   loading: () => <p>Loading ...</p>,
-})
+});
 
 const modules = {
   toolbar: [
-    [{ header: '1' }, { header: '2' }, { font: [] }],
+    [{ header: "1" }, { header: "2" }, { font: [] }],
     [{ size: [] }],
-    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
+    ["bold", "italic", "underline", "strike", "blockquote"],
     [
-      { list: 'ordered' },
-      { list: 'bullet' },
-      { indent: '-1' },
-      { indent: '+1' },
+      { list: "ordered" },
+      { list: "bullet" },
+      { indent: "-1" },
+      { indent: "+1" },
     ],
-    ['link', 'image', 'video'],
-    ['clean'],
+    ["link", "image", "video"],
+    ["clean"],
   ],
   clipboard: {
     // toggle to add extra line breaks when pasting HTML:
     matchVisual: false,
   },
-}
+};
 /*
  * Quill editor formats
  * See https://quilljs.com/docs/formats/
  */
 const formats = [
-  'header',
-  'font',
-  'size',
-  'bold',
-  'italic',
-  'underline',
-  'strike',
-  'blockquote',
-  'list',
-  'bullet',
-  'indent',
-  'link',
-  'image',
-  'video',
-]
+  "header",
+  "font",
+  "size",
+  "bold",
+  "italic",
+  "underline",
+  "strike",
+  "blockquote",
+  "list",
+  "bullet",
+  "indent",
+  "link",
+  "image",
+  "video",
+];
 
 export default function Home() {
-  return <QuillNoSSRWrapper modules={modules} formats={formats} theme="snow" />
+  return <QuillNoSSRWrapper modules={modules} formats={formats} theme="snow" />;
 }
diff --git a/examples/with-rbx-bulma-pro/components/Layout.js b/examples/with-rbx-bulma-pro/components/Layout.js
index 1d14a9b4b1..3661cb9e60 100644
--- a/examples/with-rbx-bulma-pro/components/Layout.js
+++ b/examples/with-rbx-bulma-pro/components/Layout.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 import {
   Generic,
   Container,
@@ -8,7 +8,7 @@ import {
   Hero,
   Title,
   Footer,
-} from 'rbx'
+} from "rbx";
 
 const Layout = ({ children }) => {
   return (
@@ -52,7 +52,7 @@ const Layout = ({ children }) => {
         </Content>
       </Footer>
     </Generic>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;
diff --git a/examples/with-rbx-bulma-pro/pages/_app.js b/examples/with-rbx-bulma-pro/pages/_app.js
index 521b45b59f..6476dd7c3b 100644
--- a/examples/with-rbx-bulma-pro/pages/_app.js
+++ b/examples/with-rbx-bulma-pro/pages/_app.js
@@ -1,7 +1,7 @@
-import 'bulma-pro/css/bulma.css'
+import "bulma-pro/css/bulma.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-rbx-bulma-pro/pages/about.js b/examples/with-rbx-bulma-pro/pages/about.js
index b3e711d1d9..1fa3cb58bc 100644
--- a/examples/with-rbx-bulma-pro/pages/about.js
+++ b/examples/with-rbx-bulma-pro/pages/about.js
@@ -1,5 +1,5 @@
-import { Section, Title } from 'rbx'
-import Layout from '../components/Layout'
+import { Section, Title } from "rbx";
+import Layout from "../components/Layout";
 
 const AboutPage = () => (
   <Layout>
@@ -19,6 +19,6 @@ const AboutPage = () => (
       </ul>
     </Section>
   </Layout>
-)
+);
 
-export default AboutPage
+export default AboutPage;
diff --git a/examples/with-rbx-bulma-pro/pages/contact.js b/examples/with-rbx-bulma-pro/pages/contact.js
index e22112d179..b5e0f4cf65 100644
--- a/examples/with-rbx-bulma-pro/pages/contact.js
+++ b/examples/with-rbx-bulma-pro/pages/contact.js
@@ -7,8 +7,8 @@ import {
   Input,
   Textarea,
   Button,
-} from 'rbx'
-import Layout from '../components/Layout'
+} from "rbx";
+import Layout from "../components/Layout";
 
 const ContactPage = () => (
   <Layout>
@@ -45,6 +45,6 @@ const ContactPage = () => (
       </Button.Group>
     </Section>
   </Layout>
-)
+);
 
-export default ContactPage
+export default ContactPage;
diff --git a/examples/with-rbx-bulma-pro/pages/index.js b/examples/with-rbx-bulma-pro/pages/index.js
index 73cb006a70..967120aa4e 100644
--- a/examples/with-rbx-bulma-pro/pages/index.js
+++ b/examples/with-rbx-bulma-pro/pages/index.js
@@ -1,6 +1,6 @@
-import Link from 'next/link'
-import { Section, Card, Content, Title } from 'rbx'
-import Layout from '../components/Layout'
+import Link from "next/link";
+import { Section, Card, Content, Title } from "rbx";
+import Layout from "../components/Layout";
 
 const Home = () => (
   <Layout>
@@ -21,7 +21,7 @@ const Home = () => (
             <Link href="https://github.com/vercel/next.js/tree/canary/examples">
               <Title as="h3">Examples &rarr;</Title>
               <p>
-                Find other example boilerplates on the{' '}
+                Find other example boilerplates on the{" "}
                 <code>create-next-app</code> site
               </p>
             </Link>
@@ -40,6 +40,6 @@ const Home = () => (
       </Card>
     </Section>
   </Layout>
-)
+);
 
-export default Home
+export default Home;
diff --git a/examples/with-react-bootstrap/pages/_app.jsx b/examples/with-react-bootstrap/pages/_app.jsx
index 2c2c7a2f30..04dfe615ce 100644
--- a/examples/with-react-bootstrap/pages/_app.jsx
+++ b/examples/with-react-bootstrap/pages/_app.jsx
@@ -1,5 +1,5 @@
-import '../style/index.css'
+import "../style/index.css";
 
 export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-react-bootstrap/pages/index.jsx b/examples/with-react-bootstrap/pages/index.jsx
index 81073f07b2..70e563cf88 100644
--- a/examples/with-react-bootstrap/pages/index.jsx
+++ b/examples/with-react-bootstrap/pages/index.jsx
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import { Container, Row, Card, Button } from 'react-bootstrap'
+import Head from "next/head";
+import { Container, Row, Card, Button } from "react-bootstrap";
 
 export default function Home() {
   return (
@@ -80,10 +80,10 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <img src="/vercel.svg" alt="Vercel Logo" className="sml-logo" />
         </a>
       </footer>
     </Container>
-  )
+  );
 }
diff --git a/examples/with-react-bootstrap/style/index.css b/examples/with-react-bootstrap/style/index.css
index 1583ab2eee..a445eaca17 100644
--- a/examples/with-react-bootstrap/style/index.css
+++ b/examples/with-react-bootstrap/style/index.css
@@ -1,5 +1,5 @@
 /* ensure all pages have Bootstrap CSS */
-@import '~bootstrap/dist/css/bootstrap.min.css';
+@import "~bootstrap/dist/css/bootstrap.min.css";
 
 .md-container {
   max-width: 800px;
diff --git a/examples/with-react-foundation/src/components/Article.tsx b/examples/with-react-foundation/src/components/Article.tsx
index af7c83ffe2..34c9e3ffb7 100644
--- a/examples/with-react-foundation/src/components/Article.tsx
+++ b/examples/with-react-foundation/src/components/Article.tsx
@@ -1,7 +1,7 @@
 // Import react-foundation components
-import { Grid, Cell } from 'react-foundation'
+import { Grid, Cell } from "react-foundation";
 // Own custom component
-import { Card } from './Card'
+import { Card } from "./Card";
 
 export const Article = () => {
   return (
@@ -13,5 +13,5 @@ export const Article = () => {
         <Card isColumn />
       </Cell>
     </Grid>
-  )
-}
+  );
+};
diff --git a/examples/with-react-foundation/src/components/Card.tsx b/examples/with-react-foundation/src/components/Card.tsx
index fbaecfe54c..dddb6905ad 100644
--- a/examples/with-react-foundation/src/components/Card.tsx
+++ b/examples/with-react-foundation/src/components/Card.tsx
@@ -1,5 +1,5 @@
 // Import react-foundation components
-import { MediaObject, MediaObjectSection, Thumbnail } from 'react-foundation'
+import { MediaObject, MediaObjectSection, Thumbnail } from "react-foundation";
 
 export const Card = () => {
   return (
@@ -17,5 +17,5 @@ export const Card = () => {
         </MediaObjectSection>
       </MediaObject>
     </div>
-  )
-}
+  );
+};
diff --git a/examples/with-react-foundation/src/components/Header.tsx b/examples/with-react-foundation/src/components/Header.tsx
index cd8477d7f3..f8da4eb1fb 100644
--- a/examples/with-react-foundation/src/components/Header.tsx
+++ b/examples/with-react-foundation/src/components/Header.tsx
@@ -1,5 +1,5 @@
 // Import react-foundation components
-import { Menu, MenuItem } from 'react-foundation'
+import { Menu, MenuItem } from "react-foundation";
 
 export const Header = () => {
   return (
@@ -17,5 +17,5 @@ export const Header = () => {
         <a href="/">Contact</a>
       </MenuItem>
     </Menu>
-  )
-}
+  );
+};
diff --git a/examples/with-react-foundation/src/pages/_app.tsx b/examples/with-react-foundation/src/pages/_app.tsx
index 2027ccb2c8..599e3a679e 100644
--- a/examples/with-react-foundation/src/pages/_app.tsx
+++ b/examples/with-react-foundation/src/pages/_app.tsx
@@ -1,8 +1,8 @@
 // Add Foundation to index.js
-import 'foundation-sites/dist/css/foundation.min.css'
+import "foundation-sites/dist/css/foundation.min.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-react-foundation/src/pages/index.tsx b/examples/with-react-foundation/src/pages/index.tsx
index 8c642014ab..f0005e1016 100644
--- a/examples/with-react-foundation/src/pages/index.tsx
+++ b/examples/with-react-foundation/src/pages/index.tsx
@@ -1,7 +1,7 @@
-import Link from 'next/link'
-import { Article } from '../components/Article'
-import { Header } from '../components/Header'
-import { Callout } from 'react-foundation'
+import Link from "next/link";
+import { Article } from "../components/Article";
+import { Header } from "../components/Header";
+import { Callout } from "react-foundation";
 
 export default function Home() {
   return (
@@ -12,7 +12,7 @@ export default function Home() {
         <Callout>
           <h5>with-react-foundation</h5>
           <p>
-            Example repository of <code>Next.js</code> +{' '}
+            Example repository of <code>Next.js</code> +{" "}
             <code>react-foundation</code>.
           </p>
           <Link href="https://nextjs.org" passHref={true}>
@@ -21,5 +21,5 @@ export default function Home() {
         </Callout>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/with-react-ga4/pages/_app.js b/examples/with-react-ga4/pages/_app.js
index c57483284d..ee4ffc38ec 100644
--- a/examples/with-react-ga4/pages/_app.js
+++ b/examples/with-react-ga4/pages/_app.js
@@ -1,30 +1,30 @@
-import { useEffect } from 'react'
-import { useRouter } from 'next/router'
-import { initGA, logPageView } from '../utils/analytics'
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { initGA, logPageView } from "../utils/analytics";
 
 const MyApp = ({ Component, pageProps }) => {
-  const router = useRouter()
+  const router = useRouter();
 
   useEffect(() => {
-    initGA()
+    initGA();
     // `routeChangeComplete` won't run for the first page load unless the query string is
     // hydrated later on, so here we log a page view if this is the first render and
     // there's no query string
-    if (!router.asPath.includes('?')) {
-      logPageView()
+    if (!router.asPath.includes("?")) {
+      logPageView();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, []);
 
   useEffect(() => {
     // Listen for page changes after a navigation or when the query changes
-    router.events.on('routeChangeComplete', logPageView)
+    router.events.on("routeChangeComplete", logPageView);
     return () => {
-      router.events.off('routeChangeComplete', logPageView)
-    }
-  }, [router.events])
+      router.events.off("routeChangeComplete", logPageView);
+    };
+  }, [router.events]);
 
-  return <Component {...pageProps} />
-}
+  return <Component {...pageProps} />;
+};
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-react-ga4/pages/about.js b/examples/with-react-ga4/pages/about.js
index 46817af02a..654ff2c10a 100644
--- a/examples/with-react-ga4/pages/about.js
+++ b/examples/with-react-ga4/pages/about.js
@@ -1,3 +1,3 @@
 export default function About() {
-  return <div>About us</div>
+  return <div>About us</div>;
 }
diff --git a/examples/with-react-ga4/pages/index.js b/examples/with-react-ga4/pages/index.js
index 175f7bc35d..e266c9f94d 100644
--- a/examples/with-react-ga4/pages/index.js
+++ b/examples/with-react-ga4/pages/index.js
@@ -1,9 +1,9 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Home() {
   return (
     <div>
       Hello World. <Link href="/about">About</Link>
     </div>
-  )
+  );
 }
diff --git a/examples/with-react-ga4/utils/analytics.js b/examples/with-react-ga4/utils/analytics.js
index 0da2ec08c2..44232a2926 100644
--- a/examples/with-react-ga4/utils/analytics.js
+++ b/examples/with-react-ga4/utils/analytics.js
@@ -1,27 +1,27 @@
-import ReactGA from 'react-ga4'
+import ReactGA from "react-ga4";
 
 export const initGA = () => {
-  console.log('GA init')
-  ReactGA.initialize('your GA measurement id')
-}
+  console.log("GA init");
+  ReactGA.initialize("your GA measurement id");
+};
 
 export const logPageView = () => {
-  console.log(`Logging pageview for ${window.location.pathname}`)
-  ReactGA.set({ page: window.location.pathname })
-  ReactGA.send({ hitType: 'pageview', page: window.location.pathname })
-}
+  console.log(`Logging pageview for ${window.location.pathname}`);
+  ReactGA.set({ page: window.location.pathname });
+  ReactGA.send({ hitType: "pageview", page: window.location.pathname });
+};
 
-export const logEvent = (category = '', action = '') => {
+export const logEvent = (category = "", action = "") => {
   if (category && action) {
-    ReactGA.event({ category, action })
+    ReactGA.event({ category, action });
   }
-}
+};
 
-export const logException = (description = '', fatal = false) => {
+export const logException = (description = "", fatal = false) => {
   if (description) {
-    ReactGA.gtag('event', 'exception', {
+    ReactGA.gtag("event", "exception", {
       description,
       fatal, // set to true if the error is fatal
-    })
+    });
   }
-}
+};
diff --git a/examples/with-react-hook-form/pages/_app.tsx b/examples/with-react-hook-form/pages/_app.tsx
index 4169c151b5..00602c593e 100644
--- a/examples/with-react-hook-form/pages/_app.tsx
+++ b/examples/with-react-hook-form/pages/_app.tsx
@@ -1,6 +1,6 @@
-import { AppProps } from 'next/app'
-import '../styles/global.css'
+import { AppProps } from "next/app";
+import "../styles/global.css";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-react-hook-form/pages/_document.js b/examples/with-react-hook-form/pages/_document.js
index f09767919e..b1ded75a08 100644
--- a/examples/with-react-hook-form/pages/_document.js
+++ b/examples/with-react-hook-form/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -14,5 +14,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/with-react-hook-form/pages/index.tsx b/examples/with-react-hook-form/pages/index.tsx
index 1b6a0d3dce..50b973099e 100644
--- a/examples/with-react-hook-form/pages/index.tsx
+++ b/examples/with-react-hook-form/pages/index.tsx
@@ -1,27 +1,27 @@
-import { useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useState } from "react";
+import { useForm } from "react-hook-form";
 
 interface User {
-  name: string
+  name: string;
 }
 
 interface LoginFormValues {
-  username: string
-  password: string
-  remember: boolean
+  username: string;
+  password: string;
+  remember: boolean;
 }
 
 const IndexPage = () => {
-  const [user, setUser] = useState<User>()
+  const [user, setUser] = useState<User>();
   const {
     register,
     formState: { errors },
     handleSubmit,
-  } = useForm<LoginFormValues>()
+  } = useForm<LoginFormValues>();
   const onSubmit = handleSubmit(({ username, password, remember }) => {
     // You should handle login logic with username, password and remember form data
-    setUser({ name: username })
-  })
+    setUser({ name: username });
+  });
 
   return (
     <div className="container">
@@ -36,14 +36,14 @@ const IndexPage = () => {
             <input
               type="text"
               placeholder="user name"
-              {...register('username', {
-                required: { value: true, message: 'User name is required' },
+              {...register("username", {
+                required: { value: true, message: "User name is required" },
                 minLength: {
                   value: 3,
-                  message: 'User name cannot be less than 3 character',
+                  message: "User name cannot be less than 3 character",
                 },
               })}
-              className={'form-field' + (errors.username ? ' has-error' : '')}
+              className={"form-field" + (errors.username ? " has-error" : "")}
             />
             {errors.username && (
               <span className="error-label">{errors.username.message}</span>
@@ -53,20 +53,20 @@ const IndexPage = () => {
             <input
               type="password"
               placeholder="password"
-              {...register('password', {
+              {...register("password", {
                 required: {
                   value: true,
-                  message: 'Please enter your password',
+                  message: "Please enter your password",
                 },
               })}
-              className={'form-field' + (errors.password ? ' has-error' : '')}
+              className={"form-field" + (errors.password ? " has-error" : "")}
             />
             {errors.password && (
               <span className="error-label">{errors.password.message}</span>
             )}
           </div>
           <div className="row row-remember">
-            <input type="checkbox" id="remember" {...register('remember')} />
+            <input type="checkbox" id="remember" {...register("remember")} />
             <label htmlFor="remember" className="remember-label">
               Remember me
             </label>
@@ -79,7 +79,7 @@ const IndexPage = () => {
         </form>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default IndexPage
+export default IndexPage;
diff --git a/examples/with-react-hook-form/styles/global.css b/examples/with-react-hook-form/styles/global.css
index 353439cdc1..c623b1b347 100644
--- a/examples/with-react-hook-form/styles/global.css
+++ b/examples/with-react-hook-form/styles/global.css
@@ -6,7 +6,7 @@
   --primary-color-light: #7373f9;
   --secondary-color: #f0f8ff;
   --shadow-color: #ddd;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   font-size: 12px;
 }
 
diff --git a/examples/with-react-intl/components/Layout.tsx b/examples/with-react-intl/components/Layout.tsx
index ae0a719f27..ef9ea3e341 100644
--- a/examples/with-react-intl/components/Layout.tsx
+++ b/examples/with-react-intl/components/Layout.tsx
@@ -1,26 +1,26 @@
-import { ReactNode } from 'react'
-import { useIntl } from 'react-intl'
-import Head from 'next/head'
-import Nav from './Nav'
+import { ReactNode } from "react";
+import { useIntl } from "react-intl";
+import Head from "next/head";
+import Nav from "./Nav";
 
 interface LayoutProps {
-  title?: string
-  description?: string
-  children: ReactNode
+  title?: string;
+  description?: string;
+  children: ReactNode;
 }
 
 export default function Layout({ title, description, children }: LayoutProps) {
-  const intl = useIntl()
+  const intl = useIntl();
 
   title ||= intl.formatMessage({
-    defaultMessage: 'React Intl Next.js Example',
-    description: 'Default document title',
-  })
+    defaultMessage: "React Intl Next.js Example",
+    description: "Default document title",
+  });
 
   description ||= intl.formatMessage({
-    defaultMessage: 'This page is powered by Next.js',
-    description: 'Default document description',
-  })
+    defaultMessage: "This page is powered by Next.js",
+    description: "Default document description",
+  });
 
   return (
     <>
@@ -33,5 +33,5 @@ export default function Layout({ title, description, children }: LayoutProps) {
       </header>
       {children}
     </>
-  )
+  );
 }
diff --git a/examples/with-react-intl/components/Nav.tsx b/examples/with-react-intl/components/Nav.tsx
index afc3b38ec2..8842e4ad99 100644
--- a/examples/with-react-intl/components/Nav.tsx
+++ b/examples/with-react-intl/components/Nav.tsx
@@ -1,10 +1,10 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { FormattedMessage } from 'react-intl'
-import styles from './Nav.module.css'
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { FormattedMessage } from "react-intl";
+import styles from "./Nav.module.css";
 
 export default function Nav() {
-  const { locale, locales, asPath } = useRouter()
+  const { locale, locales, asPath } = useRouter();
   return (
     <nav className={styles.nav}>
       <li className={styles.li}>
@@ -40,5 +40,5 @@ export default function Nav() {
         </li>
       ))}
     </nav>
-  )
+  );
 }
diff --git a/examples/with-react-intl/helper/loadIntlMessages.ts b/examples/with-react-intl/helper/loadIntlMessages.ts
index e6e047dfc8..582cfa067f 100644
--- a/examples/with-react-intl/helper/loadIntlMessages.ts
+++ b/examples/with-react-intl/helper/loadIntlMessages.ts
@@ -1,21 +1,21 @@
-export type MessageConfig = Record<string, string>
+export type MessageConfig = Record<string, string>;
 
 export default async function loadI18nMessages(
   locale: string,
-  defaultLocale = 'en'
+  defaultLocale = "en",
 ) {
   // If the default locale is being used we can skip it
   if (locale === defaultLocale) {
-    return {}
+    return {};
   }
 
   try {
     return import(`../compiled-lang/${locale}.json`).then(
-      (module) => module.default
-    )
+      (module) => module.default,
+    );
   } catch (error) {
     throw new Error(
-      'Could not load compiled language files. Please run "npm run i18n:compile" first"'
-    )
+      'Could not load compiled language files. Please run "npm run i18n:compile" first"',
+    );
   }
 }
diff --git a/examples/with-react-intl/next.config.js b/examples/with-react-intl/next.config.js
index afb7da2b2d..1c08a39bde 100644
--- a/examples/with-react-intl/next.config.js
+++ b/examples/with-react-intl/next.config.js
@@ -5,15 +5,15 @@
  **/
 module.exports = {
   i18n: {
-    locales: ['en', 'fr', 'de'],
-    defaultLocale: 'en',
+    locales: ["en", "fr", "de"],
+    defaultLocale: "en",
   },
   webpack(config, { dev, ...other }) {
     if (!dev) {
       // https://formatjs.io/docs/guides/advanced-usage#react-intl-without-parser-40-smaller
-      config.resolve.alias['@formatjs/icu-messageformat-parser'] =
-        '@formatjs/icu-messageformat-parser/no-parser'
+      config.resolve.alias["@formatjs/icu-messageformat-parser"] =
+        "@formatjs/icu-messageformat-parser/no-parser";
     }
-    return config
+    return config;
   },
-}
+};
diff --git a/examples/with-react-intl/pages/_app.tsx b/examples/with-react-intl/pages/_app.tsx
index d8b80a4820..32ca6fe344 100644
--- a/examples/with-react-intl/pages/_app.tsx
+++ b/examples/with-react-intl/pages/_app.tsx
@@ -1,13 +1,13 @@
-import type { AppProps } from 'next/app'
-import type { MessageConfig } from '../helper/loadIntlMessages'
-import { IntlProvider } from 'react-intl'
-import { useRouter } from 'next/router'
+import type { AppProps } from "next/app";
+import type { MessageConfig } from "../helper/loadIntlMessages";
+import { IntlProvider } from "react-intl";
+import { useRouter } from "next/router";
 
 export default function MyApp({
   Component,
   pageProps,
 }: AppProps<{ intlMessages: MessageConfig }>) {
-  const { locale, defaultLocale } = useRouter()
+  const { locale, defaultLocale } = useRouter();
   return (
     <IntlProvider
       locale={locale as string}
@@ -16,5 +16,5 @@ export default function MyApp({
     >
       <Component {...pageProps} />
     </IntlProvider>
-  )
+  );
 }
diff --git a/examples/with-react-intl/pages/about.tsx b/examples/with-react-intl/pages/about.tsx
index 65b25b453c..b022734d07 100644
--- a/examples/with-react-intl/pages/about.tsx
+++ b/examples/with-react-intl/pages/about.tsx
@@ -1,7 +1,7 @@
-import type { GetServerSidePropsContext } from 'next'
-import { FormattedRelativeTime, useIntl } from 'react-intl'
-import loadIntlMessages from '../helper/loadIntlMessages'
-import Layout from '../components/Layout'
+import type { GetServerSidePropsContext } from "next";
+import { FormattedRelativeTime, useIntl } from "react-intl";
+import loadIntlMessages from "../helper/loadIntlMessages";
+import Layout from "../components/Layout";
 
 export async function getStaticProps({
   locale,
@@ -11,21 +11,21 @@ export async function getStaticProps({
     props: {
       intlMessages: await loadIntlMessages(locale as string, defaultLocale),
     },
-  }
+  };
 }
 
 export default function AboutPage() {
-  const intl = useIntl()
+  const intl = useIntl();
   return (
     <Layout
       title={intl.formatMessage({
-        defaultMessage: 'About',
-        description: 'Nav: About item',
+        defaultMessage: "About",
+        description: "Nav: About item",
       })}
     >
       <p>
         <FormattedRelativeTime numeric="auto" value={1} unit="hour" />
       </p>
     </Layout>
-  )
+  );
 }
diff --git a/examples/with-react-intl/pages/index.tsx b/examples/with-react-intl/pages/index.tsx
index 57daa84793..eef4dfb8fd 100644
--- a/examples/with-react-intl/pages/index.tsx
+++ b/examples/with-react-intl/pages/index.tsx
@@ -1,7 +1,7 @@
-import type { GetStaticPropsContext } from 'next'
-import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl'
-import loadIntlMessages from '../helper/loadIntlMessages'
-import Layout from '../components/Layout'
+import type { GetStaticPropsContext } from "next";
+import { FormattedMessage, FormattedNumber, useIntl } from "react-intl";
+import loadIntlMessages from "../helper/loadIntlMessages";
+import Layout from "../components/Layout";
 
 export async function getStaticProps({
   defaultLocale,
@@ -11,20 +11,20 @@ export async function getStaticProps({
     props: {
       intlMessages: await loadIntlMessages(locale as string, defaultLocale),
     },
-  }
+  };
 }
 
 export default function IndexPage() {
-  const intl = useIntl()
+  const intl = useIntl();
   return (
     <Layout
       title={intl.formatMessage({
-        defaultMessage: 'Home',
-        description: 'Index Page: document title',
+        defaultMessage: "Home",
+        description: "Index Page: document title",
       })}
       description={intl.formatMessage({
-        defaultMessage: 'An example app integrating React Intl with Next.js',
-        description: 'Index Page: Meta Description',
+        defaultMessage: "An example app integrating React Intl with Next.js",
+        description: "Index Page: Meta Description",
       })}
     >
       <p>
@@ -37,5 +37,5 @@ export default function IndexPage() {
         <FormattedNumber value={1000} />
       </p>
     </Layout>
-  )
+  );
 }
diff --git a/examples/with-react-jss/pages/_app.tsx b/examples/with-react-jss/pages/_app.tsx
index 74b569b67f..2fd0305e14 100644
--- a/examples/with-react-jss/pages/_app.tsx
+++ b/examples/with-react-jss/pages/_app.tsx
@@ -1,12 +1,12 @@
-import type { AppProps } from 'next/app'
-import { useEffect } from 'react'
+import type { AppProps } from "next/app";
+import { useEffect } from "react";
 
 export default function App({ Component, pageProps }: AppProps) {
   useEffect(() => {
-    const style = document.getElementById('server-side-styles')
+    const style = document.getElementById("server-side-styles");
     if (style && style.parentNode) {
-      style.parentNode.removeChild(style)
+      style.parentNode.removeChild(style);
     }
-  }, [])
-  return <Component {...pageProps} />
+  }, []);
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-react-jss/pages/_document.tsx b/examples/with-react-jss/pages/_document.tsx
index a20015c58a..26a6f29e26 100644
--- a/examples/with-react-jss/pages/_document.tsx
+++ b/examples/with-react-jss/pages/_document.tsx
@@ -1,11 +1,11 @@
-import Document, { DocumentContext } from 'next/document'
-import { SheetsRegistry, JssProvider, createGenerateId } from 'react-jss'
+import Document, { DocumentContext } from "next/document";
+import { SheetsRegistry, JssProvider, createGenerateId } from "react-jss";
 
 export default class JssDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
-    const registry = new SheetsRegistry()
-    const generateId = createGenerateId()
-    const originalRenderPage = ctx.renderPage
+    const registry = new SheetsRegistry();
+    const generateId = createGenerateId();
+    const originalRenderPage = ctx.renderPage;
     ctx.renderPage = () =>
       originalRenderPage({
         enhanceApp: (App) => (props) =>
@@ -14,9 +14,9 @@ export default class JssDocument extends Document {
               <App {...props} />
             </JssProvider>
           ),
-      })
+      });
 
-    const initialProps = await Document.getInitialProps(ctx)
+    const initialProps = await Document.getInitialProps(ctx);
 
     return {
       ...initialProps,
@@ -26,6 +26,6 @@ export default class JssDocument extends Document {
           <style id="server-side-styles">{registry.toString()}</style>
         </>
       ),
-    }
+    };
   }
 }
diff --git a/examples/with-react-jss/pages/index.tsx b/examples/with-react-jss/pages/index.tsx
index 1726845c1f..5e0ad579fb 100644
--- a/examples/with-react-jss/pages/index.tsx
+++ b/examples/with-react-jss/pages/index.tsx
@@ -1,19 +1,19 @@
-import { createUseStyles } from 'react-jss'
+import { createUseStyles } from "react-jss";
 
 const useStyles = createUseStyles({
   container: {
     marginTop: 100,
-    textAlign: 'center',
+    textAlign: "center",
   },
 
   header: {
     fontSize: 24,
     lineHeight: 1.25,
   },
-})
+});
 
 export default function IndexPage() {
-  const classes = useStyles()
+  const classes = useStyles();
 
   return (
     <div className={classes.container}>
@@ -21,5 +21,5 @@ export default function IndexPage() {
         Example on how to use react-jss with Next.js
       </h1>
     </div>
-  )
+  );
 }
diff --git a/examples/with-react-md-typescript/components/Layout/Layout.tsx b/examples/with-react-md-typescript/components/Layout/Layout.tsx
index 5cc23c065c..18c54f482e 100644
--- a/examples/with-react-md-typescript/components/Layout/Layout.tsx
+++ b/examples/with-react-md-typescript/components/Layout/Layout.tsx
@@ -1,5 +1,5 @@
-import React, { ReactElement, ReactNode } from 'react'
-import { useRouter } from 'next/router'
+import React, { ReactElement, ReactNode } from "react";
+import { useRouter } from "next/router";
 import {
   Layout as RMDLayout,
   Configuration,
@@ -17,10 +17,10 @@ import {
   RemoveRedEyeSVGIcon,
   ArrowUpwardSVGIcon,
   CheckSVGIcon,
-} from 'react-md'
+} from "react-md";
 
-import LinkUnstyled from '../LinkUnstyled'
-import navItems from './navItems'
+import LinkUnstyled from "../LinkUnstyled";
+import navItems from "./navItems";
 
 const icons: ConfigurableIcons = {
   back: <KeyboardArrowLeftSVGIcon />,
@@ -35,16 +35,16 @@ const icons: ConfigurableIcons = {
   password: <RemoveRedEyeSVGIcon />,
   selected: <CheckSVGIcon />,
   sort: <ArrowUpwardSVGIcon />,
-}
+};
 
 interface LayoutProps {
-  children: ReactNode
+  children: ReactNode;
 }
 
 // Check out the documentation for Configuring your Layout for more information:
 // - https://react-md.dev/guides/configuring-your-layout
 export default function Layout({ children }: LayoutProps): ReactElement {
-  const { pathname } = useRouter()
+  const { pathname } = useRouter();
 
   return (
     <Configuration icons={icons}>
@@ -60,5 +60,5 @@ export default function Layout({ children }: LayoutProps): ReactElement {
         {children}
       </RMDLayout>
     </Configuration>
-  )
+  );
 }
diff --git a/examples/with-react-md-typescript/components/Layout/index.ts b/examples/with-react-md-typescript/components/Layout/index.ts
index 0e2737eeea..d4dca0dc61 100644
--- a/examples/with-react-md-typescript/components/Layout/index.ts
+++ b/examples/with-react-md-typescript/components/Layout/index.ts
@@ -1 +1 @@
-export { default } from './Layout'
+export { default } from "./Layout";
diff --git a/examples/with-react-md-typescript/components/Layout/navItems.tsx b/examples/with-react-md-typescript/components/Layout/navItems.tsx
index 4302375ae5..40f2ab229c 100644
--- a/examples/with-react-md-typescript/components/Layout/navItems.tsx
+++ b/examples/with-react-md-typescript/components/Layout/navItems.tsx
@@ -1,10 +1,10 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode } from "react";
 import {
   LayoutNavigationTree,
   LayoutNavigationItem,
   HomeSVGIcon,
   TvSVGIcon,
-} from 'react-md'
+} from "react-md";
 
 /**
  * Note: The `parentId` **must** be defaulted to `null` for the navigation tree
@@ -16,7 +16,7 @@ function createRoute(
   pathname: string,
   children: string,
   leftAddon: ReactNode | undefined,
-  parentId: string | null = null
+  parentId: string | null = null,
 ): LayoutNavigationItem {
   return {
     itemId: pathname,
@@ -24,12 +24,12 @@ function createRoute(
     href: pathname,
     children,
     leftAddon,
-  }
+  };
 }
 
 const navItems: LayoutNavigationTree = {
-  '/': createRoute('/', 'Home', <HomeSVGIcon />),
-  '/route-1': createRoute('/route-1', 'Route 1', <TvSVGIcon />),
-}
+  "/": createRoute("/", "Home", <HomeSVGIcon />),
+  "/route-1": createRoute("/route-1", "Route 1", <TvSVGIcon />),
+};
 
-export default navItems
+export default navItems;
diff --git a/examples/with-react-md-typescript/components/LinkUnstyled.tsx b/examples/with-react-md-typescript/components/LinkUnstyled.tsx
index 264f95efcf..ae23e0581d 100644
--- a/examples/with-react-md-typescript/components/LinkUnstyled.tsx
+++ b/examples/with-react-md-typescript/components/LinkUnstyled.tsx
@@ -1,9 +1,9 @@
-import React, { ReactElement, AnchorHTMLAttributes } from 'react'
-import Link, { LinkProps } from 'next/link'
+import React, { ReactElement, AnchorHTMLAttributes } from "react";
+import Link, { LinkProps } from "next/link";
 
 export interface LinkUnstyledProps
-  extends Omit<LinkProps, 'children' | 'passHref' | 'onError'>,
-    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onError' | 'href'> {}
+  extends Omit<LinkProps, "children" | "passHref" | "onError">,
+    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "onError" | "href"> {}
 
 export default function LinkUnstyled({
   as,
@@ -14,13 +14,13 @@ export default function LinkUnstyled({
   children,
   ...props
 }: LinkUnstyledProps): ReactElement {
-  if (typeof href === 'string' && href.startsWith('http')) {
+  if (typeof href === "string" && href.startsWith("http")) {
     // external links
     return (
       <a {...props} href={href} rel="noopener noreferrer">
         {children}
       </a>
-    )
+    );
   }
 
   return (
@@ -34,5 +34,5 @@ export default function LinkUnstyled({
     >
       {children}
     </Link>
-  )
+  );
 }
diff --git a/examples/with-react-md-typescript/pages/_app.tsx b/examples/with-react-md-typescript/pages/_app.tsx
index d267a5631f..b0afb8e344 100644
--- a/examples/with-react-md-typescript/pages/_app.tsx
+++ b/examples/with-react-md-typescript/pages/_app.tsx
@@ -1,10 +1,10 @@
-import React, { ReactElement } from 'react'
-import Head from 'next/head'
-import { AppProps } from 'next/app'
+import React, { ReactElement } from "react";
+import Head from "next/head";
+import { AppProps } from "next/app";
 
-import Layout from '../components/Layout'
+import Layout from "../components/Layout";
 
-import '../styles/app.scss'
+import "../styles/app.scss";
 
 export default function App({ Component, pageProps }: AppProps): ReactElement {
   return (
@@ -14,5 +14,5 @@ export default function App({ Component, pageProps }: AppProps): ReactElement {
       </Head>
       <Component {...pageProps} />
     </Layout>
-  )
+  );
 }
diff --git a/examples/with-react-md-typescript/pages/index.tsx b/examples/with-react-md-typescript/pages/index.tsx
index cf2aa3d895..cb72bcfafa 100644
--- a/examples/with-react-md-typescript/pages/index.tsx
+++ b/examples/with-react-md-typescript/pages/index.tsx
@@ -1,10 +1,10 @@
-import React, { ReactElement } from 'react'
-import { Text, TextContainer } from 'react-md'
+import React, { ReactElement } from "react";
+import { Text, TextContainer } from "react-md";
 
 export default function Home(): ReactElement {
   return (
     <TextContainer>
       <Text type="headline-4">Hello, world!</Text>
     </TextContainer>
-  )
+  );
 }
diff --git a/examples/with-react-md-typescript/pages/route-1.tsx b/examples/with-react-md-typescript/pages/route-1.tsx
index 16538c8b05..c62c91ff7e 100644
--- a/examples/with-react-md-typescript/pages/route-1.tsx
+++ b/examples/with-react-md-typescript/pages/route-1.tsx
@@ -1,10 +1,10 @@
-import React, { ReactElement } from 'react'
-import { TextContainer, Text } from 'react-md'
+import React, { ReactElement } from "react";
+import { TextContainer, Text } from "react-md";
 
 export default function Route1(): ReactElement {
   return (
     <TextContainer>
       <Text type="headline-4">Route 1</Text>
     </TextContainer>
-  )
+  );
 }
diff --git a/examples/with-react-md-typescript/styles/_variables.scss b/examples/with-react-md-typescript/styles/_variables.scss
index 3cc7d0fc3a..6c88ae1e89 100644
--- a/examples/with-react-md-typescript/styles/_variables.scss
+++ b/examples/with-react-md-typescript/styles/_variables.scss
@@ -1,4 +1,4 @@
-@import '~@react-md/theme/dist/color-palette';
+@import "~@react-md/theme/dist/color-palette";
 
 // I'm bad with colors... update these variables as needed for
 // your app
@@ -6,7 +6,7 @@ $rmd-theme-primary: $rmd-purple-500;
 $rmd-theme-secondary: $rmd-pink-a-200;
 $rmd-theme-light: true;
 
-$rmd-theme-dark-elevation: 'prefers-color-scheme';
+$rmd-theme-dark-elevation: "prefers-color-scheme";
 $rmd-utils-auto-dense: false;
 
 // any other react-md overrides or "global" variables used
diff --git a/examples/with-react-md-typescript/styles/app.scss b/examples/with-react-md-typescript/styles/app.scss
index c5357c17f6..40680a6b9b 100644
--- a/examples/with-react-md-typescript/styles/app.scss
+++ b/examples/with-react-md-typescript/styles/app.scss
@@ -1,8 +1,8 @@
 // import react-md variable overrides
-@import './variables';
+@import "./variables";
 
 // generate all react-md styles with the custom theme
-@import 'react-md/dist/styles';
+@import "react-md/dist/styles";
 
 @media (prefers-color-scheme: dark) {
   :root {
diff --git a/examples/with-react-multi-carousel/pages/index.tsx b/examples/with-react-multi-carousel/pages/index.tsx
index d2d3a6d6c4..1bd4525216 100644
--- a/examples/with-react-multi-carousel/pages/index.tsx
+++ b/examples/with-react-multi-carousel/pages/index.tsx
@@ -1,7 +1,7 @@
-import Carousel from 'react-multi-carousel'
-import { ResponsiveType } from 'react-multi-carousel/lib/types'
-import 'react-multi-carousel/lib/styles.css'
-import Image from 'next/image'
+import Carousel from "react-multi-carousel";
+import { ResponsiveType } from "react-multi-carousel/lib/types";
+import "react-multi-carousel/lib/styles.css";
+import Image from "next/image";
 
 const BreakpointSlides: ResponsiveType = {
   desktop: {
@@ -16,7 +16,7 @@ const BreakpointSlides: ResponsiveType = {
     breakpoint: { max: 530, min: 0 },
     items: 1,
   },
-}
+};
 
 export default function Page() {
   return (
@@ -66,5 +66,5 @@ export default function Page() {
         height={475}
       />
     </Carousel>
-  )
+  );
 }
diff --git a/examples/with-react-native-web/next.config.js b/examples/with-react-native-web/next.config.js
index b082f9ab9f..55ee3a0bd0 100644
--- a/examples/with-react-native-web/next.config.js
+++ b/examples/with-react-native-web/next.config.js
@@ -4,15 +4,15 @@ module.exports = {
     config.resolve.alias = {
       ...(config.resolve.alias || {}),
       // Transform all direct `react-native` imports to `react-native-web`
-      'react-native$': 'react-native-web',
-    }
+      "react-native$": "react-native-web",
+    };
     config.resolve.extensions = [
-      '.web.js',
-      '.web.jsx',
-      '.web.ts',
-      '.web.tsx',
+      ".web.js",
+      ".web.jsx",
+      ".web.ts",
+      ".web.tsx",
       ...config.resolve.extensions,
-    ]
-    return config
+    ];
+    return config;
   },
-}
+};
diff --git a/examples/with-react-native-web/pages/_app.js b/examples/with-react-native-web/pages/_app.js
index 556b4961bb..ade9f892c5 100644
--- a/examples/with-react-native-web/pages/_app.js
+++ b/examples/with-react-native-web/pages/_app.js
@@ -1,5 +1,5 @@
-import * as React from 'react'
-import Head from 'next/head'
+import * as React from "react";
+import Head from "next/head";
 
 function MyApp({ Component, pageProps }) {
   return (
@@ -9,7 +9,7 @@ function MyApp({ Component, pageProps }) {
       </Head>
       <Component {...pageProps} />
     </>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-react-native-web/pages/_document.js b/examples/with-react-native-web/pages/_document.js
index 4030597dab..39aac4e6bc 100644
--- a/examples/with-react-native-web/pages/_document.js
+++ b/examples/with-react-native-web/pages/_document.js
@@ -1,7 +1,7 @@
-import { Children } from 'react'
-import Document, { Html, Head, Main, NextScript } from 'next/document'
-import { AppRegistry } from 'react-native'
-import config from '../app.json'
+import { Children } from "react";
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import { AppRegistry } from "react-native";
+import config from "../app.json";
 // Force Next-generated DOM elements to fill their parent's height
 const normalizeNextElements = `
   #__next {
@@ -9,29 +9,29 @@ const normalizeNextElements = `
     flex-direction: column;
     height: 100%;
   }
-`
+`;
 
 export default class MyDocument extends Document {
   static async getInitialProps({ renderPage }) {
-    AppRegistry.registerComponent(config.name, () => Main)
-    const { getStyleElement } = AppRegistry.getApplication(config.name)
-    const page = await renderPage()
+    AppRegistry.registerComponent(config.name, () => Main);
+    const { getStyleElement } = AppRegistry.getApplication(config.name);
+    const page = await renderPage();
     const styles = [
       <style dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />,
       getStyleElement(),
-    ]
-    return { ...page, styles: Children.toArray(styles) }
+    ];
+    return { ...page, styles: Children.toArray(styles) };
   }
 
   render() {
     return (
-      <Html style={{ height: '100%' }}>
+      <Html style={{ height: "100%" }}>
         <Head />
-        <body style={{ height: '100%', overflow: 'hidden' }}>
+        <body style={{ height: "100%", overflow: "hidden" }}>
           <Main />
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
diff --git a/examples/with-react-native-web/pages/alternate.js b/examples/with-react-native-web/pages/alternate.js
index 1184ce94f2..48966d458f 100644
--- a/examples/with-react-native-web/pages/alternate.js
+++ b/examples/with-react-native-web/pages/alternate.js
@@ -1,20 +1,20 @@
-import { StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, Text, View } from "react-native";
 
 const styles = StyleSheet.create({
   container: {
-    alignItems: 'center',
+    alignItems: "center",
     flexGrow: 1,
-    justifyContent: 'center',
+    justifyContent: "center",
   },
   text: {
-    alignItems: 'center',
+    alignItems: "center",
     fontSize: 24,
     marginBottom: 24,
   },
   link: {
-    color: 'blue',
+    color: "blue",
   },
-})
+});
 
 export default function Alternate() {
   return (
@@ -27,5 +27,5 @@ export default function Alternate() {
         Go Back
       </Text>
     </View>
-  )
+  );
 }
diff --git a/examples/with-react-native-web/pages/index.js b/examples/with-react-native-web/pages/index.js
index 3fa8574069..5e294ba99d 100644
--- a/examples/with-react-native-web/pages/index.js
+++ b/examples/with-react-native-web/pages/index.js
@@ -1,24 +1,24 @@
-import { StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, Text, View } from "react-native";
 
 const styles = StyleSheet.create({
   container: {
-    alignItems: 'center',
+    alignItems: "center",
     flexGrow: 1,
-    justifyContent: 'center',
+    justifyContent: "center",
   },
   link: {
-    color: 'blue',
+    color: "blue",
   },
   textContainer: {
-    alignItems: 'center',
+    alignItems: "center",
     marginTop: 16,
   },
   text: {
-    alignItems: 'center',
+    alignItems: "center",
     fontSize: 24,
     marginBottom: 24,
   },
-})
+});
 
 export default function App(props) {
   return (
@@ -37,5 +37,5 @@ export default function App(props) {
         </Text>
       </View>
     </View>
-  )
+  );
 }
diff --git a/examples/with-react-toolbox/pages/index.js b/examples/with-react-toolbox/pages/index.js
index 26c1e8ff81..a9ab9280ac 100644
--- a/examples/with-react-toolbox/pages/index.js
+++ b/examples/with-react-toolbox/pages/index.js
@@ -1,8 +1,8 @@
-import ThemeProvider from 'react-toolbox/lib/ThemeProvider'
-import theme from '../theme'
-import Head from 'next/head'
+import ThemeProvider from "react-toolbox/lib/ThemeProvider";
+import theme from "../theme";
+import Head from "next/head";
 
-import Button from 'react-toolbox/lib/button/Button'
+import Button from "react-toolbox/lib/button/Button";
 
 export default function Home() {
   return (
@@ -16,5 +16,5 @@ export default function Home() {
         </Button>
       </ThemeProvider>
     </div>
-  )
+  );
 }
diff --git a/examples/with-react-toolbox/public/theme.css b/examples/with-react-toolbox/public/theme.css
index 003d57a072..f97a0ace85 100644
--- a/examples/with-react-toolbox/public/theme.css
+++ b/examples/with-react-toolbox/public/theme.css
@@ -61,7 +61,7 @@
 ._2Agdx::-moz-focus-inner {
   border: 0;
 }
-._2Agdx > span:not([data-react-toolbox='tooltip']) {
+._2Agdx > span:not([data-react-toolbox="tooltip"]) {
   display: inline-block;
   line-height: 36px;
   vertical-align: middle;
@@ -124,7 +124,7 @@
   height: 56px;
   width: 56px;
 }
-._3IRMZ ._3aBSX:not([data-react-toolbox='tooltip']) {
+._3IRMZ ._3aBSX:not([data-react-toolbox="tooltip"]) {
   line-height: 56px;
 }
 ._3IRMZ > ._3AVBi {
@@ -297,16 +297,16 @@
 ._3fCV6 {
   width: 330px;
 }
-._3fCV6 > [role='body'] {
+._3fCV6 > [role="body"] {
   padding: 0;
 }
-._3fCV6 > [role='navigation'] > ._2hL6u {
+._3fCV6 > [role="navigation"] > ._2hL6u {
   color: #3f51b5;
 }
-._3fCV6 > [role='navigation'] > ._2hL6u:hover {
+._3fCV6 > [role="navigation"] > ._2hL6u:hover {
   background: rgba(63, 81, 181, 0.2);
 }
-._3fCV6 > [role='navigation'] > ._2hL6u:focus:not(:active) {
+._3fCV6 > [role="navigation"] > ._2hL6u:focus:not(:active) {
   background: rgba(63, 81, 181, 0.2);
 }
 ._1X9ls {
@@ -547,8 +547,8 @@
 }
 ._4bZUj._34NWn ~ ._34120:not(.GRQEP),
 ._4bZUj:focus:not([disabled]):not([readonly]) ~ ._34120:not(.GRQEP),
-._4bZUj[type='date'] ~ ._34120:not(.GRQEP),
-._4bZUj[type='time'] ~ ._34120:not(.GRQEP) {
+._4bZUj[type="date"] ~ ._34120:not(.GRQEP),
+._4bZUj[type="time"] ~ ._34120:not(.GRQEP) {
   font-size: 12px;
   top: 6px;
 }
@@ -593,7 +593,7 @@
 ._3FySS::before {
   background-color: #3f51b5;
   bottom: 0;
-  content: '';
+  content: "";
   height: 2px;
   position: absolute;
   transition-duration: 0.2s;
diff --git a/examples/with-react-toolbox/theme.js b/examples/with-react-toolbox/theme.js
index 837b12690b..8cac8057d1 100644
--- a/examples/with-react-toolbox/theme.js
+++ b/examples/with-react-toolbox/theme.js
@@ -1,86 +1,86 @@
 module.exports = {
   RTButton: {
-    button: '_2Agdx',
-    rippleWrapper: '_3AVBi',
-    squared: '_2GH_L',
-    icon: '_3aBSX',
-    solid: '_1ZxqC',
-    raised: '_221ic _2Agdx _2GH_L _1ZxqC',
-    flat: '_1jWAQ _2Agdx _2GH_L',
-    floating: '_3IRMZ _2Agdx _1ZxqC',
-    mini: '_2DCN-',
-    toggle: 'hC5Z2 _2Agdx',
-    primary: '_3tTAW',
-    accent: '_2wp6F',
-    neutral: '_2CPs4',
-    inverse: '_2SPZr',
+    button: "_2Agdx",
+    rippleWrapper: "_3AVBi",
+    squared: "_2GH_L",
+    icon: "_3aBSX",
+    solid: "_1ZxqC",
+    raised: "_221ic _2Agdx _2GH_L _1ZxqC",
+    flat: "_1jWAQ _2Agdx _2GH_L",
+    floating: "_3IRMZ _2Agdx _1ZxqC",
+    mini: "_2DCN-",
+    toggle: "hC5Z2 _2Agdx",
+    primary: "_3tTAW",
+    accent: "_2wp6F",
+    neutral: "_2CPs4",
+    inverse: "_2SPZr",
   },
   RTRipple: {
-    rippleWrapper: '_16N7o',
-    ripple: '_3SV_u',
-    rippleRestarting: '_2OZWa',
-    rippleActive: '_3O2Ue',
+    rippleWrapper: "_16N7o",
+    ripple: "_3SV_u",
+    rippleRestarting: "_2OZWa",
+    rippleActive: "_3O2Ue",
   },
   RTDatePicker: {
-    input: '_2ISvI',
-    disabled: 'Cf3yF',
-    inputElement: 'x7MhN',
-    header: '_2vLUd',
-    year: '_1VWY-',
-    date: '_3K2Ws',
-    calendarWrapper: '_1t-4v',
-    yearsDisplay: '_2OzvT',
-    monthsDisplay: '_2DDdC',
-    dialog: '_3fCV6',
-    button: '_2hL6u',
-    calendar: '_1X9ls',
-    prev: 'Nv9Bc',
-    next: '_3iPkS',
-    title: '_2ESpD',
-    years: 'zEdgW',
-    active: '_1pjXb',
-    week: 'PcByv',
-    days: '_1qh3T',
-    day: '_2qF_L',
-    month: '_1hSm5',
-    slideRightEnter: 'Rk89h',
-    slideRightLeave: '_1nam4',
-    slideRightEnterActive: 'm5B3T',
-    slideRightLeaveActive: '_2bZap',
-    slideLeftEnter: 'bGml_',
-    slideLeftLeave: '_2WGqM',
-    slideLeftEnterActive: '_3Ghls',
-    slideLeftLeaveActive: '_2WLHG',
+    input: "_2ISvI",
+    disabled: "Cf3yF",
+    inputElement: "x7MhN",
+    header: "_2vLUd",
+    year: "_1VWY-",
+    date: "_3K2Ws",
+    calendarWrapper: "_1t-4v",
+    yearsDisplay: "_2OzvT",
+    monthsDisplay: "_2DDdC",
+    dialog: "_3fCV6",
+    button: "_2hL6u",
+    calendar: "_1X9ls",
+    prev: "Nv9Bc",
+    next: "_3iPkS",
+    title: "_2ESpD",
+    years: "zEdgW",
+    active: "_1pjXb",
+    week: "PcByv",
+    days: "_1qh3T",
+    day: "_2qF_L",
+    month: "_1hSm5",
+    slideRightEnter: "Rk89h",
+    slideRightLeave: "_1nam4",
+    slideRightEnterActive: "m5B3T",
+    slideRightLeaveActive: "_2bZap",
+    slideLeftEnter: "bGml_",
+    slideLeftLeave: "_2WGqM",
+    slideLeftEnterActive: "_3Ghls",
+    slideLeftLeaveActive: "_2WLHG",
   },
   RTInput: {
-    input: 'lFVgC',
-    withIcon: '_1nKdf',
-    icon: '_3ga1V',
-    inputElement: '_4bZUj',
-    bar: '_3FySS',
-    label: '_34120',
-    fixed: 'GRQEP',
-    required: '_2G0aY',
-    hint: 'bMyi_',
-    filled: '_34NWn',
-    error: '_2k5Jz',
-    counter: '_1oTuT',
-    disabled: '_3ZfJq',
-    errored: '_2s74E',
-    hidden: '_2gAMv',
+    input: "lFVgC",
+    withIcon: "_1nKdf",
+    icon: "_3ga1V",
+    inputElement: "_4bZUj",
+    bar: "_3FySS",
+    label: "_34120",
+    fixed: "GRQEP",
+    required: "_2G0aY",
+    hint: "bMyi_",
+    filled: "_34NWn",
+    error: "_2k5Jz",
+    counter: "_1oTuT",
+    disabled: "_3ZfJq",
+    errored: "_2s74E",
+    hidden: "_2gAMv",
   },
   RTDialog: {
-    wrapper: '_3nrqp',
-    dialog: '_3lw90',
-    active: '_3ea_1',
-    small: '_38VTT',
-    normal: '_1K3iz',
-    large: '_10LcP',
-    fullscreen: '_3tLXQ',
-    title: '_2J-aP',
-    body: '_1Ivuq',
-    navigation: 'wgwdj',
-    button: '_22_c6',
+    wrapper: "_3nrqp",
+    dialog: "_3lw90",
+    active: "_3ea_1",
+    small: "_38VTT",
+    normal: "_1K3iz",
+    large: "_10LcP",
+    fullscreen: "_3tLXQ",
+    title: "_2J-aP",
+    body: "_1Ivuq",
+    navigation: "wgwdj",
+    button: "_22_c6",
   },
-  RTOverlay: { overlay: '_2LA9x', active: '_1mb5R' },
-}
+  RTOverlay: { overlay: "_2LA9x", active: "_1mb5R" },
+};
diff --git a/examples/with-react-with-styles/defaultTheme.js b/examples/with-react-with-styles/defaultTheme.js
index 88167d071d..66c397d353 100644
--- a/examples/with-react-with-styles/defaultTheme.js
+++ b/examples/with-react-with-styles/defaultTheme.js
@@ -1,5 +1,5 @@
 export default {
   color: {
-    primary: 'salmon',
+    primary: "salmon",
   },
-}
+};
diff --git a/examples/with-react-with-styles/pages/_app.js b/examples/with-react-with-styles/pages/_app.js
index b342c79114..ec73ef7f62 100644
--- a/examples/with-react-with-styles/pages/_app.js
+++ b/examples/with-react-with-styles/pages/_app.js
@@ -1,13 +1,13 @@
-import { DIRECTIONS } from 'react-with-direction'
-import AphroditeInterface from 'react-with-styles-interface-aphrodite'
-import WithStylesContext from 'react-with-styles/lib/WithStylesContext'
-import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet'
-import defaultTheme from '../defaultTheme'
+import { DIRECTIONS } from "react-with-direction";
+import AphroditeInterface from "react-with-styles-interface-aphrodite";
+import WithStylesContext from "react-with-styles/lib/WithStylesContext";
+import ThemedStyleSheet from "react-with-styles/lib/ThemedStyleSheet";
+import defaultTheme from "../defaultTheme";
 
 function MyApp(props) {
-  const { Component, pageProps } = props
+  const { Component, pageProps } = props;
 
-  ThemedStyleSheet.registerInterface(AphroditeInterface)
+  ThemedStyleSheet.registerInterface(AphroditeInterface);
 
   return (
     <WithStylesContext.Provider
@@ -19,7 +19,7 @@ function MyApp(props) {
     >
       <Component {...pageProps} />
     </WithStylesContext.Provider>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-react-with-styles/pages/_document.js b/examples/with-react-with-styles/pages/_document.js
index a795210dc0..f41070f5c6 100644
--- a/examples/with-react-with-styles/pages/_document.js
+++ b/examples/with-react-with-styles/pages/_document.js
@@ -1,11 +1,11 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
-import { StyleSheetServer } from 'aphrodite'
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import { StyleSheetServer } from "aphrodite";
 
 class MyDocument extends Document {
   static async getInitialProps({ renderPage }) {
-    const { html, css } = StyleSheetServer.renderStatic(() => renderPage())
-    const ids = css.renderedClassNames
-    return { ...html, css, ids }
+    const { html, css } = StyleSheetServer.renderStatic(() => renderPage());
+    const ids = css.renderedClassNames;
+    return { ...html, css, ids };
   }
 
   render() {
@@ -13,7 +13,7 @@ class MyDocument extends Document {
     so that aphrodite knows which style tag it's in control of when
     the client goes to render styles. If you don't you'll get a second
     <style> tag */
-    const { css, ids } = this.props
+    const { css, ids } = this.props;
     return (
       <Html>
         <Head>
@@ -36,8 +36,8 @@ class MyDocument extends Document {
           )}
         </body>
       </Html>
-    )
+    );
   }
 }
 
-export default MyDocument
+export default MyDocument;
diff --git a/examples/with-react-with-styles/pages/index.js b/examples/with-react-with-styles/pages/index.js
index 8547f8408f..45516128f4 100644
--- a/examples/with-react-with-styles/pages/index.js
+++ b/examples/with-react-with-styles/pages/index.js
@@ -1,15 +1,15 @@
-import { css, withStyles } from 'react-with-styles'
+import { css, withStyles } from "react-with-styles";
 
 function Home({ styles }) {
   return (
     <div>
       <h1 {...css(styles.title)}>My page</h1>
     </div>
-  )
+  );
 }
 
 export default withStyles(({ color }) => ({
   title: {
     color: color.primary,
   },
-}))(Home)
+}))(Home);
diff --git a/examples/with-reactstrap/pages/_app.jsx b/examples/with-reactstrap/pages/_app.jsx
index bbd8269522..54750cbd0f 100644
--- a/examples/with-reactstrap/pages/_app.jsx
+++ b/examples/with-reactstrap/pages/_app.jsx
@@ -1,5 +1,5 @@
-import '../styles/index.css'
+import "../styles/index.css";
 
 export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-reactstrap/pages/index.jsx b/examples/with-reactstrap/pages/index.jsx
index bfe5a5daf9..4ef65d7ebe 100644
--- a/examples/with-reactstrap/pages/index.jsx
+++ b/examples/with-reactstrap/pages/index.jsx
@@ -1,4 +1,4 @@
-import Head from 'next/head'
+import Head from "next/head";
 import {
   Container,
   Row,
@@ -8,7 +8,7 @@ import {
   CardText,
   CardTitle,
   CardBody,
-} from 'reactstrap'
+} from "reactstrap";
 
 export default function Home() {
   return (
@@ -97,10 +97,10 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <img src="/vercel.svg" alt="Vercel Logo" className="sml-logo" />
         </a>
       </footer>
     </Container>
-  )
+  );
 }
diff --git a/examples/with-reactstrap/styles/index.css b/examples/with-reactstrap/styles/index.css
index 1583ab2eee..a445eaca17 100644
--- a/examples/with-reactstrap/styles/index.css
+++ b/examples/with-reactstrap/styles/index.css
@@ -1,5 +1,5 @@
 /* ensure all pages have Bootstrap CSS */
-@import '~bootstrap/dist/css/bootstrap.min.css';
+@import "~bootstrap/dist/css/bootstrap.min.css";
 
 .md-container {
   max-width: 800px;
diff --git a/examples/with-realm-web/lib/RealmClient.js b/examples/with-realm-web/lib/RealmClient.js
index b0672c096e..9e214003aa 100644
--- a/examples/with-realm-web/lib/RealmClient.js
+++ b/examples/with-realm-web/lib/RealmClient.js
@@ -1,27 +1,27 @@
-import { Credentials, App } from 'realm-web'
+import { Credentials, App } from "realm-web";
 
-const APP_ID = process.env.NEXT_PUBLIC_REALM_APP_ID
-export const REALM_GRAPHQL_ENDPOINT = `https://realm.mongodb.com/api/client/v2.0/app/${APP_ID}/graphql`
+const APP_ID = process.env.NEXT_PUBLIC_REALM_APP_ID;
+export const REALM_GRAPHQL_ENDPOINT = `https://realm.mongodb.com/api/client/v2.0/app/${APP_ID}/graphql`;
 
 const app = new App({
   id: APP_ID,
-  baseUrl: 'https://realm.mongodb.com',
-})
+  baseUrl: "https://realm.mongodb.com",
+});
 
 export const generateAuthHeader = async () => {
   if (!app.currentUser) {
     // If no user is logged in, log in an anonymous user
-    await app.logIn(Credentials.anonymous())
+    await app.logIn(Credentials.anonymous());
   } else {
     // An already logged in user's access token might be stale. To guarantee that the token is
     // valid, we refresh the user's custom data which also refreshes their access token.
-    await app.currentUser.refreshCustomData()
+    await app.currentUser.refreshCustomData();
   }
   // Get a valid access token for the current user
-  const { accessToken } = app.currentUser
+  const { accessToken } = app.currentUser;
 
   // Set the Authorization header, preserving any other headers
   return {
     Authorization: `Bearer ${accessToken}`,
-  }
-}
+  };
+};
diff --git a/examples/with-realm-web/pages/index.js b/examples/with-realm-web/pages/index.js
index b22a81ed36..75143e406b 100644
--- a/examples/with-realm-web/pages/index.js
+++ b/examples/with-realm-web/pages/index.js
@@ -1,5 +1,5 @@
-import useSWR from 'swr'
-import { generateAuthHeader, REALM_GRAPHQL_ENDPOINT } from '../lib/RealmClient'
+import useSWR from "swr";
+import { generateAuthHeader, REALM_GRAPHQL_ENDPOINT } from "../lib/RealmClient";
 
 const FIND_MOVIES = `
   query FindMovies{
@@ -9,23 +9,23 @@ const FIND_MOVIES = `
       runtime
     }
   }
-`
+`;
 
 const fetcher = async (query) =>
   fetch(REALM_GRAPHQL_ENDPOINT, {
-    method: 'POST',
+    method: "POST",
     headers: await generateAuthHeader(),
     body: JSON.stringify({ query }),
-  }).then((res) => res.json())
+  }).then((res) => res.json());
 
 const IndexPage = () => {
-  const { data } = useSWR(FIND_MOVIES, fetcher)
+  const { data } = useSWR(FIND_MOVIES, fetcher);
 
   if (data && data.error) {
-    console.error(data.error)
-    return <p>An error occurred: ${data.error}</p>
+    console.error(data.error);
+    return <p>An error occurred: ${data.error}</p>;
   }
-  const movies = data ? data.data.movies : null
+  const movies = data ? data.data.movies : null;
 
   return (
     <>
@@ -55,7 +55,7 @@ const IndexPage = () => {
                     <td>{movie.title}</td>
                     <td>{movie.runtime}</td>
                   </tr>
-                )
+                );
               })}
             </tbody>
           </table>
@@ -88,7 +88,7 @@ const IndexPage = () => {
         }
       `}</style>
     </>
-  )
-}
+  );
+};
 
-export default IndexPage
+export default IndexPage;
diff --git a/examples/with-reasonml-todo/next.config.js b/examples/with-reasonml-todo/next.config.js
index ebeacd8e67..5c0c8b54ba 100644
--- a/examples/with-reasonml-todo/next.config.js
+++ b/examples/with-reasonml-todo/next.config.js
@@ -1,5 +1,5 @@
-const withTM = require('next-transpile-modules')(['bs-platform'])
+const withTM = require("next-transpile-modules")(["bs-platform"]);
 
 module.exports = withTM({
-  pageExtensions: ['jsx', 'js', 'bs.js'],
-})
+  pageExtensions: ["jsx", "js", "bs.js"],
+});
diff --git a/examples/with-rebass/pages/index.js b/examples/with-rebass/pages/index.js
index dbcf9c8f6e..82a602623e 100644
--- a/examples/with-rebass/pages/index.js
+++ b/examples/with-rebass/pages/index.js
@@ -1,13 +1,13 @@
-import { Heading, Text, Link, Flex, Box } from 'rebass'
+import { Heading, Text, Link, Flex, Box } from "rebass";
 
 function HomePage() {
   return (
     <Box
       sx={{
         maxWidth: 1100,
-        mx: 'auto',
+        mx: "auto",
         px: 3,
-        textAlign: 'center',
+        textAlign: "center",
       }}
     >
       <Heading
@@ -24,9 +24,9 @@ function HomePage() {
             fontWeight="bold"
             href="https://github.com/vercel/next.js/"
             sx={{
-              fontWeight: '600',
-              color: 'white',
-              textDecoration: 'none',
+              fontWeight: "600",
+              color: "white",
+              textDecoration: "none",
             }}
           >
             Next.js
@@ -36,9 +36,9 @@ function HomePage() {
             variant="nav"
             href="http://jxnblk.com/rebass/"
             sx={{
-              fontWeight: '600',
-              color: 'white',
-              textDecoration: 'none',
+              fontWeight: "600",
+              color: "white",
+              textDecoration: "none",
             }}
           >
             REBASS
@@ -59,7 +59,7 @@ function HomePage() {
         </Box>
       </Box>
     </Box>
-  )
+  );
 }
 
-export default HomePage
+export default HomePage;
diff --git a/examples/with-recoil/components/counter.js b/examples/with-recoil/components/counter.js
index a77176eba9..b895368bb0 100644
--- a/examples/with-recoil/components/counter.js
+++ b/examples/with-recoil/components/counter.js
@@ -1,15 +1,19 @@
-import { useRecoilValue, useSetRecoilState, useResetRecoilState } from 'recoil'
-import { countState, incrementCount, decrementCount } from '../lib/recoil-atoms'
+import { useRecoilValue, useSetRecoilState, useResetRecoilState } from "recoil";
+import {
+  countState,
+  incrementCount,
+  decrementCount,
+} from "../lib/recoil-atoms";
 
 const useCounter = () => ({
   count: useRecoilValue(countState),
   increment: useSetRecoilState(incrementCount),
   decrement: useSetRecoilState(decrementCount),
   reset: useResetRecoilState(countState),
-})
+});
 
 const Counter = () => {
-  const { count, increment, decrement, reset } = useCounter()
+  const { count, increment, decrement, reset } = useCounter();
   return (
     <div>
       <h1>
@@ -19,7 +23,7 @@ const Counter = () => {
       <button onClick={decrement}>-1</button>
       <button onClick={reset}>Reset</button>
     </div>
-  )
-}
+  );
+};
 
-export default Counter
+export default Counter;
diff --git a/examples/with-recoil/lib/recoil-atoms.js b/examples/with-recoil/lib/recoil-atoms.js
index 3adcc32f66..9fa4534f2a 100644
--- a/examples/with-recoil/lib/recoil-atoms.js
+++ b/examples/with-recoil/lib/recoil-atoms.js
@@ -1,18 +1,18 @@
-import { atom, selector } from 'recoil'
+import { atom, selector } from "recoil";
 
 export const countState = atom({
-  key: 'count',
+  key: "count",
   default: 0,
-})
+});
 
 export const incrementCount = selector({
-  key: 'incrementCount',
+  key: "incrementCount",
   get: ({ get }) => get(countState),
   set: ({ set }) => set(countState, (currCount) => currCount + 1),
-})
+});
 
 export const decrementCount = selector({
-  key: 'decrementCount',
+  key: "decrementCount",
   get: ({ get }) => get(countState),
   set: ({ set }) => set(countState, (currCount) => currCount - 1),
-})
+});
diff --git a/examples/with-recoil/pages/_app.js b/examples/with-recoil/pages/_app.js
index 7b0664014c..089b79e441 100644
--- a/examples/with-recoil/pages/_app.js
+++ b/examples/with-recoil/pages/_app.js
@@ -1,9 +1,9 @@
-import { RecoilRoot } from 'recoil'
+import { RecoilRoot } from "recoil";
 
 export default function MyApp({ Component, pageProps }) {
   return (
     <RecoilRoot>
       <Component {...pageProps} />
     </RecoilRoot>
-  )
+  );
 }
diff --git a/examples/with-recoil/pages/index.js b/examples/with-recoil/pages/index.js
index 592fc9f617..c642e00667 100644
--- a/examples/with-recoil/pages/index.js
+++ b/examples/with-recoil/pages/index.js
@@ -1,5 +1,5 @@
-import Counter from '../components/counter'
+import Counter from "../components/counter";
 
-const IndexPage = () => <Counter />
+const IndexPage = () => <Counter />;
 
-export default IndexPage
+export default IndexPage;
diff --git a/examples/with-redis/app/actions.tsx b/examples/with-redis/app/actions.tsx
index 4c818415b4..5717158c59 100644
--- a/examples/with-redis/app/actions.tsx
+++ b/examples/with-redis/app/actions.tsx
@@ -1,46 +1,46 @@
-'use server'
+"use server";
 
-import { kv } from '@vercel/kv'
-import { revalidatePath } from 'next/cache'
-import { Feature } from './types'
+import { kv } from "@vercel/kv";
+import { revalidatePath } from "next/cache";
+import { Feature } from "./types";
 
 export async function saveFeature(feature: Feature, formData: FormData) {
   let newFeature = {
     ...feature,
-    title: formData.get('feature') as string,
-  }
-  await kv.hset(`item:${newFeature.id}`, newFeature)
-  await kv.zadd('items_by_score', {
+    title: formData.get("feature") as string,
+  };
+  await kv.hset(`item:${newFeature.id}`, newFeature);
+  await kv.zadd("items_by_score", {
     score: Number(newFeature.score),
     member: newFeature.id,
-  })
+  });
 
-  revalidatePath('/')
+  revalidatePath("/");
 }
 
 export async function saveEmail(formData: FormData) {
-  const email = formData.get('email')
+  const email = formData.get("email");
 
   function validateEmail(email: FormDataEntryValue) {
     const re =
-      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-    return re.test(String(email).toLowerCase())
+      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return re.test(String(email).toLowerCase());
   }
 
   if (email && validateEmail(email)) {
-    await kv.sadd('emails', email)
-    revalidatePath('/')
+    await kv.sadd("emails", email);
+    revalidatePath("/");
   }
 }
 
 export async function upvote(feature: Feature) {
-  const newScore = Number(feature.score) + 1
+  const newScore = Number(feature.score) + 1;
   await kv.hset(`item:${feature.id}`, {
     ...feature,
     score: newScore,
-  })
+  });
 
-  await kv.zadd('items_by_score', { score: newScore, member: feature.id })
+  await kv.zadd("items_by_score", { score: newScore, member: feature.id });
 
-  revalidatePath('/')
+  revalidatePath("/");
 }
diff --git a/examples/with-redis/app/form.tsx b/examples/with-redis/app/form.tsx
index 447bd8153f..45a13efb00 100644
--- a/examples/with-redis/app/form.tsx
+++ b/examples/with-redis/app/form.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client";
 
-import clsx from 'clsx'
-import { useOptimistic, useRef } from 'react'
-import { saveFeature, upvote } from './actions'
-import { v4 as uuidv4 } from 'uuid'
-import { Feature } from './types'
+import clsx from "clsx";
+import { useOptimistic, useRef } from "react";
+import { saveFeature, upvote } from "./actions";
+import { v4 as uuidv4 } from "uuid";
+import { Feature } from "./types";
 
 function Item({
   isFirst,
@@ -15,65 +15,65 @@ function Item({
   pending,
   mutate,
 }: {
-  isFirst: boolean
-  isLast: boolean
-  isReleased: boolean
-  hasVoted: boolean
-  feature: Feature
-  pending: boolean
-  mutate: any
+  isFirst: boolean;
+  isLast: boolean;
+  isReleased: boolean;
+  hasVoted: boolean;
+  feature: Feature;
+  pending: boolean;
+  mutate: any;
 }) {
-  const upvoteWithId = upvote.bind(null, feature)
+  const upvoteWithId = upvote.bind(null, feature);
 
   return (
     <form
       action={upvoteWithId}
       onSubmit={async (event) => {
-        event.preventDefault()
+        event.preventDefault();
         mutate({
           updatedFeature: {
             ...feature,
             score: Number(feature.score) + 1,
           },
           pending: true,
-        })
+        });
 
-        await upvote(feature)
+        await upvote(feature);
       }}
       className={clsx(
-        'p-6 mx-8 flex items-center border-t border-l border-r',
-        isFirst && 'rounded-t-md',
-        isLast && 'border-b rounded-b-md'
+        "p-6 mx-8 flex items-center border-t border-l border-r",
+        isFirst && "rounded-t-md",
+        isLast && "border-b rounded-b-md",
       )}
     >
       <button
         className={clsx(
-          'ring-1 ring-gray-200 rounded-full w-8 min-w-[2rem] h-8 mr-4 focus:outline-none focus:ring focus:ring-blue-300',
+          "ring-1 ring-gray-200 rounded-full w-8 min-w-[2rem] h-8 mr-4 focus:outline-none focus:ring focus:ring-blue-300",
           (isReleased || hasVoted) &&
-            'bg-green-100 cursor-not-allowed ring-green-300',
-          pending && 'bg-gray-100 cursor-not-allowed'
+            "bg-green-100 cursor-not-allowed ring-green-300",
+          pending && "bg-gray-100 cursor-not-allowed",
         )}
         disabled={isReleased || hasVoted || pending}
         type="submit"
       >
-        {isReleased ? '✅' : '👍'}
+        {isReleased ? "✅" : "👍"}
       </button>
       <h3 className="text font-semibold w-full text-left">{feature.title}</h3>
       <div className="bg-gray-200 text-gray-700 text-sm rounded-xl px-2 ml-2">
         {feature.score}
       </div>
     </form>
-  )
+  );
 }
 
 type FeatureState = {
-  newFeature: Feature
-  updatedFeature?: Feature
-  pending: boolean
-}
+  newFeature: Feature;
+  updatedFeature?: Feature;
+  pending: boolean;
+};
 
 export default function FeatureForm({ features }: { features: Feature[] }) {
-  const formRef = useRef<HTMLFormElement>(null)
+  const formRef = useRef<HTMLFormElement>(null);
   const [state, mutate] = useOptimistic(
     { features, pending: false },
     function createReducer(state, newState: FeatureState) {
@@ -81,37 +81,37 @@ export default function FeatureForm({ features }: { features: Feature[] }) {
         return {
           features: [...state.features, newState.newFeature],
           pending: newState.pending,
-        }
+        };
       } else {
         return {
           features: [
             ...state.features.filter(
-              (f) => f.id !== newState.updatedFeature!.id
+              (f) => f.id !== newState.updatedFeature!.id,
             ),
             newState.updatedFeature,
           ] as Feature[],
           pending: newState.pending,
-        }
+        };
       }
-    }
-  )
+    },
+  );
 
   let sortedFeatures = state.features.sort((a, b) => {
     // First, compare by score in descending order
-    if (Number(a.score) > Number(b.score)) return -1
-    if (Number(a.score) < Number(b.score)) return 1
+    if (Number(a.score) > Number(b.score)) return -1;
+    if (Number(a.score) < Number(b.score)) return 1;
 
     // If scores are equal, then sort by created_at in ascending order
-    return new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
-  })
+    return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
+  });
 
   let featureStub = {
     id: uuidv4(),
-    title: '', // will used value from form
+    title: "", // will used value from form
     created_at: new Date().toISOString(),
-    score: '1',
-  }
-  let saveWithNewFeature = saveFeature.bind(null, featureStub)
+    score: "1",
+  };
+  let saveWithNewFeature = saveFeature.bind(null, featureStub);
 
   return (
     <>
@@ -121,19 +121,19 @@ export default function FeatureForm({ features }: { features: Feature[] }) {
           ref={formRef}
           action={saveWithNewFeature}
           onSubmit={async (event) => {
-            event.preventDefault()
-            let formData = new FormData(event.currentTarget)
+            event.preventDefault();
+            let formData = new FormData(event.currentTarget);
             let newFeature = {
               ...featureStub,
-              title: formData.get('feature') as string,
-            }
+              title: formData.get("feature") as string,
+            };
 
             mutate({
               newFeature,
               pending: true,
-            })
-            formRef.current?.reset()
-            await saveFeature(newFeature, formData)
+            });
+            formRef.current?.reset();
+            await saveFeature(newFeature, formData);
           }}
         >
           <input
@@ -148,8 +148,8 @@ export default function FeatureForm({ features }: { features: Feature[] }) {
           />
           <button
             className={clsx(
-              'flex items-center justify-center absolute right-2 top-2 px-4 h-10 text-lg border bg-black text-white rounded-md w-24 focus:outline-none focus:ring focus:ring-blue-300 focus:bg-gray-800',
-              state.pending && 'bg-gray-700 cursor-not-allowed'
+              "flex items-center justify-center absolute right-2 top-2 px-4 h-10 text-lg border bg-black text-white rounded-md w-24 focus:outline-none focus:ring focus:ring-blue-300 focus:bg-gray-800",
+              state.pending && "bg-gray-700 cursor-not-allowed",
             )}
             type="submit"
             disabled={state.pending}
@@ -173,5 +173,5 @@ export default function FeatureForm({ features }: { features: Feature[] }) {
         ))}
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/with-redis/app/layout.tsx b/examples/with-redis/app/layout.tsx
index 60b8785c9a..adacebc02f 100644
--- a/examples/with-redis/app/layout.tsx
+++ b/examples/with-redis/app/layout.tsx
@@ -1,14 +1,14 @@
-import './globals.css'
-import { GeistSans } from 'geist/font/sans'
+import "./globals.css";
+import { GeistSans } from "geist/font/sans";
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en" className={GeistSans.variable}>
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-redis/app/page.tsx b/examples/with-redis/app/page.tsx
index 24f906072f..2fb45886ab 100644
--- a/examples/with-redis/app/page.tsx
+++ b/examples/with-redis/app/page.tsx
@@ -1,12 +1,12 @@
-import { kv } from '@vercel/kv'
-import { saveEmail } from './actions'
-import FeatureForm from './form'
-import { Feature } from './types'
+import { kv } from "@vercel/kv";
+import { saveEmail } from "./actions";
+import FeatureForm from "./form";
+import { Feature } from "./types";
 
 export let metadata = {
-  title: 'Next.js and Redis Example',
-  description: 'Feature roadmap example with Next.js with Redis.',
-}
+  title: "Next.js and Redis Example",
+  description: "Feature roadmap example with Next.js with Redis.",
+};
 
 function VercelLogo(props: React.SVGProps<SVGSVGElement>) {
   return (
@@ -26,35 +26,35 @@ function VercelLogo(props: React.SVGProps<SVGSVGElement>) {
         strokeWidth="1.5"
       />
     </svg>
-  )
+  );
 }
 
 async function getFeatures() {
-  let itemIds = await kv.zrange('items_by_score', 0, 100, {
+  let itemIds = await kv.zrange("items_by_score", 0, 100, {
     rev: true,
-  })
+  });
 
   if (!itemIds.length) {
-    return []
+    return [];
   }
 
-  let multi = kv.multi()
+  let multi = kv.multi();
   itemIds.forEach((id) => {
-    multi.hgetall(`item:${id}`)
-  })
+    multi.hgetall(`item:${id}`);
+  });
 
-  let items: Feature[] = await multi.exec()
+  let items: Feature[] = await multi.exec();
   return items.map((item) => {
     return {
       ...item,
       score: item.score,
       created_at: item.created_at,
-    }
-  })
+    };
+  });
 }
 
 export default async function Page() {
-  let features = await getFeatures()
+  let features = await getFeatures();
 
   return (
     <div className="flex flex-col items-center justify-center min-h-screen py-2">
@@ -115,5 +115,5 @@ export default async function Page() {
         </div>
       </main>
     </div>
-  )
+  );
 }
diff --git a/examples/with-redis/app/types.tsx b/examples/with-redis/app/types.tsx
index d78fe127d9..f58f65d48d 100644
--- a/examples/with-redis/app/types.tsx
+++ b/examples/with-redis/app/types.tsx
@@ -1,6 +1,6 @@
 export type Feature = {
-  id: string
-  title: string
-  score: string
-  created_at: string
-}
+  id: string;
+  title: string;
+  score: string;
+  created_at: string;
+};
diff --git a/examples/with-redis/postcss.config.js b/examples/with-redis/postcss.config.js
index 33ad091d26..12a703d900 100644
--- a/examples/with-redis/postcss.config.js
+++ b/examples/with-redis/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/with-redis/tailwind.config.ts b/examples/with-redis/tailwind.config.ts
index ba7472ec11..788d55389d 100644
--- a/examples/with-redis/tailwind.config.ts
+++ b/examples/with-redis/tailwind.config.ts
@@ -1,10 +1,10 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from "tailwindcss";
 
 export default {
   content: [
-    './app/**/*.{js,ts,jsx,tsx}',
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
@@ -13,4 +13,4 @@ export default {
     hoverOnlyWhenSupported: true,
   },
   plugins: [],
-} satisfies Config
+} satisfies Config;
diff --git a/examples/with-redux/app/api/identity-count/route.ts b/examples/with-redux/app/api/identity-count/route.ts
index 02cfe2f948..fc597114b2 100644
--- a/examples/with-redux/app/api/identity-count/route.ts
+++ b/examples/with-redux/app/api/identity-count/route.ts
@@ -1,12 +1,12 @@
 /* Core */
-import { NextResponse } from 'next/server'
+import { NextResponse } from "next/server";
 
 export async function POST(req: Request, res: Response) {
-  const body = await req.json()
-  const { amount = 1 } = body
+  const body = await req.json();
+  const { amount = 1 } = body;
 
   // simulate IO latency
-  await new Promise((r) => setTimeout(r, 500))
+  await new Promise((r) => setTimeout(r, 500));
 
-  return NextResponse.json({ data: amount })
+  return NextResponse.json({ data: amount });
 }
diff --git a/examples/with-redux/app/components/Counter/Counter.tsx b/examples/with-redux/app/components/Counter/Counter.tsx
index f9aabbde86..5d1edac281 100644
--- a/examples/with-redux/app/components/Counter/Counter.tsx
+++ b/examples/with-redux/app/components/Counter/Counter.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client";
 
 /* Core */
-import { useState } from 'react'
+import { useState } from "react";
 
 /* Instruments */
 import {
@@ -11,13 +11,13 @@ import {
   selectCount,
   incrementAsync,
   incrementIfOddAsync,
-} from '@/lib/redux'
-import styles from './counter.module.css'
+} from "@/lib/redux";
+import styles from "./counter.module.css";
 
 export const Counter = () => {
-  const dispatch = useDispatch()
-  const count = useSelector(selectCount)
-  const [incrementAmount, setIncrementAmount] = useState(2)
+  const dispatch = useDispatch();
+  const count = useSelector(selectCount);
+  const [incrementAmount, setIncrementAmount] = useState(2);
 
   return (
     <div>
@@ -67,5 +67,5 @@ export const Counter = () => {
         </button>
       </div>
     </div>
-  )
-}
+  );
+};
diff --git a/examples/with-redux/app/components/Counter/counter.module.css b/examples/with-redux/app/components/Counter/counter.module.css
index 025bb72943..ce3e2d3a25 100644
--- a/examples/with-redux/app/components/Counter/counter.module.css
+++ b/examples/with-redux/app/components/Counter/counter.module.css
@@ -18,7 +18,7 @@
   padding-left: 16px;
   padding-right: 16px;
   margin-top: 2px;
-  font-family: 'Courier New', Courier, monospace;
+  font-family: "Courier New", Courier, monospace;
 }
 
 .button {
@@ -60,7 +60,7 @@
 }
 
 .asyncButton:after {
-  content: '';
+  content: "";
   background-color: rgba(112, 76, 182, 0.15);
   display: block;
   position: absolute;
diff --git a/examples/with-redux/app/components/Nav.tsx b/examples/with-redux/app/components/Nav.tsx
index 3cf3ed002c..1e16541a96 100644
--- a/examples/with-redux/app/components/Nav.tsx
+++ b/examples/with-redux/app/components/Nav.tsx
@@ -1,31 +1,31 @@
-'use client'
+"use client";
 
 /* Core */
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 /* Instruments */
-import styles from '../styles/layout.module.css'
+import styles from "../styles/layout.module.css";
 
 export const Nav = () => {
-  const pathname = usePathname()
+  const pathname = usePathname();
 
   return (
     <nav className={styles.nav}>
       <Link
-        className={`${styles.link} ${pathname === '/' ? styles.active : ''}`}
+        className={`${styles.link} ${pathname === "/" ? styles.active : ""}`}
         href="/"
       >
         Home
       </Link>
       <Link
         className={`${styles.link} ${
-          pathname === '/verify' ? styles.active : ''
+          pathname === "/verify" ? styles.active : ""
         }`}
         href="/verify"
       >
         Verify
       </Link>
     </nav>
-  )
-}
+  );
+};
diff --git a/examples/with-redux/app/layout.tsx b/examples/with-redux/app/layout.tsx
index c071150ee4..6ff466da5a 100644
--- a/examples/with-redux/app/layout.tsx
+++ b/examples/with-redux/app/layout.tsx
@@ -1,10 +1,10 @@
 /* Components */
-import { Providers } from '@/lib/providers'
-import { Nav } from './components/Nav'
+import { Providers } from "@/lib/providers";
+import { Nav } from "./components/Nav";
 
 /* Instruments */
-import styles from './styles/layout.module.css'
-import './styles/globals.css'
+import styles from "./styles/layout.module.css";
+import "./styles/globals.css";
 
 export default function RootLayout(props: React.PropsWithChildren) {
   return (
@@ -62,5 +62,5 @@ export default function RootLayout(props: React.PropsWithChildren) {
         </body>
       </html>
     </Providers>
-  )
+  );
 }
diff --git a/examples/with-redux/app/page.tsx b/examples/with-redux/app/page.tsx
index 559704d119..f57cfa0532 100644
--- a/examples/with-redux/app/page.tsx
+++ b/examples/with-redux/app/page.tsx
@@ -1,10 +1,10 @@
 /* Components */
-import { Counter } from './components/Counter/Counter'
+import { Counter } from "./components/Counter/Counter";
 
 export default function IndexPage() {
-  return <Counter />
+  return <Counter />;
 }
 
 export const metadata = {
-  title: 'Redux Toolkit',
-}
+  title: "Redux Toolkit",
+};
diff --git a/examples/with-redux/app/styles/layout.module.css b/examples/with-redux/app/styles/layout.module.css
index a9ff48222a..aab3e2f1ba 100644
--- a/examples/with-redux/app/styles/layout.module.css
+++ b/examples/with-redux/app/styles/layout.module.css
@@ -1,10 +1,10 @@
 .container {
   display: grid;
   grid-template-areas:
-    'nav'
-    'header'
-    'main'
-    'footer';
+    "nav"
+    "header"
+    "main"
+    "footer";
   grid-template-rows: auto auto 1fr 36px;
   align-items: center;
   min-height: 100vh;
diff --git a/examples/with-redux/app/verify/page.tsx b/examples/with-redux/app/verify/page.tsx
index 2af0400962..6c8a169aac 100644
--- a/examples/with-redux/app/verify/page.tsx
+++ b/examples/with-redux/app/verify/page.tsx
@@ -7,5 +7,5 @@ export default function VerifyPage() {
         page navigations.
       </p>
     </>
-  )
+  );
 }
diff --git a/examples/with-redux/lib/providers.tsx b/examples/with-redux/lib/providers.tsx
index 4150f7d22d..9e629c083e 100644
--- a/examples/with-redux/lib/providers.tsx
+++ b/examples/with-redux/lib/providers.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client";
 
 /* Core */
-import { Provider } from 'react-redux'
+import { Provider } from "react-redux";
 
 /* Instruments */
-import { reduxStore } from '@/lib/redux'
+import { reduxStore } from "@/lib/redux";
 
 export const Providers = (props: React.PropsWithChildren) => {
-  return <Provider store={reduxStore}>{props.children}</Provider>
-}
+  return <Provider store={reduxStore}>{props.children}</Provider>;
+};
diff --git a/examples/with-redux/lib/redux/createAppAsyncThunk.ts b/examples/with-redux/lib/redux/createAppAsyncThunk.ts
index 96abfaaf0b..f9903e2f93 100644
--- a/examples/with-redux/lib/redux/createAppAsyncThunk.ts
+++ b/examples/with-redux/lib/redux/createAppAsyncThunk.ts
@@ -1,14 +1,14 @@
 /* Core */
-import { createAsyncThunk } from '@reduxjs/toolkit'
+import { createAsyncThunk } from "@reduxjs/toolkit";
 
 /* Instruments */
-import type { ReduxState, ReduxDispatch } from './store'
+import type { ReduxState, ReduxDispatch } from "./store";
 
 /**
  * ? A utility function to create a typed Async Thunk Actions.
  */
 export const createAppAsyncThunk = createAsyncThunk.withTypes<{
-  state: ReduxState
-  dispatch: ReduxDispatch
-  rejectValue: string
-}>()
+  state: ReduxState;
+  dispatch: ReduxDispatch;
+  rejectValue: string;
+}>();
diff --git a/examples/with-redux/lib/redux/index.ts b/examples/with-redux/lib/redux/index.ts
index e6f7630ff0..6151df2e59 100644
--- a/examples/with-redux/lib/redux/index.ts
+++ b/examples/with-redux/lib/redux/index.ts
@@ -1,2 +1,2 @@
-export * from './store'
-export * from './slices'
+export * from "./store";
+export * from "./slices";
diff --git a/examples/with-redux/lib/redux/middleware.ts b/examples/with-redux/lib/redux/middleware.ts
index ba0940c76e..0dd48544ac 100644
--- a/examples/with-redux/lib/redux/middleware.ts
+++ b/examples/with-redux/lib/redux/middleware.ts
@@ -1,5 +1,5 @@
 /* Core */
-import { createLogger } from 'redux-logger'
+import { createLogger } from "redux-logger";
 
 const middleware = [
   createLogger({
@@ -7,14 +7,14 @@ const middleware = [
     timestamp: false,
     collapsed: true,
     colors: {
-      title: () => '#139BFE',
-      prevState: () => '#1C5FAF',
-      action: () => '#149945',
-      nextState: () => '#A47104',
-      error: () => '#ff0005',
+      title: () => "#139BFE",
+      prevState: () => "#1C5FAF",
+      action: () => "#149945",
+      nextState: () => "#A47104",
+      error: () => "#ff0005",
     },
-    predicate: () => typeof window !== 'undefined',
+    predicate: () => typeof window !== "undefined",
   }),
-]
+];
 
-export { middleware }
+export { middleware };
diff --git a/examples/with-redux/lib/redux/rootReducer.ts b/examples/with-redux/lib/redux/rootReducer.ts
index 4023a34eb8..2e10ed3d74 100644
--- a/examples/with-redux/lib/redux/rootReducer.ts
+++ b/examples/with-redux/lib/redux/rootReducer.ts
@@ -1,6 +1,6 @@
 /* Instruments */
-import { counterSlice } from './slices'
+import { counterSlice } from "./slices";
 
 export const reducer = {
   counter: counterSlice.reducer,
-}
+};
diff --git a/examples/with-redux/lib/redux/slices/counterSlice/counterSlice.ts b/examples/with-redux/lib/redux/slices/counterSlice/counterSlice.ts
index fa1fe58a9a..29510f80dc 100644
--- a/examples/with-redux/lib/redux/slices/counterSlice/counterSlice.ts
+++ b/examples/with-redux/lib/redux/slices/counterSlice/counterSlice.ts
@@ -1,16 +1,16 @@
 /* Core */
-import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
 
 /* Instruments */
-import { incrementAsync } from './thunks'
+import { incrementAsync } from "./thunks";
 
 const initialState: CounterSliceState = {
   value: 0,
-  status: 'idle',
-}
+  status: "idle",
+};
 
 export const counterSlice = createSlice({
-  name: 'counter',
+  name: "counter",
   initialState,
   // The `reducers` field lets us define reducers and generate associated actions
   reducers: {
@@ -19,14 +19,14 @@ export const counterSlice = createSlice({
       // doesn't actually mutate the state because it uses the Immer library,
       // which detects changes to a "draft state" and produces a brand new
       // immutable state based off those changes
-      state.value += 1
+      state.value += 1;
     },
     decrement: (state) => {
-      state.value -= 1
+      state.value -= 1;
     },
     // Use the PayloadAction type to declare the contents of `action.payload`
     incrementByAmount: (state, action: PayloadAction<number>) => {
-      state.value += action.payload
+      state.value += action.payload;
     },
   },
   // The `extraReducers` field lets the slice handle actions defined elsewhere,
@@ -34,17 +34,17 @@ export const counterSlice = createSlice({
   extraReducers: (builder) => {
     builder
       .addCase(incrementAsync.pending, (state) => {
-        state.status = 'loading'
+        state.status = "loading";
       })
       .addCase(incrementAsync.fulfilled, (state, action) => {
-        state.status = 'idle'
-        state.value += action.payload
-      })
+        state.status = "idle";
+        state.value += action.payload;
+      });
   },
-})
+});
 
 /* Types */
 export interface CounterSliceState {
-  value: number
-  status: 'idle' | 'loading' | 'failed'
+  value: number;
+  status: "idle" | "loading" | "failed";
 }
diff --git a/examples/with-redux/lib/redux/slices/counterSlice/fetchIdentityCount.ts b/examples/with-redux/lib/redux/slices/counterSlice/fetchIdentityCount.ts
index 4e444820fb..144a31d064 100644
--- a/examples/with-redux/lib/redux/slices/counterSlice/fetchIdentityCount.ts
+++ b/examples/with-redux/lib/redux/slices/counterSlice/fetchIdentityCount.ts
@@ -1,12 +1,12 @@
 export const fetchIdentityCount = async (
-  amount = 1
+  amount = 1,
 ): Promise<{ data: number }> => {
-  const response = await fetch('http://localhost:3000/api/identity-count', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+  const response = await fetch("http://localhost:3000/api/identity-count", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ amount }),
-  })
-  const result = await response.json()
+  });
+  const result = await response.json();
 
-  return result
-}
+  return result;
+};
diff --git a/examples/with-redux/lib/redux/slices/counterSlice/index.ts b/examples/with-redux/lib/redux/slices/counterSlice/index.ts
index 9609b3a068..e30af774c8 100644
--- a/examples/with-redux/lib/redux/slices/counterSlice/index.ts
+++ b/examples/with-redux/lib/redux/slices/counterSlice/index.ts
@@ -1,3 +1,3 @@
-export * from './counterSlice'
-export * from './thunks'
-export * from './selectors'
+export * from "./counterSlice";
+export * from "./thunks";
+export * from "./selectors";
diff --git a/examples/with-redux/lib/redux/slices/counterSlice/selectors.ts b/examples/with-redux/lib/redux/slices/counterSlice/selectors.ts
index 5e6261408c..207b011757 100644
--- a/examples/with-redux/lib/redux/slices/counterSlice/selectors.ts
+++ b/examples/with-redux/lib/redux/slices/counterSlice/selectors.ts
@@ -1,7 +1,7 @@
 /* Instruments */
-import type { ReduxState } from '@/lib/redux'
+import type { ReduxState } from "@/lib/redux";
 
 // The function below is called a selector and allows us to select a value from
 // the state. Selectors can also be defined inline where they're used instead of
 // in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
-export const selectCount = (state: ReduxState) => state.counter.value
+export const selectCount = (state: ReduxState) => state.counter.value;
diff --git a/examples/with-redux/lib/redux/slices/counterSlice/thunks.ts b/examples/with-redux/lib/redux/slices/counterSlice/thunks.ts
index 5668498cd0..bd92b5bce2 100644
--- a/examples/with-redux/lib/redux/slices/counterSlice/thunks.ts
+++ b/examples/with-redux/lib/redux/slices/counterSlice/thunks.ts
@@ -1,9 +1,9 @@
 /* Instruments */
-import { createAppAsyncThunk } from '@/lib/redux/createAppAsyncThunk'
-import { fetchIdentityCount } from './fetchIdentityCount'
-import { selectCount } from './selectors'
-import { counterSlice } from './counterSlice'
-import type { ReduxThunkAction } from '@/lib/redux'
+import { createAppAsyncThunk } from "@/lib/redux/createAppAsyncThunk";
+import { fetchIdentityCount } from "./fetchIdentityCount";
+import { selectCount } from "./selectors";
+import { counterSlice } from "./counterSlice";
+import type { ReduxThunkAction } from "@/lib/redux";
 
 // The function below is called a thunk and allows us to perform async logic. It
 // can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This
@@ -11,23 +11,23 @@ import type { ReduxThunkAction } from '@/lib/redux'
 // code can then be executed and other actions can be dispatched. Thunks are
 // typically used to make async requests.
 export const incrementAsync = createAppAsyncThunk(
-  'counter/fetchIdentityCount',
+  "counter/fetchIdentityCount",
   async (amount: number) => {
-    const response = await fetchIdentityCount(amount)
+    const response = await fetchIdentityCount(amount);
 
     // The value we return becomes the `fulfilled` action payload
-    return response.data
-  }
-)
+    return response.data;
+  },
+);
 
 // We can also write thunks by hand, which may contain both sync and async logic.
 // Here's an example of conditionally dispatching actions based on current state.
 export const incrementIfOddAsync =
   (amount: number): ReduxThunkAction =>
   (dispatch, getState) => {
-    const currentValue = selectCount(getState())
+    const currentValue = selectCount(getState());
 
     if (currentValue % 2 === 1) {
-      dispatch(counterSlice.actions.incrementByAmount(amount))
+      dispatch(counterSlice.actions.incrementByAmount(amount));
     }
-  }
+  };
diff --git a/examples/with-redux/lib/redux/slices/index.ts b/examples/with-redux/lib/redux/slices/index.ts
index 6540ea7467..a79812d18f 100644
--- a/examples/with-redux/lib/redux/slices/index.ts
+++ b/examples/with-redux/lib/redux/slices/index.ts
@@ -1 +1 @@
-export * from './counterSlice'
+export * from "./counterSlice";
diff --git a/examples/with-redux/lib/redux/store.ts b/examples/with-redux/lib/redux/store.ts
index 8083355d89..d906a228f0 100644
--- a/examples/with-redux/lib/redux/store.ts
+++ b/examples/with-redux/lib/redux/store.ts
@@ -1,31 +1,35 @@
 /* Core */
-import { configureStore, type ThunkAction, type Action } from '@reduxjs/toolkit'
+import {
+  configureStore,
+  type ThunkAction,
+  type Action,
+} from "@reduxjs/toolkit";
 import {
   useSelector as useReduxSelector,
   useDispatch as useReduxDispatch,
   type TypedUseSelectorHook,
-} from 'react-redux'
+} from "react-redux";
 
 /* Instruments */
-import { reducer } from './rootReducer'
-import { middleware } from './middleware'
+import { reducer } from "./rootReducer";
+import { middleware } from "./middleware";
 
 export const reduxStore = configureStore({
   reducer,
   middleware: (getDefaultMiddleware) => {
-    return getDefaultMiddleware().concat(middleware)
+    return getDefaultMiddleware().concat(middleware);
   },
-})
-export const useDispatch = () => useReduxDispatch<ReduxDispatch>()
-export const useSelector: TypedUseSelectorHook<ReduxState> = useReduxSelector
+});
+export const useDispatch = () => useReduxDispatch<ReduxDispatch>();
+export const useSelector: TypedUseSelectorHook<ReduxState> = useReduxSelector;
 
 /* Types */
-export type ReduxStore = typeof reduxStore
-export type ReduxState = ReturnType<typeof reduxStore.getState>
-export type ReduxDispatch = typeof reduxStore.dispatch
+export type ReduxStore = typeof reduxStore;
+export type ReduxState = ReturnType<typeof reduxStore.getState>;
+export type ReduxDispatch = typeof reduxStore.dispatch;
 export type ReduxThunkAction<ReturnType = void> = ThunkAction<
   ReturnType,
   ReduxState,
   unknown,
   Action
->
+>;
diff --git a/examples/with-redux/next.config.mjs b/examples/with-redux/next.config.mjs
index 94be31c3d5..d5456a15d4 100644
--- a/examples/with-redux/next.config.mjs
+++ b/examples/with-redux/next.config.mjs
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-export default nextConfig
+export default nextConfig;
diff --git a/examples/with-reflexjs/pages/_app.tsx b/examples/with-reflexjs/pages/_app.tsx
index 5bd2eb6569..2adbebf6b3 100644
--- a/examples/with-reflexjs/pages/_app.tsx
+++ b/examples/with-reflexjs/pages/_app.tsx
@@ -1,11 +1,11 @@
-import { AppProps } from 'next/app'
-import { ThemeProvider } from 'reflexjs'
-import theme from '../src/theme'
+import { AppProps } from "next/app";
+import { ThemeProvider } from "reflexjs";
+import theme from "../src/theme";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider theme={theme}>
       <Component {...pageProps} />
     </ThemeProvider>
-  )
+  );
 }
diff --git a/examples/with-reflexjs/pages/_document.tsx b/examples/with-reflexjs/pages/_document.tsx
index dbfe07fe7e..4de6e66d7d 100644
--- a/examples/with-reflexjs/pages/_document.tsx
+++ b/examples/with-reflexjs/pages/_document.tsx
@@ -1,5 +1,5 @@
-import NextDocument, { Html, Main, NextScript, Head } from 'next/document'
-import { InitializeColorMode } from 'reflexjs'
+import NextDocument, { Html, Main, NextScript, Head } from "next/document";
+import { InitializeColorMode } from "reflexjs";
 
 export default class Document extends NextDocument {
   render() {
@@ -12,6 +12,6 @@ export default class Document extends NextDocument {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
diff --git a/examples/with-reflexjs/pages/index.tsx b/examples/with-reflexjs/pages/index.tsx
index 9766b7f4d0..073de1d436 100644
--- a/examples/with-reflexjs/pages/index.tsx
+++ b/examples/with-reflexjs/pages/index.tsx
@@ -11,5 +11,5 @@ export default function IndexPage() {
         Read the docs
       </a>
     </div>
-  )
+  );
 }
diff --git a/examples/with-reflexjs/src/theme.ts b/examples/with-reflexjs/src/theme.ts
index 3cfbcc1781..87fbf37c56 100644
--- a/examples/with-reflexjs/src/theme.ts
+++ b/examples/with-reflexjs/src/theme.ts
@@ -1,33 +1,33 @@
-import { Theme } from 'reflexjs'
+import { Theme } from "reflexjs";
 
 const theme: Theme = {
   useRootStyles: true,
-  initialColorModeName: 'light',
+  initialColorModeName: "light",
   colors: {
-    text: '#191924',
-    background: '#fff',
-    primary: '#06f',
-    border: '#ebece9',
+    text: "#191924",
+    background: "#fff",
+    primary: "#06f",
+    border: "#ebece9",
     modes: {
       dark: {
-        text: '#ededee',
-        background: '#1a202c',
-        primary: '#06f',
-        border: '#2a2a3c',
+        text: "#ededee",
+        background: "#1a202c",
+        primary: "#06f",
+        border: "#2a2a3c",
       },
     },
   },
-  breakpoints: ['640px', '768px', '1024px', '1280px'],
+  breakpoints: ["640px", "768px", "1024px", "1280px"],
   fonts: {
-    body: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji',
-    heading: 'inherit',
+    body: "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji",
+    heading: "inherit",
     monospace:
-      'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
+      "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
   },
   fontSizes: {
-    sm: '0.875rem',
-    md: '1rem',
-    lg: '3rem',
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "3rem",
   },
   fontWeights: {
     normal: 400,
@@ -35,87 +35,87 @@ const theme: Theme = {
     bold: 700,
   },
   space: {
-    0: '0',
-    1: '0.25rem',
-    2: '0.5rem',
-    3: '0.75rem',
-    4: '1rem',
-    5: '1.25rem',
-    6: '1.5rem',
-    7: '1.75rem',
-    8: '2rem',
-    9: '2.25rem',
-    10: '2.5rem',
+    0: "0",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    7: "1.75rem",
+    8: "2rem",
+    9: "2.25rem",
+    10: "2.5rem",
   },
   sizes: {
-    0: '0',
-    1: '0.25rem',
-    2: '0.5rem',
-    3: '0.75rem',
-    4: '1rem',
-    5: '1.25rem',
-    6: '1.5rem',
-    7: '1.75rem',
-    8: '2rem',
-    9: '2.25rem',
-    10: '2.5rem',
-    auto: 'auto',
-    half: '50%',
-    full: '100%',
-    screen: '100vw',
+    0: "0",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    7: "1.75rem",
+    8: "2rem",
+    9: "2.25rem",
+    10: "2.5rem",
+    auto: "auto",
+    half: "50%",
+    full: "100%",
+    screen: "100vw",
   },
-  borders: [0, '1px solid'],
+  borders: [0, "1px solid"],
   radii: {
-    none: '0',
-    sm: '0.125rem',
-    md: '0.25rem',
-    lg: '0.375rem',
-    xl: '0.5rem',
+    none: "0",
+    sm: "0.125rem",
+    md: "0.25rem",
+    lg: "0.375rem",
+    xl: "0.5rem",
   },
   shadows: {
-    none: 'none',
-    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-    md: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
-    lg: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+    none: "none",
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    md: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+    lg: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
   },
   gridTemplateColumns: {
-    none: 'none',
-    1: 'repeat(1, minmax(0, 1fr))',
-    2: 'repeat(2, minmax(0, 1fr))',
-    3: 'repeat(3, minmax(0, 1fr))',
+    none: "none",
+    1: "repeat(1, minmax(0, 1fr))",
+    2: "repeat(2, minmax(0, 1fr))",
+    3: "repeat(3, minmax(0, 1fr))",
   },
   gridTemplateRows: {
-    none: 'none',
-    1: 'repeat(1, minmax(0, 1fr))',
-    2: 'repeat(2, minmax(0, 1fr))',
-    3: 'repeat(3, minmax(0, 1fr))',
+    none: "none",
+    1: "repeat(1, minmax(0, 1fr))",
+    2: "repeat(2, minmax(0, 1fr))",
+    3: "repeat(3, minmax(0, 1fr))",
   },
   styles: {
     root: {
-      fontFamily: 'body',
+      fontFamily: "body",
       fontSize: 16,
-      lineHeight: 'normal',
+      lineHeight: "normal",
       fontFeatureSettings: "'kern'",
-      textRendering: 'optimizeLegibility',
-      WebkitFontSmoothing: 'antialiased',
-      '*': {
-        listStyle: 'none',
-        border: '0 solid',
-        borderColor: 'border',
+      textRendering: "optimizeLegibility",
+      WebkitFontSmoothing: "antialiased",
+      "*": {
+        listStyle: "none",
+        border: "0 solid",
+        borderColor: "border",
         m: 0,
         p: 0,
 
-        '::selection': {
-          bg: 'selection',
+        "::selection": {
+          bg: "selection",
         },
       },
       body: {
-        color: 'text',
-        fontFamily: 'body',
-        fontWeight: 'normal',
-        fontSize: 'md',
-        lineHeight: 'relaxed',
-        letterSpacing: 'normal',
+        color: "text",
+        fontFamily: "body",
+        fontWeight: "normal",
+        fontSize: "md",
+        lineHeight: "relaxed",
+        letterSpacing: "normal",
       },
     },
   },
@@ -123,70 +123,70 @@ const theme: Theme = {
   // Variants.
   text: {
     paragraph: {
-      fontSize: 'lg',
+      fontSize: "lg",
       my: 8,
       lineHeight: 8,
     },
   },
 
   heading: {
-    color: 'heading',
-    fontFamily: 'heading',
-    fontWeight: 'semibold',
-    lineHeight: 'tight',
-    letterSpacing: 'tight',
+    color: "heading",
+    fontFamily: "heading",
+    fontWeight: "semibold",
+    lineHeight: "tight",
+    letterSpacing: "tight",
 
     h1: {
-      fontWeight: 'bold',
-      lineHeight: '1.1',
-      fontSize: 'lg',
+      fontWeight: "bold",
+      lineHeight: "1.1",
+      fontSize: "lg",
     },
   },
 
   container: {
-    px: '6|6|6|4',
-    mx: 'auto',
+    px: "6|6|6|4",
+    mx: "auto",
     maxWidth: 1280,
   },
 
   button: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: 'text',
-    bg: 'muted',
-    fontFamily: 'body',
-    fontSize: 'md',
-    fontWeight: 'medium',
-    lineHeight: 'none',
-    textDecoration: 'none',
-    border: '1px solid',
-    borderColor: 'border',
-    borderRadius: 'md',
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "text",
+    bg: "muted",
+    fontFamily: "body",
+    fontSize: "md",
+    fontWeight: "medium",
+    lineHeight: "none",
+    textDecoration: "none",
+    border: "1px solid",
+    borderColor: "border",
+    borderRadius: "md",
     px: 4,
     py: 3,
-    cursor: 'pointer',
-    transition: 'all .15s ease-in',
+    cursor: "pointer",
+    transition: "all .15s ease-in",
 
-    ':hover, :focus': {
-      transform: 'translateY(-2px)',
-      boxShadow: 'lg',
+    ":hover, :focus": {
+      transform: "translateY(-2px)",
+      boxShadow: "lg",
     },
 
     primary: {
-      bg: 'primary',
-      color: 'white',
-      borderColor: 'primary',
+      bg: "primary",
+      color: "white",
+      borderColor: "primary",
 
-      '&:hover, &:focus': {
-        bg: 'primaryHover',
-        color: 'white',
-        borderColor: 'primaryHover',
-        transform: 'translateY(-2px)',
-        boxShadow: 'lg',
+      "&:hover, &:focus": {
+        bg: "primaryHover",
+        color: "white",
+        borderColor: "primaryHover",
+        transform: "translateY(-2px)",
+        boxShadow: "lg",
       },
     },
   },
-}
+};
 
-export default theme
+export default theme;
diff --git a/examples/with-reflux/actions/actions.js b/examples/with-reflux/actions/actions.js
index 0866e4bca1..c29f4aa250 100644
--- a/examples/with-reflux/actions/actions.js
+++ b/examples/with-reflux/actions/actions.js
@@ -1,5 +1,5 @@
-import Reflux from 'reflux'
+import Reflux from "reflux";
 
-var Actions = Reflux.createActions(['increment', 'decrement'])
+var Actions = Reflux.createActions(["increment", "decrement"]);
 
-export default Actions
+export default Actions;
diff --git a/examples/with-reflux/pages/index.js b/examples/with-reflux/pages/index.js
index b936c7c0a1..3c2228da31 100644
--- a/examples/with-reflux/pages/index.js
+++ b/examples/with-reflux/pages/index.js
@@ -1,11 +1,11 @@
-import Reflux from 'reflux'
-import CounterStore from '../store/counterStore'
-import Actions from '../actions/actions'
+import Reflux from "reflux";
+import CounterStore from "../store/counterStore";
+import Actions from "../actions/actions";
 
 export default class Home extends Reflux.Component {
   constructor() {
-    super()
-    this.store = CounterStore
+    super();
+    this.store = CounterStore;
   }
   render() {
     return (
@@ -14,6 +14,6 @@ export default class Home extends Reflux.Component {
         <button onClick={Actions.increment}>Increment</button>
         <button onClick={Actions.decrement}>Decrement</button>
       </div>
-    )
+    );
   }
 }
diff --git a/examples/with-reflux/store/counterStore.js b/examples/with-reflux/store/counterStore.js
index 41ac4ffaec..693f9893c0 100644
--- a/examples/with-reflux/store/counterStore.js
+++ b/examples/with-reflux/store/counterStore.js
@@ -1,17 +1,17 @@
-import Reflux from 'reflux'
-import Actions from '../actions/actions'
+import Reflux from "reflux";
+import Actions from "../actions/actions";
 
 export default class StatusStore extends Reflux.Store {
   constructor() {
-    super()
-    this.state = { counter: 0 }
-    this.listenTo(Actions.increment, this.onIncrement)
-    this.listenTo(Actions.decrement, this.onDecrement)
+    super();
+    this.state = { counter: 0 };
+    this.listenTo(Actions.increment, this.onIncrement);
+    this.listenTo(Actions.decrement, this.onDecrement);
   }
   onIncrement() {
-    this.setState({ counter: this.state.counter + 1 })
+    this.setState({ counter: this.state.counter + 1 });
   }
   onDecrement() {
-    this.setState({ counter: this.state.counter - 1 })
+    this.setState({ counter: this.state.counter - 1 });
   }
 }
diff --git a/examples/with-relay-modern/components/BlogPostPreview.js b/examples/with-relay-modern/components/BlogPostPreview.js
index 4988b22903..1fda50b282 100644
--- a/examples/with-relay-modern/components/BlogPostPreview.js
+++ b/examples/with-relay-modern/components/BlogPostPreview.js
@@ -1,6 +1,6 @@
-import { createFragmentContainer, graphql } from 'react-relay'
+import { createFragmentContainer, graphql } from "react-relay";
 
-const BlogPostPreview = ({ post }) => <li>{post.title}</li>
+const BlogPostPreview = ({ post }) => <li>{post.title}</li>;
 
 export default createFragmentContainer(BlogPostPreview, {
   post: graphql`
@@ -9,4 +9,4 @@ export default createFragmentContainer(BlogPostPreview, {
       title
     }
   `,
-})
+});
diff --git a/examples/with-relay-modern/components/BlogPosts.js b/examples/with-relay-modern/components/BlogPosts.js
index 4936c20e54..e0c25f562c 100644
--- a/examples/with-relay-modern/components/BlogPosts.js
+++ b/examples/with-relay-modern/components/BlogPosts.js
@@ -1,5 +1,5 @@
-import { createFragmentContainer, graphql } from 'react-relay'
-import BlogPostPreview from './BlogPostPreview'
+import { createFragmentContainer, graphql } from "react-relay";
+import BlogPostPreview from "./BlogPostPreview";
 
 const BlogPosts = ({ viewer }) => (
   <div>
@@ -10,7 +10,7 @@ const BlogPosts = ({ viewer }) => (
       ))}
     </ul>
   </div>
-)
+);
 
 export default createFragmentContainer(BlogPosts, {
   viewer: graphql`
@@ -25,4 +25,4 @@ export default createFragmentContainer(BlogPosts, {
       }
     }
   `,
-})
+});
diff --git a/examples/with-relay-modern/lib/relay.js b/examples/with-relay-modern/lib/relay.js
index 4f91b008a6..e50a0ca8bb 100644
--- a/examples/with-relay-modern/lib/relay.js
+++ b/examples/with-relay-modern/lib/relay.js
@@ -1,22 +1,22 @@
-import { useMemo } from 'react'
-import { Environment, Network, RecordSource, Store } from 'relay-runtime'
+import { useMemo } from "react";
+import { Environment, Network, RecordSource, Store } from "relay-runtime";
 
-let relayEnvironment
+let relayEnvironment;
 
 // Define a function that fetches the results of an operation (query/mutation/etc)
 // and returns its results as a Promise
 function fetchQuery(operation, variables, cacheConfig, uploadables) {
   return fetch(process.env.NEXT_PUBLIC_RELAY_ENDPOINT, {
-    method: 'POST',
+    method: "POST",
     headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
+      Accept: "application/json",
+      "Content-Type": "application/json",
     }, // Add authentication and other headers here
     body: JSON.stringify({
       query: operation.text, // GraphQL text from input
       variables,
     }),
-  }).then((response) => response.json())
+  }).then((response) => response.json());
 }
 
 function createEnvironment(initialRecords) {
@@ -24,27 +24,30 @@ function createEnvironment(initialRecords) {
     // Create a network layer from the fetch function
     network: Network.create(fetchQuery),
     store: new Store(new RecordSource()),
-  })
+  });
 }
 
 export function initEnvironment(initialRecords) {
   // Create a network layer from the fetch function
-  const environment = relayEnvironment ?? createEnvironment(initialRecords)
+  const environment = relayEnvironment ?? createEnvironment(initialRecords);
 
   // If your page has Next.js data fetching methods that use Relay, the initial records
   // will get hydrated here
   if (initialRecords) {
-    environment.getStore().publish(new RecordSource(initialRecords))
+    environment.getStore().publish(new RecordSource(initialRecords));
   }
   // For SSG and SSR always create a new Relay environment
-  if (typeof window === 'undefined') return environment
+  if (typeof window === "undefined") return environment;
   // Create the Relay environment once in the client
-  if (!relayEnvironment) relayEnvironment = environment
+  if (!relayEnvironment) relayEnvironment = environment;
 
-  return relayEnvironment
+  return relayEnvironment;
 }
 
 export function useEnvironment(initialRecords) {
-  const store = useMemo(() => initEnvironment(initialRecords), [initialRecords])
-  return store
+  const store = useMemo(
+    () => initEnvironment(initialRecords),
+    [initialRecords],
+  );
+  return store;
 }
diff --git a/examples/with-relay-modern/pages/_app.js b/examples/with-relay-modern/pages/_app.js
index 838595f393..a5ac4d905f 100644
--- a/examples/with-relay-modern/pages/_app.js
+++ b/examples/with-relay-modern/pages/_app.js
@@ -1,12 +1,12 @@
-import { ReactRelayContext } from 'react-relay'
-import { useEnvironment } from '../lib/relay'
+import { ReactRelayContext } from "react-relay";
+import { useEnvironment } from "../lib/relay";
 
 export default function App({ Component, pageProps }) {
-  const environment = useEnvironment(pageProps.initialRecords)
+  const environment = useEnvironment(pageProps.initialRecords);
 
   return (
     <ReactRelayContext.Provider value={{ environment, variables: {} }}>
       <Component {...pageProps} />
     </ReactRelayContext.Provider>
-  )
+  );
 }
diff --git a/examples/with-relay-modern/pages/about.js b/examples/with-relay-modern/pages/about.js
index 99399cb53a..4466241e77 100644
--- a/examples/with-relay-modern/pages/about.js
+++ b/examples/with-relay-modern/pages/about.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function About() {
   return (
@@ -6,5 +6,5 @@ export default function About() {
       <Link href="/">Home</Link>
       <p>This is the about page</p>
     </div>
-  )
+  );
 }
diff --git a/examples/with-relay-modern/pages/index.js b/examples/with-relay-modern/pages/index.js
index b9b6e3f95c..88a4cd5964 100644
--- a/examples/with-relay-modern/pages/index.js
+++ b/examples/with-relay-modern/pages/index.js
@@ -1,27 +1,27 @@
-import Link from 'next/link'
-import { fetchQuery } from 'react-relay'
-import { initEnvironment } from '../lib/relay'
-import BlogPosts from '../components/BlogPosts'
-import indexPageQuery from '../queries/indexPage'
+import Link from "next/link";
+import { fetchQuery } from "react-relay";
+import { initEnvironment } from "../lib/relay";
+import BlogPosts from "../components/BlogPosts";
+import indexPageQuery from "../queries/indexPage";
 
 const Index = ({ viewer }) => (
   <div>
     <Link href="/about">About</Link>
     <BlogPosts viewer={viewer} />
   </div>
-)
+);
 
 export async function getStaticProps() {
-  const environment = initEnvironment()
-  const queryProps = await fetchQuery(environment, indexPageQuery)
-  const initialRecords = environment.getStore().getSource().toJSON()
+  const environment = initEnvironment();
+  const queryProps = await fetchQuery(environment, indexPageQuery);
+  const initialRecords = environment.getStore().getSource().toJSON();
 
   return {
     props: {
       ...queryProps,
       initialRecords,
     },
-  }
+  };
 }
 
-export default Index
+export default Index;
diff --git a/examples/with-relay-modern/queries/indexPage.js b/examples/with-relay-modern/queries/indexPage.js
index 780c8c16d1..5abdc5c28a 100644
--- a/examples/with-relay-modern/queries/indexPage.js
+++ b/examples/with-relay-modern/queries/indexPage.js
@@ -1,4 +1,4 @@
-import { graphql } from 'react-relay'
+import { graphql } from "react-relay";
 
 export default graphql`
   query indexPage_indexQuery {
@@ -6,4 +6,4 @@ export default graphql`
       ...BlogPosts_viewer
     }
   }
-`
+`;
diff --git a/examples/with-rematch/pages/_app.js b/examples/with-rematch/pages/_app.js
index 518e8678e6..f801a8dee1 100644
--- a/examples/with-rematch/pages/_app.js
+++ b/examples/with-rematch/pages/_app.js
@@ -1,12 +1,12 @@
-import { Provider } from 'react-redux'
-import { useStore } from '../shared/store'
+import { Provider } from "react-redux";
+import { useStore } from "../shared/store";
 
 export default function App({ Component, pageProps }) {
-  const store = useStore(pageProps.initialReduxState)
+  const store = useStore(pageProps.initialReduxState);
 
   return (
     <Provider store={store}>
       <Component {...pageProps} />
     </Provider>
-  )
+  );
 }
diff --git a/examples/with-rematch/pages/github-users.js b/examples/with-rematch/pages/github-users.js
index 49bcb71c0f..b390129299 100644
--- a/examples/with-rematch/pages/github-users.js
+++ b/examples/with-rematch/pages/github-users.js
@@ -1,17 +1,17 @@
-import { useSelector } from 'react-redux'
-import { useRematchDispatch } from '../shared/utils'
-import { initializeStore } from '../shared/store'
-import CounterDisplay from '../shared/components/counter-display'
-import Header from '../shared/components/header'
+import { useSelector } from "react-redux";
+import { useRematchDispatch } from "../shared/utils";
+import { initializeStore } from "../shared/store";
+import CounterDisplay from "../shared/components/counter-display";
+import Header from "../shared/components/header";
 
 const Github = (props) => {
-  const github = useSelector((state) => state.github)
-  const { users, isLoading } = github
+  const github = useSelector((state) => state.github);
+  const { users, isLoading } = github;
   const { fetchUsers } = useRematchDispatch((dispatch) => ({
     fetchUsers: dispatch.github.fetchUsers,
-  }))
+  }));
 
-  const { usersList } = props
+  const { usersList } = props;
   return (
     <div>
       <Header />
@@ -47,18 +47,18 @@ const Github = (props) => {
       <br />
       <CounterDisplay />
     </div>
-  )
-}
+  );
+};
 
 export async function getStaticProps() {
-  const store = initializeStore()
-  const usersList = await store.dispatch.github.fetchUsers()
+  const store = initializeStore();
+  const usersList = await store.dispatch.github.fetchUsers();
 
   return {
     props: {
       usersList,
     },
-  }
+  };
 }
 
-export default Github
+export default Github;
diff --git a/examples/with-rematch/pages/index.js b/examples/with-rematch/pages/index.js
index 942460b514..fe76d2bc29 100644
--- a/examples/with-rematch/pages/index.js
+++ b/examples/with-rematch/pages/index.js
@@ -1,13 +1,13 @@
-import { useSelector, useDispatch } from 'react-redux'
-import Header from '../shared/components/header'
-import { useRematchDispatch } from '../shared/utils'
+import { useSelector, useDispatch } from "react-redux";
+import Header from "../shared/components/header";
+import { useRematchDispatch } from "../shared/utils";
 
 const Home = () => {
-  const counter = useSelector((state) => state.counter)
-  const dispatch = useDispatch()
+  const counter = useSelector((state) => state.counter);
+  const dispatch = useDispatch();
   const { increment } = useRematchDispatch((dispatch) => ({
     increment: dispatch.counter.increment,
-  }))
+  }));
 
   return (
     <div>
@@ -26,7 +26,7 @@ const Home = () => {
       </p>
       <br />
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/examples/with-rematch/shared/components/counter-display.js b/examples/with-rematch/shared/components/counter-display.js
index a1fd91af25..1cadb415a0 100644
--- a/examples/with-rematch/shared/components/counter-display.js
+++ b/examples/with-rematch/shared/components/counter-display.js
@@ -1,12 +1,12 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import { useRematchDispatch } from '../utils'
+import React from "react";
+import { useSelector } from "react-redux";
+import { useRematchDispatch } from "../utils";
 
 const CounterDisplay = () => {
-  const counter = useSelector((state) => state.counter)
+  const counter = useSelector((state) => state.counter);
   const { increment } = useRematchDispatch((dispatch) => ({
     increment: dispatch.counter.increment,
-  }))
+  }));
   return (
     <>
       <h3> Counter </h3>
@@ -20,7 +20,7 @@ const CounterDisplay = () => {
         <button onClick={() => increment(3)}>Increment by 3</button>
       </p>
     </>
-  )
-}
+  );
+};
 
-export default CounterDisplay
+export default CounterDisplay;
diff --git a/examples/with-rematch/shared/components/header.js b/examples/with-rematch/shared/components/header.js
index 01c17f3f57..79df588dc9 100644
--- a/examples/with-rematch/shared/components/header.js
+++ b/examples/with-rematch/shared/components/header.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react";
 
 const Header = () => {
   return (
@@ -14,7 +14,7 @@ const Header = () => {
         </ul>
       </nav>
     </div>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;
diff --git a/examples/with-rematch/shared/models/counter.js b/examples/with-rematch/shared/models/counter.js
index af698d4750..8b334ec811 100644
--- a/examples/with-rematch/shared/models/counter.js
+++ b/examples/with-rematch/shared/models/counter.js
@@ -1,22 +1,22 @@
-import { createModel } from '@rematch/core'
+import { createModel } from "@rematch/core";
 
 const counter = createModel({
   state: 0, // initial state
   reducers: {
     // handle state changes with pure functions
     increment: (state, payload) => {
-      if (typeof payload === 'object') return state + 1
-      return state + payload
+      if (typeof payload === "object") return state + 1;
+      return state + payload;
     },
   },
   effects: {
     // handle state changes with impure functions.
     // use async/await for async actions
     async incrementAsync(payload, rootState) {
-      await new Promise((resolve) => setTimeout(resolve, 1000))
-      this.increment(payload)
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      this.increment(payload);
     },
   },
-})
+});
 
-export default counter
+export default counter;
diff --git a/examples/with-rematch/shared/models/github.js b/examples/with-rematch/shared/models/github.js
index bfff792060..c7f2597a1d 100644
--- a/examples/with-rematch/shared/models/github.js
+++ b/examples/with-rematch/shared/models/github.js
@@ -8,13 +8,13 @@ const github = {
       return {
         users: [],
         isLoading: true,
-      }
+      };
     },
     receiveUsers(state, payload) {
       return {
         isLoading: false,
         users: payload,
-      }
+      };
     },
   },
   effects: {
@@ -22,17 +22,17 @@ const github = {
     // use async/await for async actions
     async fetchUsers() {
       try {
-        this.requestUsers()
-        const response = await fetch('https://api.github.com/users')
-        const users = await response.json()
-        this.receiveUsers(users)
-        return users
+        this.requestUsers();
+        const response = await fetch("https://api.github.com/users");
+        const users = await response.json();
+        this.receiveUsers(users);
+        return users;
       } catch (err) {
-        console.log(err)
-        this.receiveUsers([])
+        console.log(err);
+        this.receiveUsers([]);
       }
     },
   },
-}
+};
 
-export default github
+export default github;
diff --git a/examples/with-rematch/shared/models/index.js b/examples/with-rematch/shared/models/index.js
index 14082a26bc..b65c44e4d9 100644
--- a/examples/with-rematch/shared/models/index.js
+++ b/examples/with-rematch/shared/models/index.js
@@ -1,5 +1,5 @@
-import counter from './counter'
-import github from './github'
+import counter from "./counter";
+import github from "./github";
 
-export { counter }
-export { github }
+export { counter };
+export { github };
diff --git a/examples/with-rematch/shared/store.js b/examples/with-rematch/shared/store.js
index a663731a02..b2a53c3667 100644
--- a/examples/with-rematch/shared/store.js
+++ b/examples/with-rematch/shared/store.js
@@ -1,12 +1,12 @@
-import { useMemo } from 'react'
-import { init } from '@rematch/core'
-import { counter, github } from './models'
+import { useMemo } from "react";
+import { init } from "@rematch/core";
+import { counter, github } from "./models";
 
-let store
+let store;
 
 const exampleInitialState = {
   counter: 5,
-}
+};
 
 export const initStore = (initialState = exampleInitialState) =>
   init({
@@ -17,10 +17,10 @@ export const initStore = (initialState = exampleInitialState) =>
     redux: {
       initialState,
     },
-  })
+  });
 
 export const initializeStore = (preloadedState) => {
-  let _store = store ?? initStore(preloadedState)
+  let _store = store ?? initStore(preloadedState);
 
   // After navigating to a page with an initial Redux state, merge that state
   // with the current state in the store, and create a new store
@@ -28,20 +28,20 @@ export const initializeStore = (preloadedState) => {
     _store = initStore({
       ...store.getState(),
       ...preloadedState,
-    })
+    });
     // Reset the current store
-    store = undefined
+    store = undefined;
   }
 
   // For SSG and SSR always create a new store
-  if (typeof window === 'undefined') return _store
+  if (typeof window === "undefined") return _store;
   // Create the store once in the client
-  if (!store) store = _store
+  if (!store) store = _store;
 
-  return _store
-}
+  return _store;
+};
 
 export function useStore(initialState) {
-  const store = useMemo(() => initializeStore(initialState), [initialState])
-  return store
+  const store = useMemo(() => initializeStore(initialState), [initialState]);
+  return store;
 }
diff --git a/examples/with-rematch/shared/utils.js b/examples/with-rematch/shared/utils.js
index 1dddd9f47a..496d5dda48 100644
--- a/examples/with-rematch/shared/utils.js
+++ b/examples/with-rematch/shared/utils.js
@@ -1,10 +1,10 @@
 // Robust way to check if it's Node or browser
-import { useDispatch } from 'react-redux'
+import { useDispatch } from "react-redux";
 export const checkServer = () => {
-  return typeof window === 'undefined'
-}
+  return typeof window === "undefined";
+};
 
 export const useRematchDispatch = (selector) => {
-  const dispatch = useDispatch()
-  return selector(dispatch)
-}
+  const dispatch = useDispatch();
+  return selector(dispatch);
+};
diff --git a/examples/with-route-as-modal/components/Article.js b/examples/with-route-as-modal/components/Article.js
index dc62025edc..8fd3ef0228 100644
--- a/examples/with-route-as-modal/components/Article.js
+++ b/examples/with-route-as-modal/components/Article.js
@@ -1,11 +1,11 @@
-import styles from './styles.module.css'
+import styles from "./styles.module.css";
 
 const Post = ({ id, pathname }) => {
   return (
     <div className={styles.post}>
       I am the article {id}; my pathname is: {pathname}
     </div>
-  )
-}
+  );
+};
 
-export default Post
+export default Post;
diff --git a/examples/with-route-as-modal/components/Grid.js b/examples/with-route-as-modal/components/Grid.js
index 96c1650633..3ece7483be 100644
--- a/examples/with-route-as-modal/components/Grid.js
+++ b/examples/with-route-as-modal/components/Grid.js
@@ -1,7 +1,7 @@
-import Link from 'next/link'
-import styles from './styles.module.css'
+import Link from "next/link";
+import styles from "./styles.module.css";
 
-export const data = [1, 2, 3, 4, 5, 6, 7, 8, 9]
+export const data = [1, 2, 3, 4, 5, 6, 7, 8, 9];
 
 export default function PostCardGrid() {
   return (
@@ -34,5 +34,5 @@ export default function PostCardGrid() {
         ))}
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/with-route-as-modal/components/Post.js b/examples/with-route-as-modal/components/Post.js
index 361011f047..3226939de2 100644
--- a/examples/with-route-as-modal/components/Post.js
+++ b/examples/with-route-as-modal/components/Post.js
@@ -1,11 +1,11 @@
-import styles from './styles.module.css'
+import styles from "./styles.module.css";
 
 const Post = ({ id, pathname }) => {
   return (
     <div className={styles.post}>
       I am the post {id}; my pathname is: {pathname}
     </div>
-  )
-}
+  );
+};
 
-export default Post
+export default Post;
diff --git a/examples/with-route-as-modal/pages/_app.js b/examples/with-route-as-modal/pages/_app.js
index 1da7d90e1e..0b61956c8e 100644
--- a/examples/with-route-as-modal/pages/_app.js
+++ b/examples/with-route-as-modal/pages/_app.js
@@ -1,11 +1,11 @@
-import styles from '../app-styles.module.css'
+import styles from "../app-styles.module.css";
 
 function MyApp({ Component, pageProps }) {
   return (
     <div className={styles.content}>
       <Component {...pageProps} />
     </div>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-route-as-modal/pages/article/[articleId].js b/examples/with-route-as-modal/pages/article/[articleId].js
index 671aad5dd9..831f0c0c30 100644
--- a/examples/with-route-as-modal/pages/article/[articleId].js
+++ b/examples/with-route-as-modal/pages/article/[articleId].js
@@ -1,36 +1,36 @@
-import { useEffect } from 'react'
-import { useRouter } from 'next/router'
-import Modal from 'react-modal'
-import Article from '../../components/Article'
-import { data } from '../../components/Grid'
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import Modal from "react-modal";
+import Article from "../../components/Article";
+import { data } from "../../components/Grid";
 
-Modal.setAppElement('#__next')
+Modal.setAppElement("#__next");
 
 const ArticlePage = ({ articleId }) => {
-  const router = useRouter()
+  const router = useRouter();
 
   useEffect(() => {
-    router.prefetch('/')
+    router.prefetch("/");
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, []);
 
   return (
     <>
       <Modal
         isOpen={true} // The modal should always be shown on page load, it is the 'page'
-        onRequestClose={() => router.push('/')}
+        onRequestClose={() => router.push("/")}
         contentLabel="Post modal"
       >
         <Article id={articleId} pathname={router.pathname} />
       </Modal>
     </>
-  )
-}
+  );
+};
 
-export default ArticlePage
+export default ArticlePage;
 
 export function getStaticProps({ params: { articleId } }) {
-  return { props: { articleId: articleId } }
+  return { props: { articleId: articleId } };
 }
 
 export function getStaticPaths() {
@@ -39,5 +39,5 @@ export function getStaticPaths() {
       params: { articleId: articleId.toString() },
     })),
     fallback: false,
-  }
+  };
 }
diff --git a/examples/with-route-as-modal/pages/index.js b/examples/with-route-as-modal/pages/index.js
index 33d35861b4..68e4521178 100644
--- a/examples/with-route-as-modal/pages/index.js
+++ b/examples/with-route-as-modal/pages/index.js
@@ -1,25 +1,25 @@
-import { useRouter } from 'next/router'
-import Modal from 'react-modal'
-import Post from '../components/Post'
-import Grid from '../components/Grid'
+import { useRouter } from "next/router";
+import Modal from "react-modal";
+import Post from "../components/Post";
+import Grid from "../components/Grid";
 
-Modal.setAppElement('#__next')
+Modal.setAppElement("#__next");
 
 const Index = () => {
-  const router = useRouter()
+  const router = useRouter();
 
   return (
     <>
       <Modal
         isOpen={!!router.query.postId}
-        onRequestClose={() => router.push('/')}
+        onRequestClose={() => router.push("/")}
         contentLabel="Post modal"
       >
         <Post id={router.query.postId} pathname={router.pathname} />
       </Modal>
       <Grid />
     </>
-  )
-}
+  );
+};
 
-export default Index
+export default Index;
diff --git a/examples/with-route-as-modal/pages/post/[postId].js b/examples/with-route-as-modal/pages/post/[postId].js
index 37aca1d099..9be9f12f14 100644
--- a/examples/with-route-as-modal/pages/post/[postId].js
+++ b/examples/with-route-as-modal/pages/post/[postId].js
@@ -1,11 +1,11 @@
-import { useRouter } from 'next/router'
-import Post from '../../components/Post'
+import { useRouter } from "next/router";
+import Post from "../../components/Post";
 
 const PostPage = () => {
-  const router = useRouter()
-  const { postId } = router.query
+  const router = useRouter();
+  const { postId } = router.query;
 
-  return <Post id={postId} pathname={router.pathname} />
-}
+  return <Post id={postId} pathname={router.pathname} />;
+};
 
-export default PostPage
+export default PostPage;
diff --git a/examples/with-segment-analytics-pages-router/components/analytics.tsx b/examples/with-segment-analytics-pages-router/components/analytics.tsx
index 8f6a704516..7288d13992 100644
--- a/examples/with-segment-analytics-pages-router/components/analytics.tsx
+++ b/examples/with-segment-analytics-pages-router/components/analytics.tsx
@@ -1,19 +1,19 @@
-import { useEffect } from 'react'
-import { useRouter } from 'next/router'
-import { analytics } from '@/lib/segment'
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { analytics } from "@/lib/segment";
 
 export default function Analytics() {
-  const router = useRouter()
+  const router = useRouter();
 
   useEffect(() => {
-    analytics.page()
+    analytics.page();
 
-    router.events.on('routeChangeComplete', () => analytics.page())
+    router.events.on("routeChangeComplete", () => analytics.page());
 
     return () => {
-      router.events.off('routeChangeComplete', () => analytics.page())
-    }
-  }, [router.events])
+      router.events.off("routeChangeComplete", () => analytics.page());
+    };
+  }, [router.events]);
 
-  return null
+  return null;
 }
diff --git a/examples/with-segment-analytics-pages-router/components/form.tsx b/examples/with-segment-analytics-pages-router/components/form.tsx
index 58930c4f2d..dc8951d097 100644
--- a/examples/with-segment-analytics-pages-router/components/form.tsx
+++ b/examples/with-segment-analytics-pages-router/components/form.tsx
@@ -1,16 +1,16 @@
-import { useState } from 'react'
-import { analytics } from '@/lib/segment'
+import { useState } from "react";
+import { analytics } from "@/lib/segment";
 
 export default function Form() {
-  const [message, setMessage] = useState('')
+  const [message, setMessage] = useState("");
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    analytics.track('Form Submitted', {
+    e.preventDefault();
+    analytics.track("Form Submitted", {
       message,
-    })
-    setMessage('')
-  }
+    });
+    setMessage("");
+  };
 
   return (
     <>
@@ -42,5 +42,5 @@ export default function Form() {
         }
       `}</style>
     </>
-  )
+  );
 }
diff --git a/examples/with-segment-analytics-pages-router/components/header.tsx b/examples/with-segment-analytics-pages-router/components/header.tsx
index 68edfe2512..46d49a3b3d 100644
--- a/examples/with-segment-analytics-pages-router/components/header.tsx
+++ b/examples/with-segment-analytics-pages-router/components/header.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -17,5 +17,5 @@ export default function Header() {
         </ul>
       </nav>
     </header>
-  )
+  );
 }
diff --git a/examples/with-segment-analytics-pages-router/lib/segment.ts b/examples/with-segment-analytics-pages-router/lib/segment.ts
index d828cb2204..20464247bd 100644
--- a/examples/with-segment-analytics-pages-router/lib/segment.ts
+++ b/examples/with-segment-analytics-pages-router/lib/segment.ts
@@ -1,5 +1,5 @@
-import { AnalyticsBrowser } from '@segment/analytics-next'
+import { AnalyticsBrowser } from "@segment/analytics-next";
 
 export const analytics = AnalyticsBrowser.load({
   writeKey: process.env.NEXT_PUBLIC_SEGMENT_WRITE_KEY!,
-})
+});
diff --git a/examples/with-segment-analytics-pages-router/pages/_app.tsx b/examples/with-segment-analytics-pages-router/pages/_app.tsx
index c688385f19..8285e0ad19 100644
--- a/examples/with-segment-analytics-pages-router/pages/_app.tsx
+++ b/examples/with-segment-analytics-pages-router/pages/_app.tsx
@@ -1,9 +1,9 @@
-import type { AppProps } from 'next/app'
-import { Inter } from 'next/font/google'
-import Header from '@/components/header'
-import Analytics from '@/components/analytics'
+import type { AppProps } from "next/app";
+import { Inter } from "next/font/google";
+import Header from "@/components/header";
+import Analytics from "@/components/analytics";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -12,5 +12,5 @@ export default function MyApp({ Component, pageProps }: AppProps) {
       <Component {...pageProps} />
       <Analytics />
     </main>
-  )
+  );
 }
diff --git a/examples/with-segment-analytics-pages-router/pages/about.tsx b/examples/with-segment-analytics-pages-router/pages/about.tsx
index e804500406..5c08e4998e 100644
--- a/examples/with-segment-analytics-pages-router/pages/about.tsx
+++ b/examples/with-segment-analytics-pages-router/pages/about.tsx
@@ -1,4 +1,4 @@
-import Head from 'next/head'
+import Head from "next/head";
 
 export default function About() {
   return (
@@ -10,5 +10,5 @@ export default function About() {
         <h1>This is the About page</h1>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/with-segment-analytics-pages-router/pages/contact.tsx b/examples/with-segment-analytics-pages-router/pages/contact.tsx
index 74230b58ed..c1b7bff974 100644
--- a/examples/with-segment-analytics-pages-router/pages/contact.tsx
+++ b/examples/with-segment-analytics-pages-router/pages/contact.tsx
@@ -1,5 +1,5 @@
-import Head from 'next/head'
-import Form from '@/components/form'
+import Head from "next/head";
+import Form from "@/components/form";
 
 export default function Contact() {
   return (
@@ -12,5 +12,5 @@ export default function Contact() {
         <Form />
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/with-segment-analytics-pages-router/pages/index.tsx b/examples/with-segment-analytics-pages-router/pages/index.tsx
index 0bf386bafe..c1e4fb590c 100644
--- a/examples/with-segment-analytics-pages-router/pages/index.tsx
+++ b/examples/with-segment-analytics-pages-router/pages/index.tsx
@@ -1,4 +1,4 @@
-import Head from 'next/head'
+import Head from "next/head";
 
 export default function Home() {
   return (
@@ -10,5 +10,5 @@ export default function Home() {
         <h1>This is the Home page</h1>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/with-segment-analytics/app/about/page.tsx b/examples/with-segment-analytics/app/about/page.tsx
index 616ac9625a..1daa266a85 100644
--- a/examples/with-segment-analytics/app/about/page.tsx
+++ b/examples/with-segment-analytics/app/about/page.tsx
@@ -1,11 +1,11 @@
 export const metadata = {
-  title: 'About',
-}
+  title: "About",
+};
 
 export default function About() {
   return (
     <div>
       <h1>This is the About page</h1>
     </div>
-  )
+  );
 }
diff --git a/examples/with-segment-analytics/app/contact/page.tsx b/examples/with-segment-analytics/app/contact/page.tsx
index e1223920f2..042b52b9fd 100644
--- a/examples/with-segment-analytics/app/contact/page.tsx
+++ b/examples/with-segment-analytics/app/contact/page.tsx
@@ -1,8 +1,8 @@
-import Form from '@/components/form'
+import Form from "@/components/form";
 
 export const metadata = {
-  title: 'Contact',
-}
+  title: "Contact",
+};
 
 export default function Contact() {
   return (
@@ -10,5 +10,5 @@ export default function Contact() {
       <h1>This is the Contact page</h1>
       <Form />
     </div>
-  )
+  );
 }
diff --git a/examples/with-segment-analytics/app/layout.tsx b/examples/with-segment-analytics/app/layout.tsx
index d61385ceb3..09a850527c 100644
--- a/examples/with-segment-analytics/app/layout.tsx
+++ b/examples/with-segment-analytics/app/layout.tsx
@@ -1,13 +1,13 @@
-import { Inter } from 'next/font/google'
-import Header from '@/components/header'
-import Analytics from '@/components/analytics'
+import { Inter } from "next/font/google";
+import Header from "@/components/header";
+import Analytics from "@/components/analytics";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html>
@@ -17,5 +17,5 @@ export default function RootLayout({
       </body>
       <Analytics />
     </html>
-  )
+  );
 }
diff --git a/examples/with-segment-analytics/app/page.tsx b/examples/with-segment-analytics/app/page.tsx
index 8c632f41fd..da8ea39f33 100644
--- a/examples/with-segment-analytics/app/page.tsx
+++ b/examples/with-segment-analytics/app/page.tsx
@@ -1,11 +1,11 @@
 export const metadata = {
-  title: 'Home',
-}
+  title: "Home",
+};
 
 export default function Home() {
   return (
     <div>
       <h1>This is the Home page</h1>
     </div>
-  )
+  );
 }
diff --git a/examples/with-segment-analytics/components/analytics.tsx b/examples/with-segment-analytics/components/analytics.tsx
index 64d684e518..8fc3bbbc18 100644
--- a/examples/with-segment-analytics/components/analytics.tsx
+++ b/examples/with-segment-analytics/components/analytics.tsx
@@ -1,16 +1,16 @@
-'use client'
+"use client";
 
-import { useEffect } from 'react'
-import { usePathname, useSearchParams } from 'next/navigation'
-import { analytics } from '@/lib/segment'
+import { useEffect } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { analytics } from "@/lib/segment";
 
 export default function Analytics() {
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
 
   useEffect(() => {
-    analytics.page()
-  }, [pathname, searchParams])
+    analytics.page();
+  }, [pathname, searchParams]);
 
-  return null
+  return null;
 }
diff --git a/examples/with-segment-analytics/components/form.tsx b/examples/with-segment-analytics/components/form.tsx
index 317fdd3c2f..7192b982b4 100644
--- a/examples/with-segment-analytics/components/form.tsx
+++ b/examples/with-segment-analytics/components/form.tsx
@@ -1,18 +1,18 @@
-'use client'
+"use client";
 
-import { useState } from 'react'
-import { analytics } from '@/lib/segment'
+import { useState } from "react";
+import { analytics } from "@/lib/segment";
 
 export default function Form() {
-  const [message, setMessage] = useState('')
+  const [message, setMessage] = useState("");
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    analytics.track('Form Submitted', {
+    e.preventDefault();
+    analytics.track("Form Submitted", {
       message,
-    })
-    setMessage('')
-  }
+    });
+    setMessage("");
+  };
 
   return (
     <>
@@ -44,5 +44,5 @@ export default function Form() {
         }
       `}</style>
     </>
-  )
+  );
 }
diff --git a/examples/with-segment-analytics/components/header.tsx b/examples/with-segment-analytics/components/header.tsx
index 68edfe2512..46d49a3b3d 100644
--- a/examples/with-segment-analytics/components/header.tsx
+++ b/examples/with-segment-analytics/components/header.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -17,5 +17,5 @@ export default function Header() {
         </ul>
       </nav>
     </header>
-  )
+  );
 }
diff --git a/examples/with-segment-analytics/lib/segment.ts b/examples/with-segment-analytics/lib/segment.ts
index d828cb2204..20464247bd 100644
--- a/examples/with-segment-analytics/lib/segment.ts
+++ b/examples/with-segment-analytics/lib/segment.ts
@@ -1,5 +1,5 @@
-import { AnalyticsBrowser } from '@segment/analytics-next'
+import { AnalyticsBrowser } from "@segment/analytics-next";
 
 export const analytics = AnalyticsBrowser.load({
   writeKey: process.env.NEXT_PUBLIC_SEGMENT_WRITE_KEY!,
-})
+});
diff --git a/examples/with-semantic-ui/pages/_app.js b/examples/with-semantic-ui/pages/_app.js
index fff8612068..2d4bc6e547 100644
--- a/examples/with-semantic-ui/pages/_app.js
+++ b/examples/with-semantic-ui/pages/_app.js
@@ -1,6 +1,6 @@
-import 'semantic-ui-css/semantic.min.css'
-import '../styles/global.css'
+import "semantic-ui-css/semantic.min.css";
+import "../styles/global.css";
 
 export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-semantic-ui/pages/index.js b/examples/with-semantic-ui/pages/index.js
index 9e0ad421f3..8f64430fc2 100644
--- a/examples/with-semantic-ui/pages/index.js
+++ b/examples/with-semantic-ui/pages/index.js
@@ -1,9 +1,9 @@
-import Image from 'next/image'
-import * as React from 'react'
-import { Button, Header, Modal, Icon } from 'semantic-ui-react'
+import Image from "next/image";
+import * as React from "react";
+import { Button, Header, Modal, Icon } from "semantic-ui-react";
 
 export default function Home() {
-  const [open, setOpen] = React.useState(false)
+  const [open, setOpen] = React.useState(false);
 
   return (
     <div className="centered">
@@ -43,5 +43,5 @@ export default function Home() {
         </Modal.Actions>
       </Modal>
     </div>
-  )
+  );
 }
diff --git a/examples/with-sentry/next.config.js b/examples/with-sentry/next.config.js
index be28cd7ffd..2f457359f2 100644
--- a/examples/with-sentry/next.config.js
+++ b/examples/with-sentry/next.config.js
@@ -3,7 +3,7 @@
 // https://nextjs.org/docs/api-reference/next.config.js/introduction
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
-const { withSentryConfig } = require('@sentry/nextjs')
+const { withSentryConfig } = require("@sentry/nextjs");
 
 const moduleExports = {
   // Your existing module.exports
@@ -18,7 +18,7 @@ const moduleExports = {
     // for more information.
     hideSourceMaps: true,
   },
-}
+};
 
 // Make sure adding Sentry options is the last code to run before exporting, to
 // ensure that your source maps include changes from all other Webpack plugins
@@ -30,4 +30,4 @@ module.exports = withSentryConfig(moduleExports, {
   //   urlPrefix, include, ignore
   // For all available options, see:
   // https://github.com/getsentry/sentry-webpack-plugin#options.
-})
+});
diff --git a/examples/with-sentry/pages/404.tsx b/examples/with-sentry/pages/404.tsx
index d50fdf2efe..13c0cf31bd 100644
--- a/examples/with-sentry/pages/404.tsx
+++ b/examples/with-sentry/pages/404.tsx
@@ -1,6 +1,6 @@
-import Error from 'next/error'
+import Error from "next/error";
 
 export default function NotFound() {
   // Opinionated: do not record an exception in Sentry for 404
-  return <Error statusCode={404} />
+  return <Error statusCode={404} />;
 }
diff --git a/examples/with-sentry/pages/_app.tsx b/examples/with-sentry/pages/_app.tsx
index 048541e25b..2591851ab7 100644
--- a/examples/with-sentry/pages/_app.tsx
+++ b/examples/with-sentry/pages/_app.tsx
@@ -1,5 +1,5 @@
-import '../styles/globals.css'
+import "../styles/globals.css";
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-sentry/pages/_document.tsx b/examples/with-sentry/pages/_document.tsx
index 54e8bf3e2a..b2fff8b426 100644
--- a/examples/with-sentry/pages/_document.tsx
+++ b/examples/with-sentry/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/with-sentry/pages/_error.tsx b/examples/with-sentry/pages/_error.tsx
index b0c9a00c3c..109085990b 100644
--- a/examples/with-sentry/pages/_error.tsx
+++ b/examples/with-sentry/pages/_error.tsx
@@ -11,20 +11,20 @@
  *  - https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
  */
 
-import * as Sentry from '@sentry/nextjs'
-import NextErrorComponent from 'next/error'
+import * as Sentry from "@sentry/nextjs";
+import NextErrorComponent from "next/error";
 
 const CustomErrorComponent = (props) => (
   <NextErrorComponent statusCode={props.statusCode} />
-)
+);
 
 CustomErrorComponent.getInitialProps = async (contextData) => {
   // In case this is running in a serverless function, await this in order to give Sentry
   // time to send the error before the lambda exits
-  await Sentry.captureUnderscoreErrorException(contextData)
+  await Sentry.captureUnderscoreErrorException(contextData);
 
   // This will contain the status code of the response
-  return NextErrorComponent.getInitialProps(contextData)
-}
+  return NextErrorComponent.getInitialProps(contextData);
+};
 
-export default CustomErrorComponent
+export default CustomErrorComponent;
diff --git a/examples/with-sentry/pages/api/test1.ts b/examples/with-sentry/pages/api/test1.ts
index 5e5f0505b4..add31435f2 100644
--- a/examples/with-sentry/pages/api/test1.ts
+++ b/examples/with-sentry/pages/api/test1.ts
@@ -1,6 +1,6 @@
-const doAsyncWork = () => Promise.reject(new Error('API Test 1'))
-doAsyncWork()
+const doAsyncWork = () => Promise.reject(new Error("API Test 1"));
+doAsyncWork();
 
 export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: "John Doe" });
 }
diff --git a/examples/with-sentry/pages/api/test2.ts b/examples/with-sentry/pages/api/test2.ts
index 79c13662fc..e13f35db1e 100644
--- a/examples/with-sentry/pages/api/test2.ts
+++ b/examples/with-sentry/pages/api/test2.ts
@@ -1,9 +1,9 @@
 function work() {
-  throw new Error('API Test 2')
+  throw new Error("API Test 2");
 }
 
-work()
+work();
 
 export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: "John Doe" });
 }
diff --git a/examples/with-sentry/pages/api/test3.ts b/examples/with-sentry/pages/api/test3.ts
index d3a05dcf82..b4572c889a 100644
--- a/examples/with-sentry/pages/api/test3.ts
+++ b/examples/with-sentry/pages/api/test3.ts
@@ -1,9 +1,9 @@
 function work() {
-  throw new Error('API Test 3')
+  throw new Error("API Test 3");
 }
 
 export default function handler(req, res) {
-  work()
+  work();
 
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: "John Doe" });
 }
diff --git a/examples/with-sentry/pages/api/test4.ts b/examples/with-sentry/pages/api/test4.ts
index ed88554c48..e7f517d361 100644
--- a/examples/with-sentry/pages/api/test4.ts
+++ b/examples/with-sentry/pages/api/test4.ts
@@ -1,11 +1,11 @@
-import * as Sentry from '@sentry/nextjs'
+import * as Sentry from "@sentry/nextjs";
 
 export default function handler(req, res) {
   try {
-    throw new Error('API Test 4')
+    throw new Error("API Test 4");
   } catch (error) {
-    Sentry.captureException(error)
+    Sentry.captureException(error);
   }
 
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: "John Doe" });
 }
diff --git a/examples/with-sentry/pages/client/test1.tsx b/examples/with-sentry/pages/client/test1.tsx
index e61fc40d35..772a080fbe 100644
--- a/examples/with-sentry/pages/client/test1.tsx
+++ b/examples/with-sentry/pages/client/test1.tsx
@@ -1,6 +1,6 @@
-const doAsyncWork = () => Promise.reject(new Error('Client Test 1'))
-doAsyncWork()
+const doAsyncWork = () => Promise.reject(new Error("Client Test 1"));
+doAsyncWork();
 
-const Test1 = () => <h1>Client Test 1</h1>
+const Test1 = () => <h1>Client Test 1</h1>;
 
-export default Test1
+export default Test1;
diff --git a/examples/with-sentry/pages/client/test2.tsx b/examples/with-sentry/pages/client/test2.tsx
index 0dfe53bf6b..7abf6c33ca 100644
--- a/examples/with-sentry/pages/client/test2.tsx
+++ b/examples/with-sentry/pages/client/test2.tsx
@@ -2,14 +2,14 @@
 // undefined in a browser. Note that `isProd = process.env.NODE_ENV` would have
 // worked because Webpack's DefinePlugin will replace it with a string at build
 // time
-const env = process.env
-const isProd = env.NODE_ENV === 'production'
+const env = process.env;
+const isProd = env.NODE_ENV === "production";
 
 const Test2 = () => (
   <>
     <h1>Client Test 2</h1>
     <p>isProd: {isProd}</p>
   </>
-)
+);
 
-export default Test2
+export default Test2;
diff --git a/examples/with-sentry/pages/client/test3.tsx b/examples/with-sentry/pages/client/test3.tsx
index 35b0c7468a..9cf5bd40ca 100644
--- a/examples/with-sentry/pages/client/test3.tsx
+++ b/examples/with-sentry/pages/client/test3.tsx
@@ -1,11 +1,11 @@
-import { useEffect } from 'react'
+import { useEffect } from "react";
 
 const Test3 = () => {
   useEffect(() => {
-    throw new Error('Client Test 3')
-  }, [])
+    throw new Error("Client Test 3");
+  }, []);
 
-  return <h1>Client Test 3</h1>
-}
+  return <h1>Client Test 3</h1>;
+};
 
-export default Test3
+export default Test3;
diff --git a/examples/with-sentry/pages/client/test4.tsx b/examples/with-sentry/pages/client/test4.tsx
index c075d228cb..693c6e6abe 100644
--- a/examples/with-sentry/pages/client/test4.tsx
+++ b/examples/with-sentry/pages/client/test4.tsx
@@ -1,15 +1,15 @@
-import { useEffect } from 'react'
+import { useEffect } from "react";
 
 const Test4 = () => {
   useEffect(function () {
     async function doTest() {
-      const doAsyncWork = () => Promise.reject(new Error('Client Test 4'))
-      await doAsyncWork()
+      const doAsyncWork = () => Promise.reject(new Error("Client Test 4"));
+      await doAsyncWork();
     }
-    doTest()
-  }, [])
+    doTest();
+  }, []);
 
-  return <h1>Client Test 4</h1>
-}
+  return <h1>Client Test 4</h1>;
+};
 
-export default Test4
+export default Test4;
diff --git a/examples/with-sentry/pages/client/test5.tsx b/examples/with-sentry/pages/client/test5.tsx
index 47a3a96620..f7fd4f8bd6 100644
--- a/examples/with-sentry/pages/client/test5.tsx
+++ b/examples/with-sentry/pages/client/test5.tsx
@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/nextjs'
+import * as Sentry from "@sentry/nextjs";
 
 const Test5 = () => (
   <>
@@ -6,25 +6,25 @@ const Test5 = () => (
     <button
       onClick={() => {
         const transaction = Sentry.startTransaction({
-          name: 'Testing performance',
-        })
+          name: "Testing performance",
+        });
         Sentry.configureScope((scope) => {
-          scope.setSpan(transaction)
-        })
+          scope.setSpan(transaction);
+        });
 
         try {
           // Some operation the button does, but fails
-          throw new Error('Client Test 5')
+          throw new Error("Client Test 5");
         } catch (error) {
-          Sentry.captureException(error)
+          Sentry.captureException(error);
         } finally {
-          transaction.finish()
+          transaction.finish();
         }
       }}
     >
       Click me to create a transaction and throw an Error
     </button>
   </>
-)
+);
 
-export default Test5
+export default Test5;
diff --git a/examples/with-sentry/pages/index.tsx b/examples/with-sentry/pages/index.tsx
index 8f30e97d2d..ffe4a9c7ec 100644
--- a/examples/with-sentry/pages/index.tsx
+++ b/examples/with-sentry/pages/index.tsx
@@ -1,10 +1,10 @@
-import Link from 'next/link'
+import Link from "next/link";
 
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
-import styles from '../styles/Home.module.css'
+import Image from "next/image";
+import { Inter } from "next/font/google";
+import styles from "../styles/Home.module.css";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
   return (
@@ -20,7 +20,7 @@ export default function Home() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            By{' '}
+            By{" "}
             <Image
               src="/vercel.svg"
               alt="Vercel Logo"
@@ -55,7 +55,7 @@ export default function Home() {
       />
       <div
         className={styles.justCenter}
-        style={{ display: 'flex', flexDirection: 'column', rowGap: '1rem' }}
+        style={{ display: "flex", flexDirection: "column", rowGap: "1rem" }}
       >
         <p className={inter.className}>
           See how Sentry records unhandled exceptions in your code.
@@ -64,9 +64,9 @@ export default function Home() {
           <p className={inter.className}>
             <strong>Important:</strong> exceptions in development mode take a
             different path than in production. These tests should be run on a
-            production build (i.e.{' '}
+            production build (i.e.{" "}
             <code className={styles.code}>next build</code>
-            ).{' '}
+            ).{" "}
             <Link
               className={styles.link}
               target="_blank"
@@ -89,7 +89,7 @@ export default function Home() {
           </p>
           <p className={inter.className}>
             Top-of-module promise that rejects, but its result is not awaited.
-            {'  '}
+            {"  "}
             <code className={styles.code}>
               <a className={styles.link} href="/api/test1" target="_blank">
                 API Test 1
@@ -97,7 +97,7 @@ export default function Home() {
             </code>
           </p>
           <p className={inter.className}>
-            API has a top-of-module exception.{' '}
+            API has a top-of-module exception.{" "}
             <code className={styles.code}>
               <a className={styles.link} href="/api/test2" target="_blank">
                 API Test 2
@@ -105,7 +105,7 @@ export default function Home() {
             </code>
           </p>
           <p className={inter.className}>
-            API with an exception in its request handler.{' '}
+            API with an exception in its request handler.{" "}
             <code className={styles.code}>
               <a className={styles.link} href="/api/test3" target="_blank">
                 API Test 3
@@ -113,7 +113,7 @@ export default function Home() {
             </code>
           </p>
           <p className={inter.className}>
-            API uses a try/catch to handle an exception and records it.{' '}
+            API uses a try/catch to handle an exception and records it.{" "}
             <code className={styles.code}>
               <a className={styles.link} href="/api/test4" target="_blank">
                 API Test 4
@@ -135,7 +135,7 @@ export default function Home() {
           <p className={inter.className}>
             <code className={styles.code}>getServerSideProps </code>
             &nbsp;throws an Error. This should cause _error.js to render and
-            record and Error in Sentry.{' '}
+            record and Error in Sentry.{" "}
             <code className={styles.code}>
               <Link className={styles.link} href="/ssr/test1">
                 SSR Test 1
@@ -145,7 +145,7 @@ export default function Home() {
           <p className={inter.className}>
             <code className={styles.code}>getServerSideProps </code>
             returns a Promise that rejects. This should cause _error.js to
-            render and record an Error in Sentry.{' '}
+            render and record an Error in Sentry.{" "}
             <code className={styles.code}>
               <Link className={styles.link} href="/ssr/test2">
                 SSR Test 2
@@ -157,7 +157,7 @@ export default function Home() {
             calls a Promise that rejects, but does not handle the rejection or
             await its result (returning synchronously). Sentry records an Error
             but <strong>will not</strong> when deployed to Vercel because the
-            serverless function will already have exited.{' '}
+            serverless function will already have exited.{" "}
             <code className={styles.code}>
               <Link className={styles.link} href="/ssr/test3">
                 SSR Test 3
@@ -167,7 +167,7 @@ export default function Home() {
           <p className={inter.className}>
             <code className={styles.code}>getServerSideProps </code>
             manually captures an exception from a try/catch. This should record
-            Error in Sentry.{' '}
+            Error in Sentry.{" "}
             <code className={styles.code}>
               <Link className={styles.link} href="/ssr/test4">
                 SSR Test 4
@@ -182,7 +182,7 @@ export default function Home() {
           </h2>
           <p className={inter.className}>
             There is a top-of-module Promise that rejects, but its result is not
-            awaited. Sentry records an Error.{' '}
+            awaited. Sentry records an Error.{" "}
             <code className={styles.code}>
               <Link className={styles.link} href="/client/test1">
                 Client Test 1
@@ -191,7 +191,7 @@ export default function Home() {
           </p>
           <p className={inter.className}>
             There is a top-of-module exception. _error.js should render and
-            record ReferenceError('process is not defined') in Sentry.{' '}
+            record ReferenceError('process is not defined') in Sentry.{" "}
             <code className={styles.code}>
               <Link className={styles.link} href="/client/test2">
                 Client Test 2
@@ -201,7 +201,7 @@ export default function Home() {
           <p className={inter.className}>
             There is an exception during React lifecycle that is caught by
             Next.js's React Error Boundary. In this case, when the component
-            mounts. This causes _error.js to render and records Error in Sentry.{' '}
+            mounts. This causes _error.js to render and records Error in Sentry.{" "}
             <code className={styles.code}>
               <Link className={styles.link} href="/client/test3">
                 Client Test 3
@@ -210,10 +210,10 @@ export default function Home() {
           </p>
           <p className={inter.className}>
             There is an unhandled Promise rejection during React lifecycle. In
-            this case, when the component mounts. Sentry records an Error.{' '}
+            this case, when the component mounts. Sentry records an Error.{" "}
             <code className={styles.code}>
               <Link className={styles.link} href="/client/test4">
-                {' '}
+                {" "}
                 Client Test 4
               </Link>
             </code>
@@ -221,7 +221,7 @@ export default function Home() {
           <p className={inter.className}>
             An Error is thrown from an event handler. Sentry records an Error.
             (This page also demonstrates how to manually instrument your code
-            for performance monitoring.){' '}
+            for performance monitoring.){" "}
             <code className={styles.code}>
               <Link className={styles.link} href="/client/test5">
                 Client Test 5
@@ -254,7 +254,7 @@ export default function Home() {
           </p>
           <p className={inter.className}>
             Sentry creates links between errors and transactions, and can be
-            seen in the{' '}
+            seen in the{" "}
             <strong>
               <Link
                 className={styles.link}
@@ -281,5 +281,5 @@ export default function Home() {
         </div>
       </div>
     </main>
-  )
+  );
 }
diff --git a/examples/with-sentry/pages/ssr/test1.tsx b/examples/with-sentry/pages/ssr/test1.tsx
index cf522d3cf0..17315bcf5c 100644
--- a/examples/with-sentry/pages/ssr/test1.tsx
+++ b/examples/with-sentry/pages/ssr/test1.tsx
@@ -1,7 +1,7 @@
-const Test1 = () => <h1>SSR Test 1</h1>
+const Test1 = () => <h1>SSR Test 1</h1>;
 
 export function getServerSideProps() {
-  throw new Error('SSR Test 1')
+  throw new Error("SSR Test 1");
 }
 
-export default Test1
+export default Test1;
diff --git a/examples/with-sentry/pages/ssr/test2.tsx b/examples/with-sentry/pages/ssr/test2.tsx
index d4b9520ae6..3dfb950b10 100644
--- a/examples/with-sentry/pages/ssr/test2.tsx
+++ b/examples/with-sentry/pages/ssr/test2.tsx
@@ -1,7 +1,7 @@
-const Test2 = () => <h1>SSR Test 2</h1>
+const Test2 = () => <h1>SSR Test 2</h1>;
 
 export async function getServerSideProps() {
-  return Promise.reject(Error('SSR Test 2'))
+  return Promise.reject(Error("SSR Test 2"));
 }
 
-export default Test2
+export default Test2;
diff --git a/examples/with-sentry/pages/ssr/test3.tsx b/examples/with-sentry/pages/ssr/test3.tsx
index 5c75476ff6..05884ed546 100644
--- a/examples/with-sentry/pages/ssr/test3.tsx
+++ b/examples/with-sentry/pages/ssr/test3.tsx
@@ -1,11 +1,11 @@
-const Test3 = () => <h1>SSR Test 3</h1>
+const Test3 = () => <h1>SSR Test 3</h1>;
 
 export async function getServerSideProps() {
-  const doAsyncWork = () => Promise.reject(new Error('SSR Test 3'))
+  const doAsyncWork = () => Promise.reject(new Error("SSR Test 3"));
 
-  doAsyncWork()
+  doAsyncWork();
 
-  return { props: {} }
+  return { props: {} };
 }
 
-export default Test3
+export default Test3;
diff --git a/examples/with-sentry/pages/ssr/test4.tsx b/examples/with-sentry/pages/ssr/test4.tsx
index 737339f85d..2bef2336ae 100644
--- a/examples/with-sentry/pages/ssr/test4.tsx
+++ b/examples/with-sentry/pages/ssr/test4.tsx
@@ -1,19 +1,19 @@
-import * as Sentry from '@sentry/nextjs'
+import * as Sentry from "@sentry/nextjs";
 
-const Test4 = () => <h1>SSR Test 4</h1>
+const Test4 = () => <h1>SSR Test 4</h1>;
 
 export async function getServerSideProps() {
   try {
-    throw new Error('SSR Test 4')
+    throw new Error("SSR Test 4");
   } catch (error) {
-    Sentry.captureException(error)
+    Sentry.captureException(error);
 
     // Flushing before returning is necessary if deploying to Vercel, see
     // https://vercel.com/docs/platform/limits#streaming-responses
-    await Sentry.flush(2000)
+    await Sentry.flush(2000);
   }
 
-  return { props: {} }
+  return { props: {} };
 }
 
-export default Test4
+export default Test4;
diff --git a/examples/with-sentry/sentry.client.config.js b/examples/with-sentry/sentry.client.config.js
index 263017bf30..151b843252 100644
--- a/examples/with-sentry/sentry.client.config.js
+++ b/examples/with-sentry/sentry.client.config.js
@@ -2,9 +2,9 @@
 // The config you add here will be used whenever a page is visited.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
-import * as Sentry from '@sentry/nextjs'
+import * as Sentry from "@sentry/nextjs";
 
-const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
 
 Sentry.init({
   dsn: SENTRY_DSN,
@@ -28,4 +28,4 @@ Sentry.init({
       blockAllMedia: true,
     }),
   ],
-})
+});
diff --git a/examples/with-sentry/sentry.edge.config.js b/examples/with-sentry/sentry.edge.config.js
index 987ac85d72..1c3e86165d 100644
--- a/examples/with-sentry/sentry.edge.config.js
+++ b/examples/with-sentry/sentry.edge.config.js
@@ -2,9 +2,9 @@
 // The config you add here will be used whenever middleware or an Edge route handles a request.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
-import * as Sentry from '@sentry/nextjs'
+import * as Sentry from "@sentry/nextjs";
 
-const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
 
 Sentry.init({
   dsn: SENTRY_DSN,
@@ -14,4 +14,4 @@ Sentry.init({
   // Note: if you want to override the automatic release value, do not set a
   // `release` value here - use the environment variable `SENTRY_RELEASE`, so
   // that it will also get attached to your source maps
-})
+});
diff --git a/examples/with-sentry/sentry.server.config.js b/examples/with-sentry/sentry.server.config.js
index 4b244f5b52..a7e581b05c 100644
--- a/examples/with-sentry/sentry.server.config.js
+++ b/examples/with-sentry/sentry.server.config.js
@@ -2,9 +2,9 @@
 // The config you add here will be used whenever the server handles a request.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
-import * as Sentry from '@sentry/nextjs'
+import * as Sentry from "@sentry/nextjs";
 
-const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
 
 Sentry.init({
   dsn: SENTRY_DSN,
@@ -14,4 +14,4 @@ Sentry.init({
   // Note: if you want to override the automatic release value, do not set a
   // `release` value here - use the environment variable `SENTRY_RELEASE`, so
   // that it will also get attached to your source maps
-})
+});
diff --git a/examples/with-sentry/styles/Home.module.css b/examples/with-sentry/styles/Home.module.css
index 90a41dcd5e..6ce74da09a 100644
--- a/examples/with-sentry/styles/Home.module.css
+++ b/examples/with-sentry/styles/Home.module.css
@@ -115,7 +115,7 @@
 
 .center::before,
 .center::after {
-  content: '';
+  content: "";
   left: 50%;
   position: absolute;
   filter: blur(45px);
@@ -144,7 +144,7 @@
 
 .thirteen::before,
 .thirteen::after {
-  content: '';
+  content: "";
   position: absolute;
   z-index: -1;
 }
diff --git a/examples/with-sentry/styles/globals.css b/examples/with-sentry/styles/globals.css
index d4f491e152..f4bd77c0cc 100644
--- a/examples/with-sentry/styles/globals.css
+++ b/examples/with-sentry/styles/globals.css
@@ -1,9 +1,9 @@
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
+    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
diff --git a/examples/with-service-worker/pages/index.tsx b/examples/with-service-worker/pages/index.tsx
index 17290de600..a4c45d10a7 100644
--- a/examples/with-service-worker/pages/index.tsx
+++ b/examples/with-service-worker/pages/index.tsx
@@ -1,17 +1,17 @@
-import { useEffect } from 'react'
+import { useEffect } from "react";
 
 export default function Home() {
   useEffect(() => {
     navigator.serviceWorker
-      .register('/sw.js')
+      .register("/sw.js")
       .then((registration) =>
         console.log(
-          'Service Worker registration successful with scope: ',
-          registration.scope
-        )
+          "Service Worker registration successful with scope: ",
+          registration.scope,
+        ),
       )
-      .catch((err) => console.log('Service Worker registration failed: ', err))
-  }, [])
+      .catch((err) => console.log("Service Worker registration failed: ", err));
+  }, []);
 
-  return <h1>with-service-worker</h1>
+  return <h1>with-service-worker</h1>;
 }
diff --git a/examples/with-service-worker/public/sw.js b/examples/with-service-worker/public/sw.js
index 8959a6d4fb..8eab1ed7a1 100644
--- a/examples/with-service-worker/public/sw.js
+++ b/examples/with-service-worker/public/sw.js
@@ -1,3 +1,3 @@
-self.addEventListener('install', function (event) {
-  console.log('Hello world from the Service Worker 🤙')
-})
+self.addEventListener("install", function (event) {
+  console.log("Hello world from the Service Worker 🤙");
+});
diff --git a/examples/with-sfcc/components/Footer.tsx b/examples/with-sfcc/components/Footer.tsx
index 0ccf199fbe..8fb91636c4 100644
--- a/examples/with-sfcc/components/Footer.tsx
+++ b/examples/with-sfcc/components/Footer.tsx
@@ -10,5 +10,5 @@ export default function Footer() {
         Source code
       </a>
     </footer>
-  )
+  );
 }
diff --git a/examples/with-sfcc/components/Header.tsx b/examples/with-sfcc/components/Header.tsx
index aafd8e3cca..ff57115c57 100644
--- a/examples/with-sfcc/components/Header.tsx
+++ b/examples/with-sfcc/components/Header.tsx
@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import img from '../public/hero.jpg'
+import Image from "next/image";
+import img from "../public/hero.jpg";
 
 export default function Header({ scrollHandler }) {
   return (
@@ -39,5 +39,5 @@ export default function Header({ scrollHandler }) {
         </div>
       </div>
     </header>
-  )
+  );
 }
diff --git a/examples/with-sfcc/components/ProductCard.tsx b/examples/with-sfcc/components/ProductCard.tsx
index 9fe5be89ef..30dcbc0d8d 100644
--- a/examples/with-sfcc/components/ProductCard.tsx
+++ b/examples/with-sfcc/components/ProductCard.tsx
@@ -1,13 +1,13 @@
-import Image from 'next/image'
-import Link from 'next/link'
-import { useState } from 'react'
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
 
 function cn(...classes) {
-  return classes.filter(Boolean).join(' ')
+  return classes.filter(Boolean).join(" ");
 }
 
 export default function ProductCard({ product }) {
-  const [isLoading, setLoading] = useState(true)
+  const [isLoading, setLoading] = useState(true);
 
   return (
     <Link href={`/products/${product.id}`} className="group">
@@ -17,10 +17,10 @@ export default function ProductCard({ product }) {
           src={product.imageGroups[0].images[0].link}
           fill
           className={cn(
-            'object-cover duration-700 ease-in-out group-hover:opacity-75	',
+            "object-cover duration-700 ease-in-out group-hover:opacity-75	",
             isLoading
-              ? 'scale-110 blur-2xl grayscale'
-              : 'scale-100 blur-0 grayscale-0'
+              ? "scale-110 blur-2xl grayscale"
+              : "scale-100 blur-0 grayscale-0",
           )}
           onLoad={() => setLoading(false)}
         />
@@ -33,5 +33,5 @@ export default function ProductCard({ product }) {
         {product.shortDescription}
       </p>
     </Link>
-  )
+  );
 }
diff --git a/examples/with-sfcc/next.config.js b/examples/with-sfcc/next.config.js
index a143f0f4ef..adc30ce3c1 100644
--- a/examples/with-sfcc/next.config.js
+++ b/examples/with-sfcc/next.config.js
@@ -3,10 +3,10 @@ module.exports = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'myaccount.dx.commercecloud.salesforce.com',
-        port: '',
+        protocol: "https",
+        hostname: "myaccount.dx.commercecloud.salesforce.com",
+        port: "",
       },
     ],
   },
-}
+};
diff --git a/examples/with-sfcc/pages/_app.tsx b/examples/with-sfcc/pages/_app.tsx
index 52dc7380ee..d245d86aca 100644
--- a/examples/with-sfcc/pages/_app.tsx
+++ b/examples/with-sfcc/pages/_app.tsx
@@ -1,12 +1,12 @@
-import '../styles/globals.css'
-import Footer from '../components/Footer'
-import Head from 'next/head'
-import { Montserrat } from 'next/font/google'
+import "../styles/globals.css";
+import Footer from "../components/Footer";
+import Head from "next/head";
+import { Montserrat } from "next/font/google";
 
 const montserrat = Montserrat({
-  subsets: ['latin'],
-  variable: '--font-montserrat',
-})
+  subsets: ["latin"],
+  variable: "--font-montserrat",
+});
 
 export default function MyApp({ Component, pageProps }) {
   return (
@@ -19,5 +19,5 @@ export default function MyApp({ Component, pageProps }) {
         <Footer />
       </main>
     </>
-  )
+  );
 }
diff --git a/examples/with-sfcc/pages/_document.tsx b/examples/with-sfcc/pages/_document.tsx
index 2445294295..6e8e15f2bd 100644
--- a/examples/with-sfcc/pages/_document.tsx
+++ b/examples/with-sfcc/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Head, Html, Main, NextScript } from 'next/document'
+import { Head, Html, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -14,5 +14,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/with-sfcc/pages/index.tsx b/examples/with-sfcc/pages/index.tsx
index 2e78ed0f30..6dc258d60e 100644
--- a/examples/with-sfcc/pages/index.tsx
+++ b/examples/with-sfcc/pages/index.tsx
@@ -1,19 +1,19 @@
-import { useRef } from 'react'
-import Header from '../components/Header'
-import ProductCard from '../components/ProductCard'
-import getProducts from '../sfcc.js'
+import { useRef } from "react";
+import Header from "../components/Header";
+import ProductCard from "../components/ProductCard";
+import getProducts from "../sfcc.js";
 
 export default function Gallery({ data }) {
-  let coffeeRef = useRef<HTMLParagraphElement>()
+  let coffeeRef = useRef<HTMLParagraphElement>();
 
   const scrollHandler = (e) => {
-    e.preventDefault()
+    e.preventDefault();
     // @ts-ignore
     coffeeRef.scrollIntoView({
-      behavior: 'smooth',
-      block: 'start',
-    })
-  }
+      behavior: "smooth",
+      block: "start",
+    });
+  };
 
   return (
     <>
@@ -37,15 +37,15 @@ export default function Gallery({ data }) {
         </div>
       </div>
     </>
-  )
+  );
 }
 
 export async function getStaticProps() {
-  const searchResults = await getProducts('coffee')
+  const searchResults = await getProducts("coffee");
 
   return {
     props: {
       data: searchResults,
     },
-  }
+  };
 }
diff --git a/examples/with-sfcc/pages/products/[slug].tsx b/examples/with-sfcc/pages/products/[slug].tsx
index f8f5487640..ae07c326bd 100644
--- a/examples/with-sfcc/pages/products/[slug].tsx
+++ b/examples/with-sfcc/pages/products/[slug].tsx
@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import getProducts from '../../sfcc.js'
+import Image from "next/image";
+import getProducts from "../../sfcc.js";
 
 export default function Product({ product }) {
   return (
@@ -28,30 +28,30 @@ export default function Product({ product }) {
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 export async function getStaticProps({ params }) {
-  const searchResults = await getProducts(params.slug)
-  const coffeeProduct = searchResults[0]
+  const searchResults = await getProducts(params.slug);
+  const coffeeProduct = searchResults[0];
 
   return {
     props: {
       product: coffeeProduct,
     },
-  }
+  };
 }
 
 export async function getStaticPaths() {
-  const coffeeProducts = await getProducts('coffee')
-  let fullPaths = []
+  const coffeeProducts = await getProducts("coffee");
+  let fullPaths = [];
 
   for (let product of coffeeProducts) {
-    fullPaths.push({ params: { slug: product.id } })
+    fullPaths.push({ params: { slug: product.id } });
   }
 
   return {
     paths: fullPaths,
-    fallback: 'blocking',
-  }
+    fallback: "blocking",
+  };
 }
diff --git a/examples/with-sfcc/postcss.config.js b/examples/with-sfcc/postcss.config.js
index 33ad091d26..12a703d900 100644
--- a/examples/with-sfcc/postcss.config.js
+++ b/examples/with-sfcc/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/with-sfcc/sfcc.js b/examples/with-sfcc/sfcc.js
index c9f8ac2cc3..8de88fee55 100644
--- a/examples/with-sfcc/sfcc.js
+++ b/examples/with-sfcc/sfcc.js
@@ -1,4 +1,4 @@
-import { Customer, Product, Search } from 'commerce-sdk'
+import { Customer, Product, Search } from "commerce-sdk";
 
 export default async function getProducts(searchQuery) {
   const clientConfig = {
@@ -12,33 +12,33 @@ export default async function getProducts(searchQuery) {
       shortCode: process.env.SFDC_SHORTCODE,
       siteId: process.env.SFDC_SITEID,
     },
-  }
+  };
 
-  const credentials = `${clientConfig.parameters.clientId}:${clientConfig.parameters.secret}`
-  const base64data = Buffer.from(credentials).toString('base64')
-  const headers = { Authorization: `Basic ${base64data}` }
-  const client = new Customer.ShopperLogin(clientConfig)
+  const credentials = `${clientConfig.parameters.clientId}:${clientConfig.parameters.secret}`;
+  const base64data = Buffer.from(credentials).toString("base64");
+  const headers = { Authorization: `Basic ${base64data}` };
+  const client = new Customer.ShopperLogin(clientConfig);
 
   const shopperToken = await client.getAccessToken({
     headers,
     body: {
-      grant_type: 'client_credentials',
+      grant_type: "client_credentials",
     },
-  })
+  });
 
   const configWithAuth = {
     ...clientConfig,
     headers: { authorization: `Bearer ${shopperToken.access_token}` },
-  }
+  };
 
-  const searchClient = new Search.ShopperSearch(configWithAuth)
+  const searchClient = new Search.ShopperSearch(configWithAuth);
   const searchResults = await searchClient.productSearch({
     parameters: { q: searchQuery },
-  })
+  });
 
-  const results = []
+  const results = [];
 
-  const productsClient = new Product.ShopperProducts(configWithAuth)
+  const productsClient = new Product.ShopperProducts(configWithAuth);
   await Promise.all(
     searchResults.hits.map(async (product) => {
       const productResults = await productsClient.getProduct({
@@ -47,11 +47,11 @@ export default async function getProducts(searchQuery) {
           siteId: clientConfig.parameters.siteId,
           id: product.productId,
         },
-      })
+      });
 
-      results.push(productResults)
-    })
-  )
+      results.push(productResults);
+    }),
+  );
 
-  return results
+  return results;
 }
diff --git a/examples/with-sfcc/tailwind.config.js b/examples/with-sfcc/tailwind.config.js
index f9d9916611..1e93302f4e 100644
--- a/examples/with-sfcc/tailwind.config.js
+++ b/examples/with-sfcc/tailwind.config.js
@@ -1,16 +1,16 @@
 /** @type {import('tailwindcss').Config} \*/
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     fontFamily: {
-      sans: ['var(--font-montserrat)'],
+      sans: ["var(--font-montserrat)"],
     },
   },
   future: {
     hoverOnlyWhenSupported: true,
   },
-  plugins: [require('@tailwindcss/aspect-ratio')],
-}
+  plugins: [require("@tailwindcss/aspect-ratio")],
+};
diff --git a/examples/with-shallow-routing/pages/about.js b/examples/with-shallow-routing/pages/about.js
index 46817af02a..654ff2c10a 100644
--- a/examples/with-shallow-routing/pages/about.js
+++ b/examples/with-shallow-routing/pages/about.js
@@ -1,3 +1,3 @@
 export default function About() {
-  return <div>About us</div>
+  return <div>About us</div>;
 }
diff --git a/examples/with-shallow-routing/pages/index.js b/examples/with-shallow-routing/pages/index.js
index b9dab64b3e..8ab02c0728 100644
--- a/examples/with-shallow-routing/pages/index.js
+++ b/examples/with-shallow-routing/pages/index.js
@@ -1,26 +1,26 @@
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import { format } from 'url'
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { format } from "url";
 
-let counter = 0
+let counter = 0;
 
 export async function getServerSideProps() {
-  counter++
-  return { props: { initialPropsCounter: counter } }
+  counter++;
+  return { props: { initialPropsCounter: counter } };
 }
 
 export default function Index({ initialPropsCounter }) {
-  const router = useRouter()
-  const { pathname, query } = router
+  const router = useRouter();
+  const { pathname, query } = router;
   const reload = () => {
-    router.push(format({ pathname, query }))
-  }
+    router.push(format({ pathname, query }));
+  };
   const incrementCounter = () => {
-    const currentCounter = query.counter ? parseInt(query.counter) : 0
-    const href = `/?counter=${currentCounter + 1}`
+    const currentCounter = query.counter ? parseInt(query.counter) : 0;
+    const href = `/?counter=${currentCounter + 1}`;
 
-    router.push(href, href, { shallow: true })
-  }
+    router.push(href, href, { shallow: true });
+  };
 
   return (
     <div>
@@ -31,5 +31,5 @@ export default function Index({ initialPropsCounter }) {
       <p>"getServerSideProps" ran for "{initialPropsCounter}" times.</p>
       <p>Counter: "{query.counter || 0}".</p>
     </div>
-  )
+  );
 }
diff --git a/examples/with-sitemap/next.config.js b/examples/with-sitemap/next.config.js
index a5932f8738..432adadb2c 100644
--- a/examples/with-sitemap/next.config.js
+++ b/examples/with-sitemap/next.config.js
@@ -2,9 +2,9 @@
 module.exports = {
   webpack: (config, { isServer }) => {
     if (isServer) {
-      require('./scripts/generate-sitemap')
+      require("./scripts/generate-sitemap");
     }
 
-    return config
+    return config;
   },
-}
+};
diff --git a/examples/with-sitemap/pages/contact.js b/examples/with-sitemap/pages/contact.js
index 0d718f02d5..a0dbdbd08b 100644
--- a/examples/with-sitemap/pages/contact.js
+++ b/examples/with-sitemap/pages/contact.js
@@ -1,4 +1,4 @@
-import Head from 'next/head'
+import Head from "next/head";
 
 export default function Home() {
   return (
@@ -22,7 +22,7 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <img src="/vercel.svg" alt="Vercel Logo" className="logo" />
         </a>
       </footer>
@@ -124,5 +124,5 @@ export default function Home() {
         }
       `}</style>
     </div>
-  )
+  );
 }
diff --git a/examples/with-sitemap/pages/index.js b/examples/with-sitemap/pages/index.js
index b597fd02bb..54c8be7be9 100644
--- a/examples/with-sitemap/pages/index.js
+++ b/examples/with-sitemap/pages/index.js
@@ -1,4 +1,4 @@
-import Head from 'next/head'
+import Head from "next/head";
 
 export default function Home() {
   return (
@@ -56,7 +56,7 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <img src="/vercel.svg" alt="Vercel Logo" className="logo" />
         </a>
       </footer>
@@ -207,5 +207,5 @@ export default function Home() {
         }
       `}</style>
     </div>
-  )
+  );
 }
diff --git a/examples/with-sitemap/scripts/generate-sitemap.js b/examples/with-sitemap/scripts/generate-sitemap.js
index 4bd49377b2..dee558c166 100644
--- a/examples/with-sitemap/scripts/generate-sitemap.js
+++ b/examples/with-sitemap/scripts/generate-sitemap.js
@@ -1,28 +1,28 @@
-const fs = require('fs')
-const globby = require('globby')
+const fs = require("fs");
+const globby = require("globby");
 
 function addPage(page) {
-  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
-  const route = path === '/index' ? '' : path
+  const path = page.replace("pages", "").replace(".js", "").replace(".mdx", "");
+  const route = path === "/index" ? "" : path;
 
   return `  <url>
     <loc>${`${process.env.WEBSITE_URL}${route}`}</loc>
     <changefreq>hourly</changefreq>
-  </url>`
+  </url>`;
 }
 
 async function generateSitemap() {
   // Ignore Next.js specific files (e.g., _app.js) and API routes.
   const pages = await globby([
-    'pages/**/*{.js,.mdx}',
-    '!pages/_*.js',
-    '!pages/api',
-  ])
+    "pages/**/*{.js,.mdx}",
+    "!pages/_*.js",
+    "!pages/api",
+  ]);
   const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-${pages.map(addPage).join('\n')}
-</urlset>`
+${pages.map(addPage).join("\n")}
+</urlset>`;
 
-  fs.writeFileSync('public/sitemap.xml', sitemap)
+  fs.writeFileSync("public/sitemap.xml", sitemap);
 }
 
-generateSitemap()
+generateSitemap();
diff --git a/examples/with-slate/pages/api/editor-state.ts b/examples/with-slate/pages/api/editor-state.ts
index 0539e503e5..999ca41109 100644
--- a/examples/with-slate/pages/api/editor-state.ts
+++ b/examples/with-slate/pages/api/editor-state.ts
@@ -1,20 +1,20 @@
-import { NextApiRequest, NextApiResponse } from 'next'
+import { NextApiRequest, NextApiResponse } from "next";
 
 export default async function handleEditorStateChange(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  if (req.method !== 'POST') {
+  if (req.method !== "POST") {
     return res
-      .setHeader('Allow', ['POST'])
+      .setHeader("Allow", ["POST"])
       .status(405)
-      .end(`Method ${req.method} Not Allowed`)
+      .end(`Method ${req.method} Not Allowed`);
   }
 
-  const editorState = JSON.parse(req.body)
-  console.log('TODO: Save editorState on the server', editorState)
+  const editorState = JSON.parse(req.body);
+  console.log("TODO: Save editorState on the server", editorState);
 
   res.json({
-    status: 'ok',
-  })
+    status: "ok",
+  });
 }
diff --git a/examples/with-slate/pages/index.tsx b/examples/with-slate/pages/index.tsx
index 66ea863e16..4471917c2c 100644
--- a/examples/with-slate/pages/index.tsx
+++ b/examples/with-slate/pages/index.tsx
@@ -1,8 +1,8 @@
-import { useState } from 'react'
-import { createEditor, Descendant } from 'slate'
-import { Slate, Editable, withReact } from 'slate-react'
-import { withHistory } from 'slate-history'
-import { InferGetServerSidePropsType } from 'next'
+import { useState } from "react";
+import { createEditor, Descendant } from "slate";
+import { Slate, Editable, withReact } from "slate-react";
+import { withHistory } from "slate-history";
+import { InferGetServerSidePropsType } from "next";
 
 export async function getServerSideProps() {
   return {
@@ -10,42 +10,42 @@ export async function getServerSideProps() {
       editorState: [
         {
           children: [
-            { text: 'This is editable plain text, just like a <textarea>!' },
+            { text: "This is editable plain text, just like a <textarea>!" },
           ],
         },
       ],
     },
-  }
+  };
 }
 
 async function saveEditorState(edtorState: Descendant[]) {
-  const response = await fetch('/api/editor-state', {
-    method: 'POST',
+  const response = await fetch("/api/editor-state", {
+    method: "POST",
     body: JSON.stringify(edtorState),
-  })
-  return response.json()
+  });
+  return response.json();
 }
 
 export default function IndexPage({
   editorState,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
-  const [editor] = useState(() => withReact(withHistory(createEditor())))
+  const [editor] = useState(() => withReact(withHistory(createEditor())));
   return (
     <Slate
       editor={editor}
       value={editorState}
       onChange={async (value) => {
         const isAstChange = editor.operations.some(
-          (op) => 'set_selection' !== op.type
-        )
+          (op) => "set_selection" !== op.type,
+        );
         if (isAstChange) {
           // You might want to debounce the following call!
-          const responseData = await saveEditorState(value)
-          console.log('Send editor state to the server', responseData)
+          const responseData = await saveEditorState(value);
+          console.log("Send editor state to the server", responseData);
         }
       }}
     >
       <Editable placeholder="Enter some plain text..." />
     </Slate>
-  )
+  );
 }
diff --git a/examples/with-slate/types/slate.d.ts b/examples/with-slate/types/slate.d.ts
index 34200917be..cba5aea234 100644
--- a/examples/with-slate/types/slate.d.ts
+++ b/examples/with-slate/types/slate.d.ts
@@ -1,14 +1,14 @@
-import { BaseEditor } from 'slate'
-import { ReactEditor } from 'slate-react'
-import { HistoryEditor } from 'slate-history'
+import { BaseEditor } from "slate";
+import { ReactEditor } from "slate-react";
+import { HistoryEditor } from "slate-history";
 
-type CustomElement = { type?: 'paragraph'; children: CustomText[] }
-type CustomText = { text: string; bold?: true }
+type CustomElement = { type?: "paragraph"; children: CustomText[] };
+type CustomText = { text: string; bold?: true };
 
-declare module 'slate' {
+declare module "slate" {
   interface CustomTypes {
-    Editor: BaseEditor & ReactEditor & HistoryEditor
-    Element: CustomElement
-    Text: CustomText
+    Editor: BaseEditor & ReactEditor & HistoryEditor;
+    Element: CustomElement;
+    Text: CustomText;
   }
 }
diff --git a/examples/with-static-export/app/about/page.tsx b/examples/with-static-export/app/about/page.tsx
index 47de2787d1..147c42e6d0 100644
--- a/examples/with-static-export/app/about/page.tsx
+++ b/examples/with-static-export/app/about/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function About() {
   return (
@@ -8,5 +8,5 @@ export default function About() {
         Back to <Link href="/">Home</Link>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/with-static-export/app/layout.tsx b/examples/with-static-export/app/layout.tsx
index dbce4ea8e3..225b6038d7 100644
--- a/examples/with-static-export/app/layout.tsx
+++ b/examples/with-static-export/app/layout.tsx
@@ -1,11 +1,11 @@
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-static-export/app/page.tsx b/examples/with-static-export/app/page.tsx
index 1e543ed2eb..8cee70205e 100644
--- a/examples/with-static-export/app/page.tsx
+++ b/examples/with-static-export/app/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 const Home = () => {
   return (
@@ -9,7 +9,7 @@ const Home = () => {
         Visit the <Link href="/about">About</Link> page.
       </p>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/examples/with-static-export/next.config.js b/examples/with-static-export/next.config.js
index 3b07efd02e..e18dd005ed 100644
--- a/examples/with-static-export/next.config.js
+++ b/examples/with-static-export/next.config.js
@@ -4,7 +4,7 @@
  * @type {import('next').NextConfig}
  **/
 const nextConfig = {
-  output: 'export',
-}
+  output: "export",
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-stencil/packages/test-component/src/components.d.ts b/examples/with-stencil/packages/test-component/src/components.d.ts
index 3c8b5104e8..96d34937c3 100644
--- a/examples/with-stencil/packages/test-component/src/components.d.ts
+++ b/examples/with-stencil/packages/test-component/src/components.d.ts
@@ -5,22 +5,22 @@
  * It contains typing information for all components that exist in this project.
  */
 
-import { HTMLStencilElement, JSXBase } from '@stencil/core/internal'
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 
 export namespace Components {
   interface MyComponent {
     /**
      * The first name
      */
-    first: string
+    first: string;
     /**
      * The last name
      */
-    last: string
+    last: string;
     /**
      * The middle name
      */
-    middle: string
+    middle: string;
   }
 }
 
@@ -29,11 +29,11 @@ declare global {
     extends Components.MyComponent,
       HTMLStencilElement {}
   var HTMLMyComponentElement: {
-    prototype: HTMLMyComponentElement
-    new (): HTMLMyComponentElement
-  }
+    prototype: HTMLMyComponentElement;
+    new (): HTMLMyComponentElement;
+  };
   interface HTMLElementTagNameMap {
-    'my-component': HTMLMyComponentElement
+    "my-component": HTMLMyComponentElement;
   }
 }
 
@@ -42,29 +42,29 @@ declare namespace LocalJSX {
     /**
      * The first name
      */
-    first?: string
+    first?: string;
     /**
      * The last name
      */
-    last?: string
+    last?: string;
     /**
      * The middle name
      */
-    middle?: string
+    middle?: string;
   }
 
   interface IntrinsicElements {
-    'my-component': MyComponent
+    "my-component": MyComponent;
   }
 }
 
-export { LocalJSX as JSX }
+export { LocalJSX as JSX };
 
-declare module '@stencil/core' {
+declare module "@stencil/core" {
   export namespace JSX {
     interface IntrinsicElements {
-      'my-component': LocalJSX.MyComponent &
-        JSXBase.HTMLAttributes<HTMLMyComponentElement>
+      "my-component": LocalJSX.MyComponent &
+        JSXBase.HTMLAttributes<HTMLMyComponentElement>;
     }
   }
 }
diff --git a/examples/with-stencil/packages/test-component/src/components/my-component/my-component.e2e.ts b/examples/with-stencil/packages/test-component/src/components/my-component/my-component.e2e.ts
index 2fcd9f1da9..bdff9a6937 100644
--- a/examples/with-stencil/packages/test-component/src/components/my-component/my-component.e2e.ts
+++ b/examples/with-stencil/packages/test-component/src/components/my-component/my-component.e2e.ts
@@ -1,32 +1,32 @@
-import { newE2EPage } from '@stencil/core/testing'
+import { newE2EPage } from "@stencil/core/testing";
 
-describe('my-component', () => {
-  it('renders', async () => {
-    const page = await newE2EPage()
+describe("my-component", () => {
+  it("renders", async () => {
+    const page = await newE2EPage();
 
-    await page.setContent('<my-component></my-component>')
-    const element = await page.find('my-component')
-    expect(element).toHaveClass('hydrated')
-  })
+    await page.setContent("<my-component></my-component>");
+    const element = await page.find("my-component");
+    expect(element).toHaveClass("hydrated");
+  });
 
-  it('renders changes to the name data', async () => {
-    const page = await newE2EPage()
+  it("renders changes to the name data", async () => {
+    const page = await newE2EPage();
 
-    await page.setContent('<my-component></my-component>')
-    const component = await page.find('my-component')
-    const element = await page.find('my-component >>> div')
-    expect(element.textContent).toEqual(`Hello, World! I'm `)
+    await page.setContent("<my-component></my-component>");
+    const component = await page.find("my-component");
+    const element = await page.find("my-component >>> div");
+    expect(element.textContent).toEqual(`Hello, World! I'm `);
 
-    component.setProperty('first', 'James')
-    await page.waitForChanges()
-    expect(element.textContent).toEqual(`Hello, World! I'm James`)
+    component.setProperty("first", "James");
+    await page.waitForChanges();
+    expect(element.textContent).toEqual(`Hello, World! I'm James`);
 
-    component.setProperty('last', 'Quincy')
-    await page.waitForChanges()
-    expect(element.textContent).toEqual(`Hello, World! I'm James Quincy`)
+    component.setProperty("last", "Quincy");
+    await page.waitForChanges();
+    expect(element.textContent).toEqual(`Hello, World! I'm James Quincy`);
 
-    component.setProperty('middle', 'Earl')
-    await page.waitForChanges()
-    expect(element.textContent).toEqual(`Hello, World! I'm James Earl Quincy`)
-  })
-})
+    component.setProperty("middle", "Earl");
+    await page.waitForChanges();
+    expect(element.textContent).toEqual(`Hello, World! I'm James Earl Quincy`);
+  });
+});
diff --git a/examples/with-stencil/packages/test-component/src/components/my-component/my-component.tsx b/examples/with-stencil/packages/test-component/src/components/my-component/my-component.tsx
index 69f2f7186e..70fc10cc39 100644
--- a/examples/with-stencil/packages/test-component/src/components/my-component/my-component.tsx
+++ b/examples/with-stencil/packages/test-component/src/components/my-component/my-component.tsx
@@ -1,10 +1,10 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Component, Prop, h } from '@stencil/core'
-import { format } from '../../utils/utils'
+import { Component, Prop, h } from "@stencil/core";
+import { format } from "../../utils/utils";
 
 @Component({
-  tag: 'my-component',
-  styleUrl: 'my-component.css',
+  tag: "my-component",
+  styleUrl: "my-component.css",
   shadow: true,
 })
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -12,23 +12,23 @@ export class MyComponent {
   /**
    * The first name
    */
-  @Prop() first: string
+  @Prop() first: string;
 
   /**
    * The middle name
    */
-  @Prop() middle: string
+  @Prop() middle: string;
 
   /**
    * The last name
    */
-  @Prop() last: string
+  @Prop() last: string;
 
   private getText(): string {
-    return format(this.first, this.middle, this.last)
+    return format(this.first, this.middle, this.last);
   }
 
   render() {
-    return <div>Hello, World! I'm {this.getText()}</div>
+    return <div>Hello, World! I'm {this.getText()}</div>;
   }
 }
diff --git a/examples/with-stencil/packages/test-component/src/index.ts b/examples/with-stencil/packages/test-component/src/index.ts
index cb64ac1b52..40b494c5f8 100644
--- a/examples/with-stencil/packages/test-component/src/index.ts
+++ b/examples/with-stencil/packages/test-component/src/index.ts
@@ -1 +1 @@
-export * from './components'
+export * from "./components";
diff --git a/examples/with-stencil/packages/test-component/src/utils/utils.spec.ts b/examples/with-stencil/packages/test-component/src/utils/utils.spec.ts
index db69728c03..5a420b9da7 100644
--- a/examples/with-stencil/packages/test-component/src/utils/utils.spec.ts
+++ b/examples/with-stencil/packages/test-component/src/utils/utils.spec.ts
@@ -1,21 +1,21 @@
-import { format } from './utils'
+import { format } from "./utils";
 
-describe('format', () => {
-  it('returns empty string for no names defined', () => {
-    expect(format(undefined, undefined, undefined)).toEqual('')
-  })
+describe("format", () => {
+  it("returns empty string for no names defined", () => {
+    expect(format(undefined, undefined, undefined)).toEqual("");
+  });
 
-  it('formats just first names', () => {
-    expect(format('Joseph', undefined, undefined)).toEqual('Joseph')
-  })
+  it("formats just first names", () => {
+    expect(format("Joseph", undefined, undefined)).toEqual("Joseph");
+  });
 
-  it('formats first and last names', () => {
-    expect(format('Joseph', undefined, 'Publique')).toEqual('Joseph Publique')
-  })
+  it("formats first and last names", () => {
+    expect(format("Joseph", undefined, "Publique")).toEqual("Joseph Publique");
+  });
 
-  it('formats first, middle and last names', () => {
-    expect(format('Joseph', 'Quincy', 'Publique')).toEqual(
-      'Joseph Quincy Publique'
-    )
-  })
-})
+  it("formats first, middle and last names", () => {
+    expect(format("Joseph", "Quincy", "Publique")).toEqual(
+      "Joseph Quincy Publique",
+    );
+  });
+});
diff --git a/examples/with-stencil/packages/test-component/src/utils/utils.ts b/examples/with-stencil/packages/test-component/src/utils/utils.ts
index 15d205fd1a..0265142f63 100644
--- a/examples/with-stencil/packages/test-component/src/utils/utils.ts
+++ b/examples/with-stencil/packages/test-component/src/utils/utils.ts
@@ -1,3 +1,5 @@
 export function format(first: string, middle: string, last: string): string {
-  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '')
+  return (
+    (first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : "")
+  );
 }
diff --git a/examples/with-stencil/packages/test-component/stencil.config.ts b/examples/with-stencil/packages/test-component/stencil.config.ts
index 19dff0f535..b9d4d59034 100644
--- a/examples/with-stencil/packages/test-component/stencil.config.ts
+++ b/examples/with-stencil/packages/test-component/stencil.config.ts
@@ -1,18 +1,18 @@
-import { Config } from '@stencil/core'
+import { Config } from "@stencil/core";
 
 export const config: Config = {
-  namespace: 'test-component',
+  namespace: "test-component",
   outputTargets: [
     {
-      type: 'dist',
-      esmLoaderPath: '../loader',
+      type: "dist",
+      esmLoaderPath: "../loader",
     },
     {
-      type: 'docs-readme',
+      type: "docs-readme",
     },
     {
-      type: 'www',
+      type: "www",
       serviceWorker: null, // disable service workers
     },
   ],
-}
+};
diff --git a/examples/with-stencil/packages/web-app/pages/_app.js b/examples/with-stencil/packages/web-app/pages/_app.js
index 96882149a9..072962d96d 100644
--- a/examples/with-stencil/packages/web-app/pages/_app.js
+++ b/examples/with-stencil/packages/web-app/pages/_app.js
@@ -1,11 +1,11 @@
-import { useLayoutEffect } from 'react'
-import { applyPolyfills, defineCustomElements } from 'test-component/loader'
+import { useLayoutEffect } from "react";
+import { applyPolyfills, defineCustomElements } from "test-component/loader";
 
 export default function App({ Component, pageProps }) {
   useLayoutEffect(() => {
     applyPolyfills().then(() => {
-      defineCustomElements(window)
-    })
-  }, [])
-  return <Component {...pageProps} />
+      defineCustomElements(window);
+    });
+  }, []);
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-stencil/packages/web-app/pages/index.js b/examples/with-stencil/packages/web-app/pages/index.js
index b305dc8040..d98680ba3b 100644
--- a/examples/with-stencil/packages/web-app/pages/index.js
+++ b/examples/with-stencil/packages/web-app/pages/index.js
@@ -3,5 +3,5 @@ export default function Home() {
     <div>
       <my-component first="Next.js" last="The React Framework"></my-component>
     </div>
-  )
+  );
 }
diff --git a/examples/with-stitches/components/StitchesLogo.tsx b/examples/with-stitches/components/StitchesLogo.tsx
index a08496120e..1aefebc633 100644
--- a/examples/with-stitches/components/StitchesLogo.tsx
+++ b/examples/with-stitches/components/StitchesLogo.tsx
@@ -45,6 +45,6 @@ const StitchesLogo = () => (
       strokeLinejoin="round"
     />
   </svg>
-)
+);
 
-export default StitchesLogo
+export default StitchesLogo;
diff --git a/examples/with-stitches/next.config.js b/examples/with-stitches/next.config.js
index a843cbee09..91ef62f0db 100644
--- a/examples/with-stitches/next.config.js
+++ b/examples/with-stitches/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-stitches/pages/_document.tsx b/examples/with-stitches/pages/_document.tsx
index 472b123f7b..c8cd34a28a 100644
--- a/examples/with-stitches/pages/_document.tsx
+++ b/examples/with-stitches/pages/_document.tsx
@@ -1,5 +1,5 @@
-import { Head, Html, Main, NextScript } from 'next/document'
-import { getCssText } from '../stitches.config'
+import { Head, Html, Main, NextScript } from "next/document";
+import { getCssText } from "../stitches.config";
 
 export default function MyDocument() {
   return (
@@ -15,5 +15,5 @@ export default function MyDocument() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/with-stitches/pages/index.tsx b/examples/with-stitches/pages/index.tsx
index f44e552fc5..d2fd236aae 100644
--- a/examples/with-stitches/pages/index.tsx
+++ b/examples/with-stitches/pages/index.tsx
@@ -1,53 +1,53 @@
-import Head from 'next/head'
-import StitchesLogo from '../components/StitchesLogo'
-import { styled } from '../stitches.config'
+import Head from "next/head";
+import StitchesLogo from "../components/StitchesLogo";
+import { styled } from "../stitches.config";
 
-const Box = styled('div', {})
+const Box = styled("div", {});
 
-const Text = styled('p', {
-  fontFamily: '$system',
-  color: '$hiContrast',
-})
+const Text = styled("p", {
+  fontFamily: "$system",
+  color: "$hiContrast",
+});
 
-const Link = styled('a', {
-  fontFamily: '$system',
-  textDecoration: 'none',
-  color: '$purple600',
-})
+const Link = styled("a", {
+  fontFamily: "$system",
+  textDecoration: "none",
+  color: "$purple600",
+});
 
-const Container = styled('div', {
-  marginX: 'auto',
-  paddingX: '$3',
+const Container = styled("div", {
+  marginX: "auto",
+  paddingX: "$3",
 
   variants: {
     size: {
       1: {
-        maxWidth: '300px',
+        maxWidth: "300px",
       },
       2: {
-        maxWidth: '585px',
+        maxWidth: "585px",
       },
       3: {
-        maxWidth: '865px',
+        maxWidth: "865px",
       },
     },
   },
-})
+});
 
 export default function Home() {
   return (
-    <Box css={{ paddingY: '$6' }}>
+    <Box css={{ paddingY: "$6" }}>
       <Head>
         <title>Use Stitches with Next.js</title>
       </Head>
-      <Container size={{ '@initial': '1', '@bp1': '2' }}>
+      <Container size={{ "@initial": "1", "@bp1": "2" }}>
         <StitchesLogo />
         <Text as="h1">Hello, from Stitches.</Text>
         <Text>
-          For full documentation, visit{' '}
+          For full documentation, visit{" "}
           <Link href="https://stitches.dev">stitches.dev</Link>.
         </Text>
       </Container>
     </Box>
-  )
+  );
 }
diff --git a/examples/with-stitches/stitches.config.ts b/examples/with-stitches/stitches.config.ts
index 9968ae2ff9..b339bfb1ef 100644
--- a/examples/with-stitches/stitches.config.ts
+++ b/examples/with-stitches/stitches.config.ts
@@ -1,5 +1,5 @@
-import type * as Stitches from '@stitches/react'
-import { createStitches } from '@stitches/react'
+import type * as Stitches from "@stitches/react";
+import { createStitches } from "@stitches/react";
 
 export const {
   config,
@@ -12,71 +12,71 @@ export const {
 } = createStitches({
   theme: {
     colors: {
-      hiContrast: 'hsl(206,10%,5%)',
-      loContrast: 'white',
+      hiContrast: "hsl(206,10%,5%)",
+      loContrast: "white",
 
-      gray100: 'hsl(206,22%,99%)',
-      gray200: 'hsl(206,12%,97%)',
-      gray300: 'hsl(206,11%,92%)',
-      gray400: 'hsl(206,10%,84%)',
-      gray500: 'hsl(206,10%,76%)',
-      gray600: 'hsl(206,10%,44%)',
+      gray100: "hsl(206,22%,99%)",
+      gray200: "hsl(206,12%,97%)",
+      gray300: "hsl(206,11%,92%)",
+      gray400: "hsl(206,10%,84%)",
+      gray500: "hsl(206,10%,76%)",
+      gray600: "hsl(206,10%,44%)",
 
-      purple100: 'hsl(252,100%,99%)',
-      purple200: 'hsl(252,100%,98%)',
-      purple300: 'hsl(252,100%,94%)',
-      purple400: 'hsl(252,75%,84%)',
-      purple500: 'hsl(252,78%,60%)',
-      purple600: 'hsl(252,80%,53%)',
+      purple100: "hsl(252,100%,99%)",
+      purple200: "hsl(252,100%,98%)",
+      purple300: "hsl(252,100%,94%)",
+      purple400: "hsl(252,75%,84%)",
+      purple500: "hsl(252,78%,60%)",
+      purple600: "hsl(252,80%,53%)",
     },
     space: {
-      1: '5px',
-      2: '10px',
-      3: '15px',
-      4: '20px',
-      5: '25px',
-      6: '35px',
+      1: "5px",
+      2: "10px",
+      3: "15px",
+      4: "20px",
+      5: "25px",
+      6: "35px",
     },
     sizes: {
-      1: '5px',
-      2: '10px',
-      3: '15px',
-      4: '20px',
-      5: '25px',
-      6: '35px',
+      1: "5px",
+      2: "10px",
+      3: "15px",
+      4: "20px",
+      5: "25px",
+      6: "35px",
     },
     fontSizes: {
-      1: '12px',
-      2: '13px',
-      3: '15px',
-      4: '17px',
-      5: '19px',
-      6: '21px',
+      1: "12px",
+      2: "13px",
+      3: "15px",
+      4: "17px",
+      5: "19px",
+      6: "21px",
     },
     fonts: {
-      system: 'system-ui',
+      system: "system-ui",
     },
   },
   utils: {
-    marginX: (value: Stitches.PropertyValue<'margin'>) => ({
+    marginX: (value: Stitches.PropertyValue<"margin">) => ({
       marginLeft: value,
       marginRight: value,
     }),
-    marginY: (value: Stitches.PropertyValue<'margin'>) => ({
+    marginY: (value: Stitches.PropertyValue<"margin">) => ({
       marginTop: value,
       marginBottom: value,
     }),
-    paddingX: (value: Stitches.PropertyValue<'padding'>) => ({
+    paddingX: (value: Stitches.PropertyValue<"padding">) => ({
       paddingLeft: value,
       paddingRight: value,
     }),
-    paddingY: (value: Stitches.PropertyValue<'padding'>) => ({
+    paddingY: (value: Stitches.PropertyValue<"padding">) => ({
       paddingTop: value,
       paddingBottom: value,
     }),
   },
   media: {
-    bp1: '(min-width: 520px)',
-    bp2: '(min-width: 900px)',
+    bp1: "(min-width: 520px)",
+    bp2: "(min-width: 900px)",
   },
-})
+});
diff --git a/examples/with-storybook-styled-jsx-scss/.storybook/main.js b/examples/with-storybook-styled-jsx-scss/.storybook/main.js
index f041eb8c96..e7e8b17002 100644
--- a/examples/with-storybook-styled-jsx-scss/.storybook/main.js
+++ b/examples/with-storybook-styled-jsx-scss/.storybook/main.js
@@ -1,7 +1,7 @@
 module.exports = {
   stories: [
-    '../stories/**/*.stories.mdx',
-    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
   ],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-}
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+};
diff --git a/examples/with-storybook-styled-jsx-scss/.storybook/preview.js b/examples/with-storybook-styled-jsx-scss/.storybook/preview.js
index 6dd8769493..57887cd3b8 100644
--- a/examples/with-storybook-styled-jsx-scss/.storybook/preview.js
+++ b/examples/with-storybook-styled-jsx-scss/.storybook/preview.js
@@ -1,3 +1,3 @@
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-}
+  actions: { argTypesRegex: "^on[A-Z].*" },
+};
diff --git a/examples/with-storybook-styled-jsx-scss/components/Button.tsx b/examples/with-storybook-styled-jsx-scss/components/Button.tsx
index 87c29a5084..3fe6ed0adb 100644
--- a/examples/with-storybook-styled-jsx-scss/components/Button.tsx
+++ b/examples/with-storybook-styled-jsx-scss/components/Button.tsx
@@ -1,26 +1,26 @@
-import React from 'react'
+import React from "react";
 
 export interface ButtonProps {
   /**
    * Is this the principal call to action on the page?
    */
-  primary?: boolean
+  primary?: boolean;
   /**
    * What background color to use
    */
-  backgroundColor?: string
+  backgroundColor?: string;
   /**
    * How large should the button be?
    */
-  size?: 'small' | 'medium' | 'large'
+  size?: "small" | "medium" | "large";
   /**
    * Button contents
    */
-  label: string
+  label: string;
   /**
    * Optional click handler
    */
-  onClick?: () => void
+  onClick?: () => void;
 }
 
 /**
@@ -28,20 +28,20 @@ export interface ButtonProps {
  */
 export const Button: React.FC<ButtonProps> = ({
   primary = false,
-  size = 'medium',
+  size = "medium",
   backgroundColor,
   label,
   ...props
 }) => {
   const mode = primary
-    ? 'storybook-button--primary'
-    : 'storybook-button--secondary'
+    ? "storybook-button--primary"
+    : "storybook-button--secondary";
   return (
     <>
       <button
         type="button"
-        className={['storybook-button', `storybook-button--${size}`, mode].join(
-          ' '
+        className={["storybook-button", `storybook-button--${size}`, mode].join(
+          " ",
         )}
         style={{ backgroundColor }}
         {...props}
@@ -50,7 +50,7 @@ export const Button: React.FC<ButtonProps> = ({
       </button>
       <style jsx>{`
         .storybook-button {
-          font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial,
+          font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial,
             sans-serif;
           font-weight: 700;
           border: 0;
@@ -82,5 +82,5 @@ export const Button: React.FC<ButtonProps> = ({
         }
       `}</style>
     </>
-  )
-}
+  );
+};
diff --git a/examples/with-storybook-styled-jsx-scss/components/Header.tsx b/examples/with-storybook-styled-jsx-scss/components/Header.tsx
index 467d84061d..3521d8e7ad 100644
--- a/examples/with-storybook-styled-jsx-scss/components/Header.tsx
+++ b/examples/with-storybook-styled-jsx-scss/components/Header.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
+import React from "react";
 
-import { Button } from './Button'
+import { Button } from "./Button";
 
 export interface HeaderProps {
-  user?: {}
-  onLogin: () => void
-  onLogout: () => void
-  onCreateAccount: () => void
+  user?: {};
+  onLogin: () => void;
+  onLogout: () => void;
+  onCreateAccount: () => void;
 }
 
 export const Header: React.FC<HeaderProps> = ({
@@ -61,7 +61,7 @@ export const Header: React.FC<HeaderProps> = ({
     </header>
     <style jsx>{`
       .wrapper {
-        font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial,
+        font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial,
           sans-serif;
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         padding: 15px 20px;
@@ -86,4 +86,4 @@ export const Header: React.FC<HeaderProps> = ({
       }
     `}</style>
   </>
-)
+);
diff --git a/examples/with-storybook-styled-jsx-scss/components/Page.tsx b/examples/with-storybook-styled-jsx-scss/components/Page.tsx
index 65d7a0cae3..fe9f431f06 100644
--- a/examples/with-storybook-styled-jsx-scss/components/Page.tsx
+++ b/examples/with-storybook-styled-jsx-scss/components/Page.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
-import Link from 'next/link'
-import { Header } from './Header'
+import React from "react";
+import Link from "next/link";
+import { Header } from "./Header";
 
 export interface PageProps {
-  user?: {}
-  onLogin: () => void
-  onLogout: () => void
-  onCreateAccount: () => void
+  user?: {};
+  onLogin: () => void;
+  onLogout: () => void;
+  onCreateAccount: () => void;
 }
 
 export const Page: React.FC<PageProps> = ({
@@ -70,7 +70,7 @@ export const Page: React.FC<PageProps> = ({
           index.js file.
         </p>
         <p>
-          You might also want to check out the{' '}
+          You might also want to check out the{" "}
           <Link
             href="https://github.com/vercel/styled-jsx#styles-outside-of-components"
             legacyBehavior
@@ -90,14 +90,14 @@ export const Page: React.FC<PageProps> = ({
           <i>(From the storybook demo setup)</i>
         </p>
         <p>
-          We recommend building UIs with a{' '}
+          We recommend building UIs with a{" "}
           <a
             href="https://componentdriven.org"
             target="_blank"
             rel="noopener noreferrer"
           >
             <strong>component-driven</strong>
-          </a>{' '}
+          </a>{" "}
           process starting with atomic components and ending with pages.
         </p>
         <p>
@@ -116,7 +116,7 @@ export const Page: React.FC<PageProps> = ({
           </li>
         </ul>
         <p>
-          Get a guided tutorial on component-driven development at{' '}
+          Get a guided tutorial on component-driven development at{" "}
           <a
             href="https://www.learnstorybook.com"
             target="_blank"
@@ -124,7 +124,7 @@ export const Page: React.FC<PageProps> = ({
           >
             Learn Storybook
           </a>
-          . Read more in the{' '}
+          . Read more in the{" "}
           <a
             href="https://storybook.js.org/docs"
             target="_blank"
@@ -136,7 +136,7 @@ export const Page: React.FC<PageProps> = ({
         </p>
         <div className="tip-wrapper">
           <span className="tip">Tip</span> Adjust the width of the canvas with
-          the{' '}
+          the{" "}
           <svg
             width="10"
             height="10"
@@ -157,7 +157,7 @@ export const Page: React.FC<PageProps> = ({
     </article>
     <style jsx>{`
       section {
-        font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial,
+        font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial,
           sans-serif;
         font-size: 14px;
         line-height: 24px;
@@ -220,4 +220,4 @@ export const Page: React.FC<PageProps> = ({
       }
     `}</style>
   </>
-)
+);
diff --git a/examples/with-storybook-styled-jsx-scss/pages/_app.tsx b/examples/with-storybook-styled-jsx-scss/pages/_app.tsx
index 27cd5bfc21..ce4c8b6a05 100644
--- a/examples/with-storybook-styled-jsx-scss/pages/_app.tsx
+++ b/examples/with-storybook-styled-jsx-scss/pages/_app.tsx
@@ -1,8 +1,8 @@
-import { AppProps } from 'next/app'
-import '../styles/globals.css'
+import { AppProps } from "next/app";
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-storybook-styled-jsx-scss/pages/index.tsx b/examples/with-storybook-styled-jsx-scss/pages/index.tsx
index cb3bcd9323..6141a39c76 100644
--- a/examples/with-storybook-styled-jsx-scss/pages/index.tsx
+++ b/examples/with-storybook-styled-jsx-scss/pages/index.tsx
@@ -1,13 +1,13 @@
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
-import { Page } from '../components/Page'
+import Head from "next/head";
+import styles from "../styles/Home.module.css";
+import { Page } from "../components/Page";
 
 const demoProps = {
   user: {},
   onLogin: () => {},
   onLogout: () => {},
   onCreateAccount: () => {},
-}
+};
 
 export default function Home() {
   return (
@@ -26,10 +26,10 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-storybook-styled-jsx-scss/stories/Button.stories.tsx b/examples/with-storybook-styled-jsx-scss/stories/Button.stories.tsx
index 3a6504b17d..96c4be5587 100644
--- a/examples/with-storybook-styled-jsx-scss/stories/Button.stories.tsx
+++ b/examples/with-storybook-styled-jsx-scss/stories/Button.stories.tsx
@@ -1,38 +1,38 @@
-import React from 'react'
+import React from "react";
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
-import { Story, Meta } from '@storybook/react/types-6-0'
+import { Story, Meta } from "@storybook/react/types-6-0";
 
-import { Button, ButtonProps } from '../components/Button'
+import { Button, ButtonProps } from "../components/Button";
 
 export default {
-  title: 'Example/Button',
+  title: "Example/Button",
   component: Button,
   argTypes: {
-    backgroundColor: { control: 'color' },
+    backgroundColor: { control: "color" },
   },
-} as Meta
+} as Meta;
 
-const Template: Story<ButtonProps> = (args) => <Button {...args} />
+const Template: Story<ButtonProps> = (args) => <Button {...args} />;
 
-export const Primary = Template.bind({})
+export const Primary = Template.bind({});
 Primary.args = {
   primary: true,
-  label: 'Button',
-}
+  label: "Button",
+};
 
-export const Secondary = Template.bind({})
+export const Secondary = Template.bind({});
 Secondary.args = {
-  label: 'Button',
-}
+  label: "Button",
+};
 
-export const Large = Template.bind({})
+export const Large = Template.bind({});
 Large.args = {
-  size: 'large',
-  label: 'Button',
-}
+  size: "large",
+  label: "Button",
+};
 
-export const Small = Template.bind({})
+export const Small = Template.bind({});
 Small.args = {
-  size: 'small',
-  label: 'Button',
-}
+  size: "small",
+  label: "Button",
+};
diff --git a/examples/with-storybook-styled-jsx-scss/stories/Header.stories.tsx b/examples/with-storybook-styled-jsx-scss/stories/Header.stories.tsx
index 1c0b98beb8..771f865a8f 100644
--- a/examples/with-storybook-styled-jsx-scss/stories/Header.stories.tsx
+++ b/examples/with-storybook-styled-jsx-scss/stories/Header.stories.tsx
@@ -1,20 +1,20 @@
-import React from 'react'
+import React from "react";
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
-import { Story, Meta } from '@storybook/react/types-6-0'
+import { Story, Meta } from "@storybook/react/types-6-0";
 
-import { Header, HeaderProps } from '../components/Header'
+import { Header, HeaderProps } from "../components/Header";
 
 export default {
-  title: 'Example/Header',
+  title: "Example/Header",
   component: Header,
-} as Meta
+} as Meta;
 
-const Template: Story<HeaderProps> = (args) => <Header {...args} />
+const Template: Story<HeaderProps> = (args) => <Header {...args} />;
 
-export const LoggedIn = Template.bind({})
+export const LoggedIn = Template.bind({});
 LoggedIn.args = {
   user: {},
-}
+};
 
-export const LoggedOut = Template.bind({})
-LoggedOut.args = {}
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};
diff --git a/examples/with-storybook-styled-jsx-scss/stories/Introduction.stories.mdx b/examples/with-storybook-styled-jsx-scss/stories/Introduction.stories.mdx
index deb3fa7da9..87730ba6a9 100644
--- a/examples/with-storybook-styled-jsx-scss/stories/Introduction.stories.mdx
+++ b/examples/with-storybook-styled-jsx-scss/stories/Introduction.stories.mdx
@@ -1,12 +1,12 @@
-import { Meta } from '@storybook/addon-docs/blocks'
-import Code from './assets/code-brackets.svg'
-import Colors from './assets/colors.svg'
-import Comments from './assets/comments.svg'
-import Direction from './assets/direction.svg'
-import Flow from './assets/flow.svg'
-import Plugin from './assets/plugin.svg'
-import Repo from './assets/repo.svg'
-import StackAlt from './assets/stackalt.svg'
+import { Meta } from "@storybook/addon-docs/blocks";
+import Code from "./assets/code-brackets.svg";
+import Colors from "./assets/colors.svg";
+import Comments from "./assets/comments.svg";
+import Direction from "./assets/direction.svg";
+import Flow from "./assets/flow.svg";
+import Plugin from "./assets/plugin.svg";
+import Repo from "./assets/repo.svg";
+import StackAlt from "./assets/stackalt.svg";
 
 <Meta title="Example/Introduction" />
 
@@ -214,6 +214,6 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 </div>
 
 <div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <span className="tip">Tip</span>Edit the Markdown in{" "}
   <code>src/storybook-examples/welcome.mdx</code>
 </div>
diff --git a/examples/with-storybook-styled-jsx-scss/stories/Page.stories.tsx b/examples/with-storybook-styled-jsx-scss/stories/Page.stories.tsx
index 222a82a828..dc052851ce 100644
--- a/examples/with-storybook-styled-jsx-scss/stories/Page.stories.tsx
+++ b/examples/with-storybook-styled-jsx-scss/stories/Page.stories.tsx
@@ -1,23 +1,23 @@
-import React from 'react'
+import React from "react";
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
-import { Story, Meta } from '@storybook/react/types-6-0'
+import { Story, Meta } from "@storybook/react/types-6-0";
 
-import { Page, PageProps } from '../components/Page'
-import * as HeaderStories from './Header.stories'
+import { Page, PageProps } from "../components/Page";
+import * as HeaderStories from "./Header.stories";
 
 export default {
-  title: 'Example/Page',
+  title: "Example/Page",
   component: Page,
-} as Meta
+} as Meta;
 
-const Template: Story<PageProps> = (args) => <Page {...args} />
+const Template: Story<PageProps> = (args) => <Page {...args} />;
 
-export const LoggedIn = Template.bind({})
+export const LoggedIn = Template.bind({});
 LoggedIn.args = {
   ...HeaderStories.LoggedIn.args,
-}
+};
 
-export const LoggedOut = Template.bind({})
+export const LoggedOut = Template.bind({});
 LoggedOut.args = {
   ...HeaderStories.LoggedOut.args,
-}
+};
diff --git a/examples/with-storybook/.storybook/main.ts b/examples/with-storybook/.storybook/main.ts
index 48166cebdb..2081ed4334 100644
--- a/examples/with-storybook/.storybook/main.ts
+++ b/examples/with-storybook/.storybook/main.ts
@@ -1,17 +1,17 @@
-import type { StorybookConfig } from '@storybook/nextjs'
+import type { StorybookConfig } from "@storybook/nextjs";
 const config: StorybookConfig = {
-  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
   ],
   framework: {
-    name: '@storybook/nextjs',
+    name: "@storybook/nextjs",
     options: {},
   },
   docs: {
-    autodocs: 'tag',
+    autodocs: "tag",
   },
-}
-export default config
+};
+export default config;
diff --git a/examples/with-storybook/.storybook/preview.ts b/examples/with-storybook/.storybook/preview.ts
index f3f8a70cf6..1c372b694b 100644
--- a/examples/with-storybook/.storybook/preview.ts
+++ b/examples/with-storybook/.storybook/preview.ts
@@ -1,8 +1,8 @@
-import type { Preview } from '@storybook/react'
+import type { Preview } from "@storybook/react";
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
+    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -10,6 +10,6 @@ const preview: Preview = {
       },
     },
   },
-}
+};
 
-export default preview
+export default preview;
diff --git a/examples/with-storybook/app/api/hello/route.ts b/examples/with-storybook/app/api/hello/route.ts
index d1cc6ee25f..6887c8b157 100644
--- a/examples/with-storybook/app/api/hello/route.ts
+++ b/examples/with-storybook/app/api/hello/route.ts
@@ -1,3 +1,3 @@
 export async function GET(request: Request) {
-  return new Response('Hello, Next.js!')
+  return new Response("Hello, Next.js!");
 }
diff --git a/examples/with-storybook/app/globals.css b/examples/with-storybook/app/globals.css
index d4f491e152..f4bd77c0cc 100644
--- a/examples/with-storybook/app/globals.css
+++ b/examples/with-storybook/app/globals.css
@@ -1,9 +1,9 @@
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
+    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
diff --git a/examples/with-storybook/app/layout.tsx b/examples/with-storybook/app/layout.tsx
index 3d9d72318c..79df0237e7 100644
--- a/examples/with-storybook/app/layout.tsx
+++ b/examples/with-storybook/app/layout.tsx
@@ -1,18 +1,18 @@
-import './globals.css'
+import "./globals.css";
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-storybook/app/page.module.css b/examples/with-storybook/app/page.module.css
index efb21d4fd0..f05fdc644d 100644
--- a/examples/with-storybook/app/page.module.css
+++ b/examples/with-storybook/app/page.module.css
@@ -98,7 +98,7 @@
 
 .center::before,
 .center::after {
-  content: '';
+  content: "";
   left: 50%;
   position: absolute;
   filter: blur(45px);
diff --git a/examples/with-storybook/app/page.tsx b/examples/with-storybook/app/page.tsx
index 274c8c5d00..f33521b84c 100644
--- a/examples/with-storybook/app/page.tsx
+++ b/examples/with-storybook/app/page.tsx
@@ -1,8 +1,8 @@
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
-import styles from './page.module.css'
+import Image from "next/image";
+import { Inter } from "next/font/google";
+import styles from "./page.module.css";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
   return (
@@ -18,7 +18,7 @@ export default function Home() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            By{' '}
+            By{" "}
             <Image
               src="/vercel.svg"
               alt="Vercel Logo"
@@ -100,5 +100,5 @@ export default function Home() {
         </a>
       </div>
     </main>
-  )
+  );
 }
diff --git a/examples/with-storybook/stories/Button.stories.ts b/examples/with-storybook/stories/Button.stories.ts
index 66a81b0b5f..e7464bb7ad 100644
--- a/examples/with-storybook/stories/Button.stories.ts
+++ b/examples/with-storybook/stories/Button.stories.ts
@@ -1,46 +1,46 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { Button } from './Button'
+import { Button } from "./Button";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof Button> = {
-  title: 'Example/Button',
+  title: "Example/Button",
   component: Button,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     backgroundColor: {
-      control: 'color',
+      control: "color",
     },
   },
-}
+};
 
-export default meta
-type Story = StoryObj<typeof Button>
+export default meta;
+type Story = StoryObj<typeof Button>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Primary: Story = {
   args: {
     primary: true,
-    label: 'Button',
+    label: "Button",
   },
-}
+};
 
 export const Secondary: Story = {
   args: {
-    label: 'Button',
+    label: "Button",
   },
-}
+};
 
 export const Large: Story = {
   args: {
-    size: 'large',
-    label: 'Button',
+    size: "large",
+    label: "Button",
   },
-}
+};
 
 export const Small: Story = {
   args: {
-    size: 'small',
-    label: 'Button',
+    size: "small",
+    label: "Button",
   },
-}
+};
diff --git a/examples/with-storybook/stories/Button.tsx b/examples/with-storybook/stories/Button.tsx
index fe9e5fbbe8..98123a3d82 100644
--- a/examples/with-storybook/stories/Button.tsx
+++ b/examples/with-storybook/stories/Button.tsx
@@ -1,27 +1,27 @@
-import React from 'react'
-import './button.css'
+import React from "react";
+import "./button.css";
 
 interface ButtonProps {
   /**
    * Is this the principal call to action on the page?
    */
-  primary?: boolean
+  primary?: boolean;
   /**
    * What background color to use
    */
-  backgroundColor?: string
+  backgroundColor?: string;
   /**
    * How large should the button be?
    */
-  size?: 'small' | 'medium' | 'large'
+  size?: "small" | "medium" | "large";
   /**
    * Button contents
    */
-  label: string
+  label: string;
   /**
    * Optional click handler
    */
-  onClick?: () => void
+  onClick?: () => void;
 }
 
 /**
@@ -29,19 +29,19 @@ interface ButtonProps {
  */
 export const Button = ({
   primary = false,
-  size = 'medium',
+  size = "medium",
   backgroundColor,
   label,
   ...props
 }: ButtonProps) => {
   const mode = primary
-    ? 'storybook-button--primary'
-    : 'storybook-button--secondary'
+    ? "storybook-button--primary"
+    : "storybook-button--secondary";
   return (
     <button
       type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(
-        ' '
+      className={["storybook-button", `storybook-button--${size}`, mode].join(
+        " ",
       )}
       {...props}
     >
@@ -52,5 +52,5 @@ export const Button = ({
         }
       `}</style>
     </button>
-  )
-}
+  );
+};
diff --git a/examples/with-storybook/stories/Header.stories.ts b/examples/with-storybook/stories/Header.stories.ts
index d7511df2c2..80a5c16d33 100644
--- a/examples/with-storybook/stories/Header.stories.ts
+++ b/examples/with-storybook/stories/Header.stories.ts
@@ -1,26 +1,26 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Header } from './Header'
+import type { Meta, StoryObj } from "@storybook/react";
+import { Header } from "./Header";
 
 const meta: Meta<typeof Header> = {
-  title: 'Example/Header',
+  title: "Example/Header",
   component: Header,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
-}
+};
 
-export default meta
-type Story = StoryObj<typeof Header>
+export default meta;
+type Story = StoryObj<typeof Header>;
 
 export const LoggedIn: Story = {
   args: {
     user: {
-      name: 'Jane Doe',
+      name: "Jane Doe",
     },
   },
-}
+};
 
-export const LoggedOut: Story = {}
+export const LoggedOut: Story = {};
diff --git a/examples/with-storybook/stories/Header.tsx b/examples/with-storybook/stories/Header.tsx
index f1b3d1c06f..2980745f25 100644
--- a/examples/with-storybook/stories/Header.tsx
+++ b/examples/with-storybook/stories/Header.tsx
@@ -1,17 +1,17 @@
-import React from 'react'
+import React from "react";
 
-import { Button } from './Button'
-import './header.css'
+import { Button } from "./Button";
+import "./header.css";
 
 type User = {
-  name: string
-}
+  name: string;
+};
 
 interface HeaderProps {
-  user?: User
-  onLogin: () => void
-  onLogout: () => void
-  onCreateAccount: () => void
+  user?: User;
+  onLogin: () => void;
+  onLogout: () => void;
+  onCreateAccount: () => void;
 }
 
 export const Header = ({
@@ -68,4 +68,4 @@ export const Header = ({
       </div>
     </div>
   </header>
-)
+);
diff --git a/examples/with-storybook/stories/Introduction.mdx b/examples/with-storybook/stories/Introduction.mdx
index 9f12022879..371cbe5842 100644
--- a/examples/with-storybook/stories/Introduction.mdx
+++ b/examples/with-storybook/stories/Introduction.mdx
@@ -1,14 +1,14 @@
-import { Meta } from '@storybook/blocks'
-import Image from 'next/image'
+import { Meta } from "@storybook/blocks";
+import Image from "next/image";
 
-import Code from './assets/code-brackets.svg'
-import Colors from './assets/colors.svg'
-import Comments from './assets/comments.svg'
-import Direction from './assets/direction.svg'
-import Flow from './assets/flow.svg'
-import Plugin from './assets/plugin.svg'
-import Repo from './assets/repo.svg'
-import StackAlt from './assets/stackalt.svg'
+import Code from "./assets/code-brackets.svg";
+import Colors from "./assets/colors.svg";
+import Comments from "./assets/comments.svg";
+import Direction from "./assets/direction.svg";
+import Flow from "./assets/flow.svg";
+import Plugin from "./assets/plugin.svg";
+import Repo from "./assets/repo.svg";
+import StackAlt from "./assets/stackalt.svg";
 
 <Meta title="Example/Introduction" />
 
@@ -234,6 +234,6 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 </div>
 
 <div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <span className="tip">Tip</span>Edit the Markdown in{" "}
   <code>stories/Introduction.mdx</code>
 </div>
diff --git a/examples/with-storybook/stories/Page.stories.ts b/examples/with-storybook/stories/Page.stories.ts
index 308c2b1197..cf37b9419c 100644
--- a/examples/with-storybook/stories/Page.stories.ts
+++ b/examples/with-storybook/stories/Page.stories.ts
@@ -1,29 +1,29 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { within, userEvent } from '@storybook/testing-library'
+import type { Meta, StoryObj } from "@storybook/react";
+import { within, userEvent } from "@storybook/testing-library";
 
-import { Page } from './Page'
+import { Page } from "./Page";
 
 const meta: Meta<typeof Page> = {
-  title: 'Example/Page',
+  title: "Example/Page",
   component: Page,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
-}
+};
 
-export default meta
-type Story = StoryObj<typeof Page>
+export default meta;
+type Story = StoryObj<typeof Page>;
 
-export const LoggedOut: Story = {}
+export const LoggedOut: Story = {};
 
 // More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const loginButton = await canvas.getByRole('button', {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole("button", {
       name: /Log in/i,
-    })
-    await userEvent.click(loginButton)
+    });
+    await userEvent.click(loginButton);
   },
-}
+};
diff --git a/examples/with-storybook/stories/Page.tsx b/examples/with-storybook/stories/Page.tsx
index 85f01f37cb..795d98b2ec 100644
--- a/examples/with-storybook/stories/Page.tsx
+++ b/examples/with-storybook/stories/Page.tsx
@@ -1,35 +1,35 @@
-import React from 'react'
+import React from "react";
 
-import { Header } from './Header'
-import './page.css'
+import { Header } from "./Header";
+import "./page.css";
 
 type User = {
-  name: string
-}
+  name: string;
+};
 
 export const Page: React.FC = () => {
-  const [user, setUser] = React.useState<User>()
+  const [user, setUser] = React.useState<User>();
 
   return (
     <article>
       <Header
         user={user}
-        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogin={() => setUser({ name: "Jane Doe" })}
         onLogout={() => setUser(undefined)}
-        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+        onCreateAccount={() => setUser({ name: "Jane Doe" })}
       />
 
       <section>
         <h2>Pages in Storybook</h2>
         <p>
-          We recommend building UIs with a{' '}
+          We recommend building UIs with a{" "}
           <a
             href="https://componentdriven.org"
             target="_blank"
             rel="noopener noreferrer"
           >
             <strong>component-driven</strong>
-          </a>{' '}
+          </a>{" "}
           process starting with atomic components and ending with pages.
         </p>
         <p>
@@ -48,7 +48,7 @@ export const Page: React.FC = () => {
           </li>
         </ul>
         <p>
-          Get a guided tutorial on component-driven development at{' '}
+          Get a guided tutorial on component-driven development at{" "}
           <a
             href="https://storybook.js.org/tutorials/"
             target="_blank"
@@ -56,7 +56,7 @@ export const Page: React.FC = () => {
           >
             Storybook tutorials
           </a>
-          . Read more in the{' '}
+          . Read more in the{" "}
           <a
             href="https://storybook.js.org/docs"
             target="_blank"
@@ -68,7 +68,7 @@ export const Page: React.FC = () => {
         </p>
         <div className="tip-wrapper">
           <span className="tip">Tip</span> Adjust the width of the canvas with
-          the{' '}
+          the{" "}
           <svg
             width="10"
             height="10"
@@ -87,5 +87,5 @@ export const Page: React.FC = () => {
         </div>
       </section>
     </article>
-  )
-}
+  );
+};
diff --git a/examples/with-storybook/stories/button.css b/examples/with-storybook/stories/button.css
index dc91dc7637..663afa404a 100644
--- a/examples/with-storybook/stories/button.css
+++ b/examples/with-storybook/stories/button.css
@@ -1,5 +1,5 @@
 .storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 700;
   border: 0;
   border-radius: 3em;
diff --git a/examples/with-storybook/stories/header.css b/examples/with-storybook/stories/header.css
index 44c549da27..c714b7cceb 100644
--- a/examples/with-storybook/stories/header.css
+++ b/examples/with-storybook/stories/header.css
@@ -1,5 +1,5 @@
 .wrapper {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
   display: flex;
diff --git a/examples/with-storybook/stories/page.css b/examples/with-storybook/stories/page.css
index fb64fe4629..435173d7bb 100644
--- a/examples/with-storybook/stories/page.css
+++ b/examples/with-storybook/stories/page.css
@@ -1,5 +1,5 @@
 section {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 24px;
   padding: 48px 20px;
diff --git a/examples/with-strict-csp/app/layout.js b/examples/with-strict-csp/app/layout.js
index 4ee00a2185..23ec8e7d9a 100644
--- a/examples/with-strict-csp/app/layout.js
+++ b/examples/with-strict-csp/app/layout.js
@@ -3,5 +3,5 @@ export default function RootLayout({ children }) {
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-strict-csp/app/page.js b/examples/with-strict-csp/app/page.js
index b9ffdd2531..7b7c710d97 100644
--- a/examples/with-strict-csp/app/page.js
+++ b/examples/with-strict-csp/app/page.js
@@ -1,8 +1,8 @@
-import { headers } from 'next/headers'
-import Script from 'next/script'
+import { headers } from "next/headers";
+import Script from "next/script";
 
 export default function Page() {
-  const nonce = headers().get('x-nonce')
+  const nonce = headers().get("x-nonce");
 
-  return <Script src="https://..." strategy="afterInteractive" nonce={nonce} />
+  return <Script src="https://..." strategy="afterInteractive" nonce={nonce} />;
 }
diff --git a/examples/with-strict-csp/middleware.js b/examples/with-strict-csp/middleware.js
index 7e60513b31..407d2f0267 100644
--- a/examples/with-strict-csp/middleware.js
+++ b/examples/with-strict-csp/middleware.js
@@ -1,7 +1,7 @@
-import { NextResponse } from 'next/server'
+import { NextResponse } from "next/server";
 
 export function middleware(request) {
-  const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
+  const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
   const cspHeader = `
     default-src 'self';
     script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
@@ -14,30 +14,30 @@ export function middleware(request) {
     frame-ancestors 'none';
     block-all-mixed-content;
     upgrade-insecure-requests;
-`
+`;
   // Replace newline characters and spaces
   const contentSecurityPolicyHeaderValue = cspHeader
-    .replace(/\s{2,}/g, ' ')
-    .trim()
+    .replace(/\s{2,}/g, " ")
+    .trim();
 
-  const requestHeaders = new Headers(request.headers)
-  requestHeaders.set('x-nonce', nonce)
+  const requestHeaders = new Headers(request.headers);
+  requestHeaders.set("x-nonce", nonce);
   requestHeaders.set(
-    'Content-Security-Policy',
-    contentSecurityPolicyHeaderValue
-  )
+    "Content-Security-Policy",
+    contentSecurityPolicyHeaderValue,
+  );
 
   const response = NextResponse.next({
     request: {
       headers: requestHeaders,
     },
-  })
+  });
   response.headers.set(
-    'Content-Security-Policy',
-    contentSecurityPolicyHeaderValue
-  )
+    "Content-Security-Policy",
+    contentSecurityPolicyHeaderValue,
+  );
 
-  return response
+  return response;
 }
 
 export const config = {
@@ -50,11 +50,11 @@ export const config = {
      * - favicon.ico (favicon file)
      */
     {
-      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
+      source: "/((?!api|_next/static|_next/image|favicon.ico).*)",
       missing: [
-        { type: 'header', key: 'next-router-prefetch' },
-        { type: 'header', key: 'purpose', value: 'prefetch' },
+        { type: "header", key: "next-router-prefetch" },
+        { type: "header", key: "purpose", value: "prefetch" },
       ],
     },
   ],
-}
+};
diff --git a/examples/with-stripe-typescript/app/actions/stripe.ts b/examples/with-stripe-typescript/app/actions/stripe.ts
index 301640b2ef..8f0955d9fa 100644
--- a/examples/with-stripe-typescript/app/actions/stripe.ts
+++ b/examples/with-stripe-typescript/app/actions/stripe.ts
@@ -1,55 +1,55 @@
-'use server'
+"use server";
 
-import type { Stripe } from 'stripe'
+import type { Stripe } from "stripe";
 
-import { redirect } from 'next/navigation'
-import { headers } from 'next/headers'
+import { redirect } from "next/navigation";
+import { headers } from "next/headers";
 
-import { CURRENCY } from '@/config'
-import { formatAmountForStripe } from '@/utils/stripe-helpers'
-import { stripe } from '@/lib/stripe'
+import { CURRENCY } from "@/config";
+import { formatAmountForStripe } from "@/utils/stripe-helpers";
+import { stripe } from "@/lib/stripe";
 
 export async function createCheckoutSession(data: FormData): Promise<void> {
   const checkoutSession: Stripe.Checkout.Session =
     await stripe.checkout.sessions.create({
-      mode: 'payment',
-      submit_type: 'donate',
+      mode: "payment",
+      submit_type: "donate",
       line_items: [
         {
           quantity: 1,
           price_data: {
             currency: CURRENCY,
             product_data: {
-              name: 'Custom amount donation',
+              name: "Custom amount donation",
             },
             unit_amount: formatAmountForStripe(
-              Number(data.get('customDonation') as string),
-              CURRENCY
+              Number(data.get("customDonation") as string),
+              CURRENCY,
             ),
           },
         },
       ],
       success_url: `${headers().get(
-        'origin'
+        "origin",
       )}/donate-with-checkout/result?session_id={CHECKOUT_SESSION_ID}`,
-      cancel_url: `${headers().get('origin')}/donate-with-checkout`,
-    })
+      cancel_url: `${headers().get("origin")}/donate-with-checkout`,
+    });
 
-  redirect(checkoutSession.url as string)
+  redirect(checkoutSession.url as string);
 }
 
 export async function createPaymentIntent(
-  data: FormData
+  data: FormData,
 ): Promise<{ client_secret: string }> {
   const paymentIntent: Stripe.PaymentIntent =
     await stripe.paymentIntents.create({
       amount: formatAmountForStripe(
-        Number(data.get('customDonation') as string),
-        CURRENCY
+        Number(data.get("customDonation") as string),
+        CURRENCY,
       ),
       automatic_payment_methods: { enabled: true },
       currency: CURRENCY,
-    })
+    });
 
-  return { client_secret: paymentIntent.client_secret as string }
+  return { client_secret: paymentIntent.client_secret as string };
 }
diff --git a/examples/with-stripe-typescript/app/api/webhooks/route.ts b/examples/with-stripe-typescript/app/api/webhooks/route.ts
index bf5199296f..d75d9f5419 100644
--- a/examples/with-stripe-typescript/app/api/webhooks/route.ts
+++ b/examples/with-stripe-typescript/app/api/webhooks/route.ts
@@ -1,66 +1,66 @@
-import type { Stripe } from 'stripe'
+import type { Stripe } from "stripe";
 
-import { NextResponse } from 'next/server'
+import { NextResponse } from "next/server";
 
-import { stripe } from '@/lib/stripe'
+import { stripe } from "@/lib/stripe";
 
 export async function POST(req: Request) {
-  let event: Stripe.Event
+  let event: Stripe.Event;
 
   try {
     event = stripe.webhooks.constructEvent(
       await (await req.blob()).text(),
-      req.headers.get('stripe-signature') as string,
-      process.env.STRIPE_WEBHOOK_SECRET as string
-    )
+      req.headers.get("stripe-signature") as string,
+      process.env.STRIPE_WEBHOOK_SECRET as string,
+    );
   } catch (err) {
-    const errorMessage = err instanceof Error ? err.message : 'Unknown error'
+    const errorMessage = err instanceof Error ? err.message : "Unknown error";
     // On error, log and return the error message.
-    if (err! instanceof Error) console.log(err)
-    console.log(`❌ Error message: ${errorMessage}`)
+    if (err! instanceof Error) console.log(err);
+    console.log(`❌ Error message: ${errorMessage}`);
     return NextResponse.json(
       { message: `Webhook Error: ${errorMessage}` },
-      { status: 400 }
-    )
+      { status: 400 },
+    );
   }
 
   // Successfully constructed event.
-  console.log('✅ Success:', event.id)
+  console.log("✅ Success:", event.id);
 
   const permittedEvents: string[] = [
-    'checkout.session.completed',
-    'payment_intent.succeeded',
-    'payment_intent.payment_failed',
-  ]
+    "checkout.session.completed",
+    "payment_intent.succeeded",
+    "payment_intent.payment_failed",
+  ];
 
   if (permittedEvents.includes(event.type)) {
-    let data
+    let data;
 
     try {
       switch (event.type) {
-        case 'checkout.session.completed':
-          data = event.data.object as Stripe.Checkout.Session
-          console.log(`💰 CheckoutSession status: ${data.payment_status}`)
-          break
-        case 'payment_intent.payment_failed':
-          data = event.data.object as Stripe.PaymentIntent
-          console.log(`❌ Payment failed: ${data.last_payment_error?.message}`)
-          break
-        case 'payment_intent.succeeded':
-          data = event.data.object as Stripe.PaymentIntent
-          console.log(`💰 PaymentIntent status: ${data.status}`)
-          break
+        case "checkout.session.completed":
+          data = event.data.object as Stripe.Checkout.Session;
+          console.log(`💰 CheckoutSession status: ${data.payment_status}`);
+          break;
+        case "payment_intent.payment_failed":
+          data = event.data.object as Stripe.PaymentIntent;
+          console.log(`❌ Payment failed: ${data.last_payment_error?.message}`);
+          break;
+        case "payment_intent.succeeded":
+          data = event.data.object as Stripe.PaymentIntent;
+          console.log(`💰 PaymentIntent status: ${data.status}`);
+          break;
         default:
-          throw new Error(`Unhandled event: ${event.type}`)
+          throw new Error(`Unhandled event: ${event.type}`);
       }
     } catch (error) {
-      console.log(error)
+      console.log(error);
       return NextResponse.json(
-        { message: 'Webhook handler failed' },
-        { status: 500 }
-      )
+        { message: "Webhook handler failed" },
+        { status: 500 },
+      );
     }
   }
   // Return a response to acknowledge receipt of the event.
-  return NextResponse.json({ message: 'Received' }, { status: 200 })
+  return NextResponse.json({ message: "Received" }, { status: 200 });
 }
diff --git a/examples/with-stripe-typescript/app/components/CheckoutForm.tsx b/examples/with-stripe-typescript/app/components/CheckoutForm.tsx
index 17b3d3c5d6..e459461416 100644
--- a/examples/with-stripe-typescript/app/components/CheckoutForm.tsx
+++ b/examples/with-stripe-typescript/app/components/CheckoutForm.tsx
@@ -1,27 +1,27 @@
-'use client'
+"use client";
 
-import React, { useState } from 'react'
+import React, { useState } from "react";
 
-import CustomDonationInput from '@/components/CustomDonationInput'
-import StripeTestCards from '@/components/StripeTestCards'
+import CustomDonationInput from "@/components/CustomDonationInput";
+import StripeTestCards from "@/components/StripeTestCards";
 
-import { formatAmountForDisplay } from '@/utils/stripe-helpers'
-import * as config from '@/config'
-import { createCheckoutSession } from '@/actions/stripe'
+import { formatAmountForDisplay } from "@/utils/stripe-helpers";
+import * as config from "@/config";
+import { createCheckoutSession } from "@/actions/stripe";
 
 export default function CheckoutForm(): JSX.Element {
-  const [loading] = useState<boolean>(false)
+  const [loading] = useState<boolean>(false);
   const [input, setInput] = useState<{ customDonation: number }>({
     customDonation: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
-  })
+  });
 
   const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (
-    e
+    e,
   ): void =>
     setInput({
       ...input,
       [e.currentTarget.name]: e.currentTarget.value,
-    })
+    });
 
   return (
     <form action={createCheckoutSession}>
@@ -44,5 +44,5 @@ export default function CheckoutForm(): JSX.Element {
         Donate {formatAmountForDisplay(input.customDonation, config.CURRENCY)}
       </button>
     </form>
-  )
+  );
 }
diff --git a/examples/with-stripe-typescript/app/components/CustomDonationInput.tsx b/examples/with-stripe-typescript/app/components/CustomDonationInput.tsx
index ee1826a01a..b3da695af5 100644
--- a/examples/with-stripe-typescript/app/components/CustomDonationInput.tsx
+++ b/examples/with-stripe-typescript/app/components/CustomDonationInput.tsx
@@ -1,4 +1,4 @@
-import { formatAmountForDisplay } from '@/utils/stripe-helpers'
+import { formatAmountForDisplay } from "@/utils/stripe-helpers";
 
 export default function CustomDonationInput({
   name,
@@ -10,14 +10,14 @@ export default function CustomDonationInput({
   value,
   className,
 }: {
-  name: string
-  min: number
-  max: number
-  currency: string
-  step: number
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
-  value: number
-  className?: string
+  name: string;
+  min: number;
+  max: number;
+  currency: string;
+  step: number;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  value: number;
+  className?: string;
 }): JSX.Element {
   return (
     <label>
@@ -34,5 +34,5 @@ export default function CustomDonationInput({
         className={className}
       ></input>
     </label>
-  )
+  );
 }
diff --git a/examples/with-stripe-typescript/app/components/ElementsForm.tsx b/examples/with-stripe-typescript/app/components/ElementsForm.tsx
index a523e70b52..07c89b9702 100644
--- a/examples/with-stripe-typescript/app/components/ElementsForm.tsx
+++ b/examples/with-stripe-typescript/app/components/ElementsForm.tsx
@@ -1,97 +1,97 @@
-'use client'
+"use client";
 
-import type { StripeError } from '@stripe/stripe-js'
+import type { StripeError } from "@stripe/stripe-js";
 
-import * as React from 'react'
+import * as React from "react";
 import {
   useStripe,
   useElements,
   PaymentElement,
   Elements,
-} from '@stripe/react-stripe-js'
+} from "@stripe/react-stripe-js";
 
-import CustomDonationInput from './CustomDonationInput'
-import StripeTestCards from './StripeTestCards'
+import CustomDonationInput from "./CustomDonationInput";
+import StripeTestCards from "./StripeTestCards";
 
-import { formatAmountForDisplay } from '@/utils/stripe-helpers'
-import * as config from '@/config'
-import getStripe from '@/utils/get-stripejs'
-import { createPaymentIntent } from '@/actions/stripe'
+import { formatAmountForDisplay } from "@/utils/stripe-helpers";
+import * as config from "@/config";
+import getStripe from "@/utils/get-stripejs";
+import { createPaymentIntent } from "@/actions/stripe";
 
 function CheckoutForm(): JSX.Element {
   const [input, setInput] = React.useState<{
-    customDonation: number
-    cardholderName: string
+    customDonation: number;
+    cardholderName: string;
   }>({
     customDonation: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
-    cardholderName: '',
-  })
-  const [paymentType, setPaymentType] = React.useState<string>('')
+    cardholderName: "",
+  });
+  const [paymentType, setPaymentType] = React.useState<string>("");
   const [payment, setPayment] = React.useState<{
-    status: 'initial' | 'processing' | 'error'
-  }>({ status: 'initial' })
-  const [errorMessage, setErrorMessage] = React.useState<string>('')
+    status: "initial" | "processing" | "error";
+  }>({ status: "initial" });
+  const [errorMessage, setErrorMessage] = React.useState<string>("");
 
-  const stripe = useStripe()
-  const elements = useElements()
+  const stripe = useStripe();
+  const elements = useElements();
 
   const PaymentStatus = ({ status }: { status: string }) => {
     switch (status) {
-      case 'processing':
-      case 'requires_payment_method':
-      case 'requires_confirmation':
-        return <h2>Processing...</h2>
+      case "processing":
+      case "requires_payment_method":
+      case "requires_confirmation":
+        return <h2>Processing...</h2>;
 
-      case 'requires_action':
-        return <h2>Authenticating...</h2>
+      case "requires_action":
+        return <h2>Authenticating...</h2>;
 
-      case 'succeeded':
-        return <h2>Payment Succeeded 🥳</h2>
+      case "succeeded":
+        return <h2>Payment Succeeded 🥳</h2>;
 
-      case 'error':
+      case "error":
         return (
           <>
             <h2>Error 😭</h2>
             <p className="error-message">{errorMessage}</p>
           </>
-        )
+        );
 
       default:
-        return null
+        return null;
     }
-  }
+  };
 
   const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
     setInput({
       ...input,
       [e.currentTarget.name]: e.currentTarget.value,
-    })
+    });
 
-    elements?.update({ amount: input.customDonation * 100 })
-  }
+    elements?.update({ amount: input.customDonation * 100 });
+  };
 
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
     try {
-      e.preventDefault()
+      e.preventDefault();
       // Abort if form isn't valid
-      if (!e.currentTarget.reportValidity()) return
-      if (!elements || !stripe) return
+      if (!e.currentTarget.reportValidity()) return;
+      if (!elements || !stripe) return;
 
-      setPayment({ status: 'processing' })
+      setPayment({ status: "processing" });
 
-      const { error: submitError } = await elements.submit()
+      const { error: submitError } = await elements.submit();
 
       if (submitError) {
-        setPayment({ status: 'error' })
-        setErrorMessage(submitError.message ?? 'An unknown error occurred')
+        setPayment({ status: "error" });
+        setErrorMessage(submitError.message ?? "An unknown error occurred");
 
-        return
+        return;
       }
 
       // Create a PaymentIntent with the specified amount.
       const { client_secret: clientSecret } = await createPaymentIntent(
-        new FormData(e.target as HTMLFormElement)
-      )
+        new FormData(e.target as HTMLFormElement),
+      );
 
       // Use your card Element with other Stripe.js APIs
       const { error: confirmError } = await stripe!.confirmPayment({
@@ -105,19 +105,19 @@ function CheckoutForm(): JSX.Element {
             },
           },
         },
-      })
+      });
 
       if (confirmError) {
-        setPayment({ status: 'error' })
-        setErrorMessage(confirmError.message ?? 'An unknown error occurred')
+        setPayment({ status: "error" });
+        setErrorMessage(confirmError.message ?? "An unknown error occurred");
       }
     } catch (err) {
-      const { message } = err as StripeError
+      const { message } = err as StripeError;
 
-      setPayment({ status: 'error' })
-      setErrorMessage(message ?? 'An unknown error occurred')
+      setPayment({ status: "error" });
+      setErrorMessage(message ?? "An unknown error occurred");
     }
-  }
+  };
 
   return (
     <>
@@ -135,7 +135,7 @@ function CheckoutForm(): JSX.Element {
         <StripeTestCards />
         <fieldset className="elements-style">
           <legend>Your payment details:</legend>
-          {paymentType === 'card' ? (
+          {paymentType === "card" ? (
             <input
               placeholder="Cardholder name"
               className="elements-style"
@@ -148,7 +148,7 @@ function CheckoutForm(): JSX.Element {
           <div className="FormRow elements-style">
             <PaymentElement
               onChange={(e) => {
-                setPaymentType(e.value.type)
+                setPaymentType(e.value.type);
               }}
             />
           </div>
@@ -157,7 +157,7 @@ function CheckoutForm(): JSX.Element {
           className="elements-style-background"
           type="submit"
           disabled={
-            !['initial', 'succeeded', 'error'].includes(payment.status) ||
+            !["initial", "succeeded", "error"].includes(payment.status) ||
             !stripe
           }
         >
@@ -166,7 +166,7 @@ function CheckoutForm(): JSX.Element {
       </form>
       <PaymentStatus status={payment.status} />
     </>
-  )
+  );
 }
 
 export default function ElementsForm(): JSX.Element {
@@ -176,16 +176,16 @@ export default function ElementsForm(): JSX.Element {
       options={{
         appearance: {
           variables: {
-            colorIcon: '#6772e5',
-            fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
+            colorIcon: "#6772e5",
+            fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
           },
         },
         currency: config.CURRENCY,
-        mode: 'payment',
+        mode: "payment",
         amount: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
       }}
     >
       <CheckoutForm />
     </Elements>
-  )
+  );
 }
diff --git a/examples/with-stripe-typescript/app/components/PrintObject.tsx b/examples/with-stripe-typescript/app/components/PrintObject.tsx
index c174d08d22..3b29603273 100644
--- a/examples/with-stripe-typescript/app/components/PrintObject.tsx
+++ b/examples/with-stripe-typescript/app/components/PrintObject.tsx
@@ -1,10 +1,10 @@
-import type { Stripe } from 'stripe'
+import type { Stripe } from "stripe";
 
 export default function PrintObject({
   content,
 }: {
-  content: Stripe.PaymentIntent | Stripe.Checkout.Session
+  content: Stripe.PaymentIntent | Stripe.Checkout.Session;
 }): JSX.Element {
-  const formattedContent: string = JSON.stringify(content, null, 2)
-  return <pre>{formattedContent}</pre>
+  const formattedContent: string = JSON.stringify(content, null, 2);
+  return <pre>{formattedContent}</pre>;
 }
diff --git a/examples/with-stripe-typescript/app/components/StripeTestCards.tsx b/examples/with-stripe-typescript/app/components/StripeTestCards.tsx
index d186d54b59..f91eeb3bdc 100644
--- a/examples/with-stripe-typescript/app/components/StripeTestCards.tsx
+++ b/examples/with-stripe-typescript/app/components/StripeTestCards.tsx
@@ -1,19 +1,19 @@
 export default function StripeTestCards(): JSX.Element {
   return (
     <div className="test-card-notice">
-      Use any of the{' '}
+      Use any of the{" "}
       <a
         href="https://stripe.com/docs/testing#cards"
         target="_blank"
         rel="noopener noreferrer"
       >
         Stripe test cards
-      </a>{' '}
-      for this demo, e.g.{' '}
+      </a>{" "}
+      for this demo, e.g.{" "}
       <div className="card-number">
         4242<span></span>4242<span></span>4242<span></span>4242
       </div>
       .
     </div>
-  )
+  );
 }
diff --git a/examples/with-stripe-typescript/app/donate-with-checkout/page.tsx b/examples/with-stripe-typescript/app/donate-with-checkout/page.tsx
index 8fe0d1e366..312dbbbf20 100644
--- a/examples/with-stripe-typescript/app/donate-with-checkout/page.tsx
+++ b/examples/with-stripe-typescript/app/donate-with-checkout/page.tsx
@@ -1,10 +1,10 @@
-import type { Metadata } from 'next'
+import type { Metadata } from "next";
 
-import CheckoutForm from '@/components/CheckoutForm'
+import CheckoutForm from "@/components/CheckoutForm";
 
 export const metadata: Metadata = {
-  title: 'Donate with Checkout | Next.js + TypeScript Example',
-}
+  title: "Donate with Checkout | Next.js + TypeScript Example",
+};
 
 export default function DonatePage(): JSX.Element {
   return (
@@ -13,5 +13,5 @@ export default function DonatePage(): JSX.Element {
       <p>Donate to our project 💖</p>
       <CheckoutForm />
     </div>
-  )
+  );
 }
diff --git a/examples/with-stripe-typescript/app/donate-with-checkout/result/error.tsx b/examples/with-stripe-typescript/app/donate-with-checkout/result/error.tsx
index 7ee179cebb..0d7fd41bd3 100644
--- a/examples/with-stripe-typescript/app/donate-with-checkout/result/error.tsx
+++ b/examples/with-stripe-typescript/app/donate-with-checkout/result/error.tsx
@@ -1,5 +1,5 @@
-'use client'
+"use client";
 
 export default function Error({ error }: { error: Error }) {
-  return <h2>{error.message}</h2>
+  return <h2>{error.message}</h2>;
 }
diff --git a/examples/with-stripe-typescript/app/donate-with-checkout/result/layout.tsx b/examples/with-stripe-typescript/app/donate-with-checkout/result/layout.tsx
index eff06f91af..1c6c096c03 100644
--- a/examples/with-stripe-typescript/app/donate-with-checkout/result/layout.tsx
+++ b/examples/with-stripe-typescript/app/donate-with-checkout/result/layout.tsx
@@ -1,18 +1,18 @@
-import type { Metadata } from 'next'
+import type { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Checkout Session Result',
-}
+  title: "Checkout Session Result",
+};
 
 export default function ResultLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }): JSX.Element {
   return (
     <div className="page-container">
       <h1>Checkout Session Result</h1>
       {children}
     </div>
-  )
+  );
 }
diff --git a/examples/with-stripe-typescript/app/donate-with-checkout/result/page.tsx b/examples/with-stripe-typescript/app/donate-with-checkout/result/page.tsx
index 516d72a2e9..fc360bc778 100644
--- a/examples/with-stripe-typescript/app/donate-with-checkout/result/page.tsx
+++ b/examples/with-stripe-typescript/app/donate-with-checkout/result/page.tsx
@@ -1,22 +1,22 @@
-import type { Stripe } from 'stripe'
+import type { Stripe } from "stripe";
 
-import PrintObject from '@/components/PrintObject'
-import { stripe } from '@/lib/stripe'
+import PrintObject from "@/components/PrintObject";
+import { stripe } from "@/lib/stripe";
 
 export default async function ResultPage({
   searchParams,
 }: {
-  searchParams: { session_id: string }
+  searchParams: { session_id: string };
 }): Promise<JSX.Element> {
   if (!searchParams.session_id)
-    throw new Error('Please provide a valid session_id (`cs_test_...`)')
+    throw new Error("Please provide a valid session_id (`cs_test_...`)");
 
   const checkoutSession: Stripe.Checkout.Session =
     await stripe.checkout.sessions.retrieve(searchParams.session_id, {
-      expand: ['line_items', 'payment_intent'],
-    })
+      expand: ["line_items", "payment_intent"],
+    });
 
-  const paymentIntent = checkoutSession.payment_intent as Stripe.PaymentIntent
+  const paymentIntent = checkoutSession.payment_intent as Stripe.PaymentIntent;
 
   return (
     <>
@@ -24,5 +24,5 @@ export default async function ResultPage({
       <h3>Checkout Session response:</h3>
       <PrintObject content={checkoutSession} />
     </>
-  )
+  );
 }
diff --git a/examples/with-stripe-typescript/app/donate-with-elements/page.tsx b/examples/with-stripe-typescript/app/donate-with-elements/page.tsx
index f9bb85e266..e59bceadb9 100644
--- a/examples/with-stripe-typescript/app/donate-with-elements/page.tsx
+++ b/examples/with-stripe-typescript/app/donate-with-elements/page.tsx
@@ -1,15 +1,15 @@
-import type { Metadata } from 'next'
+import type { Metadata } from "next";
 
-import ElementsForm from '@/components/ElementsForm'
+import ElementsForm from "@/components/ElementsForm";
 
 export const metadata: Metadata = {
-  title: 'Donate with Elements',
-}
+  title: "Donate with Elements",
+};
 
 export default function PaymentElementPage({
   searchParams,
 }: {
-  searchParams?: { payment_intent_client_secret?: string }
+  searchParams?: { payment_intent_client_secret?: string };
 }): JSX.Element {
   return (
     <div className="page-container">
@@ -17,5 +17,5 @@ export default function PaymentElementPage({
       <p>Donate to our project 💖</p>
       <ElementsForm />
     </div>
-  )
+  );
 }
diff --git a/examples/with-stripe-typescript/app/donate-with-elements/result/error.tsx b/examples/with-stripe-typescript/app/donate-with-elements/result/error.tsx
index 7ee179cebb..0d7fd41bd3 100644
--- a/examples/with-stripe-typescript/app/donate-with-elements/result/error.tsx
+++ b/examples/with-stripe-typescript/app/donate-with-elements/result/error.tsx
@@ -1,5 +1,5 @@
-'use client'
+"use client";
 
 export default function Error({ error }: { error: Error }) {
-  return <h2>{error.message}</h2>
+  return <h2>{error.message}</h2>;
 }
diff --git a/examples/with-stripe-typescript/app/donate-with-elements/result/layout.tsx b/examples/with-stripe-typescript/app/donate-with-elements/result/layout.tsx
index 9364186c12..0dd3a9f4db 100644
--- a/examples/with-stripe-typescript/app/donate-with-elements/result/layout.tsx
+++ b/examples/with-stripe-typescript/app/donate-with-elements/result/layout.tsx
@@ -1,18 +1,18 @@
-import type { Metadata } from 'next'
+import type { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Payment Intent Result',
-}
+  title: "Payment Intent Result",
+};
 
 export default function ResultLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }): JSX.Element {
   return (
     <div className="page-container">
       <h1>Payment Intent Result</h1>
       {children}
     </div>
-  )
+  );
 }
diff --git a/examples/with-stripe-typescript/app/donate-with-elements/result/page.tsx b/examples/with-stripe-typescript/app/donate-with-elements/result/page.tsx
index bba462b99d..b03897d4cb 100644
--- a/examples/with-stripe-typescript/app/donate-with-elements/result/page.tsx
+++ b/examples/with-stripe-typescript/app/donate-with-elements/result/page.tsx
@@ -1,18 +1,18 @@
-import type { Stripe } from 'stripe'
+import type { Stripe } from "stripe";
 
-import PrintObject from '@/components/PrintObject'
-import { stripe } from '@/lib/stripe'
+import PrintObject from "@/components/PrintObject";
+import { stripe } from "@/lib/stripe";
 
 export default async function ResultPage({
   searchParams,
 }: {
-  searchParams: { payment_intent: string }
+  searchParams: { payment_intent: string };
 }): Promise<JSX.Element> {
   if (!searchParams.payment_intent)
-    throw new Error('Please provide a valid payment_intent (`pi_...`)')
+    throw new Error("Please provide a valid payment_intent (`pi_...`)");
 
   const paymentIntent: Stripe.PaymentIntent =
-    await stripe.paymentIntents.retrieve(searchParams.payment_intent)
+    await stripe.paymentIntents.retrieve(searchParams.payment_intent);
 
   return (
     <>
@@ -20,5 +20,5 @@ export default async function ResultPage({
       <h3>Payment Intent response:</h3>
       <PrintObject content={paymentIntent} />
     </>
-  )
+  );
 }
diff --git a/examples/with-stripe-typescript/app/layout.tsx b/examples/with-stripe-typescript/app/layout.tsx
index 778890dd1b..9b1da3aaeb 100644
--- a/examples/with-stripe-typescript/app/layout.tsx
+++ b/examples/with-stripe-typescript/app/layout.tsx
@@ -1,31 +1,31 @@
-import type { Metadata } from 'next'
+import type { Metadata } from "next";
 
-import Link from 'next/link'
+import Link from "next/link";
 
-import '../styles.css'
+import "../styles.css";
 
 interface LayoutProps {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 export const metadata: Metadata = {
   title: {
-    default: 'TypeScript Next.js Stripe Example',
-    template: '%s | Next.js + TypeScript Example',
+    default: "TypeScript Next.js Stripe Example",
+    template: "%s | Next.js + TypeScript Example",
   },
   twitter: {
-    card: 'summary_large_image',
+    card: "summary_large_image",
     description:
-      'Full-stack TypeScript example using Next.js, react-stripe-js, and stripe-node.',
+      "Full-stack TypeScript example using Next.js, react-stripe-js, and stripe-node.",
     images: [
       {
-        url: 'https://nextjs-typescript-react-stripe-js.vercel.app/social_card.png',
+        url: "https://nextjs-typescript-react-stripe-js.vercel.app/social_card.png",
       },
     ],
-    site: '@StripeDev',
-    title: 'TypeScript Next.js Stripe Example',
+    site: "@StripeDev",
+    title: "TypeScript Next.js Stripe Example",
   },
-}
+};
 
 export default function RootLayout({ children }: LayoutProps) {
   return (
@@ -48,7 +48,7 @@ export default function RootLayout({ children }: LayoutProps) {
         </div>
         <div className="banner">
           <span>
-            This is a{' '}
+            This is a{" "}
             <a
               href="https://github.com/stripe-samples"
               target="_blank"
@@ -56,7 +56,7 @@ export default function RootLayout({ children }: LayoutProps) {
             >
               Stripe Sample
             </a>
-            .{' View code on '}
+            .{" View code on "}
             <a
               href="https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript"
               target="_blank"
@@ -69,5 +69,5 @@ export default function RootLayout({ children }: LayoutProps) {
         </div>
       </body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-stripe-typescript/app/page.tsx b/examples/with-stripe-typescript/app/page.tsx
index d25cfda24f..f9335b3c83 100644
--- a/examples/with-stripe-typescript/app/page.tsx
+++ b/examples/with-stripe-typescript/app/page.tsx
@@ -1,10 +1,10 @@
-import type { Metadata } from 'next'
+import type { Metadata } from "next";
 
-import Link from 'next/link'
+import Link from "next/link";
 
 export const metadata: Metadata = {
-  title: 'Home | Next.js + TypeScript Example',
-}
+  title: "Home | Next.js + TypeScript Example",
+};
 
 export default function IndexPage(): JSX.Element {
   return (
@@ -28,5 +28,5 @@ export default function IndexPage(): JSX.Element {
         </Link>
       </li>
     </ul>
-  )
+  );
 }
diff --git a/examples/with-stripe-typescript/config/index.ts b/examples/with-stripe-typescript/config/index.ts
index b36aaf9098..8fd24292b8 100644
--- a/examples/with-stripe-typescript/config/index.ts
+++ b/examples/with-stripe-typescript/config/index.ts
@@ -1,6 +1,6 @@
-export const CURRENCY = 'usd'
+export const CURRENCY = "usd";
 // Set your amount limits: Use float for decimal currencies and
 // Integer for zero-decimal currencies: https://stripe.com/docs/currencies#zero-decimal.
-export const MIN_AMOUNT = 10.0
-export const MAX_AMOUNT = 5000.0
-export const AMOUNT_STEP = 5.0
+export const MIN_AMOUNT = 10.0;
+export const MAX_AMOUNT = 5000.0;
+export const AMOUNT_STEP = 5.0;
diff --git a/examples/with-stripe-typescript/lib/stripe.ts b/examples/with-stripe-typescript/lib/stripe.ts
index 8a3b07b7cd..093ebfc941 100644
--- a/examples/with-stripe-typescript/lib/stripe.ts
+++ b/examples/with-stripe-typescript/lib/stripe.ts
@@ -1,12 +1,12 @@
-import 'server-only'
+import "server-only";
 
-import Stripe from 'stripe'
+import Stripe from "stripe";
 
 export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
   // https://github.com/stripe/stripe-node#configuration
-  apiVersion: '2022-11-15',
+  apiVersion: "2022-11-15",
   appInfo: {
-    name: 'nextjs-with-stripe-typescript-demo',
-    url: 'https://nextjs-with-stripe-typescript-demo.vercel.app',
+    name: "nextjs-with-stripe-typescript-demo",
+    url: "https://nextjs-with-stripe-typescript-demo.vercel.app",
   },
-})
+});
diff --git a/examples/with-stripe-typescript/next.config.js b/examples/with-stripe-typescript/next.config.js
index 4ba52ba2c8..f053ebf797 100644
--- a/examples/with-stripe-typescript/next.config.js
+++ b/examples/with-stripe-typescript/next.config.js
@@ -1 +1 @@
-module.exports = {}
+module.exports = {};
diff --git a/examples/with-stripe-typescript/styles.css b/examples/with-stripe-typescript/styles.css
index 9af625c909..44b6c7be4f 100644
--- a/examples/with-stripe-typescript/styles.css
+++ b/examples/with-stripe-typescript/styles.css
@@ -3,7 +3,7 @@
   --body-color: #fcfdfe;
   --checkout-color: #8f6ed5;
   --elements-color: #6772e5;
-  --body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+  --body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     sans-serif;
   --h1-color: #1a1f36;
   --h2-color: #7b818a;
@@ -137,8 +137,8 @@ li {
 
 .FormRow,
 fieldset,
-input[type='number'],
-input[type='text'] {
+input[type="number"],
+input[type="text"] {
   border-radius: var(--radius);
   padding: 5px 12px;
   width: 100%;
@@ -148,7 +148,7 @@ input[type='text'] {
   margin-top: 10px;
 }
 
-input[type='range'] {
+input[type="range"] {
   margin: 5px 0;
   width: 100%;
 }
@@ -217,7 +217,7 @@ button:disabled {
 /* Code block */
 code,
 pre {
-  font-family: 'SF Mono', 'IBM Plex Mono', 'Menlo', monospace;
+  font-family: "SF Mono", "IBM Plex Mono", "Menlo", monospace;
   font-size: 12px;
   background: rgba(0, 0, 0, 0.03);
   padding: 12px;
diff --git a/examples/with-stripe-typescript/utils/get-stripejs.ts b/examples/with-stripe-typescript/utils/get-stripejs.ts
index 0cf75f2993..d4046fbf5b 100644
--- a/examples/with-stripe-typescript/utils/get-stripejs.ts
+++ b/examples/with-stripe-typescript/utils/get-stripejs.ts
@@ -1,15 +1,15 @@
 /**
  * This is a singleton to ensure we only instantiate Stripe once.
  */
-import { Stripe, loadStripe } from '@stripe/stripe-js'
+import { Stripe, loadStripe } from "@stripe/stripe-js";
 
-let stripePromise: Promise<Stripe | null>
+let stripePromise: Promise<Stripe | null>;
 
 export default function getStripe(): Promise<Stripe | null> {
   if (!stripePromise)
     stripePromise = loadStripe(
-      process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY as string
-    )
+      process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY as string,
+    );
 
-  return stripePromise
+  return stripePromise;
 }
diff --git a/examples/with-stripe-typescript/utils/stripe-helpers.ts b/examples/with-stripe-typescript/utils/stripe-helpers.ts
index 06c46e6974..77bb40256b 100644
--- a/examples/with-stripe-typescript/utils/stripe-helpers.ts
+++ b/examples/with-stripe-typescript/utils/stripe-helpers.ts
@@ -1,30 +1,30 @@
 export function formatAmountForDisplay(
   amount: number,
-  currency: string
+  currency: string,
 ): string {
-  let numberFormat = new Intl.NumberFormat(['en-US'], {
-    style: 'currency',
+  let numberFormat = new Intl.NumberFormat(["en-US"], {
+    style: "currency",
     currency: currency,
-    currencyDisplay: 'symbol',
-  })
-  return numberFormat.format(amount)
+    currencyDisplay: "symbol",
+  });
+  return numberFormat.format(amount);
 }
 
 export function formatAmountForStripe(
   amount: number,
-  currency: string
+  currency: string,
 ): number {
-  let numberFormat = new Intl.NumberFormat(['en-US'], {
-    style: 'currency',
+  let numberFormat = new Intl.NumberFormat(["en-US"], {
+    style: "currency",
     currency: currency,
-    currencyDisplay: 'symbol',
-  })
-  const parts = numberFormat.formatToParts(amount)
-  let zeroDecimalCurrency: boolean = true
+    currencyDisplay: "symbol",
+  });
+  const parts = numberFormat.formatToParts(amount);
+  let zeroDecimalCurrency: boolean = true;
   for (let part of parts) {
-    if (part.type === 'decimal') {
-      zeroDecimalCurrency = false
+    if (part.type === "decimal") {
+      zeroDecimalCurrency = false;
     }
   }
-  return zeroDecimalCurrency ? amount : Math.round(amount * 100)
+  return zeroDecimalCurrency ? amount : Math.round(amount * 100);
 }
diff --git a/examples/with-styled-components-babel/pages/_app.tsx b/examples/with-styled-components-babel/pages/_app.tsx
index 0f4c9ce68e..07ea1d8641 100644
--- a/examples/with-styled-components-babel/pages/_app.tsx
+++ b/examples/with-styled-components-babel/pages/_app.tsx
@@ -1,5 +1,5 @@
-import type { AppProps } from 'next/app'
-import { createGlobalStyle, ThemeProvider } from 'styled-components'
+import type { AppProps } from "next/app";
+import { createGlobalStyle, ThemeProvider } from "styled-components";
 
 const GlobalStyle = createGlobalStyle`
   body {
@@ -7,19 +7,19 @@ const GlobalStyle = createGlobalStyle`
     padding: 0;
     box-sizing: border-box;
   }
-`
+`;
 
 interface ThemeInterface {
   colors: {
-    primary: string
-  }
+    primary: string;
+  };
 }
 
 const theme: ThemeInterface = {
   colors: {
-    primary: '#0070f3',
+    primary: "#0070f3",
   },
-}
+};
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
@@ -29,5 +29,5 @@ export default function App({ Component, pageProps }: AppProps) {
         <Component {...pageProps} />
       </ThemeProvider>
     </>
-  )
+  );
 }
diff --git a/examples/with-styled-components-babel/pages/_document.tsx b/examples/with-styled-components-babel/pages/_document.tsx
index df7e8787e3..df400c0e20 100644
--- a/examples/with-styled-components-babel/pages/_document.tsx
+++ b/examples/with-styled-components-babel/pages/_document.tsx
@@ -1,22 +1,22 @@
-import type { DocumentContext, DocumentInitialProps } from 'next/document'
-import Document from 'next/document'
-import { ServerStyleSheet } from 'styled-components'
+import type { DocumentContext, DocumentInitialProps } from "next/document";
+import Document from "next/document";
+import { ServerStyleSheet } from "styled-components";
 
 export default class MyDocument extends Document {
   static async getInitialProps(
-    ctx: DocumentContext
+    ctx: DocumentContext,
   ): Promise<DocumentInitialProps> {
-    const sheet = new ServerStyleSheet()
-    const originalRenderPage = ctx.renderPage
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
 
     try {
       ctx.renderPage = () =>
         originalRenderPage({
           enhanceApp: (App) => (props) =>
             sheet.collectStyles(<App {...props} />),
-        })
+        });
 
-      const initialProps = await Document.getInitialProps(ctx)
+      const initialProps = await Document.getInitialProps(ctx);
       return {
         ...initialProps,
         styles: (
@@ -25,9 +25,9 @@ export default class MyDocument extends Document {
             {sheet.getStyleElement()}
           </>
         ),
-      }
+      };
     } finally {
-      sheet.seal()
+      sheet.seal();
     }
   }
 }
diff --git a/examples/with-styled-components-babel/pages/index.tsx b/examples/with-styled-components-babel/pages/index.tsx
index 8d1e94ba01..2c46b7dc7a 100644
--- a/examples/with-styled-components-babel/pages/index.tsx
+++ b/examples/with-styled-components-babel/pages/index.tsx
@@ -1,10 +1,10 @@
-import styled from 'styled-components'
+import styled from "styled-components";
 
 const Title = styled.h1`
   font-size: 50px;
   color: ${({ theme }) => theme.colors.primary};
-`
+`;
 
 export default function Home() {
-  return <Title>My page</Title>
+  return <Title>My page</Title>;
 }
diff --git a/examples/with-styled-components-rtl/next.config.js b/examples/with-styled-components-rtl/next.config.js
index 607df2bf2a..7b09dd40f7 100644
--- a/examples/with-styled-components-rtl/next.config.js
+++ b/examples/with-styled-components-rtl/next.config.js
@@ -3,6 +3,6 @@ const nextConfig = {
   compiler: {
     styledComponents: true,
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-styled-components-rtl/pages/_app.tsx b/examples/with-styled-components-rtl/pages/_app.tsx
index ef288d4717..cc7491ae2c 100644
--- a/examples/with-styled-components-rtl/pages/_app.tsx
+++ b/examples/with-styled-components-rtl/pages/_app.tsx
@@ -1,17 +1,17 @@
-import type { AppProps } from 'next/app'
-import type { DefaultTheme } from 'styled-components'
-import { ThemeProvider } from 'styled-components'
+import type { AppProps } from "next/app";
+import type { DefaultTheme } from "styled-components";
+import { ThemeProvider } from "styled-components";
 
 const theme: DefaultTheme = {
   colors: {
-    primary: '#0070f3',
+    primary: "#0070f3",
   },
-}
+};
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider theme={theme}>
       <Component {...pageProps} />
     </ThemeProvider>
-  )
+  );
 }
diff --git a/examples/with-styled-components-rtl/pages/_document.tsx b/examples/with-styled-components-rtl/pages/_document.tsx
index b9c39f493b..57c7e22fc7 100644
--- a/examples/with-styled-components-rtl/pages/_document.tsx
+++ b/examples/with-styled-components-rtl/pages/_document.tsx
@@ -1,14 +1,14 @@
-import type { DocumentContext, DocumentInitialProps } from 'next/document'
-import Document from 'next/document'
-import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
-import stylisRTLPlugin from 'stylis-plugin-rtl'
+import type { DocumentContext, DocumentInitialProps } from "next/document";
+import Document from "next/document";
+import { ServerStyleSheet, StyleSheetManager } from "styled-components";
+import stylisRTLPlugin from "stylis-plugin-rtl";
 
 export default class MyDocument extends Document {
   static async getInitialProps(
-    ctx: DocumentContext
+    ctx: DocumentContext,
   ): Promise<DocumentInitialProps> {
-    const sheet = new ServerStyleSheet()
-    const originalRenderPage = ctx.renderPage
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
 
     try {
       ctx.renderPage = () =>
@@ -17,17 +17,17 @@ export default class MyDocument extends Document {
             sheet.collectStyles(
               <StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
                 <App {...props} />
-              </StyleSheetManager>
+              </StyleSheetManager>,
             ),
-        })
+        });
 
-      const initialProps = await Document.getInitialProps(ctx)
+      const initialProps = await Document.getInitialProps(ctx);
       return {
         ...initialProps,
         styles: [initialProps.styles, sheet.getStyleElement()],
-      }
+      };
     } finally {
-      sheet.seal()
+      sheet.seal();
     }
   }
 }
diff --git a/examples/with-styled-components-rtl/pages/index.tsx b/examples/with-styled-components-rtl/pages/index.tsx
index 770a9e9fb0..15de3917c9 100644
--- a/examples/with-styled-components-rtl/pages/index.tsx
+++ b/examples/with-styled-components-rtl/pages/index.tsx
@@ -1,11 +1,11 @@
-import styled from 'styled-components'
+import styled from "styled-components";
 
 const Title = styled.h1`
   font-size: 50px;
   color: ${({ theme }) => theme.colors.primary};
   text-align: left;
-`
+`;
 
 export default function Home() {
-  return <Title>My page</Title>
+  return <Title>My page</Title>;
 }
diff --git a/examples/with-styled-components-rtl/styled.d.ts b/examples/with-styled-components-rtl/styled.d.ts
index 60ad666ce0..8ae51809ab 100644
--- a/examples/with-styled-components-rtl/styled.d.ts
+++ b/examples/with-styled-components-rtl/styled.d.ts
@@ -1,9 +1,9 @@
-import 'styled-components'
+import "styled-components";
 
-declare module 'styled-components' {
+declare module "styled-components" {
   export interface DefaultTheme {
     colors: {
-      primary: string
-    }
+      primary: string;
+    };
   }
 }
diff --git a/examples/with-styled-components/README.md b/examples/with-styled-components/README.md
index c017924d28..40670351f7 100644
--- a/examples/with-styled-components/README.md
+++ b/examples/with-styled-components/README.md
@@ -45,14 +45,14 @@ When wrapping a [Link](https://nextjs.org/docs/api-reference/next/link) from `ne
 **components/StyledLink.js**
 
 ```javascript
-import Link from 'next/link'
-import styled from 'styled-components'
+import Link from "next/link";
+import styled from "styled-components";
 
 const StyledLink = ({ as, children, className, href }) => (
   <Link href={href} as={as} passHref>
     <a className={className}>{children}</a>
   </Link>
-)
+);
 
 export default styled(StyledLink)`
   color: #0075e0;
@@ -68,19 +68,19 @@ export default styled(StyledLink)`
     outline: none;
     border: 0;
   }
-`
+`;
 ```
 
 **pages/index.js**
 
 ```javascript
-import StyledLink from '../components/StyledLink'
+import StyledLink from "../components/StyledLink";
 
 export default () => (
   <StyledLink href="/post/[pid]" forwardedAs="/post/abc">
     First post
   </StyledLink>
-)
+);
 ```
 
 </details>
diff --git a/examples/with-styled-components/components/cards.tsx b/examples/with-styled-components/components/cards.tsx
index 0dfd0cee79..160aa40601 100644
--- a/examples/with-styled-components/components/cards.tsx
+++ b/examples/with-styled-components/components/cards.tsx
@@ -1,5 +1,5 @@
-import styled from 'styled-components'
-import Link from 'next/link'
+import styled from "styled-components";
+import Link from "next/link";
 
 const FlexContainer = styled.div`
   display: flex;
@@ -8,7 +8,7 @@ const FlexContainer = styled.div`
   flex-flow: column wrap;
   max-width: 800px;
   margin-top: 3rem;
-`
+`;
 
 const Card = styled.div`
   padding: 1.5rem;
@@ -25,12 +25,12 @@ const Card = styled.div`
     color: #0070f3;
     border-color: #0070f3;
   }
-`
+`;
 
 const StyledLink = styled(Link)`
   margin: 0 0 1rem 0;
   font-size: 1.5rem;
-`
+`;
 
 export default function Cards() {
   return (
@@ -39,5 +39,5 @@ export default function Cards() {
         <StyledLink href="/about">About Page &rarr;</StyledLink>
       </Card>
     </FlexContainer>
-  )
+  );
 }
diff --git a/examples/with-styled-components/components/globalstyles.tsx b/examples/with-styled-components/components/globalstyles.tsx
index fe4043d688..4a752f3f6d 100644
--- a/examples/with-styled-components/components/globalstyles.tsx
+++ b/examples/with-styled-components/components/globalstyles.tsx
@@ -1,4 +1,4 @@
-import { createGlobalStyle } from 'styled-components'
+import { createGlobalStyle } from "styled-components";
 
 const GlobalStyle = createGlobalStyle`
   html,
@@ -18,6 +18,6 @@ const GlobalStyle = createGlobalStyle`
   * {
     box-sizing: border-box;
   }
-`
+`;
 
-export default GlobalStyle
+export default GlobalStyle;
diff --git a/examples/with-styled-components/components/sharedstyles.tsx b/examples/with-styled-components/components/sharedstyles.tsx
index 43e6d0765b..98de90abc3 100644
--- a/examples/with-styled-components/components/sharedstyles.tsx
+++ b/examples/with-styled-components/components/sharedstyles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from "styled-components";
 
 const Container = styled.div`
   padding: 0 0.5rem;
@@ -8,7 +8,7 @@ const Container = styled.div`
   align-items: center;
   height: 100vh;
   min-height: 100vh;
-`
+`;
 const Main = styled.main`
   padding: 5rem 0;
   flex: 1;
@@ -16,7 +16,7 @@ const Main = styled.main`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-`
+`;
 
 const Title = styled.h1`
   margin: 0;
@@ -34,13 +34,13 @@ const Title = styled.h1`
       text-decoration: underline;
     }
   }
-`
+`;
 
 const Description = styled.p`
   text-align: center;
   line-height: 1.5;
   font-size: 1.5rem;
-`
+`;
 const CodeTag = styled.code`
   background: #fafafa;
   border-radius: 5px;
@@ -49,6 +49,6 @@ const CodeTag = styled.code`
   font-size: 1.1rem;
   font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
     Bitstream Vera Sans Mono, Courier New, monospace;
-`
+`;
 
-export { Container, Main, Title, Description, CodeTag }
+export { Container, Main, Title, Description, CodeTag };
diff --git a/examples/with-styled-components/next.config.js b/examples/with-styled-components/next.config.js
index 52503c2612..a2d42fe6ee 100644
--- a/examples/with-styled-components/next.config.js
+++ b/examples/with-styled-components/next.config.js
@@ -5,6 +5,6 @@ const nextConfig = {
   compiler: {
     styledComponents: true,
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-styled-components/pages/_app.tsx b/examples/with-styled-components/pages/_app.tsx
index d2c943bfa4..5642bbf2b9 100644
--- a/examples/with-styled-components/pages/_app.tsx
+++ b/examples/with-styled-components/pages/_app.tsx
@@ -1,13 +1,13 @@
-import type { AppProps } from 'next/app'
-import { ThemeProvider, type DefaultTheme } from 'styled-components'
-import GlobalStyle from '@/components/globalstyles'
+import type { AppProps } from "next/app";
+import { ThemeProvider, type DefaultTheme } from "styled-components";
+import GlobalStyle from "@/components/globalstyles";
 
 const theme: DefaultTheme = {
   colors: {
-    primary: '#111',
-    secondary: '#0070f3',
+    primary: "#111",
+    secondary: "#0070f3",
   },
-}
+};
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
@@ -17,5 +17,5 @@ export default function App({ Component, pageProps }: AppProps) {
         <Component {...pageProps} />
       </ThemeProvider>
     </>
-  )
+  );
 }
diff --git a/examples/with-styled-components/pages/_document.tsx b/examples/with-styled-components/pages/_document.tsx
index 6c1f1aa315..1b3d90b08b 100644
--- a/examples/with-styled-components/pages/_document.tsx
+++ b/examples/with-styled-components/pages/_document.tsx
@@ -1,28 +1,28 @@
-import type { DocumentContext, DocumentInitialProps } from 'next/document'
-import Document from 'next/document'
-import { ServerStyleSheet } from 'styled-components'
+import type { DocumentContext, DocumentInitialProps } from "next/document";
+import Document from "next/document";
+import { ServerStyleSheet } from "styled-components";
 
 export default class MyDocument extends Document {
   static async getInitialProps(
-    ctx: DocumentContext
+    ctx: DocumentContext,
   ): Promise<DocumentInitialProps> {
-    const sheet = new ServerStyleSheet()
-    const originalRenderPage = ctx.renderPage
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
 
     try {
       ctx.renderPage = () =>
         originalRenderPage({
           enhanceApp: (App) => (props) =>
             sheet.collectStyles(<App {...props} />),
-        })
+        });
 
-      const initialProps = await Document.getInitialProps(ctx)
+      const initialProps = await Document.getInitialProps(ctx);
       return {
         ...initialProps,
         styles: [initialProps.styles, sheet.getStyleElement()],
-      }
+      };
     } finally {
-      sheet.seal()
+      sheet.seal();
     }
   }
 }
diff --git a/examples/with-styled-components/pages/about.tsx b/examples/with-styled-components/pages/about.tsx
index 89f3225286..78415e346c 100644
--- a/examples/with-styled-components/pages/about.tsx
+++ b/examples/with-styled-components/pages/about.tsx
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import { Container, Main, Title, Description } from '@/components/sharedstyles'
+import Link from "next/link";
+import { Container, Main, Title, Description } from "@/components/sharedstyles";
 
 export default function About() {
   return (
@@ -11,5 +11,5 @@ export default function About() {
         </Description>
       </Main>
     </Container>
-  )
+  );
 }
diff --git a/examples/with-styled-components/pages/index.tsx b/examples/with-styled-components/pages/index.tsx
index 4c474a7de1..57e335bb51 100644
--- a/examples/with-styled-components/pages/index.tsx
+++ b/examples/with-styled-components/pages/index.tsx
@@ -1,12 +1,12 @@
-import Head from 'next/head'
+import Head from "next/head";
 import {
   Container,
   Main,
   Title,
   Description,
   CodeTag,
-} from '@/components/sharedstyles'
-import Cards from '@/components/cards'
+} from "@/components/sharedstyles";
+import Cards from "@/components/cards";
 
 export default function Home() {
   return (
@@ -29,5 +29,5 @@ export default function Home() {
         <Cards />
       </Main>
     </Container>
-  )
+  );
 }
diff --git a/examples/with-styled-components/styled.d.ts b/examples/with-styled-components/styled.d.ts
index b9d36565b4..8445cfd353 100644
--- a/examples/with-styled-components/styled.d.ts
+++ b/examples/with-styled-components/styled.d.ts
@@ -1,10 +1,10 @@
-import 'styled-components'
+import "styled-components";
 
-declare module 'styled-components' {
+declare module "styled-components" {
   export interface DefaultTheme {
     colors: {
-      primary: string
-      secondary: string
-    }
+      primary: string;
+      secondary: string;
+    };
   }
 }
diff --git a/examples/with-styled-jsx-plugins/pages/index.tsx b/examples/with-styled-jsx-plugins/pages/index.tsx
index 7be174633b..485f1acde8 100644
--- a/examples/with-styled-jsx-plugins/pages/index.tsx
+++ b/examples/with-styled-jsx-plugins/pages/index.tsx
@@ -19,5 +19,5 @@ export default function Home() {
         }
       `}</style>
     </div>
-  )
+  );
 }
diff --git a/examples/with-styled-jsx-scss/pages/index.tsx b/examples/with-styled-jsx-scss/pages/index.tsx
index 1dbf57bd7c..3ac36e74e2 100644
--- a/examples/with-styled-jsx-scss/pages/index.tsx
+++ b/examples/with-styled-jsx-scss/pages/index.tsx
@@ -1,4 +1,4 @@
-const backgroundColor = '#eee'
+const backgroundColor = "#eee";
 
 export default function Home() {
   return (
@@ -22,5 +22,5 @@ export default function Home() {
         }
       `}</style>
     </div>
-  )
+  );
 }
diff --git a/examples/with-styled-jsx/pages/index.tsx b/examples/with-styled-jsx/pages/index.tsx
index badc024217..075461204b 100644
--- a/examples/with-styled-jsx/pages/index.tsx
+++ b/examples/with-styled-jsx/pages/index.tsx
@@ -16,5 +16,5 @@ export default function Home() {
         }
       `}</style>
     </div>
-  )
+  );
 }
diff --git a/examples/with-styletron/next.config.js b/examples/with-styletron/next.config.js
index a5d92455ea..902490a83b 100644
--- a/examples/with-styletron/next.config.js
+++ b/examples/with-styletron/next.config.js
@@ -1,8 +1,8 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   webpack: function (config) {
-    config.externals = config.externals || {}
-    config.externals['styletron-server'] = 'styletron-server'
-    return config
+    config.externals = config.externals || {};
+    config.externals["styletron-server"] = "styletron-server";
+    return config;
   },
-}
+};
diff --git a/examples/with-styletron/pages/_app.js b/examples/with-styletron/pages/_app.js
index 6f04456462..7c701979cd 100644
--- a/examples/with-styletron/pages/_app.js
+++ b/examples/with-styletron/pages/_app.js
@@ -1,10 +1,10 @@
-import { Provider as StyletronProvider } from 'styletron-react'
-import { styletron } from '../styletron'
+import { Provider as StyletronProvider } from "styletron-react";
+import { styletron } from "../styletron";
 
 export default function App({ Component, pageProps }) {
   return (
     <StyletronProvider value={styletron}>
       <Component {...pageProps} />
     </StyletronProvider>
-  )
+  );
 }
diff --git a/examples/with-styletron/pages/_document.js b/examples/with-styletron/pages/_document.js
index 643eed7417..62e4a980d9 100644
--- a/examples/with-styletron/pages/_document.js
+++ b/examples/with-styletron/pages/_document.js
@@ -1,6 +1,6 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
-import { Provider as StyletronProvider } from 'styletron-react'
-import { styletron } from '../styletron'
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import { Provider as StyletronProvider } from "styletron-react";
+import { styletron } from "../styletron";
 
 class MyDocument extends Document {
   static async getInitialProps(context) {
@@ -12,14 +12,14 @@ class MyDocument extends Document {
               <App {...props} />
             </StyletronProvider>
           ),
-      })
+      });
 
     const initialProps = await Document.getInitialProps({
       ...context,
       renderPage,
-    })
-    const stylesheets = styletron.getStylesheets() || []
-    return { ...initialProps, stylesheets }
+    });
+    const stylesheets = styletron.getStylesheets() || [];
+    return { ...initialProps, stylesheets };
   }
 
   render() {
@@ -31,7 +31,7 @@ class MyDocument extends Document {
               className="_styletron_hydrate_"
               dangerouslySetInnerHTML={{ __html: sheet.css }}
               media={sheet.attrs.media}
-              data-hydrate={sheet.attrs['data-hydrate']}
+              data-hydrate={sheet.attrs["data-hydrate"]}
               key={i}
             />
           ))}
@@ -41,8 +41,8 @@ class MyDocument extends Document {
           <NextScript />
         </body>
       </Html>
-    )
+    );
   }
 }
 
-export default MyDocument
+export default MyDocument;
diff --git a/examples/with-styletron/pages/index.js b/examples/with-styletron/pages/index.js
index 66912dc6ad..52939a2d65 100644
--- a/examples/with-styletron/pages/index.js
+++ b/examples/with-styletron/pages/index.js
@@ -1,27 +1,27 @@
 // DOCUMENTATION: http://styletron.org
 
-import { styled, useStyletron } from 'styletron-react'
+import { styled, useStyletron } from "styletron-react";
 
 // statically styled component
-const Title = styled('h1', {
-  color: 'red',
-  fontSize: '82px',
-})
+const Title = styled("h1", {
+  color: "red",
+  fontSize: "82px",
+});
 
 // dynamically styled component
-const SubTitle = styled('h2', ({ $size }) => ({
-  color: 'blue',
+const SubTitle = styled("h2", ({ $size }) => ({
+  color: "blue",
   fontSize: `${$size}px`,
-}))
+}));
 
 export default function Home() {
   // an alternative hook based API
-  const [css] = useStyletron()
+  const [css] = useStyletron();
   return (
     <div>
       <Title>Title</Title>
       <SubTitle $size={50}>Subtitle</SubTitle>
-      <p className={css({ fontSize: '32px' })}>Styled by hook</p>
+      <p className={css({ fontSize: "32px" })}>Styled by hook</p>
     </div>
-  )
+  );
 }
diff --git a/examples/with-styletron/styletron.js b/examples/with-styletron/styletron.js
index b359b96dfa..1371e452ed 100644
--- a/examples/with-styletron/styletron.js
+++ b/examples/with-styletron/styletron.js
@@ -1,11 +1,11 @@
-import { Client, Server } from 'styletron-engine-atomic'
+import { Client, Server } from "styletron-engine-atomic";
 
 const getHydrateClass = () =>
-  document.getElementsByClassName('_styletron_hydrate_')
+  document.getElementsByClassName("_styletron_hydrate_");
 
 export const styletron =
-  typeof window === 'undefined'
+  typeof window === "undefined"
     ? new Server()
     : new Client({
         hydrate: getHydrateClass(),
-      })
+      });
diff --git a/examples/with-supabase/app/auth/callback/route.ts b/examples/with-supabase/app/auth/callback/route.ts
index 3822631953..13dc3f7e9d 100644
--- a/examples/with-supabase/app/auth/callback/route.ts
+++ b/examples/with-supabase/app/auth/callback/route.ts
@@ -1,20 +1,20 @@
-import { createClient } from '@/utils/supabase/server'
-import { NextResponse } from 'next/server'
-import { cookies } from 'next/headers'
+import { createClient } from "@/utils/supabase/server";
+import { NextResponse } from "next/server";
+import { cookies } from "next/headers";
 
 export async function GET(request: Request) {
   // The `/auth/callback` route is required for the server-side auth flow implemented
   // by the Auth Helpers package. It exchanges an auth code for the user's session.
   // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange
-  const requestUrl = new URL(request.url)
-  const code = requestUrl.searchParams.get('code')
+  const requestUrl = new URL(request.url);
+  const code = requestUrl.searchParams.get("code");
 
   if (code) {
-    const cookieStore = cookies()
-    const supabase = createClient(cookieStore)
-    await supabase.auth.exchangeCodeForSession(code)
+    const cookieStore = cookies();
+    const supabase = createClient(cookieStore);
+    await supabase.auth.exchangeCodeForSession(code);
   }
 
   // URL to redirect to after sign in process completes
-  return NextResponse.redirect(requestUrl.origin)
+  return NextResponse.redirect(requestUrl.origin);
 }
diff --git a/examples/with-supabase/app/layout.tsx b/examples/with-supabase/app/layout.tsx
index 4696a57236..39e5666f26 100644
--- a/examples/with-supabase/app/layout.tsx
+++ b/examples/with-supabase/app/layout.tsx
@@ -1,20 +1,20 @@
-import { GeistSans } from 'geist/font/sans'
-import './globals.css'
+import { GeistSans } from "geist/font/sans";
+import "./globals.css";
 
 const defaultUrl = process.env.VERCEL_URL
   ? `https://${process.env.VERCEL_URL}`
-  : 'http://localhost:3000'
+  : "http://localhost:3000";
 
 export const metadata = {
   metadataBase: new URL(defaultUrl),
-  title: 'Next.js and Supabase Starter Kit',
-  description: 'The fastest way to build apps with Next.js and Supabase',
-}
+  title: "Next.js and Supabase Starter Kit",
+  description: "The fastest way to build apps with Next.js and Supabase",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en" className={GeistSans.className}>
@@ -24,5 +24,5 @@ export default function RootLayout({
         </main>
       </body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-supabase/app/login/page.tsx b/examples/with-supabase/app/login/page.tsx
index 636a0512c9..ec451d1ee6 100644
--- a/examples/with-supabase/app/login/page.tsx
+++ b/examples/with-supabase/app/login/page.tsx
@@ -1,41 +1,41 @@
-import Link from 'next/link'
-import { headers, cookies } from 'next/headers'
-import { createClient } from '@/utils/supabase/server'
-import { redirect } from 'next/navigation'
+import Link from "next/link";
+import { headers, cookies } from "next/headers";
+import { createClient } from "@/utils/supabase/server";
+import { redirect } from "next/navigation";
 
 export default function Login({
   searchParams,
 }: {
-  searchParams: { message: string }
+  searchParams: { message: string };
 }) {
   const signIn = async (formData: FormData) => {
-    'use server'
+    "use server";
 
-    const email = formData.get('email') as string
-    const password = formData.get('password') as string
-    const cookieStore = cookies()
-    const supabase = createClient(cookieStore)
+    const email = formData.get("email") as string;
+    const password = formData.get("password") as string;
+    const cookieStore = cookies();
+    const supabase = createClient(cookieStore);
 
     const { error } = await supabase.auth.signInWithPassword({
       email,
       password,
-    })
+    });
 
     if (error) {
-      return redirect('/login?message=Could not authenticate user')
+      return redirect("/login?message=Could not authenticate user");
     }
 
-    return redirect('/')
-  }
+    return redirect("/");
+  };
 
   const signUp = async (formData: FormData) => {
-    'use server'
+    "use server";
 
-    const origin = headers().get('origin')
-    const email = formData.get('email') as string
-    const password = formData.get('password') as string
-    const cookieStore = cookies()
-    const supabase = createClient(cookieStore)
+    const origin = headers().get("origin");
+    const email = formData.get("email") as string;
+    const password = formData.get("password") as string;
+    const cookieStore = cookies();
+    const supabase = createClient(cookieStore);
 
     const { error } = await supabase.auth.signUp({
       email,
@@ -43,14 +43,14 @@ export default function Login({
       options: {
         emailRedirectTo: `${origin}/auth/callback`,
       },
-    })
+    });
 
     if (error) {
-      return redirect('/login?message=Could not authenticate user')
+      return redirect("/login?message=Could not authenticate user");
     }
 
-    return redirect('/login?message=Check email to continue sign in process')
-  }
+    return redirect("/login?message=Check email to continue sign in process");
+  };
 
   return (
     <div className="flex-1 flex flex-col w-full px-8 sm:max-w-md justify-center gap-2">
@@ -71,7 +71,7 @@ export default function Login({
           className="mr-2 h-4 w-4 transition-transform group-hover:-translate-x-1"
         >
           <polyline points="15 18 9 12 15 6" />
-        </svg>{' '}
+        </svg>{" "}
         Back
       </Link>
 
@@ -114,5 +114,5 @@ export default function Login({
         )}
       </form>
     </div>
-  )
+  );
 }
diff --git a/examples/with-supabase/app/page.tsx b/examples/with-supabase/app/page.tsx
index 01aa7f0d42..5520816098 100644
--- a/examples/with-supabase/app/page.tsx
+++ b/examples/with-supabase/app/page.tsx
@@ -1,26 +1,26 @@
-import DeployButton from '../components/DeployButton'
-import AuthButton from '../components/AuthButton'
-import { createClient } from '@/utils/supabase/server'
-import ConnectSupabaseSteps from '@/components/ConnectSupabaseSteps'
-import SignUpUserSteps from '@/components/SignUpUserSteps'
-import Header from '@/components/Header'
-import { cookies } from 'next/headers'
+import DeployButton from "../components/DeployButton";
+import AuthButton from "../components/AuthButton";
+import { createClient } from "@/utils/supabase/server";
+import ConnectSupabaseSteps from "@/components/ConnectSupabaseSteps";
+import SignUpUserSteps from "@/components/SignUpUserSteps";
+import Header from "@/components/Header";
+import { cookies } from "next/headers";
 
 export default async function Index() {
-  const cookieStore = cookies()
+  const cookieStore = cookies();
 
   const canInitSupabaseClient = () => {
     // This function is just for the interactive tutorial.
     // Feel free to remove it once you have Supabase connected.
     try {
-      createClient(cookieStore)
-      return true
+      createClient(cookieStore);
+      return true;
     } catch (e) {
-      return false
+      return false;
     }
-  }
+  };
 
-  const isSupabaseConnected = canInitSupabaseClient()
+  const isSupabaseConnected = canInitSupabaseClient();
 
   return (
     <div className="flex-1 w-full flex flex-col gap-20 items-center">
@@ -41,7 +41,7 @@ export default async function Index() {
 
       <footer className="w-full border-t border-t-foreground/10 p-8 flex justify-center text-center text-xs">
         <p>
-          Powered by{' '}
+          Powered by{" "}
           <a
             href="https://supabase.com/?utm_source=create-next-app&utm_medium=template&utm_term=nextjs"
             target="_blank"
@@ -53,5 +53,5 @@ export default async function Index() {
         </p>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/examples/with-supabase/components/AuthButton.tsx b/examples/with-supabase/components/AuthButton.tsx
index 6e16b474ed..ee9a333750 100644
--- a/examples/with-supabase/components/AuthButton.tsx
+++ b/examples/with-supabase/components/AuthButton.tsx
@@ -1,24 +1,24 @@
-import { createClient } from '@/utils/supabase/server'
-import Link from 'next/link'
-import { cookies } from 'next/headers'
-import { redirect } from 'next/navigation'
+import { createClient } from "@/utils/supabase/server";
+import Link from "next/link";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
 
 export default async function AuthButton() {
-  const cookieStore = cookies()
-  const supabase = createClient(cookieStore)
+  const cookieStore = cookies();
+  const supabase = createClient(cookieStore);
 
   const {
     data: { user },
-  } = await supabase.auth.getUser()
+  } = await supabase.auth.getUser();
 
   const signOut = async () => {
-    'use server'
+    "use server";
 
-    const cookieStore = cookies()
-    const supabase = createClient(cookieStore)
-    await supabase.auth.signOut()
-    return redirect('/login')
-  }
+    const cookieStore = cookies();
+    const supabase = createClient(cookieStore);
+    await supabase.auth.signOut();
+    return redirect("/login");
+  };
 
   return user ? (
     <div className="flex items-center gap-4">
@@ -36,5 +36,5 @@ export default async function AuthButton() {
     >
       Login
     </Link>
-  )
+  );
 }
diff --git a/examples/with-supabase/components/Code.tsx b/examples/with-supabase/components/Code.tsx
index 312d04ab8e..f96d0cf774 100644
--- a/examples/with-supabase/components/Code.tsx
+++ b/examples/with-supabase/components/Code.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client";
 
-import { useState } from 'react'
+import { useState } from "react";
 
 const CopyIcon = () => (
   <svg
@@ -17,7 +17,7 @@ const CopyIcon = () => (
     <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
     <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
   </svg>
-)
+);
 
 const CheckIcon = () => (
   <svg
@@ -33,16 +33,16 @@ const CheckIcon = () => (
   >
     <polyline points="20 6 9 17 4 12"></polyline>
   </svg>
-)
+);
 
 export default function Code({ code }: { code: string }) {
-  const [icon, setIcon] = useState(CopyIcon)
+  const [icon, setIcon] = useState(CopyIcon);
 
   const copy = async () => {
-    await navigator?.clipboard?.writeText(code)
-    setIcon(CheckIcon)
-    setTimeout(() => setIcon(CopyIcon), 2000)
-  }
+    await navigator?.clipboard?.writeText(code);
+    setIcon(CheckIcon);
+    setTimeout(() => setIcon(CopyIcon), 2000);
+  };
 
   return (
     <pre className="bg-foreground/5 rounded-md p-8 my-8 relative">
@@ -54,5 +54,5 @@ export default function Code({ code }: { code: string }) {
       </button>
       <code>{code}</code>
     </pre>
-  )
+  );
 }
diff --git a/examples/with-supabase/components/ConnectSupabaseSteps.tsx b/examples/with-supabase/components/ConnectSupabaseSteps.tsx
index 62cc096748..0493b8d246 100644
--- a/examples/with-supabase/components/ConnectSupabaseSteps.tsx
+++ b/examples/with-supabase/components/ConnectSupabaseSteps.tsx
@@ -1,11 +1,11 @@
-import Step from './Step'
+import Step from "./Step";
 
 export default function ConnectSupabaseSteps() {
   return (
     <ol className="flex flex-col gap-6">
       <Step title="Create Supabase project">
         <p>
-          Head over to{' '}
+          Head over to{" "}
           <a
             href="https://app.supabase.com/project/_/settings/api"
             target="_blank"
@@ -13,22 +13,22 @@ export default function ConnectSupabaseSteps() {
             rel="noreferrer"
           >
             database.new
-          </a>{' '}
+          </a>{" "}
           and create a new Supabase project.
         </p>
       </Step>
 
       <Step title="Declare environment variables">
         <p>
-          Rename the{' '}
+          Rename the{" "}
           <span className="px-2 py-1 rounded-md bg-foreground/20 text-foreground/80">
             .env.example
-          </span>{' '}
-          file in your Next.js app to{' '}
+          </span>{" "}
+          file in your Next.js app to{" "}
           <span className="px-2 py-1 rounded-md bg-foreground/20 text-foreground/80">
             .env.local
-          </span>{' '}
-          and populate with values from{' '}
+          </span>{" "}
+          and populate with values from{" "}
           <a
             href="https://app.supabase.com/project/_/settings/api"
             target="_blank"
@@ -43,10 +43,10 @@ export default function ConnectSupabaseSteps() {
 
       <Step title="Restart your Next.js development server">
         <p>
-          You may need to quit your Next.js development server and run{' '}
+          You may need to quit your Next.js development server and run{" "}
           <span className="px-2 py-1 rounded-md bg-foreground/20 text-foreground/80">
             npm run dev
-          </span>{' '}
+          </span>{" "}
           again to load the new environment variables.
         </p>
       </Step>
@@ -58,5 +58,5 @@ export default function ConnectSupabaseSteps() {
         </p>
       </Step>
     </ol>
-  )
+  );
 }
diff --git a/examples/with-supabase/components/DeployButton.tsx b/examples/with-supabase/components/DeployButton.tsx
index de960a1c59..c46d23f4fd 100644
--- a/examples/with-supabase/components/DeployButton.tsx
+++ b/examples/with-supabase/components/DeployButton.tsx
@@ -19,5 +19,5 @@ export default function DeployButton() {
       </svg>
       Deploy to Vercel
     </a>
-  )
+  );
 }
diff --git a/examples/with-supabase/components/Header.tsx b/examples/with-supabase/components/Header.tsx
index 50e63d53e4..9996d5d106 100644
--- a/examples/with-supabase/components/Header.tsx
+++ b/examples/with-supabase/components/Header.tsx
@@ -1,5 +1,5 @@
-import NextLogo from './NextLogo'
-import SupabaseLogo from './SupabaseLogo'
+import NextLogo from "./NextLogo";
+import SupabaseLogo from "./SupabaseLogo";
 
 export default function Header() {
   return (
@@ -19,7 +19,7 @@ export default function Header() {
       </div>
       <h1 className="sr-only">Supabase and Next.js Starter Template</h1>
       <p className="text-3xl lg:text-4xl !leading-tight mx-auto max-w-xl text-center">
-        The fastest way to build apps with{' '}
+        The fastest way to build apps with{" "}
         <a
           href="https://supabase.com/?utm_source=create-next-app&utm_medium=template&utm_term=nextjs"
           target="_blank"
@@ -27,8 +27,8 @@ export default function Header() {
           rel="noreferrer"
         >
           Supabase
-        </a>{' '}
-        and{' '}
+        </a>{" "}
+        and{" "}
         <a
           href="https://nextjs.org/"
           target="_blank"
@@ -40,5 +40,5 @@ export default function Header() {
       </p>
       <div className="w-full p-[1px] bg-gradient-to-r from-transparent via-foreground/10 to-transparent my-8" />
     </div>
-  )
+  );
 }
diff --git a/examples/with-supabase/components/NextLogo.tsx b/examples/with-supabase/components/NextLogo.tsx
index 7fa5dd3ba6..1655582132 100644
--- a/examples/with-supabase/components/NextLogo.tsx
+++ b/examples/with-supabase/components/NextLogo.tsx
@@ -42,5 +42,5 @@ export default function NextLogo() {
         fill="currentColor"
       />
     </svg>
-  )
+  );
 }
diff --git a/examples/with-supabase/components/SignUpUserSteps.tsx b/examples/with-supabase/components/SignUpUserSteps.tsx
index 457e63f4ec..954fcedea7 100644
--- a/examples/with-supabase/components/SignUpUserSteps.tsx
+++ b/examples/with-supabase/components/SignUpUserSteps.tsx
@@ -1,6 +1,6 @@
-import Link from 'next/link'
-import Step from './Step'
-import Code from '@/components/Code'
+import Link from "next/link";
+import Step from "./Step";
+import Code from "@/components/Code";
 
 const create = `
 create table notes (
@@ -13,7 +13,7 @@ values
   ('Today I created a Supabase project.'),
   ('I added some data and queried it from Next.js.'),
   ('It was awesome!');
-`.trim()
+`.trim();
 
 const server = `
 import { createClient } from '@/utils/supabase/server'
@@ -26,7 +26,7 @@ export default async function Page() {
 
   return <pre>{JSON.stringify(notes, null, 2)}</pre>
 }
-`.trim()
+`.trim();
 
 const client = `
 'use client'
@@ -48,20 +48,20 @@ export default function Page() {
 
   return <pre>{JSON.stringify(notes, null, 2)}</pre>
 }
-`.trim()
+`.trim();
 
 export default function SignUpUserSteps() {
   return (
     <ol className="flex flex-col gap-6">
       <Step title="Sign up your first user">
         <p>
-          Head over to the{' '}
+          Head over to the{" "}
           <Link
             href="/login"
             className="font-bold hover:underline text-foreground/80"
           >
             Login
-          </Link>{' '}
+          </Link>{" "}
           page and sign up your first user. It's okay if this is just you for
           now. Your awesome idea will have plenty of users later!
         </p>
@@ -69,7 +69,7 @@ export default function SignUpUserSteps() {
 
       <Step title="Create some tables and insert some data">
         <p>
-          Head over to the{' '}
+          Head over to the{" "}
           <a
             href="https://supabase.com/dashboard/project/_/editor"
             className="font-bold hover:underline text-foreground/80"
@@ -77,10 +77,10 @@ export default function SignUpUserSteps() {
             rel="noreferrer"
           >
             Table Editor
-          </a>{' '}
+          </a>{" "}
           for your Supabase project to create a table and insert some example
           data. If you're stuck for creativity, you can copy and paste the
-          following into the{' '}
+          following into the{" "}
           <a
             href="https://supabase.com/dashboard/project/_/sql/new"
             className="font-bold hover:underline text-foreground/80"
@@ -88,7 +88,7 @@ export default function SignUpUserSteps() {
             rel="noreferrer"
           >
             SQL Editor
-          </a>{' '}
+          </a>{" "}
           and click RUN!
         </p>
         <Code code={create} />
@@ -97,10 +97,10 @@ export default function SignUpUserSteps() {
       <Step title="Query Supabase data from Next.js">
         <p>
           To create a Supabase client and query data from an Async Server
-          Component, create a new page.tsx file at{' '}
+          Component, create a new page.tsx file at{" "}
           <span className="px-2 py-1 rounded-md bg-foreground/20 text-foreground/80">
             /app/notes/page.tsx
-          </span>{' '}
+          </span>{" "}
           and add the following.
         </p>
         <Code code={server} />
@@ -112,5 +112,5 @@ export default function SignUpUserSteps() {
         <p>You're ready to launch your product to the world! 🚀</p>
       </Step>
     </ol>
-  )
+  );
 }
diff --git a/examples/with-supabase/components/Step.tsx b/examples/with-supabase/components/Step.tsx
index bc90411a16..cad86cf30a 100644
--- a/examples/with-supabase/components/Step.tsx
+++ b/examples/with-supabase/components/Step.tsx
@@ -2,8 +2,8 @@ export default function Step({
   title,
   children,
 }: {
-  title: string
-  children: React.ReactNode
+  title: string;
+  children: React.ReactNode;
 }) {
   return (
     <li className="mx-4">
@@ -20,5 +20,5 @@ export default function Step({
         {children}
       </div>
     </li>
-  )
+  );
 }
diff --git a/examples/with-supabase/components/SupabaseLogo.tsx b/examples/with-supabase/components/SupabaseLogo.tsx
index 7d7dbe8207..96a56a54ac 100644
--- a/examples/with-supabase/components/SupabaseLogo.tsx
+++ b/examples/with-supabase/components/SupabaseLogo.tsx
@@ -98,5 +98,5 @@ export default function SupabaseLogo() {
         </clipPath>
       </defs>
     </svg>
-  )
+  );
 }
diff --git a/examples/with-supabase/middleware.ts b/examples/with-supabase/middleware.ts
index 82d0a06761..bc75907e7a 100644
--- a/examples/with-supabase/middleware.ts
+++ b/examples/with-supabase/middleware.ts
@@ -1,17 +1,17 @@
-import { NextResponse, type NextRequest } from 'next/server'
-import { createClient } from '@/utils/supabase/middleware'
+import { NextResponse, type NextRequest } from "next/server";
+import { createClient } from "@/utils/supabase/middleware";
 
 export async function middleware(request: NextRequest) {
   try {
     // This `try/catch` block is only here for the interactive tutorial.
     // Feel free to remove once you have Supabase connected.
-    const { supabase, response } = createClient(request)
+    const { supabase, response } = createClient(request);
 
     // Refresh session if expired - required for Server Components
     // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-session-with-middleware
-    await supabase.auth.getSession()
+    await supabase.auth.getSession();
 
-    return response
+    return response;
   } catch (e) {
     // If you are here, a Supabase client could not be created!
     // This is likely because you have not set up environment variables.
@@ -20,7 +20,7 @@ export async function middleware(request: NextRequest) {
       request: {
         headers: request.headers,
       },
-    })
+    });
   }
 }
 
@@ -33,6 +33,6 @@ export const config = {
      * - favicon.ico (favicon file)
      * Feel free to modify this pattern to include more paths.
      */
-    '/((?!_next/static|_next/image|favicon.ico).*)',
+    "/((?!_next/static|_next/image|favicon.ico).*)",
   ],
-}
+};
diff --git a/examples/with-supabase/next.config.js b/examples/with-supabase/next.config.js
index 767719fc4f..658404ac69 100644
--- a/examples/with-supabase/next.config.js
+++ b/examples/with-supabase/next.config.js
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-supabase/postcss.config.js b/examples/with-supabase/postcss.config.js
index 33ad091d26..12a703d900 100644
--- a/examples/with-supabase/postcss.config.js
+++ b/examples/with-supabase/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/with-supabase/tailwind.config.js b/examples/with-supabase/tailwind.config.js
index feb74ccc4c..8c3a2ab786 100644
--- a/examples/with-supabase/tailwind.config.js
+++ b/examples/with-supabase/tailwind.config.js
@@ -1,20 +1,20 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
         btn: {
-          background: 'hsl(var(--btn-background))',
-          'background-hover': 'hsl(var(--btn-background-hover))',
+          background: "hsl(var(--btn-background))",
+          "background-hover": "hsl(var(--btn-background-hover))",
         },
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/examples/with-supabase/utils/supabase/client.ts b/examples/with-supabase/utils/supabase/client.ts
index 5456942560..e2660d0f65 100644
--- a/examples/with-supabase/utils/supabase/client.ts
+++ b/examples/with-supabase/utils/supabase/client.ts
@@ -1,7 +1,7 @@
-import { createBrowserClient } from '@supabase/ssr'
+import { createBrowserClient } from "@supabase/ssr";
 
 export const createClient = () =>
   createBrowserClient(
     process.env.NEXT_PUBLIC_SUPABASE_URL!,
-    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
-  )
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+  );
diff --git a/examples/with-supabase/utils/supabase/middleware.ts b/examples/with-supabase/utils/supabase/middleware.ts
index 3365525ed6..24e61c592b 100644
--- a/examples/with-supabase/utils/supabase/middleware.ts
+++ b/examples/with-supabase/utils/supabase/middleware.ts
@@ -1,5 +1,5 @@
-import { createServerClient, type CookieOptions } from '@supabase/ssr'
-import { type NextRequest, NextResponse } from 'next/server'
+import { createServerClient, type CookieOptions } from "@supabase/ssr";
+import { type NextRequest, NextResponse } from "next/server";
 
 export const createClient = (request: NextRequest) => {
   // Create an unmodified response
@@ -7,7 +7,7 @@ export const createClient = (request: NextRequest) => {
     request: {
       headers: request.headers,
     },
-  })
+  });
 
   const supabase = createServerClient(
     process.env.NEXT_PUBLIC_SUPABASE_URL!,
@@ -15,7 +15,7 @@ export const createClient = (request: NextRequest) => {
     {
       cookies: {
         get(name: string) {
-          return request.cookies.get(name)?.value
+          return request.cookies.get(name)?.value;
         },
         set(name: string, value: string, options: CookieOptions) {
           // If the cookie is updated, update the cookies for the request and response
@@ -23,39 +23,39 @@ export const createClient = (request: NextRequest) => {
             name,
             value,
             ...options,
-          })
+          });
           response = NextResponse.next({
             request: {
               headers: request.headers,
             },
-          })
+          });
           response.cookies.set({
             name,
             value,
             ...options,
-          })
+          });
         },
         remove(name: string, options: CookieOptions) {
           // If the cookie is removed, update the cookies for the request and response
           request.cookies.set({
             name,
-            value: '',
+            value: "",
             ...options,
-          })
+          });
           response = NextResponse.next({
             request: {
               headers: request.headers,
             },
-          })
+          });
           response.cookies.set({
             name,
-            value: '',
+            value: "",
             ...options,
-          })
+          });
         },
       },
-    }
-  )
+    },
+  );
 
-  return { supabase, response }
-}
+  return { supabase, response };
+};
diff --git a/examples/with-supabase/utils/supabase/server.ts b/examples/with-supabase/utils/supabase/server.ts
index 0edfaa0df8..eb27a377c5 100644
--- a/examples/with-supabase/utils/supabase/server.ts
+++ b/examples/with-supabase/utils/supabase/server.ts
@@ -1,5 +1,5 @@
-import { createServerClient, type CookieOptions } from '@supabase/ssr'
-import { cookies } from 'next/headers'
+import { createServerClient, type CookieOptions } from "@supabase/ssr";
+import { cookies } from "next/headers";
 
 export const createClient = (cookieStore: ReturnType<typeof cookies>) => {
   return createServerClient(
@@ -8,11 +8,11 @@ export const createClient = (cookieStore: ReturnType<typeof cookies>) => {
     {
       cookies: {
         get(name: string) {
-          return cookieStore.get(name)?.value
+          return cookieStore.get(name)?.value;
         },
         set(name: string, value: string, options: CookieOptions) {
           try {
-            cookieStore.set({ name, value, ...options })
+            cookieStore.set({ name, value, ...options });
           } catch (error) {
             // The `set` method was called from a Server Component.
             // This can be ignored if you have middleware refreshing
@@ -21,7 +21,7 @@ export const createClient = (cookieStore: ReturnType<typeof cookies>) => {
         },
         remove(name: string, options: CookieOptions) {
           try {
-            cookieStore.set({ name, value: '', ...options })
+            cookieStore.set({ name, value: "", ...options });
           } catch (error) {
             // The `delete` method was called from a Server Component.
             // This can be ignored if you have middleware refreshing
@@ -29,6 +29,6 @@ export const createClient = (cookieStore: ReturnType<typeof cookies>) => {
           }
         },
       },
-    }
-  )
-}
+    },
+  );
+};
diff --git a/examples/with-supertokens/app/api/auth/[...path]/route.ts b/examples/with-supertokens/app/api/auth/[...path]/route.ts
index 88f5e4f47c..ad383c0880 100644
--- a/examples/with-supertokens/app/api/auth/[...path]/route.ts
+++ b/examples/with-supertokens/app/api/auth/[...path]/route.ts
@@ -1,39 +1,39 @@
-import { getAppDirRequestHandler } from 'supertokens-node/nextjs'
-import { NextRequest, NextResponse } from 'next/server'
-import { ensureSuperTokensInit } from '../../../config/backend'
+import { getAppDirRequestHandler } from "supertokens-node/nextjs";
+import { NextRequest, NextResponse } from "next/server";
+import { ensureSuperTokensInit } from "../../../config/backend";
 
-ensureSuperTokensInit()
+ensureSuperTokensInit();
 
-const handleCall = getAppDirRequestHandler(NextResponse)
+const handleCall = getAppDirRequestHandler(NextResponse);
 
 export async function GET(request: NextRequest) {
-  const res = await handleCall(request)
-  if (!res.headers.has('Cache-Control')) {
+  const res = await handleCall(request);
+  if (!res.headers.has("Cache-Control")) {
     // This is needed for production deployments with Vercel
     res.headers.set(
-      'Cache-Control',
-      'no-cache, no-store, max-age=0, must-revalidate'
-    )
+      "Cache-Control",
+      "no-cache, no-store, max-age=0, must-revalidate",
+    );
   }
-  return res
+  return res;
 }
 
 export async function POST(request: NextRequest) {
-  return handleCall(request)
+  return handleCall(request);
 }
 
 export async function DELETE(request: NextRequest) {
-  return handleCall(request)
+  return handleCall(request);
 }
 
 export async function PUT(request: NextRequest) {
-  return handleCall(request)
+  return handleCall(request);
 }
 
 export async function PATCH(request: NextRequest) {
-  return handleCall(request)
+  return handleCall(request);
 }
 
 export async function HEAD(request: NextRequest) {
-  return handleCall(request)
+  return handleCall(request);
 }
diff --git a/examples/with-supertokens/app/api/user/route.ts b/examples/with-supertokens/app/api/user/route.ts
index 6f043045de..5f4544e12e 100644
--- a/examples/with-supertokens/app/api/user/route.ts
+++ b/examples/with-supertokens/app/api/user/route.ts
@@ -1,17 +1,17 @@
-import { NextResponse, NextRequest } from 'next/server'
-import { withSession } from '../../sessionUtils'
+import { NextResponse, NextRequest } from "next/server";
+import { withSession } from "../../sessionUtils";
 
 export function GET(request: NextRequest) {
   return withSession(request, async (session) => {
     if (!session) {
-      return new NextResponse('Authentication required', { status: 401 })
+      return new NextResponse("Authentication required", { status: 401 });
     }
 
     return NextResponse.json({
-      note: 'Fetch any data from your application for authenticated user after using verifySession middleware',
+      note: "Fetch any data from your application for authenticated user after using verifySession middleware",
       userId: session.getUserId(),
       sessionHandle: session.getHandle(),
       accessTokenPayload: session.getAccessTokenPayload(),
-    })
-  })
+    });
+  });
 }
diff --git a/examples/with-supertokens/app/auth/[[...path]]/page.tsx b/examples/with-supertokens/app/auth/[[...path]]/page.tsx
index 70f929909c..cbe8c03921 100644
--- a/examples/with-supertokens/app/auth/[[...path]]/page.tsx
+++ b/examples/with-supertokens/app/auth/[[...path]]/page.tsx
@@ -1,24 +1,24 @@
-'use client'
+"use client";
 
-import { useEffect, useState } from 'react'
-import { redirectToAuth } from 'supertokens-auth-react'
-import SuperTokens from 'supertokens-auth-react/ui'
-import { PreBuiltUIList } from '../../config/frontend'
+import { useEffect, useState } from "react";
+import { redirectToAuth } from "supertokens-auth-react";
+import SuperTokens from "supertokens-auth-react/ui";
+import { PreBuiltUIList } from "../../config/frontend";
 
 export default function Auth() {
   // if the user visits a page that is not handled by us (like /auth/random), then we redirect them back to the auth page.
-  const [loaded, setLoaded] = useState(false)
+  const [loaded, setLoaded] = useState(false);
   useEffect(() => {
     if (SuperTokens.canHandleRoute(PreBuiltUIList) === false) {
-      redirectToAuth({ redirectBack: false })
+      redirectToAuth({ redirectBack: false });
     } else {
-      setLoaded(true)
+      setLoaded(true);
     }
-  }, [])
+  }, []);
 
   if (loaded) {
-    return SuperTokens.getRoutingComponent(PreBuiltUIList)
+    return SuperTokens.getRoutingComponent(PreBuiltUIList);
   }
 
-  return null
+  return null;
 }
diff --git a/examples/with-supertokens/app/components/callApiButton.tsx b/examples/with-supertokens/app/components/callApiButton.tsx
index 45ab275c09..5591834368 100644
--- a/examples/with-supertokens/app/components/callApiButton.tsx
+++ b/examples/with-supertokens/app/components/callApiButton.tsx
@@ -1,23 +1,23 @@
-'use client'
+"use client";
 
-import Session from 'supertokens-auth-react/recipe/session'
-import styles from '../page.module.css'
+import Session from "supertokens-auth-react/recipe/session";
+import styles from "../page.module.css";
 
 export const CallAPIButton = () => {
   const fetchUserData = async () => {
-    const accessToken = await Session.getAccessToken()
-    const userInfoResponse = await fetch('http://localhost:3000/api/user', {
+    const accessToken = await Session.getAccessToken();
+    const userInfoResponse = await fetch("http://localhost:3000/api/user", {
       headers: {
-        Authorization: 'Bearer ' + accessToken,
+        Authorization: "Bearer " + accessToken,
       },
-    })
+    });
 
-    alert(JSON.stringify(await userInfoResponse.json()))
-  }
+    alert(JSON.stringify(await userInfoResponse.json()));
+  };
 
   return (
     <div onClick={fetchUserData} className={styles.sessionButton}>
       Call API
     </div>
-  )
-}
+  );
+};
diff --git a/examples/with-supertokens/app/components/home.tsx b/examples/with-supertokens/app/components/home.tsx
index b1626d87ff..4262aee9fa 100644
--- a/examples/with-supertokens/app/components/home.tsx
+++ b/examples/with-supertokens/app/components/home.tsx
@@ -1,15 +1,15 @@
-import { getSSRSession } from '../sessionUtils'
-import { TryRefreshComponent } from './tryRefreshClientComponent'
-import styles from '../page.module.css'
-import { redirect } from 'next/navigation'
-import Image from 'next/image'
-import { CelebrateIcon, SeparatorLine } from '../../assets/images'
-import { CallAPIButton } from './callApiButton'
-import { LinksComponent } from './linksComponent'
-import { SessionAuthForNextJS } from './sessionAuthForNextJS'
+import { getSSRSession } from "../sessionUtils";
+import { TryRefreshComponent } from "./tryRefreshClientComponent";
+import styles from "../page.module.css";
+import { redirect } from "next/navigation";
+import Image from "next/image";
+import { CelebrateIcon, SeparatorLine } from "../../assets/images";
+import { CallAPIButton } from "./callApiButton";
+import { LinksComponent } from "./linksComponent";
+import { SessionAuthForNextJS } from "./sessionAuthForNextJS";
 
 export async function HomePage() {
-  const { session, hasToken, hasInvalidClaims } = await getSSRSession()
+  const { session, hasToken, hasInvalidClaims } = await getSSRSession();
 
   if (!session) {
     if (!hasToken) {
@@ -17,13 +17,13 @@ export async function HomePage() {
        * This means that the user is not logged in. If you want to display some other UI in this
        * case, you can do so here.
        */
-      return redirect('/auth')
+      return redirect("/auth");
     }
 
     if (hasInvalidClaims) {
-      return <SessionAuthForNextJS />
+      return <SessionAuthForNextJS />;
     } else {
-      return <TryRefreshComponent />
+      return <TryRefreshComponent />;
     }
   }
 
@@ -38,7 +38,7 @@ export async function HomePage() {
               src={CelebrateIcon}
               alt="Login successful"
               className={styles.successIcon}
-            />{' '}
+            />{" "}
             Login successful
           </div>
           <div className={styles.innerContent}>
@@ -57,5 +57,5 @@ export async function HomePage() {
         />
       </div>
     </SessionAuthForNextJS>
-  )
+  );
 }
diff --git a/examples/with-supertokens/app/components/linksComponent.tsx b/examples/with-supertokens/app/components/linksComponent.tsx
index e2194bffd6..ae85024320 100644
--- a/examples/with-supertokens/app/components/linksComponent.tsx
+++ b/examples/with-supertokens/app/components/linksComponent.tsx
@@ -1,54 +1,54 @@
-'use client'
-import styles from '../page.module.css'
-import { BlogsIcon, GuideIcon, SignOutIcon } from '../../assets/images'
-import { recipeDetails } from '../config/frontend'
-import Link from 'next/link'
-import Image from 'next/image'
-import Session from 'supertokens-auth-react/recipe/session'
-import SuperTokens from 'supertokens-auth-react'
+"use client";
+import styles from "../page.module.css";
+import { BlogsIcon, GuideIcon, SignOutIcon } from "../../assets/images";
+import { recipeDetails } from "../config/frontend";
+import Link from "next/link";
+import Image from "next/image";
+import Session from "supertokens-auth-react/recipe/session";
+import SuperTokens from "supertokens-auth-react";
 
 const SignOutLink = (props: { name: string; link: string; icon: string }) => {
   return (
     <div
       className={styles.linksContainerLink}
       onClick={async () => {
-        await Session.signOut()
-        SuperTokens.redirectToAuth()
+        await Session.signOut();
+        SuperTokens.redirectToAuth();
       }}
     >
       <Image className={styles.linkIcon} src={props.icon} alt={props.name} />
-      <div role={'button'}>{props.name}</div>
+      <div role={"button"}>{props.name}</div>
     </div>
-  )
-}
+  );
+};
 
 export const LinksComponent = () => {
   const links: {
-    name: string
-    link: string
-    icon: string
+    name: string;
+    link: string;
+    icon: string;
   }[] = [
     {
-      name: 'Blogs',
-      link: 'https://supertokens.com/blog',
+      name: "Blogs",
+      link: "https://supertokens.com/blog",
       icon: BlogsIcon,
     },
     {
-      name: 'Guides',
+      name: "Guides",
       link: recipeDetails.docsLink,
       icon: GuideIcon,
     },
     {
-      name: 'Sign Out',
-      link: '',
+      name: "Sign Out",
+      link: "",
       icon: SignOutIcon,
     },
-  ]
+  ];
 
   return (
     <div className={styles.bottomLinksContainer}>
       {links.map((link) => {
-        if (link.name === 'Sign Out') {
+        if (link.name === "Sign Out") {
           return (
             <SignOutLink
               name={link.name}
@@ -56,7 +56,7 @@ export const LinksComponent = () => {
               icon={link.icon}
               key={link.name}
             />
-          )
+          );
         }
 
         return (
@@ -71,10 +71,10 @@ export const LinksComponent = () => {
               src={link.icon}
               alt={link.name}
             />
-            <div role={'button'}>{link.name}</div>
+            <div role={"button"}>{link.name}</div>
           </Link>
-        )
+        );
       })}
     </div>
-  )
-}
+  );
+};
diff --git a/examples/with-supertokens/app/components/sessionAuthForNextJS.tsx b/examples/with-supertokens/app/components/sessionAuthForNextJS.tsx
index 14b7b70c22..bd0e4d2a82 100644
--- a/examples/with-supertokens/app/components/sessionAuthForNextJS.tsx
+++ b/examples/with-supertokens/app/components/sessionAuthForNextJS.tsx
@@ -1,19 +1,19 @@
-'use client'
+"use client";
 
-import React, { useState, useEffect } from 'react'
-import { SessionAuth } from 'supertokens-auth-react/recipe/session'
+import React, { useState, useEffect } from "react";
+import { SessionAuth } from "supertokens-auth-react/recipe/session";
 
 type Props = Parameters<typeof SessionAuth>[0] & {
-  children?: React.ReactNode | undefined
-}
+  children?: React.ReactNode | undefined;
+};
 
 export const SessionAuthForNextJS = (props: Props) => {
-  const [loaded, setLoaded] = useState(false)
+  const [loaded, setLoaded] = useState(false);
   useEffect(() => {
-    setLoaded(true)
-  }, [])
+    setLoaded(true);
+  }, []);
   if (!loaded) {
-    return props.children
+    return props.children;
   }
-  return <SessionAuth {...props}>{props.children}</SessionAuth>
-}
+  return <SessionAuth {...props}>{props.children}</SessionAuth>;
+};
diff --git a/examples/with-supertokens/app/components/supertokensProvider.tsx b/examples/with-supertokens/app/components/supertokensProvider.tsx
index 362e2fca86..aeec15fab2 100644
--- a/examples/with-supertokens/app/components/supertokensProvider.tsx
+++ b/examples/with-supertokens/app/components/supertokensProvider.tsx
@@ -1,19 +1,19 @@
-'use client'
-import React from 'react'
-import { SuperTokensWrapper } from 'supertokens-auth-react'
-import SuperTokensReact from 'supertokens-auth-react'
-import { frontendConfig, setRouter } from '../config/frontend'
-import { usePathname, useRouter } from 'next/navigation'
+"use client";
+import React from "react";
+import { SuperTokensWrapper } from "supertokens-auth-react";
+import SuperTokensReact from "supertokens-auth-react";
+import { frontendConfig, setRouter } from "../config/frontend";
+import { usePathname, useRouter } from "next/navigation";
 
-if (typeof window !== 'undefined') {
+if (typeof window !== "undefined") {
   // we only want to call this init function on the frontend, so we check typeof window !== 'undefined'
-  SuperTokensReact.init(frontendConfig())
+  SuperTokensReact.init(frontendConfig());
 }
 
 export const SuperTokensProvider: React.FC<React.PropsWithChildren<{}>> = ({
   children,
 }) => {
-  setRouter(useRouter(), usePathname() || window.location.pathname)
+  setRouter(useRouter(), usePathname() || window.location.pathname);
 
-  return <SuperTokensWrapper>{children}</SuperTokensWrapper>
-}
+  return <SuperTokensWrapper>{children}</SuperTokensWrapper>;
+};
diff --git a/examples/with-supertokens/app/components/tryRefreshClientComponent.tsx b/examples/with-supertokens/app/components/tryRefreshClientComponent.tsx
index 592e96e604..e545136515 100644
--- a/examples/with-supertokens/app/components/tryRefreshClientComponent.tsx
+++ b/examples/with-supertokens/app/components/tryRefreshClientComponent.tsx
@@ -1,31 +1,31 @@
-'use client'
+"use client";
 
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/navigation'
-import Session from 'supertokens-auth-react/recipe/session'
-import SuperTokens from 'supertokens-auth-react'
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import Session from "supertokens-auth-react/recipe/session";
+import SuperTokens from "supertokens-auth-react";
 
 export const TryRefreshComponent = () => {
-  const router = useRouter()
-  const [didError, setDidError] = useState(false)
+  const router = useRouter();
+  const [didError, setDidError] = useState(false);
 
   useEffect(() => {
     void Session.attemptRefreshingSession()
       .then((hasSession) => {
         if (hasSession) {
-          router.refresh()
+          router.refresh();
         } else {
-          SuperTokens.redirectToAuth()
+          SuperTokens.redirectToAuth();
         }
       })
       .catch(() => {
-        setDidError(true)
-      })
-  }, [router])
+        setDidError(true);
+      });
+  }, [router]);
 
   if (didError) {
-    return <div>Something went wrong, please reload the page</div>
+    return <div>Something went wrong, please reload the page</div>;
   }
 
-  return <div>Loading...</div>
-}
+  return <div>Loading...</div>;
+};
diff --git a/examples/with-supertokens/app/config/appInfo.ts b/examples/with-supertokens/app/config/appInfo.ts
index b4c62df819..8e5688266c 100644
--- a/examples/with-supertokens/app/config/appInfo.ts
+++ b/examples/with-supertokens/app/config/appInfo.ts
@@ -1,7 +1,7 @@
 export const appInfo = {
-  appName: 'SuperTokens Next.js demo app',
-  apiDomain: 'http://localhost:3000',
-  websiteDomain: 'http://localhost:3000',
-  apiBasePath: '/api/auth',
-  websiteBasePath: '/auth',
-}
+  appName: "SuperTokens Next.js demo app",
+  apiDomain: "http://localhost:3000",
+  websiteDomain: "http://localhost:3000",
+  apiBasePath: "/api/auth",
+  websiteBasePath: "/auth",
+};
diff --git a/examples/with-supertokens/app/config/backend.ts b/examples/with-supertokens/app/config/backend.ts
index 33e2252aac..1742913f50 100644
--- a/examples/with-supertokens/app/config/backend.ts
+++ b/examples/with-supertokens/app/config/backend.ts
@@ -1,15 +1,15 @@
-import ThirdPartyEmailPasswordNode from 'supertokens-node/recipe/thirdpartyemailpassword'
-import SessionNode from 'supertokens-node/recipe/session'
-import Dashboard from 'supertokens-node/recipe/dashboard'
-import { appInfo } from './appInfo'
-import { TypeInput } from 'supertokens-node/types'
-import SuperTokens from 'supertokens-node'
+import ThirdPartyEmailPasswordNode from "supertokens-node/recipe/thirdpartyemailpassword";
+import SessionNode from "supertokens-node/recipe/session";
+import Dashboard from "supertokens-node/recipe/dashboard";
+import { appInfo } from "./appInfo";
+import { TypeInput } from "supertokens-node/types";
+import SuperTokens from "supertokens-node";
 
 export let backendConfig = (): TypeInput => {
   return {
     supertokens: {
       // this is the location of the SuperTokens core.
-      connectionURI: 'https://try.supertokens.com',
+      connectionURI: "https://try.supertokens.com",
     },
     appInfo,
     // recipeList contains all the modules that you want to
@@ -21,38 +21,38 @@ export let backendConfig = (): TypeInput => {
           // IMPORTANT: Please replace them with your own OAuth keys for production use.
           {
             config: {
-              thirdPartyId: 'google',
+              thirdPartyId: "google",
               clients: [
                 {
                   clientId:
-                    '1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com',
-                  clientSecret: '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',
+                    "1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com",
+                  clientSecret: "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",
                 },
               ],
             },
           },
           {
             config: {
-              thirdPartyId: 'github',
+              thirdPartyId: "github",
               clients: [
                 {
-                  clientId: '467101b197249757c71f',
-                  clientSecret: 'e97051221f4b6426e8fe8d51486396703012f5bd',
+                  clientId: "467101b197249757c71f",
+                  clientSecret: "e97051221f4b6426e8fe8d51486396703012f5bd",
                 },
               ],
             },
           },
           {
             config: {
-              thirdPartyId: 'apple',
+              thirdPartyId: "apple",
               clients: [
                 {
-                  clientId: '4398792-io.supertokens.example.service',
+                  clientId: "4398792-io.supertokens.example.service",
                   additionalConfig: {
-                    keyId: '7M48Y4RYDL',
+                    keyId: "7M48Y4RYDL",
                     privateKey:
-                      '-----BEGIN PRIVATE KEY-----\nMIGTAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBHkwdwIBAQQgu8gXs+XYkqXD6Ala9Sf/iJXzhbwcoG5dMh1OonpdJUmgCgYIKoZIzj0DAQehRANCAASfrvlFbFCYqn3I2zeknYXLwtH30JuOKestDbSfZYxZNMqhF/OzdZFTV0zc5u5s3eN+oCWbnvl0hM+9IW0UlkdA\n-----END PRIVATE KEY-----',
-                    teamId: 'YWQCXGJRJL',
+                      "-----BEGIN PRIVATE KEY-----\nMIGTAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBHkwdwIBAQQgu8gXs+XYkqXD6Ala9Sf/iJXzhbwcoG5dMh1OonpdJUmgCgYIKoZIzj0DAQehRANCAASfrvlFbFCYqn3I2zeknYXLwtH30JuOKestDbSfZYxZNMqhF/OzdZFTV0zc5u5s3eN+oCWbnvl0hM+9IW0UlkdA\n-----END PRIVATE KEY-----",
+                    teamId: "YWQCXGJRJL",
                   },
                 },
               ],
@@ -60,12 +60,12 @@ export let backendConfig = (): TypeInput => {
           },
           {
             config: {
-              thirdPartyId: 'twitter',
+              thirdPartyId: "twitter",
               clients: [
                 {
-                  clientId: '4398792-WXpqVXRiazdRMGNJdEZIa3RVQXc6MTpjaQ',
+                  clientId: "4398792-WXpqVXRiazdRMGNJdEZIa3RVQXc6MTpjaQ",
                   clientSecret:
-                    'BivMbtwmcygbRLNQ0zk45yxvW246tnYnTFFq-LH39NwZMxFpdC',
+                    "BivMbtwmcygbRLNQ0zk45yxvW246tnYnTFFq-LH39NwZMxFpdC",
                 },
               ],
             },
@@ -76,14 +76,14 @@ export let backendConfig = (): TypeInput => {
       Dashboard.init(),
     ],
     isInServerlessEnv: true,
-    framework: 'custom',
-  }
-}
+    framework: "custom",
+  };
+};
 
-let initialized = false
+let initialized = false;
 export function ensureSuperTokensInit() {
   if (!initialized) {
-    SuperTokens.init(backendConfig())
-    initialized = true
+    SuperTokens.init(backendConfig());
+    initialized = true;
   }
 }
diff --git a/examples/with-supertokens/app/config/frontend.tsx b/examples/with-supertokens/app/config/frontend.tsx
index 5e189c2eb4..be10971bac 100644
--- a/examples/with-supertokens/app/config/frontend.tsx
+++ b/examples/with-supertokens/app/config/frontend.tsx
@@ -1,19 +1,19 @@
-import ThirdPartyEmailPasswordReact from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
-import Session from 'supertokens-auth-react/recipe/session'
-import { appInfo } from './appInfo'
-import { useRouter } from 'next/navigation'
-import { SuperTokensConfig } from 'supertokens-auth-react/lib/build/types'
-import { ThirdPartyEmailPasswordPreBuiltUI } from 'supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui'
+import ThirdPartyEmailPasswordReact from "supertokens-auth-react/recipe/thirdpartyemailpassword";
+import Session from "supertokens-auth-react/recipe/session";
+import { appInfo } from "./appInfo";
+import { useRouter } from "next/navigation";
+import { SuperTokensConfig } from "supertokens-auth-react/lib/build/types";
+import { ThirdPartyEmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui";
 
 const routerInfo: { router?: ReturnType<typeof useRouter>; pathName?: string } =
-  {}
+  {};
 
 export function setRouter(
   router: ReturnType<typeof useRouter>,
-  pathName: string
+  pathName: string,
 ) {
-  routerInfo.router = router
-  routerInfo.pathName = pathName
+  routerInfo.router = router;
+  routerInfo.pathName = pathName;
 }
 
 export const frontendConfig = (): SuperTokensConfig => {
@@ -40,13 +40,13 @@ export const frontendConfig = (): SuperTokensConfig => {
           assign: (url) => routerInfo.router!.push(url.toString()),
           setHref: (url) => routerInfo.router!.push(url.toString()),
         },
-      }
+      };
     },
-  }
-}
+  };
+};
 
 export const recipeDetails = {
-  docsLink: 'https://supertokens.com/docs/thirdpartyemailpassword/introduction',
-}
+  docsLink: "https://supertokens.com/docs/thirdpartyemailpassword/introduction",
+};
 
-export const PreBuiltUIList = [ThirdPartyEmailPasswordPreBuiltUI]
+export const PreBuiltUIList = [ThirdPartyEmailPasswordPreBuiltUI];
diff --git a/examples/with-supertokens/app/layout.tsx b/examples/with-supertokens/app/layout.tsx
index fc5dd3075d..b9714d220e 100644
--- a/examples/with-supertokens/app/layout.tsx
+++ b/examples/with-supertokens/app/layout.tsx
@@ -1,19 +1,19 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import { SuperTokensProvider } from './components/supertokensProvider'
+import "./globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { SuperTokensProvider } from "./components/supertokensProvider";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'SuperTokens 💫',
-  description: 'SuperTokens demo app',
-}
+  title: "SuperTokens 💫",
+  description: "SuperTokens demo app",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
@@ -21,5 +21,5 @@ export default function RootLayout({
         <SuperTokensProvider>{children}</SuperTokensProvider>
       </body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-supertokens/app/page.module.css b/examples/with-supertokens/app/page.module.css
index 719a019538..b1d379d51c 100644
--- a/examples/with-supertokens/app/page.module.css
+++ b/examples/with-supertokens/app/page.module.css
@@ -8,7 +8,7 @@
 
 @font-face {
   font-family: Menlo;
-  src: url('../assets/fonts/MenloRegular.ttf');
+  src: url("../assets/fonts/MenloRegular.ttf");
 }
 
 .appContainer {
@@ -20,21 +20,21 @@
 }
 
 .bold400 {
-  font-variation-settings: 'wght' 400;
+  font-variation-settings: "wght" 400;
 }
 
 .bold500 {
-  font-variation-settings: 'wght' 500;
+  font-variation-settings: "wght" 500;
 }
 
 .bold600 {
-  font-variation-settings: 'wght' 600;
+  font-variation-settings: "wght" 600;
 }
 
 .homeContainer {
   min-height: 100vh;
   min-width: 100vw;
-  background: url('../assets/images/background.png');
+  background: url("../assets/images/background.png");
   background-size: cover;
 
   display: flex;
@@ -44,7 +44,7 @@
 }
 
 .bold700 {
-  font-variation-settings: 'wght' 700;
+  font-variation-settings: "wght" 700;
 }
 
 .mainContainer {
@@ -93,7 +93,7 @@
 }
 
 .userId:before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
   border-radius: 9px;
diff --git a/examples/with-supertokens/app/page.tsx b/examples/with-supertokens/app/page.tsx
index bf7cb8dd2e..c4e608c823 100644
--- a/examples/with-supertokens/app/page.tsx
+++ b/examples/with-supertokens/app/page.tsx
@@ -1,10 +1,10 @@
-import { HomePage } from './components/home'
-import styles from './page.module.css'
+import { HomePage } from "./components/home";
+import styles from "./page.module.css";
 
 export default function Home() {
   return (
     <main className={styles.main}>
       <HomePage />
     </main>
-  )
+  );
 }
diff --git a/examples/with-supertokens/app/sessionUtils.ts b/examples/with-supertokens/app/sessionUtils.ts
index f6fcd8740f..62b189f5cd 100644
--- a/examples/with-supertokens/app/sessionUtils.ts
+++ b/examples/with-supertokens/app/sessionUtils.ts
@@ -1,58 +1,58 @@
-import { serialize } from 'cookie'
-import { cookies, headers } from 'next/headers'
-import { NextRequest, NextResponse } from 'next/server'
+import { serialize } from "cookie";
+import { cookies, headers } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
 import Session, {
   SessionContainer,
   VerifySessionOptions,
-} from 'supertokens-node/recipe/session'
-import { ensureSuperTokensInit } from './config/backend'
+} from "supertokens-node/recipe/session";
+import { ensureSuperTokensInit } from "./config/backend";
 import {
   PreParsedRequest,
   CollectingResponse,
-} from 'supertokens-node/framework/custom'
-import { HTTPMethod } from 'supertokens-node/types'
+} from "supertokens-node/framework/custom";
+import { HTTPMethod } from "supertokens-node/types";
 
-ensureSuperTokensInit()
+ensureSuperTokensInit();
 
 export async function getSSRSession(
   req?: NextRequest,
-  options?: VerifySessionOptions
+  options?: VerifySessionOptions,
 ): Promise<{
-  session: SessionContainer | undefined
-  hasToken: boolean
-  hasInvalidClaims: boolean
-  baseResponse: CollectingResponse
-  nextResponse?: NextResponse
+  session: SessionContainer | undefined;
+  hasToken: boolean;
+  hasInvalidClaims: boolean;
+  baseResponse: CollectingResponse;
+  nextResponse?: NextResponse;
 }> {
   const query =
     req !== undefined
       ? Object.fromEntries(new URL(req.url).searchParams.entries())
-      : {}
+      : {};
   const parsedCookies: Record<string, string> = Object.fromEntries(
     (req !== undefined ? req.cookies : cookies())
       .getAll()
-      .map((cookie) => [cookie.name, cookie.value])
-  )
+      .map((cookie) => [cookie.name, cookie.value]),
+  );
   let baseRequest = new PreParsedRequest({
-    method: req !== undefined ? (req.method as HTTPMethod) : 'get',
-    url: req !== undefined ? req.url : '',
+    method: req !== undefined ? (req.method as HTTPMethod) : "get",
+    url: req !== undefined ? req.url : "",
     query: query,
     headers: req !== undefined ? req.headers : headers(),
     cookies: parsedCookies,
     getFormBody: () => req!.formData(),
     getJSONBody: () => req!.json(),
-  })
+  });
 
-  let baseResponse = new CollectingResponse()
+  let baseResponse = new CollectingResponse();
 
   try {
-    let session = await Session.getSession(baseRequest, baseResponse, options)
+    let session = await Session.getSession(baseRequest, baseResponse, options);
     return {
       session,
       hasInvalidClaims: false,
       hasToken: session !== undefined,
       baseResponse,
-    }
+    };
   } catch (err) {
     if (Session.Error.isErrorFromSuperTokens(err)) {
       return {
@@ -60,12 +60,12 @@ export async function getSSRSession(
         hasInvalidClaims: err.type === Session.Error.INVALID_CLAIMS,
         session: undefined,
         baseResponse,
-        nextResponse: new NextResponse('Authentication required', {
+        nextResponse: new NextResponse("Authentication required", {
           status: err.type === Session.Error.INVALID_CLAIMS ? 403 : 401,
         }),
-      }
+      };
     } else {
-      throw err
+      throw err;
     }
   }
 }
@@ -73,25 +73,25 @@ export async function getSSRSession(
 export async function withSession(
   request: NextRequest,
   handler: (session: SessionContainer | undefined) => Promise<NextResponse>,
-  options?: VerifySessionOptions
+  options?: VerifySessionOptions,
 ) {
   let { session, nextResponse, baseResponse } = await getSSRSession(
     request,
-    options
-  )
+    options,
+  );
   if (nextResponse) {
-    return nextResponse
+    return nextResponse;
   }
 
-  let userResponse = await handler(session)
+  let userResponse = await handler(session);
 
-  let didAddCookies = false
-  let didAddHeaders = false
+  let didAddCookies = false;
+  let didAddHeaders = false;
 
   for (const respCookie of baseResponse.cookies) {
-    didAddCookies = true
+    didAddCookies = true;
     userResponse.headers.append(
-      'Set-Cookie',
+      "Set-Cookie",
       serialize(respCookie.key, respCookie.value, {
         domain: respCookie.domain,
         expires: new Date(respCookie.expires),
@@ -99,24 +99,24 @@ export async function withSession(
         path: respCookie.path,
         sameSite: respCookie.sameSite,
         secure: respCookie.secure,
-      })
-    )
+      }),
+    );
   }
 
   baseResponse.headers.forEach((value, key) => {
-    didAddHeaders = true
-    userResponse.headers.set(key, value)
-  })
+    didAddHeaders = true;
+    userResponse.headers.set(key, value);
+  });
 
   if (didAddCookies || didAddHeaders) {
-    if (!userResponse.headers.has('Cache-Control')) {
+    if (!userResponse.headers.has("Cache-Control")) {
       // This is needed for production deployments with Vercel
       userResponse.headers.set(
-        'Cache-Control',
-        'no-cache, no-store, max-age=0, must-revalidate'
-      )
+        "Cache-Control",
+        "no-cache, no-store, max-age=0, must-revalidate",
+      );
     }
   }
 
-  return userResponse
+  return userResponse;
 }
diff --git a/examples/with-supertokens/assets/images/index.ts b/examples/with-supertokens/assets/images/index.ts
index f1eb59ebb6..70e552a548 100644
--- a/examples/with-supertokens/assets/images/index.ts
+++ b/examples/with-supertokens/assets/images/index.ts
@@ -1,9 +1,9 @@
-import SeparatorLine from './separator-line.svg'
-import ArrowRight from './arrow-right-icon.svg'
-import SignOutIcon from './sign-out-icon.svg'
-import GuideIcon from './guide-icon.svg'
-import BlogsIcon from './blogs-icon.svg'
-import CelebrateIcon from './celebrate-icon.svg'
+import SeparatorLine from "./separator-line.svg";
+import ArrowRight from "./arrow-right-icon.svg";
+import SignOutIcon from "./sign-out-icon.svg";
+import GuideIcon from "./guide-icon.svg";
+import BlogsIcon from "./blogs-icon.svg";
+import CelebrateIcon from "./celebrate-icon.svg";
 
 export {
   SeparatorLine,
@@ -12,4 +12,4 @@ export {
   GuideIcon,
   BlogsIcon,
   CelebrateIcon,
-}
+};
diff --git a/examples/with-supertokens/middleware.ts b/examples/with-supertokens/middleware.ts
index 3637168227..716078b504 100644
--- a/examples/with-supertokens/middleware.ts
+++ b/examples/with-supertokens/middleware.ts
@@ -1,35 +1,35 @@
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
-import { SessionContainer } from 'supertokens-node/recipe/session'
-import { withSession } from './app/sessionUtils'
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+import { SessionContainer } from "supertokens-node/recipe/session";
+import { withSession } from "./app/sessionUtils";
 
 export async function middleware(
-  request: NextRequest & { session?: SessionContainer }
+  request: NextRequest & { session?: SessionContainer },
 ) {
-  if (request.headers.has('x-user-id')) {
+  if (request.headers.has("x-user-id")) {
     console.warn(
-      'The FE tried to pass x-user-id, which is only supposed to be a backend internal header. Ignoring.'
-    )
-    request.headers.delete('x-user-id')
+      "The FE tried to pass x-user-id, which is only supposed to be a backend internal header. Ignoring.",
+    );
+    request.headers.delete("x-user-id");
   }
 
-  if (request.nextUrl.pathname.startsWith('/api/auth')) {
+  if (request.nextUrl.pathname.startsWith("/api/auth")) {
     // this hits our pages/api/auth/* endpoints
-    return NextResponse.next()
+    return NextResponse.next();
   }
 
   return withSession(request, async (session) => {
     if (session === undefined) {
-      return NextResponse.next()
+      return NextResponse.next();
     }
     return NextResponse.next({
       headers: {
-        'x-user-id': session.getUserId(),
+        "x-user-id": session.getUserId(),
       },
-    })
-  })
+    });
+  });
 }
 
 export const config = {
-  matcher: '/api/:path*',
-}
+  matcher: "/api/:path*",
+};
diff --git a/examples/with-supertokens/next.config.js b/examples/with-supertokens/next.config.js
index 767719fc4f..658404ac69 100644
--- a/examples/with-supertokens/next.config.js
+++ b/examples/with-supertokens/next.config.js
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-temporal/components/Layout.tsx b/examples/with-temporal/components/Layout.tsx
index 173751283a..ab301ffa74 100644
--- a/examples/with-temporal/components/Layout.tsx
+++ b/examples/with-temporal/components/Layout.tsx
@@ -1,20 +1,20 @@
-import React, { ReactNode } from 'react'
-import Link from 'next/link'
-import Head from 'next/head'
+import React, { ReactNode } from "react";
+import Link from "next/link";
+import Head from "next/head";
 
 type Props = {
-  children?: ReactNode
-  title?: string
-}
+  children?: ReactNode;
+  title?: string;
+};
 
-const Layout = ({ children, title = 'This is the default title' }: Props) => (
+const Layout = ({ children, title = "This is the default title" }: Props) => (
   <div>
     <Head>
       <title>{title}</title>
     </Head>
     <header>
       <nav>
-        <Link href="/">Home</Link> | <Link href="/about">About</Link>{' '}
+        <Link href="/">Home</Link> | <Link href="/about">About</Link>{" "}
       </nav>
     </header>
     {children}
@@ -23,6 +23,6 @@ const Layout = ({ children, title = 'This is the default title' }: Props) => (
       <span>I'm here to stay (Footer)</span>
     </footer>
   </div>
-)
+);
 
-export default Layout
+export default Layout;
diff --git a/examples/with-temporal/pages/about.tsx b/examples/with-temporal/pages/about.tsx
index ff3f8aed27..4d1462e883 100644
--- a/examples/with-temporal/pages/about.tsx
+++ b/examples/with-temporal/pages/about.tsx
@@ -1,6 +1,6 @@
-import type { NextPage } from 'next'
-import Link from 'next/link'
-import Layout from '../components/Layout'
+import type { NextPage } from "next";
+import Link from "next/link";
+import Layout from "../components/Layout";
 
 const AboutPage: NextPage = () => (
   <Layout title="About | Next.js + Temporal Example">
@@ -10,6 +10,6 @@ const AboutPage: NextPage = () => (
       <Link href="/">Go home</Link>
     </p>
   </Layout>
-)
+);
 
-export default AboutPage
+export default AboutPage;
diff --git a/examples/with-temporal/pages/api/orders/index.ts b/examples/with-temporal/pages/api/orders/index.ts
index fc4ea6fa44..279c7f7883 100644
--- a/examples/with-temporal/pages/api/orders/index.ts
+++ b/examples/with-temporal/pages/api/orders/index.ts
@@ -1,38 +1,38 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import { WorkflowClient } from '@temporalio/client'
-import { order } from '../../../temporal/src/workflows'
+import { NextApiRequest, NextApiResponse } from "next";
+import { WorkflowClient } from "@temporalio/client";
+import { order } from "../../../temporal/src/workflows";
 
 export type Data = {
-  result: string
-}
+  result: string;
+};
 
 function getUserId(token?: string): string {
   // TODO if the token is a JWT, decode & verify it. If it's a session ID,
   // look up the user's ID in the session store.
-  return 'user-id-123'
+  return "user-id-123";
 }
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse<Data>
+  res: NextApiResponse<Data>,
 ) {
-  if (req.method !== 'POST') {
-    res.send({ result: 'Error code 405: use POST' })
-    return
+  if (req.method !== "POST") {
+    res.send({ result: "Error code 405: use POST" });
+    return;
   }
 
-  const userId: string = getUserId(req.headers.authorization)
-  const { itemId, quantity } = JSON.parse(req.body)
+  const userId: string = getUserId(req.headers.authorization);
+  const { itemId, quantity } = JSON.parse(req.body);
 
   // Connect to our Temporal Server running locally in Docker
-  const client = new WorkflowClient()
+  const client = new WorkflowClient();
 
   // Execute the order Workflow and wait for it to finish
   const result = await client.execute(order, {
-    taskQueue: 'my-nextjs-project',
-    workflowId: 'my-business-id',
+    taskQueue: "my-nextjs-project",
+    workflowId: "my-business-id",
     args: [userId, itemId, quantity],
-  })
+  });
 
-  return res.status(200).json({ result })
+  return res.status(200).json({ result });
 }
diff --git a/examples/with-temporal/pages/index.tsx b/examples/with-temporal/pages/index.tsx
index 7a83301ef6..f0c66c0172 100644
--- a/examples/with-temporal/pages/index.tsx
+++ b/examples/with-temporal/pages/index.tsx
@@ -1,6 +1,6 @@
-import Link from 'next/link'
-import Layout from '../components/Layout'
-import { Data } from './api/orders'
+import Link from "next/link";
+import Layout from "../components/Layout";
+import { Data } from "./api/orders";
 
 const IndexPage = () => (
   <Layout title="Home | Next.js + Temporal Example">
@@ -8,15 +8,15 @@ const IndexPage = () => (
 
     <button
       onClick={async () => {
-        const newOrder = { itemId: 'B102', quantity: 2 }
-        const response = await fetch('/api/orders', {
-          method: 'POST',
-          headers: { Authorization: 'session-id-or-jwt' },
+        const newOrder = { itemId: "B102", quantity: 2 };
+        const response = await fetch("/api/orders", {
+          method: "POST",
+          headers: { Authorization: "session-id-or-jwt" },
           body: JSON.stringify(newOrder),
-        })
-        const data: Data = await response.json()
-        console.log(data)
-        alert(data.result)
+        });
+        const data: Data = await response.json();
+        console.log(data);
+        alert(data.result);
       }}
     >
       Create order
@@ -26,6 +26,6 @@ const IndexPage = () => (
       <Link href="/about">About</Link>
     </p>
   </Layout>
-)
+);
 
-export default IndexPage
+export default IndexPage;
diff --git a/examples/with-temporal/temporal/src/activities.ts b/examples/with-temporal/temporal/src/activities.ts
index 57c8334267..d2e11d14ba 100644
--- a/examples/with-temporal/temporal/src/activities.ts
+++ b/examples/with-temporal/temporal/src/activities.ts
@@ -1,31 +1,31 @@
-import fetch from 'node-fetch'
+import fetch from "node-fetch";
 
 export type ChargeResult = {
-  status: string
-  errorMessage?: string
-}
+  status: string;
+  errorMessage?: string;
+};
 
 export async function chargeUser(
   userId: string,
   itemId: string,
-  quantity: number
+  quantity: number,
 ): Promise<ChargeResult> {
   // TODO send request to the payments service that looks up the user's saved
   // payment info and the cost of the item and attempts to charge their payment
   // method.
-  console.log(`Charging user ${userId} for ${quantity} of item ${itemId}`)
+  console.log(`Charging user ${userId} for ${quantity} of item ${itemId}`);
   try {
-    const response = await fetch('http://httpbin.org/get?status=success')
-    const body: any = await response.json()
-    return { status: body.args.status }
+    const response = await fetch("http://httpbin.org/get?status=success");
+    const body: any = await response.json();
+    return { status: body.args.status };
   } catch (e: any) {
-    return { status: 'failure', errorMessage: e.message }
+    return { status: "failure", errorMessage: e.message };
   }
 }
 
 export async function checkAndDecrementInventory(
   itemId: string,
-  quantity: number
+  quantity: number,
 ): Promise<boolean> {
   // TODO a database request that—in a single operation or transaction—checks
   // whether there are `quantity` items remaining, and if so, decreases the
@@ -35,13 +35,13 @@ export async function checkAndDecrementInventory(
   //   { $inc: { numAvailable: -quantity } }
   // )
   // return result.modifiedCount === 1
-  console.log(`Reserving ${quantity} of item ${itemId}`)
-  return true
+  console.log(`Reserving ${quantity} of item ${itemId}`);
+  return true;
 }
 
 export async function incrementInventory(
   itemId: string,
-  quantity: number
+  quantity: number,
 ): Promise<boolean> {
   // TODO increment inventory:
   // const result = await db.collection('items').updateOne(
@@ -49,6 +49,6 @@ export async function incrementInventory(
   //   { $inc: { numAvailable: quantity } }
   // )
   // return result.modifiedCount === 1
-  console.log(`Incrementing ${itemId} inventory by ${quantity}`)
-  return true
+  console.log(`Incrementing ${itemId} inventory by ${quantity}`);
+  return true;
 }
diff --git a/examples/with-temporal/temporal/src/worker.ts b/examples/with-temporal/temporal/src/worker.ts
index c7dd35db66..945bfe25f0 100644
--- a/examples/with-temporal/temporal/src/worker.ts
+++ b/examples/with-temporal/temporal/src/worker.ts
@@ -1,18 +1,18 @@
-import { Worker } from '@temporalio/worker'
-import { URL } from 'url'
-import path from 'path'
-import * as activities from './activities.js'
+import { Worker } from "@temporalio/worker";
+import { URL } from "url";
+import path from "path";
+import * as activities from "./activities.js";
 
 // Support running both complied code and ts-node/esm loader
 const workflowsPath = new URL(
   `./workflows${path.extname(import.meta.url)}`,
-  import.meta.url
-).pathname
+  import.meta.url,
+).pathname;
 
 const worker = await Worker.create({
   workflowsPath,
   activities,
-  taskQueue: 'my-nextjs-project',
-})
+  taskQueue: "my-nextjs-project",
+});
 
-await worker.run()
+await worker.run();
diff --git a/examples/with-temporal/temporal/src/workflows.ts b/examples/with-temporal/temporal/src/workflows.ts
index 7e2926d161..18fd6bc120 100644
--- a/examples/with-temporal/temporal/src/workflows.ts
+++ b/examples/with-temporal/temporal/src/workflows.ts
@@ -1,34 +1,34 @@
-import { proxyActivities } from '@temporalio/workflow'
+import { proxyActivities } from "@temporalio/workflow";
 // Only import the activity types
-import type * as activities from './activities.js'
+import type * as activities from "./activities.js";
 
 const { chargeUser, checkAndDecrementInventory, incrementInventory } =
   proxyActivities<typeof activities>({
-    startToCloseTimeout: '1 minute',
-  })
+    startToCloseTimeout: "1 minute",
+  });
 
 export async function order(
   userId: string,
   itemId: string,
-  quantity: number
+  quantity: number,
 ): Promise<string> {
   const haveEnoughInventory: boolean = await checkAndDecrementInventory(
     itemId,
-    quantity
-  )
+    quantity,
+  );
   if (haveEnoughInventory) {
     const result: activities.ChargeResult = await chargeUser(
       userId,
       itemId,
-      quantity
-    )
-    if (result.status === 'success') {
-      return `Order successful!`
+      quantity,
+    );
+    if (result.status === "success") {
+      return `Order successful!`;
     } else {
-      await incrementInventory(itemId, quantity)
-      return `Unable to complete payment. Error: ${result.errorMessage}`
+      await incrementInventory(itemId, quantity);
+      return `Unable to complete payment. Error: ${result.errorMessage}`;
     }
   } else {
-    return `Sorry, we don't have enough items in stock to fulfill your order.`
+    return `Sorry, we don't have enough items in stock to fulfill your order.`;
   }
 }
diff --git a/examples/with-three-js/components/Bird.js b/examples/with-three-js/components/Bird.js
index 9aa138fb38..055ae62e28 100644
--- a/examples/with-three-js/components/Bird.js
+++ b/examples/with-three-js/components/Bird.js
@@ -1,21 +1,21 @@
-import { useEffect } from 'react'
-import { useFrame } from '@react-three/fiber'
-import { useAnimations, useGLTF } from '@react-three/drei'
+import { useEffect } from "react";
+import { useFrame } from "@react-three/fiber";
+import { useAnimations, useGLTF } from "@react-three/drei";
 
 export default function Bird({ speed, factor, url, ...props }) {
-  const { nodes, animations } = useGLTF(url)
-  const { ref, mixer } = useAnimations(animations)
+  const { nodes, animations } = useGLTF(url);
+  const { ref, mixer } = useAnimations(animations);
 
   useEffect(
     () => void mixer.clipAction(animations[0], ref.current).play(),
-    [mixer, animations, ref]
-  )
+    [mixer, animations, ref],
+  );
 
   useFrame((state, delta) => {
     ref.current.rotation.y +=
-      Math.sin((delta * factor) / 2) * Math.cos((delta * factor) / 2) * 1.5
-    mixer.update(delta * speed)
-  })
+      Math.sin((delta * factor) / 2) * Math.cos((delta * factor) / 2) * 1.5;
+    mixer.update(delta * speed);
+  });
 
   return (
     <group ref={ref}>
@@ -35,5 +35,5 @@ export default function Bird({ speed, factor, url, ...props }) {
         </mesh>
       </scene>
     </group>
-  )
+  );
 }
diff --git a/examples/with-three-js/components/Box.js b/examples/with-three-js/components/Box.js
index 7b1ae2df63..9c25e20fed 100644
--- a/examples/with-three-js/components/Box.js
+++ b/examples/with-three-js/components/Box.js
@@ -1,14 +1,14 @@
-import { useRef, useState } from 'react'
-import { useFrame } from '@react-three/fiber'
-import { Box as NativeBox } from '@react-three/drei'
+import { useRef, useState } from "react";
+import { useFrame } from "@react-three/fiber";
+import { Box as NativeBox } from "@react-three/drei";
 
 export default function Box(props) {
-  const mesh = useRef()
+  const mesh = useRef();
 
-  const [hovered, setHover] = useState(false)
-  const [active, setActive] = useState(false)
+  const [hovered, setHover] = useState(false);
+  const [active, setActive] = useState(false);
 
-  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))
+  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
 
   return (
     <NativeBox
@@ -22,8 +22,8 @@ export default function Box(props) {
     >
       <meshStandardMaterial
         attach="material"
-        color={hovered ? '#2b6c76' : '#720b23'}
+        color={hovered ? "#2b6c76" : "#720b23"}
       />
     </NativeBox>
-  )
+  );
 }
diff --git a/examples/with-three-js/pages/_app.js b/examples/with-three-js/pages/_app.js
index 7f64e6b379..c58e9eefb5 100644
--- a/examples/with-three-js/pages/_app.js
+++ b/examples/with-three-js/pages/_app.js
@@ -1,7 +1,7 @@
-import './index.css'
+import "./index.css";
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-three-js/pages/birds.js b/examples/with-three-js/pages/birds.js
index 7c2f7ecaa1..dadbf37496 100644
--- a/examples/with-three-js/pages/birds.js
+++ b/examples/with-three-js/pages/birds.js
@@ -1,26 +1,26 @@
-import { Suspense, useMemo } from 'react'
-import { Canvas } from '@react-three/fiber'
-import { OrbitControls } from '@react-three/drei'
-import Bird from '../components/Bird'
+import { Suspense, useMemo } from "react";
+import { Canvas } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
+import Bird from "../components/Bird";
 
 export default function BirdsPage() {
   const birds = useMemo(
     () =>
       new Array(10).fill().map((_, index) => {
         const x =
-          (15 + Math.random() * 30) * (Math.round(Math.random()) ? -1 : 1)
-        const y = -10 + Math.random() * 20
-        const z = -5 + Math.random() * 10
-        const bird = ['stork', 'parrot', 'flamingo'][
+          (15 + Math.random() * 30) * (Math.round(Math.random()) ? -1 : 1);
+        const y = -10 + Math.random() * 20;
+        const z = -5 + Math.random() * 10;
+        const bird = ["stork", "parrot", "flamingo"][
           Math.round(Math.random() * 2)
-        ]
-        const speed = bird === 'stork' ? 0.5 : bird === 'flamingo' ? 2 : 5
+        ];
+        const speed = bird === "stork" ? 0.5 : bird === "flamingo" ? 2 : 5;
         const factor =
-          bird === 'stork'
+          bird === "stork"
             ? 0.5 + Math.random()
-            : bird === 'flamingo'
+            : bird === "flamingo"
             ? 0.25 + Math.random()
-            : 1 + Math.random() - 0.5
+            : 1 + Math.random() - 0.5;
 
         return {
           key: index,
@@ -29,10 +29,10 @@ export default function BirdsPage() {
           speed,
           factor,
           url: `/glb/${bird}.glb`,
-        }
+        };
       }),
-    []
-  )
+    [],
+  );
 
   return (
     <Canvas camera={{ position: [0, 0, 35] }}>
@@ -45,5 +45,5 @@ export default function BirdsPage() {
         ))}
       </Suspense>
     </Canvas>
-  )
+  );
 }
diff --git a/examples/with-three-js/pages/boxes.js b/examples/with-three-js/pages/boxes.js
index bfc19fc390..9d7e3dacef 100644
--- a/examples/with-three-js/pages/boxes.js
+++ b/examples/with-three-js/pages/boxes.js
@@ -1,6 +1,6 @@
-import { Canvas } from '@react-three/fiber'
-import { OrbitControls } from '@react-three/drei'
-import Box from '../components/Box'
+import { Canvas } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
+import Box from "../components/Box";
 
 export default function BoxesPage() {
   return (
@@ -16,5 +16,5 @@ export default function BoxesPage() {
         <OrbitControls />
       </Canvas>
     </>
-  )
+  );
 }
diff --git a/examples/with-three-js/pages/index.js b/examples/with-three-js/pages/index.js
index b0c8da6549..704d0ccd37 100644
--- a/examples/with-three-js/pages/index.js
+++ b/examples/with-three-js/pages/index.js
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function IndexPage() {
   return (
@@ -6,5 +6,5 @@ export default function IndexPage() {
       <Link href="/birds">Birds Example</Link>
       <Link href="/boxes">Boxes Example</Link>
     </div>
-  )
+  );
 }
diff --git a/examples/with-tigris/components/EachToDo.tsx b/examples/with-tigris/components/EachToDo.tsx
index d2ac863cb6..11111c7db2 100644
--- a/examples/with-tigris/components/EachToDo.tsx
+++ b/examples/with-tigris/components/EachToDo.tsx
@@ -1,13 +1,13 @@
-import Image from 'next/image'
-import React from 'react'
-import { TodoItem } from '../db/models/todoItems'
-import styles from '../styles/EachToDo.module.css'
+import Image from "next/image";
+import React from "react";
+import { TodoItem } from "../db/models/todoItems";
+import styles from "../styles/EachToDo.module.css";
 
 type Props = {
-  toDoItem: TodoItem
-  deleteHandler: (id?: number) => void
-  updateHandler: (item: TodoItem) => void
-}
+  toDoItem: TodoItem;
+  deleteHandler: (id?: number) => void;
+  updateHandler: (item: TodoItem) => void;
+};
 const EachTodo = ({ toDoItem, deleteHandler, updateHandler }: Props) => {
   return (
     <>
@@ -15,18 +15,18 @@ const EachTodo = ({ toDoItem, deleteHandler, updateHandler }: Props) => {
         <button
           className={styles.eachButton}
           onClick={() => {
-            updateHandler(toDoItem)
+            updateHandler(toDoItem);
           }}
         >
           <Image
-            src={toDoItem.completed ? '/circle-checked.svg' : '/circle.svg'}
+            src={toDoItem.completed ? "/circle-checked.svg" : "/circle.svg"}
             layout="fixed"
             width={20}
             height={20}
             alt="Check Image"
           />
           <span
-            style={toDoItem.completed ? { textDecoration: 'line-through' } : {}}
+            style={toDoItem.completed ? { textDecoration: "line-through" } : {}}
           >
             {toDoItem.text}
           </span>
@@ -34,14 +34,14 @@ const EachTodo = ({ toDoItem, deleteHandler, updateHandler }: Props) => {
         <button
           className={styles.deleteBtn}
           onClick={() => {
-            deleteHandler(toDoItem.id)
+            deleteHandler(toDoItem.id);
           }}
         >
           <Image src="/delete.svg" width={24} height={24} alt="Check Image" />
         </button>
       </li>
     </>
-  )
-}
+  );
+};
 
-export default EachTodo
+export default EachTodo;
diff --git a/examples/with-tigris/components/LoaderWave.tsx b/examples/with-tigris/components/LoaderWave.tsx
index 4e9e0ceb5d..86eea483ae 100644
--- a/examples/with-tigris/components/LoaderWave.tsx
+++ b/examples/with-tigris/components/LoaderWave.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import styles from '../styles/LoaderWave.module.css'
+import React from "react";
+import styles from "../styles/LoaderWave.module.css";
 
 const LoaderWave = () => {
   return (
@@ -8,7 +8,7 @@ const LoaderWave = () => {
       <div className={`${styles.loader} ${styles.l2}`}></div>
       <div className={`${styles.loader} ${styles.l3}`}></div>
     </div>
-  )
-}
+  );
+};
 
-export default LoaderWave
+export default LoaderWave;
diff --git a/examples/with-tigris/db/models/todoItems.ts b/examples/with-tigris/db/models/todoItems.ts
index 52c78a0806..8a19d9c9e7 100644
--- a/examples/with-tigris/db/models/todoItems.ts
+++ b/examples/with-tigris/db/models/todoItems.ts
@@ -5,17 +5,17 @@ import {
   TigrisCollection,
   TigrisCollectionType,
   TigrisDataTypes,
-} from '@tigrisdata/core'
+} from "@tigrisdata/core";
 
-@TigrisCollection('todoItems')
+@TigrisCollection("todoItems")
 export class TodoItem implements TigrisCollectionType {
   @PrimaryKey(TigrisDataTypes.INT32, { order: 1, autoGenerate: true })
-  id!: number
+  id!: number;
 
   @SearchField()
   @Field()
-  text!: string
+  text!: string;
 
   @Field()
-  completed!: boolean
+  completed!: boolean;
 }
diff --git a/examples/with-tigris/lib/tigris.ts b/examples/with-tigris/lib/tigris.ts
index 9627335d71..6cdc92642b 100644
--- a/examples/with-tigris/lib/tigris.ts
+++ b/examples/with-tigris/lib/tigris.ts
@@ -1,7 +1,7 @@
-import { Tigris } from '@tigrisdata/core'
+import { Tigris } from "@tigrisdata/core";
 
-const tigrisClient = new Tigris()
-const tigrisDb = tigrisClient.getDatabase()
+const tigrisClient = new Tigris();
+const tigrisDb = tigrisClient.getDatabase();
 
 // export to share DB across modules
-export default tigrisDb
+export default tigrisDb;
diff --git a/examples/with-tigris/pages/_app.tsx b/examples/with-tigris/pages/_app.tsx
index 7a8af80e5b..2166137b65 100644
--- a/examples/with-tigris/pages/_app.tsx
+++ b/examples/with-tigris/pages/_app.tsx
@@ -1,9 +1,9 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
-import React from 'react'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import React from "react";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-tigris/pages/api/item/[id].ts b/examples/with-tigris/pages/api/item/[id].ts
index 2c7558ecd3..fddd7960fa 100644
--- a/examples/with-tigris/pages/api/item/[id].ts
+++ b/examples/with-tigris/pages/api/item/[id].ts
@@ -1,60 +1,60 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import { TodoItem } from '../../../db/models/todoItems'
-import tigrisDb from '../../../lib/tigris'
+import { NextApiRequest, NextApiResponse } from "next";
+import { TodoItem } from "../../../db/models/todoItems";
+import tigrisDb from "../../../lib/tigris";
 
 type Data = {
-  result?: TodoItem
-  error?: string
-}
+  result?: TodoItem;
+  error?: string;
+};
 
 async function handleGet(
   req: NextApiRequest,
   res: NextApiResponse<Data>,
-  itemId: number
+  itemId: number,
 ) {
   try {
-    const itemsCollection = tigrisDb.getCollection<TodoItem>(TodoItem)
-    const item = await itemsCollection.findOne({ filter: { id: itemId } })
+    const itemsCollection = tigrisDb.getCollection<TodoItem>(TodoItem);
+    const item = await itemsCollection.findOne({ filter: { id: itemId } });
     if (!item) {
-      res.status(404).json({ error: 'No item found' })
+      res.status(404).json({ error: "No item found" });
     } else {
-      res.status(200).json({ result: item })
+      res.status(200).json({ result: item });
     }
   } catch (err) {
-    const error = err as Error
-    res.status(500).json({ error: error.message })
+    const error = err as Error;
+    res.status(500).json({ error: error.message });
   }
 }
 
 async function handlePut(req: NextApiRequest, res: NextApiResponse<Data>) {
   try {
-    const item = JSON.parse(req.body) as TodoItem
-    const itemsCollection = tigrisDb.getCollection<TodoItem>(TodoItem)
-    const updated = await itemsCollection.insertOrReplaceOne(item)
-    res.status(200).json({ result: updated })
+    const item = JSON.parse(req.body) as TodoItem;
+    const itemsCollection = tigrisDb.getCollection<TodoItem>(TodoItem);
+    const updated = await itemsCollection.insertOrReplaceOne(item);
+    res.status(200).json({ result: updated });
   } catch (err) {
-    const error = err as Error
-    res.status(500).json({ error: error.message })
+    const error = err as Error;
+    res.status(500).json({ error: error.message });
   }
 }
 
 async function handleDelete(
   req: NextApiRequest,
   res: NextApiResponse<Data>,
-  itemId: number
+  itemId: number,
 ) {
   try {
-    const itemsCollection = tigrisDb.getCollection<TodoItem>(TodoItem)
+    const itemsCollection = tigrisDb.getCollection<TodoItem>(TodoItem);
     const status = (await itemsCollection.deleteOne({ filter: { id: itemId } }))
-      .status
-    if (status === 'deleted') {
-      res.status(200).json({})
+      .status;
+    if (status === "deleted") {
+      res.status(200).json({});
     } else {
-      res.status(500).json({ error: `Failed to delete ${itemId}` })
+      res.status(500).json({ error: `Failed to delete ${itemId}` });
     }
   } catch (err) {
-    const error = err as Error
-    res.status(500).json({ error: error.message })
+    const error = err as Error;
+    res.status(500).json({ error: error.message });
   }
 }
 
@@ -63,21 +63,21 @@ async function handleDelete(
 // DELETE /api/item/[id] -- deletes the item in collection where id = [id]
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse<Data>
+  res: NextApiResponse<Data>,
 ) {
-  const { id } = req.query
+  const { id } = req.query;
   switch (req.method) {
-    case 'GET':
-      await handleGet(req, res, Number(id))
-      break
-    case 'PUT':
-      await handlePut(req, res)
-      break
-    case 'DELETE':
-      await handleDelete(req, res, Number(id))
-      break
+    case "GET":
+      await handleGet(req, res, Number(id));
+      break;
+    case "PUT":
+      await handlePut(req, res);
+      break;
+    case "DELETE":
+      await handleDelete(req, res, Number(id));
+      break;
     default:
-      res.setHeader('Allow', ['GET', 'PUT', 'DELETE'])
-      res.status(405).end(`Method ${req.method} Not Allowed`)
+      res.setHeader("Allow", ["GET", "PUT", "DELETE"]);
+      res.status(405).end(`Method ${req.method} Not Allowed`);
   }
 }
diff --git a/examples/with-tigris/pages/api/items/index.ts b/examples/with-tigris/pages/api/items/index.ts
index 2fb7678b0f..6c25d0028f 100644
--- a/examples/with-tigris/pages/api/items/index.ts
+++ b/examples/with-tigris/pages/api/items/index.ts
@@ -1,33 +1,33 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { TodoItem } from '../../../db/models/todoItems'
-import tigrisDb from '../../../lib/tigris'
+import type { NextApiRequest, NextApiResponse } from "next";
+import { TodoItem } from "../../../db/models/todoItems";
+import tigrisDb from "../../../lib/tigris";
 
 type Response = {
-  result?: Array<TodoItem>
-  error?: string
-}
+  result?: Array<TodoItem>;
+  error?: string;
+};
 
 async function handleGet(req: NextApiRequest, res: NextApiResponse<Response>) {
   try {
-    const itemsCollection = tigrisDb.getCollection<TodoItem>(TodoItem)
-    const cursor = itemsCollection.findMany()
-    const items = await cursor.toArray()
-    res.status(200).json({ result: items })
+    const itemsCollection = tigrisDb.getCollection<TodoItem>(TodoItem);
+    const cursor = itemsCollection.findMany();
+    const items = await cursor.toArray();
+    res.status(200).json({ result: items });
   } catch (err) {
-    const error = err as Error
-    res.status(500).json({ error: error.message })
+    const error = err as Error;
+    res.status(500).json({ error: error.message });
   }
 }
 
 async function handlePost(req: NextApiRequest, res: NextApiResponse<Response>) {
   try {
-    const item = JSON.parse(req.body) as TodoItem
-    const itemsCollection = tigrisDb.getCollection<TodoItem>(TodoItem)
-    const inserted = await itemsCollection.insertOne(item)
-    res.status(200).json({ result: [inserted] })
+    const item = JSON.parse(req.body) as TodoItem;
+    const itemsCollection = tigrisDb.getCollection<TodoItem>(TodoItem);
+    const inserted = await itemsCollection.insertOne(item);
+    res.status(200).json({ result: [inserted] });
   } catch (err) {
-    const error = err as Error
-    res.status(500).json({ error: error.message })
+    const error = err as Error;
+    res.status(500).json({ error: error.message });
   }
 }
 
@@ -35,17 +35,17 @@ async function handlePost(req: NextApiRequest, res: NextApiResponse<Response>) {
 // POST /api/items {ToDoItem} -- inserts a new item to collection
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse<Response>
+  res: NextApiResponse<Response>,
 ) {
   switch (req.method) {
-    case 'GET':
-      await handleGet(req, res)
-      break
-    case 'POST':
-      await handlePost(req, res)
-      break
+    case "GET":
+      await handleGet(req, res);
+      break;
+    case "POST":
+      await handlePost(req, res);
+      break;
     default:
-      res.setHeader('Allow', ['GET', 'POST'])
-      res.status(405).end(`Method ${req.method} Not Allowed`)
+      res.setHeader("Allow", ["GET", "POST"]);
+      res.status(405).end(`Method ${req.method} Not Allowed`);
   }
 }
diff --git a/examples/with-tigris/pages/api/items/search.ts b/examples/with-tigris/pages/api/items/search.ts
index fe661a7eda..abb2e90773 100644
--- a/examples/with-tigris/pages/api/items/search.ts
+++ b/examples/with-tigris/pages/api/items/search.ts
@@ -1,32 +1,32 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import { TodoItem } from '../../../db/models/todoItems'
-import tigrisDb from '../../../lib/tigris'
+import { NextApiRequest, NextApiResponse } from "next";
+import { TodoItem } from "../../../db/models/todoItems";
+import tigrisDb from "../../../lib/tigris";
 
 type Data = {
-  result?: Array<TodoItem>
-  error?: string
-}
+  result?: Array<TodoItem>;
+  error?: string;
+};
 
 // GET /api/items/search?q=searchQ -- searches for items matching text `searchQ`
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse<Data>
+  res: NextApiResponse<Data>,
 ) {
-  const query = req.query['q']
+  const query = req.query["q"];
   if (query === undefined) {
-    res.status(400).json({ error: 'No search query found in request' })
-    return
+    res.status(400).json({ error: "No search query found in request" });
+    return;
   }
   try {
-    const itemsCollection = tigrisDb.getCollection<TodoItem>(TodoItem)
-    const searchResult = await itemsCollection.search({ q: query as string })
-    const items = new Array<TodoItem>()
+    const itemsCollection = tigrisDb.getCollection<TodoItem>(TodoItem);
+    const searchResult = await itemsCollection.search({ q: query as string });
+    const items = new Array<TodoItem>();
     for await (const res of searchResult) {
-      res.hits.forEach((hit) => items.push(hit.document))
+      res.hits.forEach((hit) => items.push(hit.document));
     }
-    res.status(200).json({ result: items })
+    res.status(200).json({ result: items });
   } catch (err) {
-    const error = err as Error
-    res.status(500).json({ error: error.message })
+    const error = err as Error;
+    res.status(500).json({ error: error.message });
   }
 }
diff --git a/examples/with-tigris/pages/index.tsx b/examples/with-tigris/pages/index.tsx
index 47950a3898..0d7af1afb3 100644
--- a/examples/with-tigris/pages/index.tsx
+++ b/examples/with-tigris/pages/index.tsx
@@ -1,29 +1,29 @@
-import type { NextPage } from 'next'
-import Image from 'next/image'
-import Head from 'next/head'
-import React, { useEffect, useState } from 'react'
-import EachTodo from '../components/EachToDo'
-import LoaderWave from '../components/LoaderWave'
-import { TodoItem } from '../db/models/todoItems'
-import styles from '../styles/Home.module.css'
+import type { NextPage } from "next";
+import Image from "next/image";
+import Head from "next/head";
+import React, { useEffect, useState } from "react";
+import EachTodo from "../components/EachToDo";
+import LoaderWave from "../components/LoaderWave";
+import { TodoItem } from "../db/models/todoItems";
+import styles from "../styles/Home.module.css";
 
 const Home: NextPage = () => {
   // This is the input field
-  const [textInput, setTextInput] = useState('')
+  const [textInput, setTextInput] = useState("");
 
   // Todo list array which displays the todo items
-  const [todoList, setTodoList] = useState<TodoItem[]>([])
+  const [todoList, setTodoList] = useState<TodoItem[]>([]);
 
   // Loading and Error flags for the template
-  const [isLoading, setIsLoading] = useState(false)
-  const [isError, setIsError] = useState(false)
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
 
   // This is use to animate the input text field
-  const [wiggleError, setWiggleError] = useState(false)
+  const [wiggleError, setWiggleError] = useState(false);
 
   // Two separate views. 1. List view for todo items & 2. Search result view
-  type viewModeType = 'list' | 'search'
-  const [viewMode, setViewMode] = useState<viewModeType>('list')
+  type viewModeType = "list" | "search";
+  const [viewMode, setViewMode] = useState<viewModeType>("list");
 
   // Util search query/input check
   /*
@@ -31,24 +31,24 @@ const Home: NextPage = () => {
   This also wiggles the text input if the regex doesn't find any match.
   */
   const queryCheckWiggle = () => {
-    const result: RegExpMatchArray | null = textInput.match('^\\S.{0,100}$')
+    const result: RegExpMatchArray | null = textInput.match("^\\S.{0,100}$");
     if (result === null) {
-      setWiggleError(true)
-      return true
+      setWiggleError(true);
+      return true;
     }
-    return false
-  }
+    return false;
+  };
 
   useEffect(() => {
     if (!wiggleError) {
-      return
+      return;
     }
     const timeOut = setTimeout(() => {
-      setWiggleError(false)
-    }, 500)
+      setWiggleError(false);
+    }, 500);
 
-    return () => clearTimeout(timeOut)
-  }, [wiggleError])
+    return () => clearTimeout(timeOut);
+  }, [wiggleError]);
 
   // Search query
   /*
@@ -57,22 +57,22 @@ const Home: NextPage = () => {
   */
   const searchQuery = () => {
     if (queryCheckWiggle()) {
-      return
+      return;
     }
-    setIsLoading(true)
+    setIsLoading(true);
 
     fetch(`/api/items/search?q=${encodeURI(textInput)}`, {
-      method: 'GET',
+      method: "GET",
     })
       .then((response) => response.json())
       .then((data) => {
-        setIsLoading(false)
+        setIsLoading(false);
         if (data.result) {
-          setViewMode('search')
-          setTodoList(data.result)
+          setViewMode("search");
+          setTodoList(data.result);
         }
-      })
-  }
+      });
+  };
 
   // Fetch Todo List
   /*
@@ -82,30 +82,30 @@ const Home: NextPage = () => {
    If the 'result' key is present we safely set the 'todoList'.
   */
   const fetchListItems = () => {
-    setIsLoading(true)
-    setIsError(false)
+    setIsLoading(true);
+    setIsError(false);
 
-    fetch('/api/items')
+    fetch("/api/items")
       .then((response) => response.json())
       .then((data) => {
-        setIsLoading(false)
+        setIsLoading(false);
         if (data.result) {
-          setViewMode('list')
-          setTodoList(data.result)
+          setViewMode("list");
+          setTodoList(data.result);
         } else {
-          setIsError(true)
+          setIsError(true);
         }
       })
       .catch(() => {
-        setIsLoading(false)
-        setIsError(true)
-      })
-  }
+        setIsLoading(false);
+        setIsError(true);
+      });
+  };
 
   // Load the initial list of todo-items
   useEffect(() => {
-    fetchListItems()
-  }, [])
+    fetchListItems();
+  }, []);
 
   // Add a new todo-item
   /*
@@ -114,19 +114,19 @@ const Home: NextPage = () => {
   */
   const addToDoItem = () => {
     if (queryCheckWiggle()) {
-      return
+      return;
     }
-    setIsLoading(true)
+    setIsLoading(true);
 
-    fetch('/api/items', {
-      method: 'POST',
+    fetch("/api/items", {
+      method: "POST",
       body: JSON.stringify({ text: textInput, completed: false }),
     }).then(() => {
-      setIsLoading(false)
-      setTextInput('')
-      fetchListItems()
-    })
-  }
+      setIsLoading(false);
+      setTextInput("");
+      fetchListItems();
+    });
+  };
 
   // Delete Todo-item
   /*
@@ -134,19 +134,19 @@ const Home: NextPage = () => {
   It calls the endpoint 'api/item/<id>' with the 'DELETE' method. Read the method 'handleDelete' under pages/api/item/[id]' to learn more how the api handles deletion.
   */
   const deleteTodoItem = (id?: number) => {
-    setIsLoading(true)
+    setIsLoading(true);
 
-    fetch('/api/item/' + id, {
-      method: 'DELETE',
+    fetch("/api/item/" + id, {
+      method: "DELETE",
     }).then(() => {
-      setIsLoading(false)
-      if (viewMode === 'list') {
-        fetchListItems()
+      setIsLoading(false);
+      if (viewMode === "list") {
+        fetchListItems();
       } else {
-        searchQuery()
+        searchQuery();
       }
-    })
-  }
+    });
+  };
 
   // Update Todo-item (mark complete/incomplete)
   /*
@@ -154,21 +154,21 @@ const Home: NextPage = () => {
   Navigate to 'api/item/[id]' and read more how the api handles updates under the 'handlePut' method.
   */
   const updateTodoItem = (item: TodoItem) => {
-    item.completed = !item.completed
-    setIsLoading(true)
+    item.completed = !item.completed;
+    setIsLoading(true);
 
-    fetch('/api/item/' + item.id, {
-      method: 'PUT',
+    fetch("/api/item/" + item.id, {
+      method: "PUT",
       body: JSON.stringify(item),
     }).then(() => {
-      setIsLoading(false)
-      if (viewMode === 'list') {
-        fetchListItems()
+      setIsLoading(false);
+      if (viewMode === "list") {
+        fetchListItems();
       } else {
-        searchQuery()
+        searchQuery();
       }
-    })
-  }
+    });
+  };
 
   return (
     <div>
@@ -184,12 +184,12 @@ const Home: NextPage = () => {
         <div className={styles.searchHeader}>
           <input
             className={`${styles.searchInput} ${
-              wiggleError ? styles.invalid : ''
+              wiggleError ? styles.invalid : ""
             }`}
             value={textInput}
             onChange={(e) => {
-              setWiggleError(false)
-              setTextInput(e.target.value)
+              setWiggleError(false);
+              setTextInput(e.target.value);
             }}
             placeholder="Type an item to add or search"
           />
@@ -204,12 +204,12 @@ const Home: NextPage = () => {
             <p className={styles.errorText}>Something went wrong.. </p>
           )}
           {isLoading && <LoaderWave />}
-          {viewMode === 'search' && (
+          {viewMode === "search" && (
             <button
               className={styles.clearSearch}
               onClick={() => {
-                setTextInput('')
-                fetchListItems()
+                setTextInput("");
+                fetchListItems();
               }}
             >
               Go back to list
@@ -219,9 +219,9 @@ const Home: NextPage = () => {
           {/* Todo Item List */}
           {todoList.length < 1 ? (
             <p className={styles.noItems}>
-              {viewMode === 'search'
-                ? 'No items found.. '
-                : 'Add a todo by typing in the field above and hit Add!'}
+              {viewMode === "search"
+                ? "No items found.. "
+                : "Add a todo by typing in the field above and hit Add!"}
             </p>
           ) : (
             <ul>
@@ -233,7 +233,7 @@ const Home: NextPage = () => {
                     deleteHandler={deleteTodoItem}
                     updateHandler={updateTodoItem}
                   />
-                )
+                );
               })}
             </ul>
           )}
@@ -249,7 +249,7 @@ const Home: NextPage = () => {
         </a>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/examples/with-tigris/scripts/setup.ts b/examples/with-tigris/scripts/setup.ts
index 0b159a9bd9..cacb558ee1 100644
--- a/examples/with-tigris/scripts/setup.ts
+++ b/examples/with-tigris/scripts/setup.ts
@@ -1,13 +1,13 @@
-import { Tigris } from '@tigrisdata/core'
-import { TodoItem } from '../db/models/todoItems'
+import { Tigris } from "@tigrisdata/core";
+import { TodoItem } from "../db/models/todoItems";
 
 async function main() {
   // setup client
-  const tigrisClient = new Tigris()
+  const tigrisClient = new Tigris();
   // ensure branch exists, create it if it needs to be created dynamically
-  await tigrisClient.getDatabase().initializeBranch()
+  await tigrisClient.getDatabase().initializeBranch();
   // register schemas
-  await tigrisClient.registerSchemas([TodoItem])
+  await tigrisClient.registerSchemas([TodoItem]);
 }
 
-main()
+main();
diff --git a/examples/with-tigris/styles/EachToDo.module.css b/examples/with-tigris/styles/EachToDo.module.css
index ed1556d2cd..096af8127e 100644
--- a/examples/with-tigris/styles/EachToDo.module.css
+++ b/examples/with-tigris/styles/EachToDo.module.css
@@ -18,7 +18,7 @@
 }
 
 .eachButton:hover img {
-  content: url('/circle-checked.svg');
+  content: url("/circle-checked.svg");
 }
 
 .eachButton:hover span {
diff --git a/examples/with-tigris/styles/globals.css b/examples/with-tigris/styles/globals.css
index c3660a7014..845dc81d5c 100644
--- a/examples/with-tigris/styles/globals.css
+++ b/examples/with-tigris/styles/globals.css
@@ -108,7 +108,7 @@ body {
 body {
   min-width: 768px;
   line-height: 1;
-  font-family: 'Rubik', sans-serif;
+  font-family: "Rubik", sans-serif;
   color: #ffffff;
 }
 
diff --git a/examples/with-turbopack-loaders/next.config.js b/examples/with-turbopack-loaders/next.config.js
index 5ba0898344..374601906c 100644
--- a/examples/with-turbopack-loaders/next.config.js
+++ b/examples/with-turbopack-loaders/next.config.js
@@ -2,15 +2,15 @@ module.exports = {
   experimental: {
     turbo: {
       rules: {
-        '*.react.svg': {
-          loaders: ['@svgr/webpack'],
-          as: '*.js',
+        "*.react.svg": {
+          loaders: ["@svgr/webpack"],
+          as: "*.js",
         },
-        '*.styl': {
-          loaders: ['stylus-loader'],
-          as: '*.css',
+        "*.styl": {
+          loaders: ["stylus-loader"],
+          as: "*.css",
         },
       },
     },
   },
-}
+};
diff --git a/examples/with-turbopack-loaders/pages/index.js b/examples/with-turbopack-loaders/pages/index.js
index cf2f400b78..97a39a01f6 100644
--- a/examples/with-turbopack-loaders/pages/index.js
+++ b/examples/with-turbopack-loaders/pages/index.js
@@ -1,6 +1,6 @@
-import Vercel from '../vercel.react.svg'
-import '../styles.styl'
+import Vercel from "../vercel.react.svg";
+import "../styles.styl";
 
 export default function Home() {
-  return <Vercel />
+  return <Vercel />;
 }
diff --git a/examples/with-turbopack/app/layout.tsx b/examples/with-turbopack/app/layout.tsx
index dbce4ea8e3..225b6038d7 100644
--- a/examples/with-turbopack/app/layout.tsx
+++ b/examples/with-turbopack/app/layout.tsx
@@ -1,11 +1,11 @@
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-turbopack/app/page.tsx b/examples/with-turbopack/app/page.tsx
index 6baa6ade86..e85d5092c7 100644
--- a/examples/with-turbopack/app/page.tsx
+++ b/examples/with-turbopack/app/page.tsx
@@ -1,3 +1,3 @@
 export default function Page() {
-  return <h1>Hello, Next.js!</h1>
+  return <h1>Hello, Next.js!</h1>;
 }
diff --git a/examples/with-typescript-graphql/README.md b/examples/with-typescript-graphql/README.md
index 438ab538c8..f3c1e3276d 100644
--- a/examples/with-typescript-graphql/README.md
+++ b/examples/with-typescript-graphql/README.md
@@ -5,17 +5,17 @@ One of the strengths of GraphQL is [enforcing data types on runtime](https://gra
 This template gives you the best start to use GraphQL with fully typed queries (client-side) and resolvers (server-side), all this with minimum bundle size 📦
 
 ```tsx
-import { useQuery } from '@apollo/client'
-import { ViewerDocument } from 'lib/graphql-operations'
+import { useQuery } from "@apollo/client";
+import { ViewerDocument } from "lib/graphql-operations";
 
 const News = () => {
   // Typed already️⚡️
   const {
     data: { viewer },
-  } = useQuery(ViewerDocument)
+  } = useQuery(ViewerDocument);
 
-  return <div>{viewer.name}</div>
-}
+  return <div>{viewer.name}</div>;
+};
 ```
 
 ## Deploy your own
diff --git a/examples/with-typescript-graphql/codegen.ts b/examples/with-typescript-graphql/codegen.ts
index e9634c92cc..65548da599 100644
--- a/examples/with-typescript-graphql/codegen.ts
+++ b/examples/with-typescript-graphql/codegen.ts
@@ -1,23 +1,23 @@
-import type { CodegenConfig } from '@graphql-codegen/cli'
+import type { CodegenConfig } from "@graphql-codegen/cli";
 
 const config: CodegenConfig = {
   schema: [
     {
-      'lib/schema.ts': {
+      "lib/schema.ts": {
         noRequire: true,
       },
     },
   ],
-  documents: './pages/**/*.tsx',
+  documents: "./pages/**/*.tsx",
   generates: {
-    './lib/gql/': {
-      preset: 'client',
+    "./lib/gql/": {
+      preset: "client",
       plugins: [],
     },
-    './lib/resolvers-types.ts': {
-      plugins: ['typescript', 'typescript-resolvers'],
+    "./lib/resolvers-types.ts": {
+      plugins: ["typescript", "typescript-resolvers"],
     },
   },
-}
+};
 
-export default config
+export default config;
diff --git a/examples/with-typescript-graphql/jest.config.js b/examples/with-typescript-graphql/jest.config.js
index 1046252bdc..c7c929e11f 100644
--- a/examples/with-typescript-graphql/jest.config.js
+++ b/examples/with-typescript-graphql/jest.config.js
@@ -1,13 +1,13 @@
 module.exports = {
-  roots: ['<rootDir>'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'jsx'],
-  testPathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|.next)[/\\\\]'],
-  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$'],
+  roots: ["<rootDir>"],
+  moduleFileExtensions: ["ts", "tsx", "js", "json", "jsx"],
+  testPathIgnorePatterns: ["<rootDir>[/\\\\](node_modules|.next)[/\\\\]"],
+  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$"],
   transform: {
-    '^.+\\.(ts|tsx)$': 'babel-jest',
-    '\\.graphql$': [
-      'graphql-let/jestTransformer',
-      { subsequentTransformer: 'babel-jest' },
+    "^.+\\.(ts|tsx)$": "babel-jest",
+    "\\.graphql$": [
+      "graphql-let/jestTransformer",
+      { subsequentTransformer: "babel-jest" },
     ],
   },
-}
+};
diff --git a/examples/with-typescript-graphql/lib/apollo.ts b/examples/with-typescript-graphql/lib/apollo.ts
index 41135d3554..abe1ba8787 100644
--- a/examples/with-typescript-graphql/lib/apollo.ts
+++ b/examples/with-typescript-graphql/lib/apollo.ts
@@ -1,69 +1,69 @@
-import { IncomingMessage, ServerResponse } from 'http'
-import { useMemo } from 'react'
+import { IncomingMessage, ServerResponse } from "http";
+import { useMemo } from "react";
 import {
   ApolloClient,
   InMemoryCache,
   NormalizedCacheObject,
-} from '@apollo/client'
-import resolvers from './resolvers'
-import typeDefs from './schema'
+} from "@apollo/client";
+import resolvers from "./resolvers";
+import typeDefs from "./schema";
 
-let apolloClient: ApolloClient<NormalizedCacheObject> | undefined
+let apolloClient: ApolloClient<NormalizedCacheObject> | undefined;
 
 export type ResolverContext = {
-  req?: IncomingMessage
-  res?: ServerResponse
-}
+  req?: IncomingMessage;
+  res?: ServerResponse;
+};
 
 function createIsomorphLink(context: ResolverContext = {}) {
-  if (typeof window === 'undefined') {
-    const { SchemaLink } = require('@apollo/client/link/schema')
-    const { makeExecutableSchema } = require('@graphql-tools/schema')
+  if (typeof window === "undefined") {
+    const { SchemaLink } = require("@apollo/client/link/schema");
+    const { makeExecutableSchema } = require("@graphql-tools/schema");
 
     const schema = makeExecutableSchema({
       typeDefs,
       resolvers,
-    })
-    return new SchemaLink({ schema, context })
+    });
+    return new SchemaLink({ schema, context });
   } else {
-    const { HttpLink } = require('@apollo/client')
+    const { HttpLink } = require("@apollo/client");
     return new HttpLink({
-      uri: '/api/graphql',
-      credentials: 'same-origin',
-    })
+      uri: "/api/graphql",
+      credentials: "same-origin",
+    });
   }
 }
 
 function createApolloClient(context?: ResolverContext) {
   return new ApolloClient({
-    ssrMode: typeof window === 'undefined',
+    ssrMode: typeof window === "undefined",
     link: createIsomorphLink(context),
     cache: new InMemoryCache(),
-  })
+  });
 }
 
 export function initializeApollo(
   initialState: any = null,
   // Pages with Next.js data fetching methods, like `getStaticProps`, can send
   // a custom context which will be used by `SchemaLink` to server render pages
-  context?: ResolverContext
+  context?: ResolverContext,
 ) {
-  const _apolloClient = apolloClient ?? createApolloClient(context)
+  const _apolloClient = apolloClient ?? createApolloClient(context);
 
   // If your page has Next.js data fetching methods that use Apollo Client, the initial state
   // get hydrated here
   if (initialState) {
-    _apolloClient.cache.restore(initialState)
+    _apolloClient.cache.restore(initialState);
   }
   // For SSG and SSR always create a new Apollo Client
-  if (typeof window === 'undefined') return _apolloClient
+  if (typeof window === "undefined") return _apolloClient;
   // Create the Apollo Client once in the client
-  if (!apolloClient) apolloClient = _apolloClient
+  if (!apolloClient) apolloClient = _apolloClient;
 
-  return _apolloClient
+  return _apolloClient;
 }
 
 export function useApollo(initialState: any) {
-  const store = useMemo(() => initializeApollo(initialState), [initialState])
-  return store
+  const store = useMemo(() => initializeApollo(initialState), [initialState]);
+  return store;
 }
diff --git a/examples/with-typescript-graphql/lib/gql/fragment-masking.ts b/examples/with-typescript-graphql/lib/gql/fragment-masking.ts
index 4de725491d..d181c55919 100644
--- a/examples/with-typescript-graphql/lib/gql/fragment-masking.ts
+++ b/examples/with-typescript-graphql/lib/gql/fragment-masking.ts
@@ -1,44 +1,44 @@
-import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
+import { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-node/core";
 
 export type FragmentType<TDocumentType extends DocumentNode<any, any>> =
   TDocumentType extends DocumentNode<infer TType, any>
-    ? TType extends { ' $fragmentName'?: infer TKey }
+    ? TType extends { " $fragmentName"?: infer TKey }
       ? TKey extends string
-        ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+        ? { " $fragmentRefs"?: { [key in TKey]: TType } }
         : never
       : never
-    : never
+    : never;
 
 // return non-nullable if `fragmentType` is non-nullable
 export function useFragment<TType>(
   _documentNode: DocumentNode<TType, any>,
-  fragmentType: FragmentType<DocumentNode<TType, any>>
-): TType
+  fragmentType: FragmentType<DocumentNode<TType, any>>,
+): TType;
 // return nullable if `fragmentType` is nullable
 export function useFragment<TType>(
   _documentNode: DocumentNode<TType, any>,
-  fragmentType: FragmentType<DocumentNode<TType, any>> | null | undefined
-): TType | null | undefined
+  fragmentType: FragmentType<DocumentNode<TType, any>> | null | undefined,
+): TType | null | undefined;
 // return array of non-nullable if `fragmentType` is array of non-nullable
 export function useFragment<TType>(
   _documentNode: DocumentNode<TType, any>,
-  fragmentType: ReadonlyArray<FragmentType<DocumentNode<TType, any>>>
-): ReadonlyArray<TType>
+  fragmentType: ReadonlyArray<FragmentType<DocumentNode<TType, any>>>,
+): ReadonlyArray<TType>;
 // return array of nullable if `fragmentType` is array of nullable
 export function useFragment<TType>(
   _documentNode: DocumentNode<TType, any>,
   fragmentType:
     | ReadonlyArray<FragmentType<DocumentNode<TType, any>>>
     | null
-    | undefined
-): ReadonlyArray<TType> | null | undefined
+    | undefined,
+): ReadonlyArray<TType> | null | undefined;
 export function useFragment<TType>(
   _documentNode: DocumentNode<TType, any>,
   fragmentType:
     | FragmentType<DocumentNode<TType, any>>
     | ReadonlyArray<FragmentType<DocumentNode<TType, any>>>
     | null
-    | undefined
+    | undefined,
 ): TType | ReadonlyArray<TType> | null | undefined {
-  return fragmentType as any
+  return fragmentType as any;
 }
diff --git a/examples/with-typescript-graphql/lib/gql/gql.ts b/examples/with-typescript-graphql/lib/gql/gql.ts
index 92cba00031..18568ab6c3 100644
--- a/examples/with-typescript-graphql/lib/gql/gql.ts
+++ b/examples/with-typescript-graphql/lib/gql/gql.ts
@@ -1,25 +1,25 @@
 /* eslint-disable */
-import * as types from './graphql'
-import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
+import * as types from "./graphql";
+import { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-node/core";
 
 const documents = {
-  '\n  mutation UpdateName($name: String!) {\n    updateName(name: $name) {\n      id\n      name\n      status\n    }\n  }\n':
+  "\n  mutation UpdateName($name: String!) {\n    updateName(name: $name) {\n      id\n      name\n      status\n    }\n  }\n":
     types.UpdateNameDocument,
-  '\n  query Viewer {\n    viewer {\n      id\n      name\n      status\n    }\n  }\n':
+  "\n  query Viewer {\n    viewer {\n      id\n      name\n      status\n    }\n  }\n":
     types.ViewerDocument,
-}
+};
 
 export function graphql(
-  source: '\n  mutation UpdateName($name: String!) {\n    updateName(name: $name) {\n      id\n      name\n      status\n    }\n  }\n'
-): (typeof documents)['\n  mutation UpdateName($name: String!) {\n    updateName(name: $name) {\n      id\n      name\n      status\n    }\n  }\n']
+  source: "\n  mutation UpdateName($name: String!) {\n    updateName(name: $name) {\n      id\n      name\n      status\n    }\n  }\n",
+): (typeof documents)["\n  mutation UpdateName($name: String!) {\n    updateName(name: $name) {\n      id\n      name\n      status\n    }\n  }\n"];
 export function graphql(
-  source: '\n  query Viewer {\n    viewer {\n      id\n      name\n      status\n    }\n  }\n'
-): (typeof documents)['\n  query Viewer {\n    viewer {\n      id\n      name\n      status\n    }\n  }\n']
+  source: "\n  query Viewer {\n    viewer {\n      id\n      name\n      status\n    }\n  }\n",
+): (typeof documents)["\n  query Viewer {\n    viewer {\n      id\n      name\n      status\n    }\n  }\n"];
 
-export function graphql(source: string): unknown
+export function graphql(source: string): unknown;
 export function graphql(source: string) {
-  return (documents as any)[source] ?? {}
+  return (documents as any)[source] ?? {};
 }
 
 export type DocumentType<TDocumentNode extends DocumentNode<any, any>> =
-  TDocumentNode extends DocumentNode<infer TType, any> ? TType : never
+  TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;
diff --git a/examples/with-typescript-graphql/lib/gql/graphql.ts b/examples/with-typescript-graphql/lib/gql/graphql.ts
index a2526a7695..599b2db0fe 100644
--- a/examples/with-typescript-graphql/lib/gql/graphql.ts
+++ b/examples/with-typescript-graphql/lib/gql/graphql.ts
@@ -1,104 +1,104 @@
 /* eslint-disable */
-import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
-export type Maybe<T> = T | null
-export type InputMaybe<T> = Maybe<T>
+import { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-node/core";
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = {
-  [K in keyof T]: T[K]
-}
+  [K in keyof T]: T[K];
+};
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> & {
-  [SubKey in K]?: Maybe<T[SubKey]>
-}
+  [SubKey in K]?: Maybe<T[SubKey]>;
+};
 export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & {
-  [SubKey in K]: Maybe<T[SubKey]>
-}
+  [SubKey in K]: Maybe<T[SubKey]>;
+};
 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
-  ID: string
-  String: string
-  Boolean: boolean
-  Int: number
-  Float: number
-}
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+};
 
 export type Mutation = {
-  __typename?: 'Mutation'
-  updateName: User
-}
+  __typename?: "Mutation";
+  updateName: User;
+};
 
 export type MutationUpdateNameArgs = {
-  name: Scalars['String']
-}
+  name: Scalars["String"];
+};
 
 export type Query = {
-  __typename?: 'Query'
-  viewer: User
-}
+  __typename?: "Query";
+  viewer: User;
+};
 
 export type User = {
-  __typename?: 'User'
-  id: Scalars['ID']
-  name: Scalars['String']
-  status: Scalars['String']
-}
+  __typename?: "User";
+  id: Scalars["ID"];
+  name: Scalars["String"];
+  status: Scalars["String"];
+};
 
 export type UpdateNameMutationVariables = Exact<{
-  name: Scalars['String']
-}>
+  name: Scalars["String"];
+}>;
 
 export type UpdateNameMutation = {
-  __typename?: 'Mutation'
-  updateName: { __typename?: 'User'; id: string; name: string; status: string }
-}
+  __typename?: "Mutation";
+  updateName: { __typename?: "User"; id: string; name: string; status: string };
+};
 
-export type ViewerQueryVariables = Exact<{ [key: string]: never }>
+export type ViewerQueryVariables = Exact<{ [key: string]: never }>;
 
 export type ViewerQuery = {
-  __typename?: 'Query'
-  viewer: { __typename?: 'User'; id: string; name: string; status: string }
-}
+  __typename?: "Query";
+  viewer: { __typename?: "User"; id: string; name: string; status: string };
+};
 
 export const UpdateNameDocument = {
-  kind: 'Document',
+  kind: "Document",
   definitions: [
     {
-      kind: 'OperationDefinition',
-      operation: 'mutation',
-      name: { kind: 'Name', value: 'UpdateName' },
+      kind: "OperationDefinition",
+      operation: "mutation",
+      name: { kind: "Name", value: "UpdateName" },
       variableDefinitions: [
         {
-          kind: 'VariableDefinition',
-          variable: { kind: 'Variable', name: { kind: 'Name', value: 'name' } },
+          kind: "VariableDefinition",
+          variable: { kind: "Variable", name: { kind: "Name", value: "name" } },
           type: {
-            kind: 'NonNullType',
+            kind: "NonNullType",
             type: {
-              kind: 'NamedType',
-              name: { kind: 'Name', value: 'String' },
+              kind: "NamedType",
+              name: { kind: "Name", value: "String" },
             },
           },
         },
       ],
       selectionSet: {
-        kind: 'SelectionSet',
+        kind: "SelectionSet",
         selections: [
           {
-            kind: 'Field',
-            name: { kind: 'Name', value: 'updateName' },
+            kind: "Field",
+            name: { kind: "Name", value: "updateName" },
             arguments: [
               {
-                kind: 'Argument',
-                name: { kind: 'Name', value: 'name' },
+                kind: "Argument",
+                name: { kind: "Name", value: "name" },
                 value: {
-                  kind: 'Variable',
-                  name: { kind: 'Name', value: 'name' },
+                  kind: "Variable",
+                  name: { kind: "Name", value: "name" },
                 },
               },
             ],
             selectionSet: {
-              kind: 'SelectionSet',
+              kind: "SelectionSet",
               selections: [
-                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'name' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'status' } },
+                { kind: "Field", name: { kind: "Name", value: "id" } },
+                { kind: "Field", name: { kind: "Name", value: "name" } },
+                { kind: "Field", name: { kind: "Name", value: "status" } },
               ],
             },
           },
@@ -106,26 +106,26 @@ export const UpdateNameDocument = {
       },
     },
   ],
-} as unknown as DocumentNode<UpdateNameMutation, UpdateNameMutationVariables>
+} as unknown as DocumentNode<UpdateNameMutation, UpdateNameMutationVariables>;
 export const ViewerDocument = {
-  kind: 'Document',
+  kind: "Document",
   definitions: [
     {
-      kind: 'OperationDefinition',
-      operation: 'query',
-      name: { kind: 'Name', value: 'Viewer' },
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "Viewer" },
       selectionSet: {
-        kind: 'SelectionSet',
+        kind: "SelectionSet",
         selections: [
           {
-            kind: 'Field',
-            name: { kind: 'Name', value: 'viewer' },
+            kind: "Field",
+            name: { kind: "Name", value: "viewer" },
             selectionSet: {
-              kind: 'SelectionSet',
+              kind: "SelectionSet",
               selections: [
-                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'name' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'status' } },
+                { kind: "Field", name: { kind: "Name", value: "id" } },
+                { kind: "Field", name: { kind: "Name", value: "name" } },
+                { kind: "Field", name: { kind: "Name", value: "status" } },
               ],
             },
           },
@@ -133,4 +133,4 @@ export const ViewerDocument = {
       },
     },
   ],
-} as unknown as DocumentNode<ViewerQuery, ViewerQueryVariables>
+} as unknown as DocumentNode<ViewerQuery, ViewerQueryVariables>;
diff --git a/examples/with-typescript-graphql/lib/gql/index.ts b/examples/with-typescript-graphql/lib/gql/index.ts
index 99775ae23c..b3c7f85b88 100644
--- a/examples/with-typescript-graphql/lib/gql/index.ts
+++ b/examples/with-typescript-graphql/lib/gql/index.ts
@@ -1,2 +1,2 @@
-export * from './gql'
-export * from './fragment-masking'
+export * from "./gql";
+export * from "./fragment-masking";
diff --git a/examples/with-typescript-graphql/lib/resolvers.ts b/examples/with-typescript-graphql/lib/resolvers.ts
index 8d2633d7ed..861ff21e8c 100644
--- a/examples/with-typescript-graphql/lib/resolvers.ts
+++ b/examples/with-typescript-graphql/lib/resolvers.ts
@@ -1,23 +1,23 @@
-import { Resolvers } from './resolvers-types'
+import { Resolvers } from "./resolvers-types";
 
 const userProfile = {
   id: String(1),
-  name: 'John Smith',
-  status: 'cached',
-}
+  name: "John Smith",
+  status: "cached",
+};
 
 const resolvers: Resolvers = {
   Query: {
     viewer(_parent, _args, _context, _info) {
-      return userProfile
+      return userProfile;
     },
   },
   Mutation: {
     updateName(_parent, _args, _context, _info) {
-      userProfile.name = _args.name
-      return userProfile
+      userProfile.name = _args.name;
+      return userProfile;
     },
   },
-}
+};
 
-export default resolvers
+export default resolvers;
diff --git a/examples/with-typescript-graphql/lib/schema.ts b/examples/with-typescript-graphql/lib/schema.ts
index 50682436e3..ae2be76bb1 100644
--- a/examples/with-typescript-graphql/lib/schema.ts
+++ b/examples/with-typescript-graphql/lib/schema.ts
@@ -12,6 +12,6 @@ const typeDefs = /* GraphQL */ `
   type Mutation {
     updateName(name: String!): User!
   }
-`
+`;
 
-export default typeDefs
+export default typeDefs;
diff --git a/examples/with-typescript-graphql/next.config.js b/examples/with-typescript-graphql/next.config.js
index 970a2fb5ed..dccbf90d4c 100644
--- a/examples/with-typescript-graphql/next.config.js
+++ b/examples/with-typescript-graphql/next.config.js
@@ -3,10 +3,10 @@ module.exports = {
   webpack(config, options) {
     config.module.rules.push({
       test: /\.ya?ml$/,
-      type: 'json',
-      use: 'yaml-loader',
-    })
+      type: "json",
+      use: "yaml-loader",
+    });
 
-    return config
+    return config;
   },
-}
+};
diff --git a/examples/with-typescript-graphql/pages/_app.tsx b/examples/with-typescript-graphql/pages/_app.tsx
index d4f4fc67b8..f8797f95ea 100644
--- a/examples/with-typescript-graphql/pages/_app.tsx
+++ b/examples/with-typescript-graphql/pages/_app.tsx
@@ -1,13 +1,13 @@
-import { AppProps } from 'next/app'
-import { ApolloProvider } from '@apollo/client'
-import { useApollo } from '../lib/apollo'
+import { AppProps } from "next/app";
+import { ApolloProvider } from "@apollo/client";
+import { useApollo } from "../lib/apollo";
 
 export default function App({ Component, pageProps }: AppProps) {
-  const apolloClient = useApollo(pageProps.initialApolloState)
+  const apolloClient = useApollo(pageProps.initialApolloState);
 
   return (
     <ApolloProvider client={apolloClient}>
       <Component {...pageProps} />
     </ApolloProvider>
-  )
+  );
 }
diff --git a/examples/with-typescript-graphql/pages/about.tsx b/examples/with-typescript-graphql/pages/about.tsx
index cd008b885a..f2486bf89a 100644
--- a/examples/with-typescript-graphql/pages/about.tsx
+++ b/examples/with-typescript-graphql/pages/about.tsx
@@ -1,9 +1,9 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function About() {
   return (
     <div>
       Welcome to the about page. Go to the <Link href="/">Home</Link> page.
     </div>
-  )
+  );
 }
diff --git a/examples/with-typescript-graphql/pages/api/graphql.ts b/examples/with-typescript-graphql/pages/api/graphql.ts
index 1880f33a11..1f4828b86d 100644
--- a/examples/with-typescript-graphql/pages/api/graphql.ts
+++ b/examples/with-typescript-graphql/pages/api/graphql.ts
@@ -1,20 +1,20 @@
-import { createSchema, createYoga } from 'graphql-yoga'
-import gql from 'graphql-tag'
+import { createSchema, createYoga } from "graphql-yoga";
+import gql from "graphql-tag";
 
-import resolvers from 'lib/resolvers'
-import typeDefs from 'lib/schema'
-import { NextApiRequest, NextApiResponse } from 'next'
+import resolvers from "lib/resolvers";
+import typeDefs from "lib/schema";
+import { NextApiRequest, NextApiResponse } from "next";
 
 const schema = createSchema({
   typeDefs: gql(typeDefs),
   resolvers,
-})
+});
 
 export default createYoga<{
-  req: NextApiRequest
-  res: NextApiResponse
+  req: NextApiRequest;
+  res: NextApiResponse;
 }>({
   schema,
   // Needed to be defined explicitly because our endpoint lives at a different path other than `/graphql`
-  graphqlEndpoint: '/api/graphql',
-})
+  graphqlEndpoint: "/api/graphql",
+});
diff --git a/examples/with-typescript-graphql/pages/index.tsx b/examples/with-typescript-graphql/pages/index.tsx
index 0539b6d83e..a6649a1968 100644
--- a/examples/with-typescript-graphql/pages/index.tsx
+++ b/examples/with-typescript-graphql/pages/index.tsx
@@ -1,8 +1,8 @@
-import { useMutation, useQuery } from '@apollo/client'
-import { graphql } from 'lib/gql'
-import Link from 'next/link'
-import { useState } from 'react'
-import { initializeApollo } from '../lib/apollo'
+import { useMutation, useQuery } from "@apollo/client";
+import { graphql } from "lib/gql";
+import Link from "next/link";
+import { useState } from "react";
+import { initializeApollo } from "../lib/apollo";
 
 const updateNameDocument = graphql(/* GraphQL */ `
   mutation UpdateName($name: String!) {
@@ -12,7 +12,7 @@ const updateNameDocument = graphql(/* GraphQL */ `
       status
     }
   }
-`)
+`);
 
 const viewerDocument = graphql(/* GraphQL */ `
   query Viewer {
@@ -22,12 +22,12 @@ const viewerDocument = graphql(/* GraphQL */ `
       status
     }
   }
-`)
+`);
 
 const Index = () => {
-  const { data } = useQuery(viewerDocument)
-  const [newName, setNewName] = useState('')
-  const [updateNameMutation] = useMutation(updateNameDocument)
+  const { data } = useQuery(viewerDocument);
+  const [newName, setNewName] = useState("");
+  const [updateNameMutation] = useMutation(updateNameDocument);
 
   const onChangeName = () => {
     updateNameMutation({
@@ -37,32 +37,32 @@ const Index = () => {
       // Follow apollo suggestion to update cache
       //  https://www.apollographql.com/docs/angular/features/cache-updates/#update
       update: (cache, mutationResult) => {
-        const { data } = mutationResult
-        if (!data) return // Cancel updating name in cache if no data is returned from mutation.
+        const { data } = mutationResult;
+        if (!data) return; // Cancel updating name in cache if no data is returned from mutation.
         // Read the data from our cache for this query.
         const result = cache.readQuery({
           query: viewerDocument,
-        })
+        });
 
-        const newViewer = result ? { ...result.viewer } : null
+        const newViewer = result ? { ...result.viewer } : null;
         // Add our comment from the mutation to the end.
         // Write our data back to the cache.
         if (newViewer) {
-          newViewer.name = data.updateName.name
+          newViewer.name = data.updateName.name;
           cache.writeQuery({
             query: viewerDocument,
             data: { viewer: newViewer },
-          })
+          });
         }
       },
-    })
-  }
+    });
+  };
 
-  const viewer = data.viewer
+  const viewer = data.viewer;
 
   return viewer ? (
     <div>
-      You're signed in as {viewer.name} and you're {viewer.status}. Go to the{' '}
+      You're signed in as {viewer.name} and you're {viewer.status}. Go to the{" "}
       <Link href="/about">about</Link> page.
       <div>
         <input
@@ -73,21 +73,21 @@ const Index = () => {
         <input type="button" value="change" onClick={onChangeName} />
       </div>
     </div>
-  ) : null
-}
+  ) : null;
+};
 
 export async function getStaticProps() {
-  const apolloClient = initializeApollo()
+  const apolloClient = initializeApollo();
 
   await apolloClient.query({
     query: viewerDocument,
-  })
+  });
 
   return {
     props: {
       initialApolloState: apolloClient.cache.extract(),
     },
-  }
+  };
 }
 
-export default Index
+export default Index;
diff --git a/examples/with-typescript-graphql/test/index.test.tsx b/examples/with-typescript-graphql/test/index.test.tsx
index 6bb35f7a85..59cbd667a4 100644
--- a/examples/with-typescript-graphql/test/index.test.tsx
+++ b/examples/with-typescript-graphql/test/index.test.tsx
@@ -1,10 +1,10 @@
-import { InMemoryCache, gql } from '@apollo/client'
-import React from 'react'
-import Index from '../pages'
-import renderer from 'react-test-renderer'
-import { MockedProvider } from '@apollo/client/testing'
+import { InMemoryCache, gql } from "@apollo/client";
+import React from "react";
+import Index from "../pages";
+import renderer from "react-test-renderer";
+import { MockedProvider } from "@apollo/client/testing";
 
-const cache = new InMemoryCache()
+const cache = new InMemoryCache();
 cache.writeQuery({
   query: gql`
     query Viewer {
@@ -17,21 +17,21 @@ cache.writeQuery({
   `,
   data: {
     viewer: {
-      __typename: 'User',
-      id: 'Baa',
-      name: 'Baa',
-      status: 'Healthy',
+      __typename: "User",
+      id: "Baa",
+      name: "Baa",
+      status: "Healthy",
     },
   },
-})
+});
 
-describe('Index', () => {
-  it('renders the html we want', async () => {
+describe("Index", () => {
+  it("renders the html we want", async () => {
     const component = renderer.create(
       <MockedProvider cache={cache}>
         <Index />
-      </MockedProvider>
-    )
-    expect(component.toJSON()).toMatchSnapshot()
-  })
-})
+      </MockedProvider>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
diff --git a/examples/with-typescript-types/pages/index.tsx b/examples/with-typescript-types/pages/index.tsx
index ff6af47d6c..a87a32e60a 100644
--- a/examples/with-typescript-types/pages/index.tsx
+++ b/examples/with-typescript-types/pages/index.tsx
@@ -1,15 +1,15 @@
-import type { TypeA } from '../types'
+import type { TypeA } from "../types";
 
 const Example: TypeA = {
-  name: 'next',
-}
+  name: "next",
+};
 
 export default function Home() {
   return (
-    <div style={{ display: 'flex', justifyContent: 'center' }}>
+    <div style={{ display: "flex", justifyContent: "center" }}>
       <h1>
         <p>{Example.name}</p>
       </h1>
     </div>
-  )
+  );
 }
diff --git a/examples/with-typescript-types/types/index.ts b/examples/with-typescript-types/types/index.ts
index 969824f0b5..b451837c1c 100644
--- a/examples/with-typescript-types/types/index.ts
+++ b/examples/with-typescript-types/types/index.ts
@@ -1 +1 @@
-export type { TypeA } from './package-1'
+export type { TypeA } from "./package-1";
diff --git a/examples/with-typescript-types/types/package-1.ts b/examples/with-typescript-types/types/package-1.ts
index 148e593e26..27be8a98c8 100644
--- a/examples/with-typescript-types/types/package-1.ts
+++ b/examples/with-typescript-types/types/package-1.ts
@@ -1,3 +1,3 @@
 export type TypeA = {
-  name: string
-}
+  name: string;
+};
diff --git a/examples/with-typescript/components/Layout.tsx b/examples/with-typescript/components/Layout.tsx
index f265b467ec..9e9b2a9cae 100644
--- a/examples/with-typescript/components/Layout.tsx
+++ b/examples/with-typescript/components/Layout.tsx
@@ -1,13 +1,13 @@
-import React, { ReactNode } from 'react'
-import Link from 'next/link'
-import Head from 'next/head'
+import React, { ReactNode } from "react";
+import Link from "next/link";
+import Head from "next/head";
 
 type Props = {
-  children?: ReactNode
-  title?: string
-}
+  children?: ReactNode;
+  title?: string;
+};
 
-const Layout = ({ children, title = 'This is the default title' }: Props) => (
+const Layout = ({ children, title = "This is the default title" }: Props) => (
   <div>
     <Head>
       <title>{title}</title>
@@ -16,8 +16,8 @@ const Layout = ({ children, title = 'This is the default title' }: Props) => (
     </Head>
     <header>
       <nav>
-        <Link href="/">Home</Link> | <Link href="/about">About</Link> |{' '}
-        <Link href="/users">Users List</Link> |{' '}
+        <Link href="/">Home</Link> | <Link href="/about">About</Link> |{" "}
+        <Link href="/users">Users List</Link> |{" "}
         <a href="/api/users">Users API</a>
       </nav>
     </header>
@@ -27,6 +27,6 @@ const Layout = ({ children, title = 'This is the default title' }: Props) => (
       <span>I'm here to stay (Footer)</span>
     </footer>
   </div>
-)
+);
 
-export default Layout
+export default Layout;
diff --git a/examples/with-typescript/components/List.tsx b/examples/with-typescript/components/List.tsx
index 5fe5ef2158..ead6ed5312 100644
--- a/examples/with-typescript/components/List.tsx
+++ b/examples/with-typescript/components/List.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react'
-import ListItem from './ListItem'
-import { User } from '../interfaces'
+import * as React from "react";
+import ListItem from "./ListItem";
+import { User } from "../interfaces";
 
 type Props = {
-  items: User[]
-}
+  items: User[];
+};
 
 const List = ({ items }: Props) => (
   <ul>
@@ -14,6 +14,6 @@ const List = ({ items }: Props) => (
       </li>
     ))}
   </ul>
-)
+);
 
-export default List
+export default List;
diff --git a/examples/with-typescript/components/ListDetail.tsx b/examples/with-typescript/components/ListDetail.tsx
index fa3f9c3dc8..85ccf9665d 100644
--- a/examples/with-typescript/components/ListDetail.tsx
+++ b/examples/with-typescript/components/ListDetail.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react'
+import * as React from "react";
 
-import { User } from '../interfaces'
+import { User } from "../interfaces";
 
 type ListDetailProps = {
-  item: User
-}
+  item: User;
+};
 
 const ListDetail = ({ item: user }: ListDetailProps) => (
   <div>
     <h1>Detail for {user.name}</h1>
     <p>ID: {user.id}</p>
   </div>
-)
+);
 
-export default ListDetail
+export default ListDetail;
diff --git a/examples/with-typescript/components/ListItem.tsx b/examples/with-typescript/components/ListItem.tsx
index 6dfd363060..d6a694551c 100644
--- a/examples/with-typescript/components/ListItem.tsx
+++ b/examples/with-typescript/components/ListItem.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
-import Link from 'next/link'
+import React from "react";
+import Link from "next/link";
 
-import { User } from '../interfaces'
+import { User } from "../interfaces";
 
 type Props = {
-  data: User
-}
+  data: User;
+};
 
 const ListItem = ({ data }: Props) => (
   <Link href="/users/[id]" as={`/users/${data.id}`}>
     {data.id}:{data.name}
   </Link>
-)
+);
 
-export default ListItem
+export default ListItem;
diff --git a/examples/with-typescript/interfaces/index.ts b/examples/with-typescript/interfaces/index.ts
index 68528c5512..0a4f06952a 100644
--- a/examples/with-typescript/interfaces/index.ts
+++ b/examples/with-typescript/interfaces/index.ts
@@ -5,6 +5,6 @@
 // import { User } from 'path/to/interfaces';
 
 export type User = {
-  id: number
-  name: string
-}
+  id: number;
+  name: string;
+};
diff --git a/examples/with-typescript/pages/about.tsx b/examples/with-typescript/pages/about.tsx
index 57192b1127..a3bc54c1f1 100644
--- a/examples/with-typescript/pages/about.tsx
+++ b/examples/with-typescript/pages/about.tsx
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import Layout from '../components/Layout'
+import Link from "next/link";
+import Layout from "../components/Layout";
 
 const AboutPage = () => (
   <Layout title="About | Next.js + TypeScript Example">
@@ -9,6 +9,6 @@ const AboutPage = () => (
       <Link href="/">Go home</Link>
     </p>
   </Layout>
-)
+);
 
-export default AboutPage
+export default AboutPage;
diff --git a/examples/with-typescript/pages/api/users/index.ts b/examples/with-typescript/pages/api/users/index.ts
index 67a645ea39..e184e1d47f 100644
--- a/examples/with-typescript/pages/api/users/index.ts
+++ b/examples/with-typescript/pages/api/users/index.ts
@@ -1,16 +1,16 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import { sampleUserData } from '../../../utils/sample-data'
+import { NextApiRequest, NextApiResponse } from "next";
+import { sampleUserData } from "../../../utils/sample-data";
 
 const handler = (_req: NextApiRequest, res: NextApiResponse) => {
   try {
     if (!Array.isArray(sampleUserData)) {
-      throw new Error('Cannot find user data')
+      throw new Error("Cannot find user data");
     }
 
-    res.status(200).json(sampleUserData)
+    res.status(200).json(sampleUserData);
   } catch (err: any) {
-    res.status(500).json({ statusCode: 500, message: err.message })
+    res.status(500).json({ statusCode: 500, message: err.message });
   }
-}
+};
 
-export default handler
+export default handler;
diff --git a/examples/with-typescript/pages/index.tsx b/examples/with-typescript/pages/index.tsx
index d4d256444f..b2a1485f30 100644
--- a/examples/with-typescript/pages/index.tsx
+++ b/examples/with-typescript/pages/index.tsx
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import Layout from '../components/Layout'
+import Link from "next/link";
+import Layout from "../components/Layout";
 
 const IndexPage = () => (
   <Layout title="Home | Next.js + TypeScript Example">
@@ -8,6 +8,6 @@ const IndexPage = () => (
       <Link href="/about">About</Link>
     </p>
   </Layout>
-)
+);
 
-export default IndexPage
+export default IndexPage;
diff --git a/examples/with-typescript/pages/users/[id].tsx b/examples/with-typescript/pages/users/[id].tsx
index ca442c0c16..e8a797383e 100644
--- a/examples/with-typescript/pages/users/[id].tsx
+++ b/examples/with-typescript/pages/users/[id].tsx
@@ -1,61 +1,61 @@
-import { GetStaticProps, GetStaticPaths } from 'next'
+import { GetStaticProps, GetStaticPaths } from "next";
 
-import { User } from '../../interfaces'
-import { sampleUserData } from '../../utils/sample-data'
-import Layout from '../../components/Layout'
-import ListDetail from '../../components/ListDetail'
+import { User } from "../../interfaces";
+import { sampleUserData } from "../../utils/sample-data";
+import Layout from "../../components/Layout";
+import ListDetail from "../../components/ListDetail";
 
 type Props = {
-  item?: User
-  errors?: string
-}
+  item?: User;
+  errors?: string;
+};
 
 const StaticPropsDetail = ({ item, errors }: Props) => {
   if (errors) {
     return (
       <Layout title="Error | Next.js + TypeScript Example">
         <p>
-          <span style={{ color: 'red' }}>Error:</span> {errors}
+          <span style={{ color: "red" }}>Error:</span> {errors}
         </p>
       </Layout>
-    )
+    );
   }
 
   return (
     <Layout
       title={`${
-        item ? item.name : 'User Detail'
+        item ? item.name : "User Detail"
       } | Next.js + TypeScript Example`}
     >
       {item && <ListDetail item={item} />}
     </Layout>
-  )
-}
+  );
+};
 
-export default StaticPropsDetail
+export default StaticPropsDetail;
 
 export const getStaticPaths: GetStaticPaths = async () => {
   // Get the paths we want to pre-render based on users
   const paths = sampleUserData.map((user) => ({
     params: { id: user.id.toString() },
-  }))
+  }));
 
   // We'll pre-render only these paths at build time.
   // { fallback: false } means other routes should 404.
-  return { paths, fallback: false }
-}
+  return { paths, fallback: false };
+};
 
 // This function gets called at build time on server-side.
 // It won't be called on client-side, so you can even do
 // direct database queries.
 export const getStaticProps: GetStaticProps = async ({ params }) => {
   try {
-    const id = params?.id
-    const item = sampleUserData.find((data) => data.id === Number(id))
+    const id = params?.id;
+    const item = sampleUserData.find((data) => data.id === Number(id));
     // By returning { props: item }, the StaticPropsDetail component
     // will receive `item` as a prop at build time
-    return { props: { item } }
+    return { props: { item } };
   } catch (err: any) {
-    return { props: { errors: err.message } }
+    return { props: { errors: err.message } };
   }
-}
+};
diff --git a/examples/with-typescript/pages/users/index.tsx b/examples/with-typescript/pages/users/index.tsx
index 5bc2fb8b18..489a9307c2 100644
--- a/examples/with-typescript/pages/users/index.tsx
+++ b/examples/with-typescript/pages/users/index.tsx
@@ -1,14 +1,14 @@
-import { GetStaticProps } from 'next'
-import Link from 'next/link'
+import { GetStaticProps } from "next";
+import Link from "next/link";
 
-import { User } from '../../interfaces'
-import { sampleUserData } from '../../utils/sample-data'
-import Layout from '../../components/Layout'
-import List from '../../components/List'
+import { User } from "../../interfaces";
+import { sampleUserData } from "../../utils/sample-data";
+import Layout from "../../components/Layout";
+import List from "../../components/List";
 
 type Props = {
-  items: User[]
-}
+  items: User[];
+};
 
 const WithStaticProps = ({ items }: Props) => (
   <Layout title="Users List | Next.js + TypeScript Example">
@@ -22,14 +22,14 @@ const WithStaticProps = ({ items }: Props) => (
       <Link href="/">Go home</Link>
     </p>
   </Layout>
-)
+);
 
 export const getStaticProps: GetStaticProps = async () => {
   // Example for including static props in a Next.js function component page.
   // Don't forget to include the respective types for any props passed into
   // the component.
-  const items: User[] = sampleUserData
-  return { props: { items } }
-}
+  const items: User[] = sampleUserData;
+  return { props: { items } };
+};
 
-export default WithStaticProps
+export default WithStaticProps;
diff --git a/examples/with-typescript/utils/sample-data.ts b/examples/with-typescript/utils/sample-data.ts
index 1dd38ecc42..68d9d852be 100644
--- a/examples/with-typescript/utils/sample-data.ts
+++ b/examples/with-typescript/utils/sample-data.ts
@@ -1,9 +1,9 @@
-import { User } from '../interfaces'
+import { User } from "../interfaces";
 
 /** Dummy user data. */
 export const sampleUserData: User[] = [
-  { id: 101, name: 'Alice' },
-  { id: 102, name: 'Bob' },
-  { id: 103, name: 'Caroline' },
-  { id: 104, name: 'Dave' },
-]
+  { id: 101, name: "Alice" },
+  { id: 102, name: "Bob" },
+  { id: 103, name: "Caroline" },
+  { id: 104, name: "Dave" },
+];
diff --git a/examples/with-unsplash/components/Collections/Collections.module.css b/examples/with-unsplash/components/Collections/Collections.module.css
index e9af646954..6bb7a0e766 100644
--- a/examples/with-unsplash/components/Collections/Collections.module.css
+++ b/examples/with-unsplash/components/Collections/Collections.module.css
@@ -34,7 +34,7 @@ a.chip:hover {
 
 .chip_remove:after {
   color: #333;
-  content: 'x';
+  content: "x";
 }
 
 .chip_remove:hover {
diff --git a/examples/with-unsplash/components/Collections/index.tsx b/examples/with-unsplash/components/Collections/index.tsx
index d7088eb43f..4eef726279 100644
--- a/examples/with-unsplash/components/Collections/index.tsx
+++ b/examples/with-unsplash/components/Collections/index.tsx
@@ -1,21 +1,21 @@
-import useSWR from 'swr'
-import fetcher from 'libs/fetcher'
-import Link from 'next/link'
-import styles from './Collections.module.css'
+import useSWR from "swr";
+import fetcher from "libs/fetcher";
+import Link from "next/link";
+import styles from "./Collections.module.css";
 
 interface CollectionProps {
-  id_collection?: number
+  id_collection?: number;
 }
 
 const Collections = ({ id_collection }: CollectionProps) => {
   const { data, error } = useSWR(
-    '/api/collection' + (id_collection ? `/${id_collection}` : ''),
-    fetcher
-  )
+    "/api/collection" + (id_collection ? `/${id_collection}` : ""),
+    fetcher,
+  );
 
-  if (error) return <div>failed to load</div>
+  if (error) return <div>failed to load</div>;
 
-  if (!data) return <div>loading...</div>
+  if (!data) return <div>loading...</div>;
 
   return (
     <div className={styles.chips}>
@@ -33,17 +33,17 @@ const Collections = ({ id_collection }: CollectionProps) => {
           </Link>
         ) : (
           <Link
-            href={{ pathname: '/collection/[slug]', query: { id: id } }}
+            href={{ pathname: "/collection/[slug]", query: { id: id } }}
             as={`/collection/${slug}?id=${id}`}
             key={`collection_${slug}`}
             className={styles.chip}
           >
             {title}
           </Link>
-        )
+        ),
       )}
     </div>
-  )
-}
+  );
+};
 
-export default Collections
+export default Collections;
diff --git a/examples/with-unsplash/components/Gallery/index.tsx b/examples/with-unsplash/components/Gallery/index.tsx
index 65a02b5c32..b89caf9d75 100644
--- a/examples/with-unsplash/components/Gallery/index.tsx
+++ b/examples/with-unsplash/components/Gallery/index.tsx
@@ -1,21 +1,21 @@
-import useSWR from 'swr'
-import fetcher from 'libs/fetcher'
-import styles from './Gallery.module.css'
-import UImage from 'components/UImage'
+import useSWR from "swr";
+import fetcher from "libs/fetcher";
+import styles from "./Gallery.module.css";
+import UImage from "components/UImage";
 
 interface GalleryProps {
-  id_collection?: number
+  id_collection?: number;
 }
 
 const Gallery = ({ id_collection }: GalleryProps) => {
   const { data, error } = useSWR(
-    '/api/photo' + (id_collection ? `/${id_collection}` : ''),
-    fetcher
-  )
+    "/api/photo" + (id_collection ? `/${id_collection}` : ""),
+    fetcher,
+  );
 
-  if (error) return <div>failed to load</div>
+  if (error) return <div>failed to load</div>;
 
-  if (!data) return <div>loading...</div>
+  if (!data) return <div>loading...</div>;
 
   return (
     <section className={styles.gallery_container}>
@@ -28,7 +28,7 @@ const Gallery = ({ id_collection }: GalleryProps) => {
         />
       ))}
     </section>
-  )
-}
+  );
+};
 
-export default Gallery
+export default Gallery;
diff --git a/examples/with-unsplash/components/Layout/index.tsx b/examples/with-unsplash/components/Layout/index.tsx
index 2eb348ce9a..105313709a 100644
--- a/examples/with-unsplash/components/Layout/index.tsx
+++ b/examples/with-unsplash/components/Layout/index.tsx
@@ -1,9 +1,9 @@
-import Head from 'next/head'
-import User from 'components/User'
+import Head from "next/head";
+import User from "components/User";
 
-import styles from './layout.module.css'
+import styles from "./layout.module.css";
 
-export const siteTitle = 'Unsplash Profile with Nextjs'
+export const siteTitle = "Unsplash Profile with Nextjs";
 
 const Layout = ({ children }) => {
   return (
@@ -21,7 +21,7 @@ const Layout = ({ children }) => {
 
       <main>{children}</main>
     </div>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;
diff --git a/examples/with-unsplash/components/Social/index.tsx b/examples/with-unsplash/components/Social/index.tsx
index acf779c6bb..0aaa309cbe 100644
--- a/examples/with-unsplash/components/Social/index.tsx
+++ b/examples/with-unsplash/components/Social/index.tsx
@@ -1,29 +1,29 @@
-import styles from './Social.module.css'
-import UIcon from 'components/UIcon'
+import styles from "./Social.module.css";
+import UIcon from "components/UIcon";
 
 const Social = ({ user }) => {
   return (
     <div className={styles.social_container}>
       {user.twitter_username && (
         <UIcon
-          url={'https://www.twitter.com/' + user.twitter_username}
+          url={"https://www.twitter.com/" + user.twitter_username}
           name="twitter"
         />
       )}
       {user.instagram_username && (
         <UIcon
-          url={'https://www.instagram.com/' + user.instagram_username}
+          url={"https://www.instagram.com/" + user.instagram_username}
           name="instagram"
         />
       )}
       {user.username && (
         <UIcon
-          url={'https://www.unsplash.com/@' + user.username}
+          url={"https://www.unsplash.com/@" + user.username}
           name="unsplash"
         />
       )}
     </div>
-  )
-}
+  );
+};
 
-export default Social
+export default Social;
diff --git a/examples/with-unsplash/components/Stats/index.tsx b/examples/with-unsplash/components/Stats/index.tsx
index f05ae597c1..4041739877 100644
--- a/examples/with-unsplash/components/Stats/index.tsx
+++ b/examples/with-unsplash/components/Stats/index.tsx
@@ -1,20 +1,20 @@
-import useSWR from 'swr'
-import fetcher from 'libs/fetcher'
-import styles from './Stats.module.css'
+import useSWR from "swr";
+import fetcher from "libs/fetcher";
+import styles from "./Stats.module.css";
 
 const Stats = () => {
-  const { data, error } = useSWR('/api/stats', fetcher)
+  const { data, error } = useSWR("/api/stats", fetcher);
 
-  if (error) return <div>failed to load</div>
+  if (error) return <div>failed to load</div>;
 
   return (
     <div className={styles.stats_container}>
       <strong>Stats </strong>
-      downloads: {data ? data.downloads.total : '...'} | views:{' '}
-      {data ? data.views.total : '...'} | likes:{' '}
-      {data ? data.likes.total : '...'}
+      downloads: {data ? data.downloads.total : "..."} | views:{" "}
+      {data ? data.views.total : "..."} | likes:{" "}
+      {data ? data.likes.total : "..."}
     </div>
-  )
-}
+  );
+};
 
-export default Stats
+export default Stats;
diff --git a/examples/with-unsplash/components/UIcon/index.tsx b/examples/with-unsplash/components/UIcon/index.tsx
index 8baab9ee1e..3f9e6cedc2 100644
--- a/examples/with-unsplash/components/UIcon/index.tsx
+++ b/examples/with-unsplash/components/UIcon/index.tsx
@@ -1,4 +1,4 @@
-import styles from './UIcon.module.css'
+import styles from "./UIcon.module.css";
 
 const UIcon = ({ url, name }) => {
   return (
@@ -14,7 +14,7 @@ const UIcon = ({ url, name }) => {
         alt={`${name} icon`}
       />
     </a>
-  )
-}
+  );
+};
 
-export default UIcon
+export default UIcon;
diff --git a/examples/with-unsplash/components/UImage/index.tsx b/examples/with-unsplash/components/UImage/index.tsx
index 47b0b04d84..2f00b9a6b6 100644
--- a/examples/with-unsplash/components/UImage/index.tsx
+++ b/examples/with-unsplash/components/UImage/index.tsx
@@ -1,5 +1,5 @@
-import styles from './UImage.module.css'
-import UIcon from 'components/UIcon'
+import styles from "./UImage.module.css";
+import UIcon from "components/UIcon";
 
 const Uimage = ({ id, urls, altDescription }) => {
   return (
@@ -9,7 +9,7 @@ const Uimage = ({ id, urls, altDescription }) => {
         <UIcon url={`/api/photo/download/${id}`} name="download" />
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Uimage
+export default Uimage;
diff --git a/examples/with-unsplash/components/User/index.tsx b/examples/with-unsplash/components/User/index.tsx
index 491f4d5f96..81b4caa63f 100644
--- a/examples/with-unsplash/components/User/index.tsx
+++ b/examples/with-unsplash/components/User/index.tsx
@@ -1,13 +1,13 @@
-import useSWR from 'swr'
-import fetcher from 'libs/fetcher'
-import Link from 'next/link'
-import styles from './User.module.css'
-import Social from 'components/Social'
+import useSWR from "swr";
+import fetcher from "libs/fetcher";
+import Link from "next/link";
+import styles from "./User.module.css";
+import Social from "components/Social";
 
 const User = () => {
-  const { data, error } = useSWR('/api/user', fetcher)
+  const { data, error } = useSWR("/api/user", fetcher);
 
-  if (error) return <div>failed to load</div>
+  if (error) return <div>failed to load</div>;
 
   return (
     <header className={styles.header}>
@@ -21,14 +21,14 @@ const User = () => {
         )}
       </Link>
       <h2 className={styles.headingLg}>
-        <Link href="/">{data ? data.name : ''}</Link>
+        <Link href="/">{data ? data.name : ""}</Link>
       </h2>
 
-      {data ? <Social user={data} /> : ''}
+      {data ? <Social user={data} /> : ""}
 
-      <p>{data ? data.bio : ''}</p>
+      <p>{data ? data.bio : ""}</p>
     </header>
-  )
-}
+  );
+};
 
-export default User
+export default User;
diff --git a/examples/with-unsplash/libs/fetcher.tsx b/examples/with-unsplash/libs/fetcher.tsx
index 2d263cfca4..f8e6772404 100644
--- a/examples/with-unsplash/libs/fetcher.tsx
+++ b/examples/with-unsplash/libs/fetcher.tsx
@@ -1,7 +1,7 @@
 export default async function f<JSON = any>(
   input: RequestInfo,
-  init?: RequestInit
+  init?: RequestInit,
 ): Promise<JSON> {
-  const res = await fetch(input, init)
-  return res.json()
+  const res = await fetch(input, init);
+  return res.json();
 }
diff --git a/examples/with-unsplash/libs/slug.tsx b/examples/with-unsplash/libs/slug.tsx
index c49b2deb69..a54a696034 100644
--- a/examples/with-unsplash/libs/slug.tsx
+++ b/examples/with-unsplash/libs/slug.tsx
@@ -1,9 +1,9 @@
 const slug = (str: string) => {
   return str
     .toLowerCase()
-    .replace(/\s/g, '-')
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '')
-}
+    .replace(/\s/g, "-")
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "");
+};
 
-export default slug
+export default slug;
diff --git a/examples/with-unsplash/pages/_app.js b/examples/with-unsplash/pages/_app.js
index f2f8898273..9e9b9d45f9 100644
--- a/examples/with-unsplash/pages/_app.js
+++ b/examples/with-unsplash/pages/_app.js
@@ -1,5 +1,5 @@
-import 'styles/global.css'
+import "styles/global.css";
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-unsplash/pages/_document.tsx b/examples/with-unsplash/pages/_document.tsx
index 54e8bf3e2a..b2fff8b426 100644
--- a/examples/with-unsplash/pages/_document.tsx
+++ b/examples/with-unsplash/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/examples/with-unsplash/pages/api/collection/[id].tsx b/examples/with-unsplash/pages/api/collection/[id].tsx
index 5283e085ae..2b81efd995 100644
--- a/examples/with-unsplash/pages/api/collection/[id].tsx
+++ b/examples/with-unsplash/pages/api/collection/[id].tsx
@@ -1,28 +1,28 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import Unsplash, { toJson } from 'unsplash-js'
+import { NextApiRequest, NextApiResponse } from "next";
+import Unsplash, { toJson } from "unsplash-js";
 
 export default function getCollection(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
   const {
     query: { id },
-  } = req
+  } = req;
 
   return new Promise((resolve) => {
-    const u = new Unsplash({ accessKey: process.env.UNSPLASH_ACCESS_KEY })
+    const u = new Unsplash({ accessKey: process.env.UNSPLASH_ACCESS_KEY });
 
     u.collections
       .getCollection(parseInt(id.toString()))
       .then(toJson)
       .then((json) => {
-        res.setHeader('Cache-Control', 'max-age=180000')
-        res.status(200).json([json])
-        resolve()
+        res.setHeader("Cache-Control", "max-age=180000");
+        res.status(200).json([json]);
+        resolve();
       })
       .catch((error) => {
-        res.status(405).json(error)
-        resolve()
-      })
-  })
+        res.status(405).json(error);
+        resolve();
+      });
+  });
 }
diff --git a/examples/with-unsplash/pages/api/collection/index.tsx b/examples/with-unsplash/pages/api/collection/index.tsx
index 784ce1f03f..373a66e11f 100644
--- a/examples/with-unsplash/pages/api/collection/index.tsx
+++ b/examples/with-unsplash/pages/api/collection/index.tsx
@@ -1,27 +1,27 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import Unsplash, { toJson } from 'unsplash-js'
-import slug from 'libs/slug'
+import { NextApiRequest, NextApiResponse } from "next";
+import Unsplash, { toJson } from "unsplash-js";
+import slug from "libs/slug";
 
 export default function getCollections(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
   return new Promise((resolve) => {
-    const u = new Unsplash({ accessKey: process.env.UNSPLASH_ACCESS_KEY })
+    const u = new Unsplash({ accessKey: process.env.UNSPLASH_ACCESS_KEY });
 
     u.users
-      .collections(process.env.UNSPLASH_USER, 1, 15, 'updated')
+      .collections(process.env.UNSPLASH_USER, 1, 15, "updated")
       .then(toJson)
       .then((json) => {
-        json.map((c) => (c.slug = slug(c.title)))
+        json.map((c) => (c.slug = slug(c.title)));
 
-        res.setHeader('Cache-Control', 'max-age=180000')
-        res.status(200).json(json)
-        resolve()
+        res.setHeader("Cache-Control", "max-age=180000");
+        res.status(200).json(json);
+        resolve();
       })
       .catch((error) => {
-        res.status(405).json(error)
-        resolve()
-      })
-  })
+        res.status(405).json(error);
+        resolve();
+      });
+  });
 }
diff --git a/examples/with-unsplash/pages/api/photo/[id].tsx b/examples/with-unsplash/pages/api/photo/[id].tsx
index e7125d4aa5..edf6f42c09 100644
--- a/examples/with-unsplash/pages/api/photo/[id].tsx
+++ b/examples/with-unsplash/pages/api/photo/[id].tsx
@@ -1,28 +1,28 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import Unsplash, { toJson } from 'unsplash-js'
+import { NextApiRequest, NextApiResponse } from "next";
+import Unsplash, { toJson } from "unsplash-js";
 
 export default function getCollectionPhotos(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
   const {
     query: { id },
-  } = req
+  } = req;
 
   return new Promise((resolve) => {
-    const u = new Unsplash({ accessKey: process.env.UNSPLASH_ACCESS_KEY })
+    const u = new Unsplash({ accessKey: process.env.UNSPLASH_ACCESS_KEY });
 
     u.collections
       .getCollectionPhotos(parseInt(id.toString()))
       .then(toJson)
       .then((json) => {
-        res.setHeader('Cache-Control', 'max-age=180000')
-        res.status(200).json(json)
-        resolve()
+        res.setHeader("Cache-Control", "max-age=180000");
+        res.status(200).json(json);
+        resolve();
       })
       .catch((error) => {
-        res.status(405).json(error)
-        resolve()
-      })
-  })
+        res.status(405).json(error);
+        resolve();
+      });
+  });
 }
diff --git a/examples/with-unsplash/pages/api/photo/download/[id].tsx b/examples/with-unsplash/pages/api/photo/download/[id].tsx
index d0ed45c4c6..ad7f34f3db 100644
--- a/examples/with-unsplash/pages/api/photo/download/[id].tsx
+++ b/examples/with-unsplash/pages/api/photo/download/[id].tsx
@@ -1,43 +1,46 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import Unsplash, { toJson } from 'unsplash-js'
-import fetch from 'node-fetch'
-global.fetch = fetch
+import { NextApiRequest, NextApiResponse } from "next";
+import Unsplash, { toJson } from "unsplash-js";
+import fetch from "node-fetch";
+global.fetch = fetch;
 
 export default function download(req: NextApiRequest, res: NextApiResponse) {
   const {
     query: { id },
-  } = req
+  } = req;
 
-  const u = new Unsplash({ accessKey: process.env.UNSPLASH_ACCESS_KEY })
+  const u = new Unsplash({ accessKey: process.env.UNSPLASH_ACCESS_KEY });
 
   return new Promise((resolve) => {
     u.photos
       .getPhoto(id.toString())
       .then(toJson)
       .then((json) => {
-        u.photos.downloadPhoto(json)
+        u.photos.downloadPhoto(json);
 
-        const filePath = json.links.download
-        const fileName = id + '.jpg'
+        const filePath = json.links.download;
+        const fileName = id + ".jpg";
 
-        res.setHeader('content-disposition', 'attachment; filename=' + fileName)
+        res.setHeader(
+          "content-disposition",
+          "attachment; filename=" + fileName,
+        );
 
         fetch(filePath)
           .then((r) => r.buffer())
           .then((buff) => {
-            res.end(buff)
-            resolve()
+            res.end(buff);
+            resolve();
           })
           .catch((error) => {
-            res.json(error)
-            res.status(405).end()
-            resolve()
-          })
+            res.json(error);
+            res.status(405).end();
+            resolve();
+          });
       })
       .catch((error) => {
-        res.json(error)
-        res.status(405).end()
-        resolve()
-      })
-  })
+        res.json(error);
+        res.status(405).end();
+        resolve();
+      });
+  });
 }
diff --git a/examples/with-unsplash/pages/api/photo/index.tsx b/examples/with-unsplash/pages/api/photo/index.tsx
index 74a6c8c75b..3b2f5c9cc3 100644
--- a/examples/with-unsplash/pages/api/photo/index.tsx
+++ b/examples/with-unsplash/pages/api/photo/index.tsx
@@ -1,21 +1,21 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import Unsplash, { toJson } from 'unsplash-js'
+import { NextApiRequest, NextApiResponse } from "next";
+import Unsplash, { toJson } from "unsplash-js";
 
 export default function getPhotos(req: NextApiRequest, res: NextApiResponse) {
   return new Promise((resolve) => {
-    const u = new Unsplash({ accessKey: process.env.UNSPLASH_ACCESS_KEY })
+    const u = new Unsplash({ accessKey: process.env.UNSPLASH_ACCESS_KEY });
 
     u.users
-      .photos(process.env.UNSPLASH_USER, 1, 50, 'latest')
+      .photos(process.env.UNSPLASH_USER, 1, 50, "latest")
       .then(toJson)
       .then((json: string) => {
-        res.setHeader('Cache-Control', 'max-age=180000')
-        res.status(200).json(json)
-        resolve()
+        res.setHeader("Cache-Control", "max-age=180000");
+        res.status(200).json(json);
+        resolve();
       })
       .catch((error) => {
-        res.status(405).json(error)
-        resolve()
-      })
-  })
+        res.status(405).json(error);
+        resolve();
+      });
+  });
 }
diff --git a/examples/with-unsplash/pages/api/stats/index.tsx b/examples/with-unsplash/pages/api/stats/index.tsx
index defe8845d5..cf000ca377 100644
--- a/examples/with-unsplash/pages/api/stats/index.tsx
+++ b/examples/with-unsplash/pages/api/stats/index.tsx
@@ -1,21 +1,21 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import Unsplash, { toJson } from 'unsplash-js'
+import { NextApiRequest, NextApiResponse } from "next";
+import Unsplash, { toJson } from "unsplash-js";
 
 export default function getStats(req: NextApiRequest, res: NextApiResponse) {
   return new Promise((resolve) => {
-    const u = new Unsplash({ accessKey: process.env.UNSPLASH_ACCESS_KEY })
+    const u = new Unsplash({ accessKey: process.env.UNSPLASH_ACCESS_KEY });
 
     u.users
-      .statistics(process.env.UNSPLASH_USER, 'days', 30)
+      .statistics(process.env.UNSPLASH_USER, "days", 30)
       .then(toJson)
       .then((json) => {
-        res.setHeader('Cache-Control', 'max-age=180000')
-        res.status(200).json(json)
-        resolve()
+        res.setHeader("Cache-Control", "max-age=180000");
+        res.status(200).json(json);
+        resolve();
       })
       .catch((error) => {
-        res.status(405).json(error)
-        resolve()
-      })
-  })
+        res.status(405).json(error);
+        resolve();
+      });
+  });
 }
diff --git a/examples/with-unsplash/pages/api/user/index.tsx b/examples/with-unsplash/pages/api/user/index.tsx
index 2dff59a677..b2e11a3e41 100644
--- a/examples/with-unsplash/pages/api/user/index.tsx
+++ b/examples/with-unsplash/pages/api/user/index.tsx
@@ -1,21 +1,21 @@
-import { NextApiRequest, NextApiResponse } from 'next'
-import Unsplash, { toJson } from 'unsplash-js'
+import { NextApiRequest, NextApiResponse } from "next";
+import Unsplash, { toJson } from "unsplash-js";
 
 export default function getUser(req: NextApiRequest, res: NextApiResponse) {
   return new Promise((resolve) => {
-    const u = new Unsplash({ accessKey: process.env.UNSPLASH_ACCESS_KEY })
+    const u = new Unsplash({ accessKey: process.env.UNSPLASH_ACCESS_KEY });
 
     u.users
       .profile(process.env.UNSPLASH_USER)
       .then(toJson)
       .then((json) => {
-        res.setHeader('Cache-Control', 'max-age=180000')
-        res.status(200).json([json])
-        resolve()
+        res.setHeader("Cache-Control", "max-age=180000");
+        res.status(200).json([json]);
+        resolve();
       })
       .catch((error) => {
-        res.status(405).json(error)
-        resolve()
-      })
-  })
+        res.status(405).json(error);
+        resolve();
+      });
+  });
 }
diff --git a/examples/with-unsplash/pages/collection/[slug].tsx b/examples/with-unsplash/pages/collection/[slug].tsx
index 6fc0dea514..84dd5215f1 100644
--- a/examples/with-unsplash/pages/collection/[slug].tsx
+++ b/examples/with-unsplash/pages/collection/[slug].tsx
@@ -1,14 +1,14 @@
-import Head from 'next/head'
-import Layout, { siteTitle } from 'components/Layout'
-import Gallery from 'components/Gallery'
-import Collections from 'components/Collections'
-import { useRouter } from 'next/router'
+import Head from "next/head";
+import Layout, { siteTitle } from "components/Layout";
+import Gallery from "components/Gallery";
+import Collections from "components/Collections";
+import { useRouter } from "next/router";
 
 const Collection = () => {
-  const router = useRouter()
+  const router = useRouter();
   const collection_id = router.query.id
     ? parseInt(router.query.id.toString())
-    : null
+    : null;
   return (
     <Layout>
       <Head>
@@ -19,7 +19,7 @@ const Collection = () => {
 
       <Gallery id_collection={collection_id} />
     </Layout>
-  )
-}
+  );
+};
 
-export default Collection
+export default Collection;
diff --git a/examples/with-unsplash/pages/index.tsx b/examples/with-unsplash/pages/index.tsx
index 47ddddb1cf..087e2f2700 100644
--- a/examples/with-unsplash/pages/index.tsx
+++ b/examples/with-unsplash/pages/index.tsx
@@ -1,8 +1,8 @@
-import Head from 'next/head'
-import Layout, { siteTitle } from 'components/Layout'
-import Gallery from 'components/Gallery'
-import Stats from 'components/Stats'
-import Collections from 'components/Collections'
+import Head from "next/head";
+import Layout, { siteTitle } from "components/Layout";
+import Gallery from "components/Gallery";
+import Stats from "components/Stats";
+import Collections from "components/Collections";
 
 const Home = () => {
   return (
@@ -17,7 +17,7 @@ const Home = () => {
 
       <Gallery />
     </Layout>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/examples/with-unstated/components/Clock.js b/examples/with-unstated/components/Clock.js
index e72faae06b..6023255afb 100644
--- a/examples/with-unstated/components/Clock.js
+++ b/examples/with-unstated/components/Clock.js
@@ -1,15 +1,15 @@
-import ClockContainer from '../containers/clock'
+import ClockContainer from "../containers/clock";
 
-const pad = (n) => (n < 10 ? `0${n}` : n)
+const pad = (n) => (n < 10 ? `0${n}` : n);
 
 const format = (t) =>
-  `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`
+  `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`;
 
 export default function Clock() {
-  const clock = ClockContainer.useContainer()
+  const clock = ClockContainer.useContainer();
 
   return (
-    <div className={clock.light ? 'light' : ''}>
+    <div className={clock.light ? "light" : ""}>
       {format(new Date(clock.lastUpdate))}
       <style jsx>{`
         div {
@@ -24,5 +24,5 @@ export default function Clock() {
         }
       `}</style>
     </div>
-  )
+  );
 }
diff --git a/examples/with-unstated/components/Counter.js b/examples/with-unstated/components/Counter.js
index 06819b0876..3f4071b934 100644
--- a/examples/with-unstated/components/Counter.js
+++ b/examples/with-unstated/components/Counter.js
@@ -1,7 +1,7 @@
-import CounterContainer from '../containers/counter'
+import CounterContainer from "../containers/counter";
 
 export default function Counter() {
-  const counter = CounterContainer.useContainer()
+  const counter = CounterContainer.useContainer();
 
   return (
     <div>
@@ -12,5 +12,5 @@ export default function Counter() {
       <button onClick={() => counter.increment()}>+1</button>
       <button onClick={() => counter.reset()}>Reset</button>
     </div>
-  )
+  );
 }
diff --git a/examples/with-unstated/containers/clock.js b/examples/with-unstated/containers/clock.js
index a47e8f5a10..b56a14a557 100644
--- a/examples/with-unstated/containers/clock.js
+++ b/examples/with-unstated/containers/clock.js
@@ -1,18 +1,18 @@
-import { useState, useEffect } from 'react'
-import { createContainer } from 'unstated-next'
+import { useState, useEffect } from "react";
+import { createContainer } from "unstated-next";
 
 function useClock() {
-  const [data, setData] = useState({ lastUpdate: 0, light: false })
+  const [data, setData] = useState({ lastUpdate: 0, light: false });
 
   useEffect(() => {
     let interval = setInterval(() => {
-      setData({ lastUpdate: Date.now(), light: !data.light })
-    }, 1000)
+      setData({ lastUpdate: Date.now(), light: !data.light });
+    }, 1000);
 
-    return () => clearInterval(interval)
-  }, [data.light])
+    return () => clearInterval(interval);
+  }, [data.light]);
 
-  return data
+  return data;
 }
 
-export default createContainer(useClock)
+export default createContainer(useClock);
diff --git a/examples/with-unstated/containers/counter.js b/examples/with-unstated/containers/counter.js
index ba47231f0e..6bacf9c2f3 100644
--- a/examples/with-unstated/containers/counter.js
+++ b/examples/with-unstated/containers/counter.js
@@ -1,13 +1,13 @@
-import { useState } from 'react'
-import { createContainer } from 'unstated-next'
+import { useState } from "react";
+import { createContainer } from "unstated-next";
 
 function useCounter() {
-  const [count, setCount] = useState(0)
-  const decrement = () => setCount(count - 1)
-  const increment = () => setCount(count + 1)
-  const reset = () => setCount(0)
+  const [count, setCount] = useState(0);
+  const decrement = () => setCount(count - 1);
+  const increment = () => setCount(count + 1);
+  const reset = () => setCount(0);
 
-  return { count, decrement, increment, reset }
+  return { count, decrement, increment, reset };
 }
 
-export default createContainer(useCounter)
+export default createContainer(useCounter);
diff --git a/examples/with-unstated/pages/about.js b/examples/with-unstated/pages/about.js
index a1c1edd531..7a6330c0dd 100644
--- a/examples/with-unstated/pages/about.js
+++ b/examples/with-unstated/pages/about.js
@@ -1,8 +1,8 @@
-import Link from 'next/link'
-import ClockContainer from '../containers/clock'
-import CounterContainer from '../containers/counter'
-import Clock from '../components/Clock'
-import Counter from '../components/Counter'
+import Link from "next/link";
+import ClockContainer from "../containers/clock";
+import CounterContainer from "../containers/counter";
+import Clock from "../components/Clock";
+import Counter from "../components/Counter";
 
 export default function Index() {
   return (
@@ -19,5 +19,5 @@ export default function Index() {
         </div>
       </ClockContainer.Provider>
     </CounterContainer.Provider>
-  )
+  );
 }
diff --git a/examples/with-unstated/pages/index.js b/examples/with-unstated/pages/index.js
index 2887022404..43c3981460 100644
--- a/examples/with-unstated/pages/index.js
+++ b/examples/with-unstated/pages/index.js
@@ -1,8 +1,8 @@
-import Link from 'next/link'
-import ClockContainer from '../containers/clock'
-import CounterContainer from '../containers/counter'
-import Clock from '../components/Clock'
-import Counter from '../components/Counter'
+import Link from "next/link";
+import ClockContainer from "../containers/clock";
+import CounterContainer from "../containers/counter";
+import Clock from "../components/Clock";
+import Counter from "../components/Counter";
 
 export default function Index() {
   return (
@@ -19,5 +19,5 @@ export default function Index() {
         </div>
       </ClockContainer.Provider>
     </CounterContainer.Provider>
-  )
+  );
 }
diff --git a/examples/with-urql/graphql/client.js b/examples/with-urql/graphql/client.js
index c34860ff81..5145925537 100644
--- a/examples/with-urql/graphql/client.js
+++ b/examples/with-urql/graphql/client.js
@@ -1,5 +1,5 @@
-import { createClient } from 'urql'
+import { createClient } from "urql";
 
 export const client = createClient({
-  url: 'https://graphql-pokemon2.vercel.app/',
-})
+  url: "https://graphql-pokemon2.vercel.app/",
+});
diff --git a/examples/with-urql/graphql/getPokemon.js b/examples/with-urql/graphql/getPokemon.js
index 6bdb8a88f1..d4736f9595 100644
--- a/examples/with-urql/graphql/getPokemon.js
+++ b/examples/with-urql/graphql/getPokemon.js
@@ -1,4 +1,4 @@
-import { client } from './client'
+import { client } from "./client";
 const pokemonQuery = `
   query firstTwentyPokemons($name: String!) {
     pokemon(name: $name) {
@@ -6,12 +6,12 @@ const pokemonQuery = `
       image
     }
   }
-`
+`;
 
 export const getPokemon = async (name) => {
   const {
     data: { pokemon },
-  } = await client.query(pokemonQuery, { name }).toPromise()
+  } = await client.query(pokemonQuery, { name }).toPromise();
 
-  return pokemon
-}
+  return pokemon;
+};
diff --git a/examples/with-urql/graphql/getPokemons.js b/examples/with-urql/graphql/getPokemons.js
index 48f0484ade..998baeac5c 100644
--- a/examples/with-urql/graphql/getPokemons.js
+++ b/examples/with-urql/graphql/getPokemons.js
@@ -1,4 +1,4 @@
-import { client } from './client'
+import { client } from "./client";
 const firstTwentyPokemonsQuery = `
   query firstTwentyPokemons {
     pokemons(first: 20) {
@@ -6,15 +6,15 @@ const firstTwentyPokemonsQuery = `
       name
     }
   }
-`
+`;
 
 export const getPokemons = async () => {
   const {
     data: { pokemons },
-  } = await client.query(firstTwentyPokemonsQuery).toPromise()
+  } = await client.query(firstTwentyPokemonsQuery).toPromise();
 
   return pokemons.map((pokemon) => ({
     ...pokemon,
     name: pokemon.name.toLowerCase(),
-  }))
-}
+  }));
+};
diff --git a/examples/with-urql/pages/index.js b/examples/with-urql/pages/index.js
index fa13febfee..b3e2dc17fd 100644
--- a/examples/with-urql/pages/index.js
+++ b/examples/with-urql/pages/index.js
@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import { getPokemons } from '../graphql/getPokemons'
+import Link from "next/link";
+import { getPokemons } from "../graphql/getPokemons";
 
 export default function Home({ pokemons }) {
   return (
@@ -7,20 +7,20 @@ export default function Home({ pokemons }) {
       {pokemons.map((pokemon) => (
         <li key={pokemon.name}>
           <Link as={`/pokemon/${pokemon.name}`} href="/pokemon/[name]">
-            <h2 style={{ textTransform: 'capitalize' }}>{pokemon.name}</h2>
+            <h2 style={{ textTransform: "capitalize" }}>{pokemon.name}</h2>
             <img src={pokemon.image} alt={`${pokemon.name} picture`} />
           </Link>
         </li>
       ))}
     </ul>
-  )
+  );
 }
 
 export const getStaticProps = async () => {
-  const pokemons = await getPokemons()
+  const pokemons = await getPokemons();
   return {
     props: {
       pokemons,
     },
-  }
-}
+  };
+};
diff --git a/examples/with-urql/pages/pokemon/[name].js b/examples/with-urql/pages/pokemon/[name].js
index 029e470391..dae1c9f3e6 100644
--- a/examples/with-urql/pages/pokemon/[name].js
+++ b/examples/with-urql/pages/pokemon/[name].js
@@ -1,5 +1,5 @@
-import { getPokemon } from '../../graphql/getPokemon'
-import { getPokemons } from '../../graphql/getPokemons'
+import { getPokemon } from "../../graphql/getPokemon";
+import { getPokemons } from "../../graphql/getPokemons";
 
 export default function Pokemon({ pokemon }) {
   return (
@@ -7,27 +7,27 @@ export default function Pokemon({ pokemon }) {
       <h1>{pokemon.name}</h1>
       <img src={pokemon.image} />
     </div>
-  )
+  );
 }
 
 export const getStaticPaths = async () => {
-  const pokemons = await getPokemons()
+  const pokemons = await getPokemons();
 
   return {
     paths: pokemons.map(({ name }) => ({
       params: { name },
     })),
     fallback: true,
-  }
-}
+  };
+};
 
 export const getStaticProps = async (context) => {
-  const { name } = context.params
-  const pokemon = await getPokemon(name)
+  const { name } = context.params;
+  const pokemon = await getPokemon(name);
 
   return {
     props: {
       pokemon,
     },
-  }
-}
+  };
+};
diff --git a/examples/with-userbase/components/layout/index.js b/examples/with-userbase/components/layout/index.js
index f76894c427..3c3c181a26 100644
--- a/examples/with-userbase/components/layout/index.js
+++ b/examples/with-userbase/components/layout/index.js
@@ -1,4 +1,4 @@
-import Nav from '../nav'
+import Nav from "../nav";
 
 export default function Layout({ user, setUser, children }) {
   return (
@@ -6,5 +6,5 @@ export default function Layout({ user, setUser, children }) {
       <Nav user={user} setUser={setUser} />
       {children}
     </div>
-  )
+  );
 }
diff --git a/examples/with-userbase/components/modal/index.js b/examples/with-userbase/components/modal/index.js
index 2d752982ca..748bab8ffa 100644
--- a/examples/with-userbase/components/modal/index.js
+++ b/examples/with-userbase/components/modal/index.js
@@ -1,49 +1,49 @@
-import { useState, useEffect } from 'react'
-import userbase from 'userbase-js'
+import { useState, useEffect } from "react";
+import userbase from "userbase-js";
 
 function LoginModal({ toggle, modalType, setUser }) {
-  const [username, setUsername] = useState('')
-  const [password, setPassword] = useState('')
-  const [loading, setLoading] = useState()
-  const [error, setError] = useState()
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState();
+  const [error, setError] = useState();
 
   useEffect(() => {
-    setError('')
-  }, [modalType])
+    setError("");
+  }, [modalType]);
 
   async function handleSignUp(e) {
-    e.preventDefault()
-    setLoading(true)
+    e.preventDefault();
+    setLoading(true);
     try {
       const user = await userbase.signUp({
         username,
         password,
-        rememberMe: 'none',
-      })
-      setUser(user)
-      setLoading(false)
-      toggle(false)
+        rememberMe: "none",
+      });
+      setUser(user);
+      setLoading(false);
+      toggle(false);
     } catch (e) {
-      setLoading(false)
-      setError(e.message)
+      setLoading(false);
+      setError(e.message);
     }
   }
 
   async function handleLogIn(e) {
-    e.preventDefault()
-    setLoading(true)
+    e.preventDefault();
+    setLoading(true);
     try {
       const user = await userbase.signIn({
         username,
         password,
-        rememberMe: 'none',
-      })
-      setUser(user)
-      setLoading(false)
-      toggle(false)
+        rememberMe: "none",
+      });
+      setUser(user);
+      setLoading(false);
+      toggle(false);
     } catch (e) {
-      setLoading(false)
-      setError(e.message)
+      setLoading(false);
+      setError(e.message);
     }
   }
 
@@ -88,13 +88,13 @@ function LoginModal({ toggle, modalType, setUser }) {
         >
           Cancel
         </span>
-        {modalType === 'logIn' ? (
+        {modalType === "logIn" ? (
           <button
             disabled={loading}
             className="btn-yellow"
             onClick={handleLogIn}
           >
-            {loading ? 'Logging In ...' : 'Log In'}
+            {loading ? "Logging In ..." : "Log In"}
           </button>
         ) : (
           <button
@@ -102,13 +102,13 @@ function LoginModal({ toggle, modalType, setUser }) {
             className="btn-yellow"
             onClick={handleSignUp}
           >
-            {loading ? 'Signing up ...' : 'Sign Up'}
+            {loading ? "Signing up ..." : "Sign Up"}
           </button>
         )}
       </div>
       <p className="text-red-500 font-bold">{error}</p>
     </form>
-  )
+  );
 }
 
-export default LoginModal
+export default LoginModal;
diff --git a/examples/with-userbase/components/nav/index.js b/examples/with-userbase/components/nav/index.js
index 659b2b8bfe..9d1f0836ac 100644
--- a/examples/with-userbase/components/nav/index.js
+++ b/examples/with-userbase/components/nav/index.js
@@ -1,23 +1,23 @@
-import { useState } from 'react'
-import LoginModal from '../modal'
+import { useState } from "react";
+import LoginModal from "../modal";
 
-import userbase from 'userbase-js'
+import userbase from "userbase-js";
 
 export default function Nav({ user, setUser }) {
-  const [open, setOpen] = useState()
-  const [modalType, setModalType] = useState()
+  const [open, setOpen] = useState();
+  const [modalType, setModalType] = useState();
 
   function openModal(type) {
-    setOpen(true)
-    setModalType(type)
+    setOpen(true);
+    setModalType(type);
   }
 
   async function logOut() {
     try {
-      await userbase.signOut()
-      setUser(null)
+      await userbase.signOut();
+      setUser(null);
     } catch (e) {
-      console.error(e.message)
+      console.error(e.message);
     }
   }
 
@@ -29,7 +29,7 @@ export default function Nav({ user, setUser }) {
             <li>
               <button
                 className="font-bold mx-2"
-                onClick={() => openModal('logIn')}
+                onClick={() => openModal("logIn")}
               >
                 Log In
               </button>
@@ -37,7 +37,7 @@ export default function Nav({ user, setUser }) {
             <li>
               <button
                 className="btn-yellow mx-2"
-                onClick={() => openModal('signUp')}
+                onClick={() => openModal("signUp")}
               >
                 Sign Up
               </button>
@@ -61,5 +61,5 @@ export default function Nav({ user, setUser }) {
         </div>
       )}
     </nav>
-  )
+  );
 }
diff --git a/examples/with-userbase/components/todo-form/index.js b/examples/with-userbase/components/todo-form/index.js
index e97ef5d987..f41097c87d 100644
--- a/examples/with-userbase/components/todo-form/index.js
+++ b/examples/with-userbase/components/todo-form/index.js
@@ -1,26 +1,26 @@
-import { useState, useEffect } from 'react'
-import userbase from 'userbase-js'
+import { useState, useEffect } from "react";
+import userbase from "userbase-js";
 
 function Todo({ name, done, toggleComplete, deleteTodo }) {
   return (
     <li className="my-4">
       <div className="flex items-center">
-        <span className={done ? 'text-gray-500' : ''}>{name}</span>
+        <span className={done ? "text-gray-500" : ""}>{name}</span>
         <button
           type="button"
           className="mx-4 p-1 rounded bg-purple-400 text-white font-bold"
           onClick={(e) => {
-            e.preventDefault()
-            toggleComplete()
+            e.preventDefault();
+            toggleComplete();
           }}
         >
-          {done ? 'not done' : 'done'}
+          {done ? "not done" : "done"}
         </button>
         <button
           type="button"
           onClick={(e) => {
-            e.preventDefault()
-            deleteTodo()
+            e.preventDefault();
+            deleteTodo();
           }}
           className=" p-1 bg-red-500 text-white rounded font-bold"
         >
@@ -28,76 +28,76 @@ function Todo({ name, done, toggleComplete, deleteTodo }) {
         </button>
       </div>
     </li>
-  )
+  );
 }
 
 function TodoForm() {
-  const [newTodo, setNewTodo] = useState('')
-  const [todos, setTodos] = useState([])
-  const [disabled, setDisabled] = useState()
+  const [newTodo, setNewTodo] = useState("");
+  const [todos, setTodos] = useState([]);
+  const [disabled, setDisabled] = useState();
 
   useEffect(() => {
     async function openDatabase() {
       try {
-        console.log('opening db...')
+        console.log("opening db...");
         await userbase.openDatabase({
-          databaseName: 'next-userbase-todos',
+          databaseName: "next-userbase-todos",
           changeHandler: function (items) {
-            setTodos(items)
+            setTodos(items);
           },
-        })
+        });
       } catch (e) {
-        console.error(e.message)
+        console.error(e.message);
       }
     }
-    openDatabase()
-  }, [])
+    openDatabase();
+  }, []);
 
   async function addTodo(e) {
-    e.preventDefault()
-    setDisabled(true)
+    e.preventDefault();
+    setDisabled(true);
     try {
       await userbase.insertItem({
-        databaseName: 'next-userbase-todos',
+        databaseName: "next-userbase-todos",
         item: { name: newTodo, done: false },
-      })
-      setNewTodo('')
-      setDisabled(false)
+      });
+      setNewTodo("");
+      setDisabled(false);
     } catch (e) {
-      console.error(e.message)
-      setDisabled(false)
+      console.error(e.message);
+      setDisabled(false);
     }
   }
 
   async function toggleComplete(itemId, currentValue) {
     try {
       await userbase.updateItem({
-        databaseName: 'next-userbase-todos',
+        databaseName: "next-userbase-todos",
         item: { ...currentValue, done: !currentValue.done },
         itemId,
-      })
+      });
     } catch (e) {
-      console.error(e.message)
+      console.error(e.message);
     }
   }
 
   function handleNewTodo(e) {
-    e.preventDefault()
-    setNewTodo(e.target.value)
+    e.preventDefault();
+    setNewTodo(e.target.value);
   }
 
   async function deleteTodo(itemId) {
-    setDisabled(true)
+    setDisabled(true);
     try {
       await userbase.deleteItem({
-        databaseName: 'next-userbase-todos',
+        databaseName: "next-userbase-todos",
         itemId,
-      })
-      setNewTodo('')
-      setDisabled(false)
+      });
+      setNewTodo("");
+      setDisabled(false);
     } catch (e) {
-      console.error(e.message)
-      setDisabled(false)
+      console.error(e.message);
+      setDisabled(false);
     }
   }
 
@@ -126,7 +126,7 @@ function TodoForm() {
         </button>
       </div>
     </form>
-  )
+  );
 }
 
-export default TodoForm
+export default TodoForm;
diff --git a/examples/with-userbase/pages/_app.js b/examples/with-userbase/pages/_app.js
index f3b606e5f7..21cd11a492 100644
--- a/examples/with-userbase/pages/_app.js
+++ b/examples/with-userbase/pages/_app.js
@@ -1,21 +1,21 @@
-import { useState, useEffect } from 'react'
-import userbase from 'userbase-js'
-import Layout from '../components/layout'
+import { useState, useEffect } from "react";
+import userbase from "userbase-js";
+import Layout from "../components/layout";
 
-import '../styles/index.css'
+import "../styles/index.css";
 
 function MyApp({ Component, pageProps }) {
-  const [user, setUser] = useState()
+  const [user, setUser] = useState();
 
   useEffect(() => {
-    userbase.init({ appId: process.env.NEXT_PUBLIC_USERBASE_APP_ID })
-  }, [])
+    userbase.init({ appId: process.env.NEXT_PUBLIC_USERBASE_APP_ID });
+  }, []);
 
   return (
     <Layout user={user} setUser={setUser}>
       <Component user={user} {...pageProps} />
     </Layout>
-  )
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-userbase/pages/index.js b/examples/with-userbase/pages/index.js
index 0835540cb5..eaf5f3d91a 100644
--- a/examples/with-userbase/pages/index.js
+++ b/examples/with-userbase/pages/index.js
@@ -1,4 +1,4 @@
-import TodoForm from '../components/todo-form'
+import TodoForm from "../components/todo-form";
 
 function Index({ user }) {
   if (user) {
@@ -9,10 +9,10 @@ function Index({ user }) {
         </h3>
         <TodoForm />
       </div>
-    )
+    );
   } else {
-    return null
+    return null;
   }
 }
 
-export default Index
+export default Index;
diff --git a/examples/with-userbase/postcss.config.js b/examples/with-userbase/postcss.config.js
index 3fa0a9514d..3687d286ec 100644
--- a/examples/with-userbase/postcss.config.js
+++ b/examples/with-userbase/postcss.config.js
@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/with-userbase/styles/index.css b/examples/with-userbase/styles/index.css
index c017a02f38..abe821d61b 100644
--- a/examples/with-userbase/styles/index.css
+++ b/examples/with-userbase/styles/index.css
@@ -1,4 +1,4 @@
-@import './button.css';
+@import "./button.css";
 
 /* purgecss start ignore */
 @tailwind base;
diff --git a/examples/with-userbase/tailwind.config.js b/examples/with-userbase/tailwind.config.js
index 6c81315903..0daaca54fb 100644
--- a/examples/with-userbase/tailwind.config.js
+++ b/examples/with-userbase/tailwind.config.js
@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  mode: 'jit',
-  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  mode: "jit",
+  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},
@@ -10,4 +10,4 @@ module.exports = {
     extend: {},
   },
   plugins: [],
-}
+};
diff --git a/examples/with-vanilla-extract/app/globalStyle.css.ts b/examples/with-vanilla-extract/app/globalStyle.css.ts
index acecb16191..1d36966d34 100644
--- a/examples/with-vanilla-extract/app/globalStyle.css.ts
+++ b/examples/with-vanilla-extract/app/globalStyle.css.ts
@@ -1,42 +1,42 @@
-import { globalStyle } from '@vanilla-extract/css'
+import { globalStyle } from "@vanilla-extract/css";
 
-globalStyle('html, body', {
-  height: '100%',
-})
+globalStyle("html, body", {
+  height: "100%",
+});
 
-globalStyle('*, *::before, *::after', {
-  boxSizing: 'border-box',
-  WebkitFontSmoothing: 'antialiased',
-  MozOsxFontSmoothing: 'grayscale',
-})
+globalStyle("*, *::before, *::after", {
+  boxSizing: "border-box",
+  WebkitFontSmoothing: "antialiased",
+  MozOsxFontSmoothing: "grayscale",
+});
 
-globalStyle('body', {
-  display: 'flex',
-  flexDirection: 'column',
-  margin: '0',
+globalStyle("body", {
+  display: "flex",
+  flexDirection: "column",
+  margin: "0",
   fontFamily:
     "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
-  background: '#000',
-  color: '#fff',
-  padding: '0 16px',
-  backgroundSize: 'cover',
-  backgroundPosition: 'center center',
-  backgroundRepeat: 'no-repeat',
-})
+  background: "#000",
+  color: "#fff",
+  padding: "0 16px",
+  backgroundSize: "cover",
+  backgroundPosition: "center center",
+  backgroundRepeat: "no-repeat",
+});
 
-globalStyle('h1, h2, h3, h4, p', {
+globalStyle("h1, h2, h3, h4, p", {
   margin: 0,
-})
+});
 
-globalStyle('main', {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  position: 'relative',
-  width: '100%',
-  height: '100%',
-  maxWidth: '720px',
-  margin: '0 auto',
-  overflow: 'hidden',
-})
+globalStyle("main", {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexDirection: "column",
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  maxWidth: "720px",
+  margin: "0 auto",
+  overflow: "hidden",
+});
diff --git a/examples/with-vanilla-extract/app/layout.tsx b/examples/with-vanilla-extract/app/layout.tsx
index 4835260438..281ceb30bf 100644
--- a/examples/with-vanilla-extract/app/layout.tsx
+++ b/examples/with-vanilla-extract/app/layout.tsx
@@ -1,13 +1,13 @@
-import './globalStyle.css'
+import "./globalStyle.css";
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-vanilla-extract/app/page.css.ts b/examples/with-vanilla-extract/app/page.css.ts
index 031e0240be..b08e81af34 100644
--- a/examples/with-vanilla-extract/app/page.css.ts
+++ b/examples/with-vanilla-extract/app/page.css.ts
@@ -1,7 +1,7 @@
-import { style } from '@vanilla-extract/css'
+import { style } from "@vanilla-extract/css";
 
 export const page = style({
-  display: 'grid',
-  gap: '1em',
-  placeContent: 'center',
-})
+  display: "grid",
+  gap: "1em",
+  placeContent: "center",
+});
diff --git a/examples/with-vanilla-extract/app/page.tsx b/examples/with-vanilla-extract/app/page.tsx
index c9d327f74a..4756d77ea4 100644
--- a/examples/with-vanilla-extract/app/page.tsx
+++ b/examples/with-vanilla-extract/app/page.tsx
@@ -1,8 +1,8 @@
-import * as styles from './page.css.ts'
+import * as styles from "./page.css.ts";
 
-import Logo from '@/components/Logo'
-import Button from '@/components/Button'
-import Footer from '@/components/Footer'
+import Logo from "@/components/Logo";
+import Button from "@/components/Button";
+import Footer from "@/components/Footer";
 
 export default function Home() {
   return (
@@ -13,5 +13,5 @@ export default function Home() {
       </main>
       <Footer />
     </>
-  )
+  );
 }
diff --git a/examples/with-vanilla-extract/components/Button.css.ts b/examples/with-vanilla-extract/components/Button.css.ts
index 6e9939c9d1..ee57576484 100644
--- a/examples/with-vanilla-extract/components/Button.css.ts
+++ b/examples/with-vanilla-extract/components/Button.css.ts
@@ -1,40 +1,40 @@
-import { style } from '@vanilla-extract/css'
+import { style } from "@vanilla-extract/css";
 
 export const button = style({
-  WebkitFontSmoothing: 'antialiased',
-  WebkitTapHighlightColor: 'transparent',
-  alignItems: 'center',
-  background: '#FFF',
-  borderRadius: '5px',
-  border: '1px solid #FFF',
-  boxSizing: 'border-box',
-  colorScheme: 'dark',
-  color: '#000',
-  cursor: 'pointer',
-  display: 'flex',
-  fontSize: '0.875rem',
+  WebkitFontSmoothing: "antialiased",
+  WebkitTapHighlightColor: "transparent",
+  alignItems: "center",
+  background: "#FFF",
+  borderRadius: "5px",
+  border: "1px solid #FFF",
+  boxSizing: "border-box",
+  colorScheme: "dark",
+  color: "#000",
+  cursor: "pointer",
+  display: "flex",
+  fontSize: "0.875rem",
   fontWeight: 500,
-  font: 'inherit',
-  height: '40px',
-  justifyContent: 'center',
-  lineHeight: '1.25em',
-  margin: '0',
-  maxWidth: '200px',
-  minWidth: '200px',
-  outline: 'none',
-  padding: '0 12px',
-  position: 'relative',
-  textDecoration: 'none',
-  textSizeAdjust: '100%',
-  transitionDuration: '.15s',
-  transitionProperty: 'border-color, background, color, box-shadow',
-  transitionTimingFunction: 'ease',
-  userSelect: 'none',
-  verticalAlign: 'baseline',
-  ':hover': {
-    boxShadow: 'none',
-    background: 'transparent',
-    color: '#FFF',
-    border: '1px solid #FFF',
+  font: "inherit",
+  height: "40px",
+  justifyContent: "center",
+  lineHeight: "1.25em",
+  margin: "0",
+  maxWidth: "200px",
+  minWidth: "200px",
+  outline: "none",
+  padding: "0 12px",
+  position: "relative",
+  textDecoration: "none",
+  textSizeAdjust: "100%",
+  transitionDuration: ".15s",
+  transitionProperty: "border-color, background, color, box-shadow",
+  transitionTimingFunction: "ease",
+  userSelect: "none",
+  verticalAlign: "baseline",
+  ":hover": {
+    boxShadow: "none",
+    background: "transparent",
+    color: "#FFF",
+    border: "1px solid #FFF",
   },
-})
+});
diff --git a/examples/with-vanilla-extract/components/Button.tsx b/examples/with-vanilla-extract/components/Button.tsx
index 1f01bf1990..d17c93ef95 100644
--- a/examples/with-vanilla-extract/components/Button.tsx
+++ b/examples/with-vanilla-extract/components/Button.tsx
@@ -1,11 +1,11 @@
-'use client'
+"use client";
 
-import * as styles from './Button.css.ts'
+import * as styles from "./Button.css.ts";
 
 export default function Button({ children }) {
   return (
-    <button onClick={() => console.log('click')} className={styles.button}>
+    <button onClick={() => console.log("click")} className={styles.button}>
       {children}
     </button>
-  )
+  );
 }
diff --git a/examples/with-vanilla-extract/components/Footer.css.ts b/examples/with-vanilla-extract/components/Footer.css.ts
index 02284bcec9..40df161059 100644
--- a/examples/with-vanilla-extract/components/Footer.css.ts
+++ b/examples/with-vanilla-extract/components/Footer.css.ts
@@ -1,38 +1,38 @@
-import { style } from '@vanilla-extract/css'
+import { style } from "@vanilla-extract/css";
 
 export const footer = style({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'flex-end',
-  position: 'relative',
-  bottom: '0',
-  left: '0',
-  width: '100%',
-  textAlign: 'center',
-  padding: '48px',
-  boxSizing: 'border-box',
-  fontSize: '16px',
-  '@media': {
-    '(min-width: 0px) and (max-width: 768px)': {
-      flexDirection: 'column',
-      alignItems: 'center',
-      gap: '24px',
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "flex-end",
+  position: "relative",
+  bottom: "0",
+  left: "0",
+  width: "100%",
+  textAlign: "center",
+  padding: "48px",
+  boxSizing: "border-box",
+  fontSize: "16px",
+  "@media": {
+    "(min-width: 0px) and (max-width: 768px)": {
+      flexDirection: "column",
+      alignItems: "center",
+      gap: "24px",
     },
   },
-})
+});
 
 export const details = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '12px',
-  fontSize: 'inherit',
-  color: '#fff',
-  margin: 'auto',
-})
+  display: "flex",
+  flexDirection: "column",
+  gap: "12px",
+  fontSize: "inherit",
+  color: "#fff",
+  margin: "auto",
+});
 
 export const link = style({
-  height: 'fit-content',
-  color: 'inherit',
-  textDecorationThickness: '1px',
-  textUnderlineOffset: '3px',
-})
+  height: "fit-content",
+  color: "inherit",
+  textDecorationThickness: "1px",
+  textUnderlineOffset: "3px",
+});
diff --git a/examples/with-vanilla-extract/components/Footer.tsx b/examples/with-vanilla-extract/components/Footer.tsx
index 1d8883bf0f..91cb92ec71 100644
--- a/examples/with-vanilla-extract/components/Footer.tsx
+++ b/examples/with-vanilla-extract/components/Footer.tsx
@@ -1,11 +1,11 @@
-import * as styles from './Footer.css.ts'
+import * as styles from "./Footer.css.ts";
 
 export default function Footer() {
   return (
     <footer className={styles.footer}>
       <div className={styles.details}>
         <p>
-          Built with{' '}
+          Built with{" "}
           <a
             className={styles.link}
             target="_blank"
@@ -13,8 +13,8 @@ export default function Footer() {
             rel="noreferrer"
           >
             Next.js
-          </a>{' '}
-          and{' '}
+          </a>{" "}
+          and{" "}
           <a
             className={styles.link}
             target="_blank"
@@ -22,9 +22,9 @@ export default function Footer() {
             rel="noreferrer"
           >
             Vanilla Extract
-          </a>{' '}
+          </a>{" "}
         </p>
       </div>
     </footer>
-  )
+  );
 }
diff --git a/examples/with-vanilla-extract/components/Logo.css.ts b/examples/with-vanilla-extract/components/Logo.css.ts
index d7d9f471d5..229fb2f452 100644
--- a/examples/with-vanilla-extract/components/Logo.css.ts
+++ b/examples/with-vanilla-extract/components/Logo.css.ts
@@ -1,8 +1,8 @@
-import { style } from '@vanilla-extract/css'
+import { style } from "@vanilla-extract/css";
 
 export const container = style({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  marginBottom: '2em',
-})
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginBottom: "2em",
+});
diff --git a/examples/with-vanilla-extract/components/Logo.tsx b/examples/with-vanilla-extract/components/Logo.tsx
index ead21e5d8a..133868364a 100644
--- a/examples/with-vanilla-extract/components/Logo.tsx
+++ b/examples/with-vanilla-extract/components/Logo.tsx
@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import * as styles from './Logo.css.ts'
+import Image from "next/image";
+import * as styles from "./Logo.css.ts";
 
 export default function Logo() {
   return (
@@ -12,5 +12,5 @@ export default function Logo() {
         alt="Vanilla Extract logo"
       />
     </div>
-  )
+  );
 }
diff --git a/examples/with-vanilla-extract/next.config.js b/examples/with-vanilla-extract/next.config.js
index 317834627e..940f12151f 100644
--- a/examples/with-vanilla-extract/next.config.js
+++ b/examples/with-vanilla-extract/next.config.js
@@ -1,4 +1,4 @@
-const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin')
-const withVanillaExtract = createVanillaExtractPlugin()
+const { createVanillaExtractPlugin } = require("@vanilla-extract/next-plugin");
+const withVanillaExtract = createVanillaExtractPlugin();
 
-module.exports = withVanillaExtract()
+module.exports = withVanillaExtract();
diff --git a/examples/with-vercel-fetch/github.d.ts b/examples/with-vercel-fetch/github.d.ts
index 1d373d98bc..40f39bd2fa 100644
--- a/examples/with-vercel-fetch/github.d.ts
+++ b/examples/with-vercel-fetch/github.d.ts
@@ -2,9 +2,9 @@
 // If you want the full types check out:
 // https://github.com/octokit/openapi-types.ts
 export type Repository = {
-  id: number
-  name: string
-  full_name: string
-  stargazers_count: number
-  private: boolean
-} & Record<string, unknown>
+  id: number;
+  name: string;
+  full_name: string;
+  stargazers_count: number;
+  private: boolean;
+} & Record<string, unknown>;
diff --git a/examples/with-vercel-fetch/pages/index.tsx b/examples/with-vercel-fetch/pages/index.tsx
index 19befd221f..17209eed5b 100644
--- a/examples/with-vercel-fetch/pages/index.tsx
+++ b/examples/with-vercel-fetch/pages/index.tsx
@@ -1,13 +1,13 @@
-import type { InferGetStaticPropsType } from 'next'
-import type { Repository } from '../github'
-import createFetch from '@vercel/fetch'
+import type { InferGetStaticPropsType } from "next";
+import type { Repository } from "../github";
+import createFetch from "@vercel/fetch";
 
 export async function getStaticProps() {
-  const fetch = createFetch()
-  const res = await fetch('https://api.github.com/repos/vercel/next.js')
-  const repo = (await res.json()) as Repository
+  const fetch = createFetch();
+  const res = await fetch("https://api.github.com/repos/vercel/next.js");
+  const repo = (await res.json()) as Repository;
 
-  return { props: { stars: repo.stargazers_count } }
+  return { props: { stars: repo.stargazers_count } };
 }
 
 export default function HomePage({
@@ -17,5 +17,5 @@ export default function HomePage({
     <div>
       <p>Next.js has {stars} ⭐️</p>
     </div>
-  )
+  );
 }
diff --git a/examples/with-videojs/components/Player.tsx b/examples/with-videojs/components/Player.tsx
index d345584716..3497674985 100644
--- a/examples/with-videojs/components/Player.tsx
+++ b/examples/with-videojs/components/Player.tsx
@@ -1,20 +1,20 @@
-import { useCallback, useEffect, useState } from 'react'
-import videojs from 'video.js'
-import 'videojs-youtube'
+import { useCallback, useEffect, useState } from "react";
+import videojs from "video.js";
+import "videojs-youtube";
 
 interface PlayerProps {
   /**
    *
    */
-  techOrder: string[]
+  techOrder: string[];
   /**
    * Is autoplay enabled for this video?
    */
-  autoplay: boolean
+  autoplay: boolean;
   /**
    * Should this video have controls?
    */
-  controls: boolean
+  controls: boolean;
   /**
    * A list of video sources.
    */
@@ -22,12 +22,12 @@ interface PlayerProps {
     /**
      * The source url.
      */
-    src: string
+    src: string;
     /**
      * The type of source
      */
-    type: string
-  }[]
+    type: string;
+  }[];
 }
 
 /**
@@ -35,23 +35,23 @@ interface PlayerProps {
  * @returns A Video.js video player element.
  */
 const Player = (props: PlayerProps) => {
-  const [videoEl, setVideoEl] = useState<HTMLVideoElement | null>(null)
+  const [videoEl, setVideoEl] = useState<HTMLVideoElement | null>(null);
   const onVideo = useCallback((el: HTMLVideoElement) => {
-    setVideoEl(el)
-  }, [])
+    setVideoEl(el);
+  }, []);
 
   useEffect(() => {
     if (videoEl == null) {
-      return
+      return;
     }
 
     // our video.js player
-    const player = videojs(videoEl, props)
+    const player = videojs(videoEl, props);
 
     return () => {
-      player.dispose()
-    }
-  }, [props, videoEl])
+      player.dispose();
+    };
+  }, [props, videoEl]);
 
   return (
     <>
@@ -60,7 +60,7 @@ const Player = (props: PlayerProps) => {
         <video ref={onVideo} className="video-js" playsInline />
       </div>
     </>
-  )
-}
+  );
+};
 
-export default Player
+export default Player;
diff --git a/examples/with-videojs/components/PlayerCss.tsx b/examples/with-videojs/components/PlayerCss.tsx
index 0f02153fe3..846d2eae52 100644
--- a/examples/with-videojs/components/PlayerCss.tsx
+++ b/examples/with-videojs/components/PlayerCss.tsx
@@ -1,4 +1,4 @@
-import 'videojs-youtube'
+import "videojs-youtube";
 
 export default function PlayerCSS() {
   return (
@@ -15,5 +15,5 @@ export default function PlayerCSS() {
         ></video>
       </div>
     </>
-  )
+  );
 }
diff --git a/examples/with-videojs/pages/_app.tsx b/examples/with-videojs/pages/_app.tsx
index a00fbb5e6a..e3c018960e 100644
--- a/examples/with-videojs/pages/_app.tsx
+++ b/examples/with-videojs/pages/_app.tsx
@@ -1,6 +1,6 @@
-import type { AppProps } from 'next/app'
-import 'video.js/dist/video-js.css'
+import type { AppProps } from "next/app";
+import "video.js/dist/video-js.css";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-videojs/pages/index.tsx b/examples/with-videojs/pages/index.tsx
index de4ce2d902..111cf869f5 100644
--- a/examples/with-videojs/pages/index.tsx
+++ b/examples/with-videojs/pages/index.tsx
@@ -1,23 +1,23 @@
-import Player from '../components/Player'
-import PlayerCSS from '../components/PlayerCss'
+import Player from "../components/Player";
+import PlayerCSS from "../components/PlayerCss";
 
 export default function Index() {
   const videoJsOptions = {
-    techOrder: ['youtube'],
+    techOrder: ["youtube"],
     autoplay: false,
     controls: true,
     sources: [
       {
-        src: 'https://www.youtube.com/watch?v=IxQB14xVas0',
-        type: 'video/youtube',
+        src: "https://www.youtube.com/watch?v=IxQB14xVas0",
+        type: "video/youtube",
       },
     ],
-  }
+  };
 
   return (
     <>
       <Player {...videoJsOptions} />
       <PlayerCSS />
     </>
-  )
+  );
 }
diff --git a/examples/with-videojs/videojs.d.ts b/examples/with-videojs/videojs.d.ts
index 7504bdad62..d87e864c33 100644
--- a/examples/with-videojs/videojs.d.ts
+++ b/examples/with-videojs/videojs.d.ts
@@ -1 +1 @@
-declare module 'videojs-youtube'
+declare module "videojs-youtube";
diff --git a/examples/with-vitest/__tests__/Home.test.tsx b/examples/with-vitest/__tests__/Home.test.tsx
index 01fafc73e8..38e7327077 100644
--- a/examples/with-vitest/__tests__/Home.test.tsx
+++ b/examples/with-vitest/__tests__/Home.test.tsx
@@ -1,15 +1,15 @@
-import { expect, test } from 'vitest'
-import { render, screen, within } from '@testing-library/react'
-import Home from '../pages/home'
+import { expect, test } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import Home from "../pages/home";
 
-test('Pages Router', () => {
-  render(<Home />)
-  const main = within(screen.getByRole('main'))
+test("Pages Router", () => {
+  render(<Home />);
+  const main = within(screen.getByRole("main"));
   expect(
-    main.getByRole('heading', { level: 1, name: /welcome to next\.js!/i })
-  ).toBeDefined()
+    main.getByRole("heading", { level: 1, name: /welcome to next\.js!/i }),
+  ).toBeDefined();
 
-  const footer = within(screen.getByRole('contentinfo'))
-  const link = within(footer.getByRole('link'))
-  expect(link.getByRole('img', { name: /vercel logo/i })).toBeDefined()
-})
+  const footer = within(screen.getByRole("contentinfo"));
+  const link = within(footer.getByRole("link"));
+  expect(link.getByRole("img", { name: /vercel logo/i })).toBeDefined();
+});
diff --git a/examples/with-vitest/app/blog/[slug]/page.test.tsx b/examples/with-vitest/app/blog/[slug]/page.test.tsx
index c83cda0b37..c20c4c436f 100644
--- a/examples/with-vitest/app/blog/[slug]/page.test.tsx
+++ b/examples/with-vitest/app/blog/[slug]/page.test.tsx
@@ -1,10 +1,10 @@
-import { expect, test } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import Page from './page'
+import { expect, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Page from "./page";
 
-test('App Router: Works with dynamic route segments', () => {
-  render(<Page params={{ slug: 'Test' }} />)
+test("App Router: Works with dynamic route segments", () => {
+  render(<Page params={{ slug: "Test" }} />);
   expect(
-    screen.getByRole('heading', { level: 1, name: 'Slug: Test' })
-  ).toBeDefined()
-})
+    screen.getByRole("heading", { level: 1, name: "Slug: Test" }),
+  ).toBeDefined();
+});
diff --git a/examples/with-vitest/app/blog/[slug]/page.tsx b/examples/with-vitest/app/blog/[slug]/page.tsx
index df9575a49a..239d5c2071 100644
--- a/examples/with-vitest/app/blog/[slug]/page.tsx
+++ b/examples/with-vitest/app/blog/[slug]/page.tsx
@@ -1,13 +1,13 @@
 type Params = {
   params: {
-    slug: string
-  }
-}
+    slug: string;
+  };
+};
 
 export async function generateMetadata({ params }: Params) {
-  return { title: `Post: ${params.slug}` }
+  return { title: `Post: ${params.slug}` };
 }
 
 export default function Page({ params }: Params) {
-  return <h1>Slug: {params.slug}</h1>
+  return <h1>Slug: {params.slug}</h1>;
 }
diff --git a/examples/with-vitest/app/counter.test.tsx b/examples/with-vitest/app/counter.test.tsx
index 91ff5bfd9f..fd3125fd56 100644
--- a/examples/with-vitest/app/counter.test.tsx
+++ b/examples/with-vitest/app/counter.test.tsx
@@ -1,10 +1,10 @@
-import { expect, test } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
-import Counter from './counter'
+import { expect, test } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import Counter from "./counter";
 
-test('App Router: Works with Client Components', () => {
-  render(<Counter />)
-  expect(screen.getByRole('heading', { level: 2, name: '0' })).toBeDefined()
-  fireEvent.click(screen.getByRole('button'))
-  expect(screen.getByRole('heading', { level: 2, name: '1' })).toBeDefined()
-})
+test("App Router: Works with Client Components", () => {
+  render(<Counter />);
+  expect(screen.getByRole("heading", { level: 2, name: "0" })).toBeDefined();
+  fireEvent.click(screen.getByRole("button"));
+  expect(screen.getByRole("heading", { level: 2, name: "1" })).toBeDefined();
+});
diff --git a/examples/with-vitest/app/counter.tsx b/examples/with-vitest/app/counter.tsx
index e383b40314..7a8f9f47e2 100644
--- a/examples/with-vitest/app/counter.tsx
+++ b/examples/with-vitest/app/counter.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client";
 
-import { useState } from 'react'
+import { useState } from "react";
 
 export default function Counter() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
   return (
     <>
       <h2>{count}</h2>
@@ -11,5 +11,5 @@ export default function Counter() {
         +
       </button>
     </>
-  )
+  );
 }
diff --git a/examples/with-vitest/app/layout.tsx b/examples/with-vitest/app/layout.tsx
index dbce4ea8e3..225b6038d7 100644
--- a/examples/with-vitest/app/layout.tsx
+++ b/examples/with-vitest/app/layout.tsx
@@ -1,11 +1,11 @@
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-vitest/app/page.test.tsx b/examples/with-vitest/app/page.test.tsx
index 1cd07a2ece..94488aa5b7 100644
--- a/examples/with-vitest/app/page.test.tsx
+++ b/examples/with-vitest/app/page.test.tsx
@@ -1,10 +1,10 @@
-import { expect, test } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import Page from './page'
+import { expect, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Page from "./page";
 
-test('App Router: Works with Server Components', () => {
-  render(<Page />)
+test("App Router: Works with Server Components", () => {
+  render(<Page />);
   expect(
-    screen.getByRole('heading', { level: 1, name: 'App Router' })
-  ).toBeDefined()
-})
+    screen.getByRole("heading", { level: 1, name: "App Router" }),
+  ).toBeDefined();
+});
diff --git a/examples/with-vitest/app/page.tsx b/examples/with-vitest/app/page.tsx
index 5175cc603b..c40d746000 100644
--- a/examples/with-vitest/app/page.tsx
+++ b/examples/with-vitest/app/page.tsx
@@ -1,7 +1,7 @@
 export const metadata = {
-  title: 'App Router',
-}
+  title: "App Router",
+};
 
 export default function Page() {
-  return <h1>App Router</h1>
+  return <h1>App Router</h1>;
 }
diff --git a/examples/with-vitest/app/utils/add.test.ts b/examples/with-vitest/app/utils/add.test.ts
index 96be3edb03..5c616ef2c1 100644
--- a/examples/with-vitest/app/utils/add.test.ts
+++ b/examples/with-vitest/app/utils/add.test.ts
@@ -1,12 +1,12 @@
-import { expect, test, vi } from 'vitest'
-import { add } from './add'
+import { expect, test, vi } from "vitest";
+import { add } from "./add";
 
 // Disables a package that checks that code is only executed on the server side.
 // Also, this mock can be defined in the Vitest setup file.
-vi.mock('server-only', () => {
-  return {}
-})
+vi.mock("server-only", () => {
+  return {};
+});
 
-test('Test functions that import server-only', () => {
-  expect(add(1, 2)).toBe(3)
-})
+test("Test functions that import server-only", () => {
+  expect(add(1, 2)).toBe(3);
+});
diff --git a/examples/with-vitest/app/utils/add.ts b/examples/with-vitest/app/utils/add.ts
index 260a464800..43a6f6e568 100644
--- a/examples/with-vitest/app/utils/add.ts
+++ b/examples/with-vitest/app/utils/add.ts
@@ -1,5 +1,5 @@
-import 'server-only'
+import "server-only";
 
 export function add(a: number, b: number) {
-  return a + b
+  return a + b;
 }
diff --git a/examples/with-vitest/pages/_app.tsx b/examples/with-vitest/pages/_app.tsx
index 33da2fce54..42e2aed31d 100644
--- a/examples/with-vitest/pages/_app.tsx
+++ b/examples/with-vitest/pages/_app.tsx
@@ -1,6 +1,6 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/examples/with-vitest/pages/home/index.tsx b/examples/with-vitest/pages/home/index.tsx
index a4b85e51ec..50eca7efa8 100644
--- a/examples/with-vitest/pages/home/index.tsx
+++ b/examples/with-vitest/pages/home/index.tsx
@@ -1,7 +1,7 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../../styles/Home.module.css'
+import type { NextPage } from "next";
+import Head from "next/head";
+import Image from "next/image";
+import styles from "../../styles/Home.module.css";
 
 const Home: NextPage = () => {
   return (
@@ -18,7 +18,7 @@ const Home: NextPage = () => {
         </h1>
 
         <p className={styles.description}>
-          Get started by editing{' '}
+          Get started by editing{" "}
           <code className={styles.code}>pages/index.tsx</code>
         </p>
 
@@ -61,14 +61,14 @@ const Home: NextPage = () => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <span className={styles.logo}>
             <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
           </span>
         </a>
       </footer>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/examples/with-vitest/vitest.config.ts b/examples/with-vitest/vitest.config.ts
index 0a37d9af6e..ec443cb334 100644
--- a/examples/with-vitest/vitest.config.ts
+++ b/examples/with-vitest/vitest.config.ts
@@ -1,10 +1,10 @@
-import { defineConfig } from 'vitest/config'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
   test: {
-    environment: 'jsdom',
+    environment: "jsdom",
   },
-})
+});
diff --git a/examples/with-web-worker/pages/index.tsx b/examples/with-web-worker/pages/index.tsx
index b51ecdd06e..f37ad6a744 100644
--- a/examples/with-web-worker/pages/index.tsx
+++ b/examples/with-web-worker/pages/index.tsx
@@ -1,25 +1,25 @@
-import { useEffect, useRef, useCallback } from 'react'
+import { useEffect, useRef, useCallback } from "react";
 
 export default function Index() {
-  const workerRef = useRef<Worker>()
+  const workerRef = useRef<Worker>();
 
   useEffect(() => {
-    workerRef.current = new Worker(new URL('../worker.ts', import.meta.url))
+    workerRef.current = new Worker(new URL("../worker.ts", import.meta.url));
     workerRef.current.onmessage = (event: MessageEvent<number>) =>
-      alert(`WebWorker Response => ${event.data}`)
+      alert(`WebWorker Response => ${event.data}`);
     return () => {
-      workerRef.current?.terminate()
-    }
-  }, [])
+      workerRef.current?.terminate();
+    };
+  }, []);
 
   const handleWork = useCallback(async () => {
-    workerRef.current?.postMessage(100000)
-  }, [])
+    workerRef.current?.postMessage(100000);
+  }, []);
 
   return (
     <>
       <p>Do work in a WebWorker!</p>
       <button onClick={handleWork}>Calculate PI</button>
     </>
-  )
+  );
 }
diff --git a/examples/with-web-worker/utils/pi.ts b/examples/with-web-worker/utils/pi.ts
index cec4d8068d..d1d91e4c45 100644
--- a/examples/with-web-worker/utils/pi.ts
+++ b/examples/with-web-worker/utils/pi.ts
@@ -1,9 +1,9 @@
 // https://stackoverflow.com/a/39575124
 export default function pi(n: number) {
-  let v = 0
+  let v = 0;
   for (let i = 1; i <= n; i += 4) {
     // increment by 4
-    v += 1 / i - 1 / (i + 2) // add the value of the series
+    v += 1 / i - 1 / (i + 2); // add the value of the series
   }
-  return 4 * v // apply the factor at last
+  return 4 * v; // apply the factor at last
 }
diff --git a/examples/with-web-worker/worker.ts b/examples/with-web-worker/worker.ts
index 4448af2b88..88beb0dcad 100644
--- a/examples/with-web-worker/worker.ts
+++ b/examples/with-web-worker/worker.ts
@@ -1,6 +1,6 @@
 // This is a module worker, so we can use imports (in the browser too!)
-import pi from './utils/pi'
+import pi from "./utils/pi";
 
-addEventListener('message', (event: MessageEvent<number>) => {
-  postMessage(pi(event.data))
-})
+addEventListener("message", (event: MessageEvent<number>) => {
+  postMessage(pi(event.data));
+});
diff --git a/examples/with-webassembly/components/RustComponent.tsx b/examples/with-webassembly/components/RustComponent.tsx
index 6acf05307b..9229f672ba 100644
--- a/examples/with-webassembly/components/RustComponent.tsx
+++ b/examples/with-webassembly/components/RustComponent.tsx
@@ -1,24 +1,24 @@
-import type { AddModuleExports } from '../wasm'
-import dynamic from 'next/dynamic'
+import type { AddModuleExports } from "../wasm";
+import dynamic from "next/dynamic";
 
 interface RustComponentProps {
-  number: Number
+  number: Number;
 }
 
 const RustComponent = dynamic({
   loader: async () => {
     // Import the wasm module
     // @ts-ignore
-    const exports = (await import('../add.wasm')) as AddModuleExports
-    const { add_one: addOne } = exports
+    const exports = (await import("../add.wasm")) as AddModuleExports;
+    const { add_one: addOne } = exports;
 
     // Return a React component that calls the add_one method on the wasm module
     return ({ number }: RustComponentProps) => (
       <div>
         <>{addOne(number)}</>
       </div>
-    )
+    );
   },
-})
+});
 
-export default RustComponent
+export default RustComponent;
diff --git a/examples/with-webassembly/next.config.js b/examples/with-webassembly/next.config.js
index 42ea82bf40..0a4bde2313 100644
--- a/examples/with-webassembly/next.config.js
+++ b/examples/with-webassembly/next.config.js
@@ -5,14 +5,14 @@ const nextConfig = {
     // Fixes `Error occurred prerendering page "/"`
     config.output.webassemblyModuleFilename =
       isServer && !dev
-        ? '../static/wasm/[modulehash].wasm'
-        : 'static/wasm/[modulehash].wasm'
+        ? "../static/wasm/[modulehash].wasm"
+        : "static/wasm/[modulehash].wasm";
 
     // Since Webpack 5 doesn't enable WebAssembly by default, we should do it manually
-    config.experiments = { ...config.experiments, asyncWebAssembly: true }
+    config.experiments = { ...config.experiments, asyncWebAssembly: true };
 
-    return config
+    return config;
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-webassembly/pages/api/edge.ts b/examples/with-webassembly/pages/api/edge.ts
index 21867d663e..01f8c7efab 100644
--- a/examples/with-webassembly/pages/api/edge.ts
+++ b/examples/with-webassembly/pages/api/edge.ts
@@ -1,16 +1,16 @@
-import type { AddModuleExports } from '../../wasm'
+import type { AddModuleExports } from "../../wasm";
 // @ts-ignore
-import addWasm from '../../add.wasm?module'
+import addWasm from "../../add.wasm?module";
 
-const module$ = WebAssembly.instantiate(addWasm)
+const module$ = WebAssembly.instantiate(addWasm);
 
 export default async function handler() {
-  const instance = (await module$) as any
-  const exports = instance.exports as AddModuleExports
-  const { add_one: addOne } = exports
-  const number = addOne(10)
+  const instance = (await module$) as any;
+  const exports = instance.exports as AddModuleExports;
+  const { add_one: addOne } = exports;
+  const number = addOne(10);
 
-  return new Response(`got: ${number}`)
+  return new Response(`got: ${number}`);
 }
 
-export const config = { runtime: 'edge' }
+export const config = { runtime: "edge" };
diff --git a/examples/with-webassembly/pages/index.tsx b/examples/with-webassembly/pages/index.tsx
index 6d6aba712f..54e4223369 100644
--- a/examples/with-webassembly/pages/index.tsx
+++ b/examples/with-webassembly/pages/index.tsx
@@ -1,15 +1,15 @@
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import RustComponent from '../components/RustComponent'
+import { useRouter } from "next/router";
+import Link from "next/link";
+import RustComponent from "../components/RustComponent";
 
 export default function Page() {
-  const { query } = useRouter()
-  const number = parseInt(query.number as string) || 30
+  const { query } = useRouter();
+  const number = parseInt(query.number as string) || 30;
 
   return (
     <div>
       <RustComponent number={number} />
       <Link href={`/?number=${number + 1}`}>+</Link>
     </div>
-  )
+  );
 }
diff --git a/examples/with-webassembly/wasm.d.ts b/examples/with-webassembly/wasm.d.ts
index db4e6b84e3..66ea999060 100644
--- a/examples/with-webassembly/wasm.d.ts
+++ b/examples/with-webassembly/wasm.d.ts
@@ -1,3 +1,3 @@
 export interface AddModuleExports {
-  add_one(number: Number): Number
+  add_one(number: Number): Number;
 }
diff --git a/examples/with-windicss/next.config.js b/examples/with-windicss/next.config.js
index 097b1a1fe9..0d57b53ea1 100644
--- a/examples/with-windicss/next.config.js
+++ b/examples/with-windicss/next.config.js
@@ -1,12 +1,12 @@
 /** @type {import('next').NextConfig} */
-const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')
+const WindiCSSWebpackPlugin = require("windicss-webpack-plugin");
 
 const nextConfig = {
   reactStrictMode: true,
   webpack: (config) => {
-    config.plugins.push(new WindiCSSWebpackPlugin())
-    return config
+    config.plugins.push(new WindiCSSWebpackPlugin());
+    return config;
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-windicss/pages/_app.tsx b/examples/with-windicss/pages/_app.tsx
index 1aabbd32a8..9bfdd8670a 100644
--- a/examples/with-windicss/pages/_app.tsx
+++ b/examples/with-windicss/pages/_app.tsx
@@ -1,9 +1,9 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
-import 'windi.css'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import "windi.css";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/examples/with-windicss/pages/index.tsx b/examples/with-windicss/pages/index.tsx
index 94e17a5fac..235dc544db 100644
--- a/examples/with-windicss/pages/index.tsx
+++ b/examples/with-windicss/pages/index.tsx
@@ -1,6 +1,6 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
+import type { NextPage } from "next";
+import Head from "next/head";
+import Image from "next/image";
 
 const Home: NextPage = () => {
   return (
@@ -12,14 +12,14 @@ const Home: NextPage = () => {
 
       <main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center">
         <h1 className="text-6xl font-bold">
-          Welcome to{' '}
+          Welcome to{" "}
           <a className="text-blue-600" href="https://nextjs.org">
             Next.js!
           </a>
         </h1>
 
         <p className="mt-3 text-2xl">
-          Get started by editing{' '}
+          Get started by editing{" "}
           <code className="rounded-md bg-gray-100 p-3 font-mono text-lg">
             pages/index.tsx
           </code>
@@ -75,12 +75,12 @@ const Home: NextPage = () => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by{' '}
+          Powered by{" "}
           <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
         </a>
       </footer>
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/examples/with-windicss/windi.config.ts b/examples/with-windicss/windi.config.ts
index b11366f9ec..43c601aac6 100644
--- a/examples/with-windicss/windi.config.ts
+++ b/examples/with-windicss/windi.config.ts
@@ -1,8 +1,8 @@
-import { defineConfig } from 'windicss/helpers'
+import { defineConfig } from "windicss/helpers";
 
 export default defineConfig({
   extract: {
-    include: ['**/*.{jsx,tsx,css}'],
-    exclude: ['node_modules', '.git', '.next'],
+    include: ["**/*.{jsx,tsx,css}"],
+    exclude: ["node_modules", ".git", ".next"],
   },
-})
+});
diff --git a/examples/with-xata/pages/_app.tsx b/examples/with-xata/pages/_app.tsx
index a3828c6910..a962cbbf0d 100644
--- a/examples/with-xata/pages/_app.tsx
+++ b/examples/with-xata/pages/_app.tsx
@@ -1,15 +1,15 @@
-import type { AppProps } from 'next/app'
-import Head from 'next/head'
-import '../styles/root.css'
+import type { AppProps } from "next/app";
+import Head from "next/head";
+import "../styles/root.css";
 
 const metas = {
-  title: 'Next.js with-xata',
-  description: 'Run Next.js with Xata with this awesome template',
+  title: "Next.js with-xata",
+  description: "Run Next.js with Xata with this awesome template",
   image:
-    process.env.NODE_ENV === 'development'
-      ? 'http://localhost:3000/og.jpg'
-      : 'https://nextjs-with-xata.vercel.app/og.jpg',
-}
+    process.env.NODE_ENV === "development"
+      ? "http://localhost:3000/og.jpg"
+      : "https://nextjs-with-xata.vercel.app/og.jpg",
+};
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
@@ -58,5 +58,5 @@ export default function App({ Component, pageProps }: AppProps) {
       </Head>
       <Component {...pageProps} />
     </>
-  )
+  );
 }
diff --git a/examples/with-xata/pages/api/clean-xata.ts b/examples/with-xata/pages/api/clean-xata.ts
index a5836cbe2c..ffab2b7a6a 100644
--- a/examples/with-xata/pages/api/clean-xata.ts
+++ b/examples/with-xata/pages/api/clean-xata.ts
@@ -1,22 +1,22 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { getXataClient } from '../../utils/xata.codegen'
+import type { NextApiRequest, NextApiResponse } from "next";
+import { getXataClient } from "../../utils/xata.codegen";
 
-const xata = getXataClient()
+const xata = getXataClient();
 
 const deleteItem = async (id: string) => {
-  return await xata.db.nextjs_with_xata_example.delete(id)
-}
+  return await xata.db.nextjs_with_xata_example.delete(id);
+};
 
 export async function cleanDummyDataFromXata(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  const { id } = req.body
-  await deleteItem(id)
+  const { id } = req.body;
+  await deleteItem(id);
 
   res.json({
     ok: true,
-  })
+  });
 }
 
-export default cleanDummyDataFromXata
+export default cleanDummyDataFromXata;
diff --git a/examples/with-xata/pages/api/write-links-to-xata.ts b/examples/with-xata/pages/api/write-links-to-xata.ts
index a0b94d2667..e68c14120a 100644
--- a/examples/with-xata/pages/api/write-links-to-xata.ts
+++ b/examples/with-xata/pages/api/write-links-to-xata.ts
@@ -1,38 +1,38 @@
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { getXataClient } from '../../utils/xata.codegen'
+import type { NextApiRequest, NextApiResponse } from "next";
+import { getXataClient } from "../../utils/xata.codegen";
 
 const LINKS = [
   {
-    description: 'Everything you need to know about Xata APIs and tools.',
-    title: 'Xata Docs',
-    url: 'https://xata.io/docs',
+    description: "Everything you need to know about Xata APIs and tools.",
+    title: "Xata Docs",
+    url: "https://xata.io/docs",
   },
   {
-    description: 'In case you need to check some Next.js specifics.',
-    title: 'Next.js Docs',
-    url: 'https://nextjs.org/docs',
+    description: "In case you need to check some Next.js specifics.",
+    title: "Next.js Docs",
+    url: "https://nextjs.org/docs",
   },
   {
     description:
-      'Maintain your flow by managing your Xata Workspace without ever leaving VS Code.',
-    title: 'Xata VS Code Extension',
-    url: 'https://marketplace.visualstudio.com/items?itemName=xata.xata',
+      "Maintain your flow by managing your Xata Workspace without ever leaving VS Code.",
+    title: "Xata VS Code Extension",
+    url: "https://marketplace.visualstudio.com/items?itemName=xata.xata",
   },
   {
-    description: 'Get help. Offer help. Show us what you built!',
-    title: 'Xata Discord',
-    url: 'https://xata.io/discord',
+    description: "Get help. Offer help. Show us what you built!",
+    title: "Xata Discord",
+    url: "https://xata.io/discord",
   },
-]
+];
 
-const xata = getXataClient()
+const xata = getXataClient();
 
 export default async function writeLinksToXata(
   _req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
-  await xata.db.nextjs_with_xata_example.create(LINKS)
+  await xata.db.nextjs_with_xata_example.create(LINKS);
   res.json({
     ok: true,
-  })
+  });
 }
diff --git a/examples/with-xata/pages/index.tsx b/examples/with-xata/pages/index.tsx
index 6d1034416f..96403bb24b 100644
--- a/examples/with-xata/pages/index.tsx
+++ b/examples/with-xata/pages/index.tsx
@@ -1,29 +1,29 @@
-import type { InferGetServerSidePropsType } from 'next'
-import Image from 'next/image'
-import { getXataClient } from '../utils/xata.codegen'
-import xatafly from '../public/xatafly.gif'
+import type { InferGetServerSidePropsType } from "next";
+import Image from "next/image";
+import { getXataClient } from "../utils/xata.codegen";
+import xatafly from "../public/xatafly.gif";
 
 const pushDummyData = async () => {
-  const response = await fetch('/api/write-links-to-xata')
+  const response = await fetch("/api/write-links-to-xata");
 
   if (response.ok) {
-    window?.location.reload()
+    window?.location.reload();
   }
-}
+};
 
 const removeDummyItem = async (id: string) => {
-  const { status } = await fetch('/api/clean-xata', {
-    method: 'POST',
+  const { status } = await fetch("/api/clean-xata", {
+    method: "POST",
     headers: {
-      'Content-Type': 'application/json',
+      "Content-Type": "application/json",
     },
     body: JSON.stringify({ id }),
-  })
+  });
 
   if (status === 200) {
-    window?.location.reload()
+    window?.location.reload();
   }
-}
+};
 
 export default function IndexPage({
   links,
@@ -31,7 +31,7 @@ export default function IndexPage({
   return (
     <main>
       <header>
-        <Image src={xatafly} alt={'Xata'} priority />
+        <Image src={xatafly} alt={"Xata"} priority />
         <h1>
           Next.js with<span aria-hidden>&#8209;</span>xata
         </h1>
@@ -49,7 +49,7 @@ export default function IndexPage({
                 <button
                   type="button"
                   onClick={() => {
-                    removeDummyItem(id)
+                    removeDummyItem(id);
                   }}
                 >
                   <span role="img" aria-label="delete item">
@@ -69,7 +69,7 @@ export default function IndexPage({
             <button
               type="button"
               onClick={() => {
-                pushDummyData()
+                pushDummyData();
               }}
             >
               Push records to Xata
@@ -79,22 +79,22 @@ export default function IndexPage({
       </article>
       <footer>
         <span>
-          Made by{' '}
+          Made by{" "}
           <a href="https://xata.io" rel="noopener noreferrer" target="_blank">
             <object data="/xatafly.svg" />
           </a>
         </span>
       </footer>
     </main>
-  )
+  );
 }
 
 export const getServerSideProps = async () => {
-  const xata = await getXataClient()
-  const links = await xata.db.nextjs_with_xata_example.getAll()
+  const xata = await getXataClient();
+  const links = await xata.db.nextjs_with_xata_example.getAll();
   return {
     props: {
       links,
     },
-  }
-}
+  };
+};
diff --git a/examples/with-xata/styles/root.css b/examples/with-xata/styles/root.css
index 5cd035d333..049eadd771 100644
--- a/examples/with-xata/styles/root.css
+++ b/examples/with-xata/styles/root.css
@@ -1,7 +1,7 @@
 html {
-  --system-fonts: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol';
+  --system-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
   --xata-accent: rgb(255, 0, 117);
   --xata-accent-faded: rgba(255, 0, 117, 0.4);
   --transition-duration: 350ms;
@@ -14,7 +14,7 @@ body {
   margin: 0;
   min-height: 100vh;
   overflow-x: hidden;
-  font-family: 'Inter', var(--system-fonts);
+  font-family: "Inter", var(--system-fonts);
   color: var(--text-color);
   background-color: var(--background-color);
 }
@@ -46,8 +46,8 @@ a:focus {
   color: var(--xata-accent);
 }
 
-li a[target='_blank']::after {
-  content: '↗';
+li a[target="_blank"]::after {
+  content: "↗";
   position: relative;
   top: -1em;
   left: 0.5em;
diff --git a/examples/with-xata/utils/xata.codegen.ts b/examples/with-xata/utils/xata.codegen.ts
index 8a3f7529aa..28a816c342 100644
--- a/examples/with-xata/utils/xata.codegen.ts
+++ b/examples/with-xata/utils/xata.codegen.ts
@@ -3,39 +3,39 @@ import {
   buildClient,
   SchemaInference,
   XataRecord,
-} from '@xata.io/client'
+} from "@xata.io/client";
 
 const tables = [
   {
-    name: 'nextjs_with_xata_example',
+    name: "nextjs_with_xata_example",
     columns: [
-      { name: 'title', type: 'string' },
-      { name: 'description', type: 'string' },
-      { name: 'url', type: 'string' },
+      { name: "title", type: "string" },
+      { name: "description", type: "string" },
+      { name: "url", type: "string" },
     ],
   },
-] as const
+] as const;
 
-export type SchemaTables = typeof tables
-export type DatabaseSchema = SchemaInference<SchemaTables>
+export type SchemaTables = typeof tables;
+export type DatabaseSchema = SchemaInference<SchemaTables>;
 
-export type NextjsWithXataExample = DatabaseSchema['nextjs_with_xata_example']
-export type NextjsWithXataExampleRecord = NextjsWithXataExample & XataRecord
+export type NextjsWithXataExample = DatabaseSchema["nextjs_with_xata_example"];
+export type NextjsWithXataExampleRecord = NextjsWithXataExample & XataRecord;
 
-const DatabaseClient = buildClient()
+const DatabaseClient = buildClient();
 
-const defaultOptions = {}
+const defaultOptions = {};
 
 export class XataClient extends DatabaseClient<SchemaTables> {
   constructor(options?: BaseClientOptions) {
-    super({ ...defaultOptions, ...options }, tables)
+    super({ ...defaultOptions, ...options }, tables);
   }
 }
 
-let instance: XataClient | undefined = undefined
+let instance: XataClient | undefined = undefined;
 export const getXataClient = () => {
-  if (instance) return instance
+  if (instance) return instance;
 
-  instance = new XataClient()
-  return instance
-}
+  instance = new XataClient();
+  return instance;
+};
diff --git a/examples/with-xstate/README.md b/examples/with-xstate/README.md
index 67615627fc..73e59cb592 100644
--- a/examples/with-xstate/README.md
+++ b/examples/with-xstate/README.md
@@ -39,7 +39,7 @@ yarn add @xstate/inspect
 #### Import it at the top of the project
 
 ```js
-import { inspect } from '@xstate/inspect'
+import { inspect } from "@xstate/inspect";
 ```
 
 #### Use the inspect method
@@ -47,10 +47,10 @@ import { inspect } from '@xstate/inspect'
 Note that for Next.js projects, you should ensure that the inspector code only runs on the client, rather than the server:
 
 ```js
-if (typeof window !== 'undefined') {
+if (typeof window !== "undefined") {
   inspect({
     /* options */
-  })
+  });
 }
 ```
 
diff --git a/examples/with-xstate/components/Counter.tsx b/examples/with-xstate/components/Counter.tsx
index 35c747a48a..321a3ad18e 100644
--- a/examples/with-xstate/components/Counter.tsx
+++ b/examples/with-xstate/components/Counter.tsx
@@ -1,18 +1,18 @@
-import { useMachine } from '@xstate/react'
-import { counterMachine } from '../machines/counter'
+import { useMachine } from "@xstate/react";
+import { counterMachine } from "../machines/counter";
 
 export default function Counter({ counter = {} }) {
   const [current, send] = useMachine(counterMachine, {
     context: { count: 999 },
-  })
+  });
   return (
     <section>
       <h2>
         Count: <span>{current.context.count}</span>
       </h2>
-      <button onClick={() => send('DEC')}>-1</button>
-      <button onClick={() => send('INC')}>+1</button>
-      <button onClick={() => send('RESET')}>Reset</button>
+      <button onClick={() => send("DEC")}>-1</button>
+      <button onClick={() => send("INC")}>+1</button>
+      <button onClick={() => send("RESET")}>Reset</button>
     </section>
-  )
+  );
 }
diff --git a/examples/with-xstate/components/Toggle.tsx b/examples/with-xstate/components/Toggle.tsx
index 1680ef818c..0ae6911667 100644
--- a/examples/with-xstate/components/Toggle.tsx
+++ b/examples/with-xstate/components/Toggle.tsx
@@ -1,14 +1,14 @@
-import { useMachine } from '@xstate/react'
-import { toggleMachine } from '../machines/toggle'
+import { useMachine } from "@xstate/react";
+import { toggleMachine } from "../machines/toggle";
 
 export default function Toggle() {
-  const [current, send] = useMachine(toggleMachine)
+  const [current, send] = useMachine(toggleMachine);
   return (
     <div>
       <h2>
-        Toogle status: <span>{current.matches('active') ? 'On' : 'Off'}</span>
+        Toogle status: <span>{current.matches("active") ? "On" : "Off"}</span>
       </h2>
-      <button onClick={() => send('TOGGLE')}>Toggle</button>
+      <button onClick={() => send("TOGGLE")}>Toggle</button>
     </div>
-  )
+  );
 }
diff --git a/examples/with-xstate/machines/counter.ts b/examples/with-xstate/machines/counter.ts
index c95877fd45..d4a0394433 100644
--- a/examples/with-xstate/machines/counter.ts
+++ b/examples/with-xstate/machines/counter.ts
@@ -1,16 +1,16 @@
-import { createMachine, assign } from 'xstate'
+import { createMachine, assign } from "xstate";
 
 type CounterContext = {
-  count: number
-}
+  count: number;
+};
 
 type CounterEvents = {
-  type: 'INC' | 'DEC' | 'RESET'
-}
+  type: "INC" | "DEC" | "RESET";
+};
 
 export const counterMachine = createMachine<CounterContext, CounterEvents>({
   predictableActionArguments: true,
-  initial: 'active',
+  initial: "active",
   context: {
     count: 0,
   },
@@ -23,4 +23,4 @@ export const counterMachine = createMachine<CounterContext, CounterEvents>({
       },
     },
   },
-})
+});
diff --git a/examples/with-xstate/machines/toggle.ts b/examples/with-xstate/machines/toggle.ts
index 7a09482149..8b6d093a97 100644
--- a/examples/with-xstate/machines/toggle.ts
+++ b/examples/with-xstate/machines/toggle.ts
@@ -1,23 +1,23 @@
-import { createMachine } from 'xstate'
+import { createMachine } from "xstate";
 
 type ToggleContext = {
-  value: 'inactive' | 'active'
-}
+  value: "inactive" | "active";
+};
 
 type ToggleEvents = {
-  type: 'TOGGLE'
-}
+  type: "TOGGLE";
+};
 
 export const toggleMachine = createMachine<ToggleContext, ToggleEvents>({
   predictableActionArguments: true,
-  id: 'toggle',
-  initial: 'inactive',
+  id: "toggle",
+  initial: "inactive",
   states: {
     inactive: {
-      on: { TOGGLE: 'active' },
+      on: { TOGGLE: "active" },
     },
     active: {
-      on: { TOGGLE: 'inactive' },
+      on: { TOGGLE: "inactive" },
     },
   },
-})
+});
diff --git a/examples/with-xstate/pages/index.tsx b/examples/with-xstate/pages/index.tsx
index 85e911c40e..b2cd5a2da3 100644
--- a/examples/with-xstate/pages/index.tsx
+++ b/examples/with-xstate/pages/index.tsx
@@ -1,5 +1,5 @@
-import Counter from '../components/Counter'
-import Toggle from '../components/Toggle'
+import Counter from "../components/Counter";
+import Toggle from "../components/Toggle";
 
 export default function IndexPage() {
   return (
@@ -9,5 +9,5 @@ export default function IndexPage() {
       <hr />
       <Toggle />
     </>
-  )
+  );
 }
diff --git a/examples/with-yarn-workspaces/packages/bar/index.js b/examples/with-yarn-workspaces/packages/bar/index.js
index e4d442de10..578744dbb7 100644
--- a/examples/with-yarn-workspaces/packages/bar/index.js
+++ b/examples/with-yarn-workspaces/packages/bar/index.js
@@ -1,3 +1,3 @@
-const Bar = () => <strong>bar</strong>
+const Bar = () => <strong>bar</strong>;
 
-export default Bar
+export default Bar;
diff --git a/examples/with-yarn-workspaces/packages/foo/index.js b/examples/with-yarn-workspaces/packages/foo/index.js
index 3b8256e4e0..e7134e7006 100644
--- a/examples/with-yarn-workspaces/packages/foo/index.js
+++ b/examples/with-yarn-workspaces/packages/foo/index.js
@@ -1 +1 @@
-module.exports = 'foo'
+module.exports = "foo";
diff --git a/examples/with-yarn-workspaces/packages/web-app/next.config.js b/examples/with-yarn-workspaces/packages/web-app/next.config.js
index d359746cae..01db4fb113 100644
--- a/examples/with-yarn-workspaces/packages/web-app/next.config.js
+++ b/examples/with-yarn-workspaces/packages/web-app/next.config.js
@@ -1,5 +1,5 @@
 // Tell webpack to compile the "bar" package, necessary if you're using the export statement for example
 // https://www.npmjs.com/package/next-transpile-modules
-const withTM = require('next-transpile-modules')(['bar'])
+const withTM = require("next-transpile-modules")(["bar"]);
 
-module.exports = withTM()
+module.exports = withTM();
diff --git a/examples/with-yarn-workspaces/packages/web-app/pages/api/echo/[word].js b/examples/with-yarn-workspaces/packages/web-app/pages/api/echo/[word].js
index 69f90fd871..6966737153 100644
--- a/examples/with-yarn-workspaces/packages/web-app/pages/api/echo/[word].js
+++ b/examples/with-yarn-workspaces/packages/web-app/pages/api/echo/[word].js
@@ -1,3 +1,3 @@
 export default function handler(req, res) {
-  return res.send(req.query.word)
+  return res.send(req.query.word);
 }
diff --git a/examples/with-yarn-workspaces/packages/web-app/pages/index.js b/examples/with-yarn-workspaces/packages/web-app/pages/index.js
index 7c58ccbcd0..552693b608 100644
--- a/examples/with-yarn-workspaces/packages/web-app/pages/index.js
+++ b/examples/with-yarn-workspaces/packages/web-app/pages/index.js
@@ -1,5 +1,5 @@
-import foo from 'foo'
-import Bar from 'bar'
+import foo from "foo";
+import Bar from "bar";
 
 export default function Home() {
   return (
@@ -8,5 +8,5 @@ export default function Home() {
       <pre>{foo}</pre>
       <Bar />
     </div>
-  )
+  );
 }
diff --git a/examples/with-yoga/next.config.js b/examples/with-yoga/next.config.js
index a843cbee09..91ef62f0db 100644
--- a/examples/with-yoga/next.config.js
+++ b/examples/with-yoga/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-yoga/pages/_app.tsx b/examples/with-yoga/pages/_app.tsx
index 31ed42a132..abb210afd0 100644
--- a/examples/with-yoga/pages/_app.tsx
+++ b/examples/with-yoga/pages/_app.tsx
@@ -1,10 +1,10 @@
-import type { AppProps } from 'next/app'
-import { ThemeProvider } from '@gympass/yoga'
+import type { AppProps } from "next/app";
+import { ThemeProvider } from "@gympass/yoga";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider>
       <Component {...pageProps} />
     </ThemeProvider>
-  )
+  );
 }
diff --git a/examples/with-yoga/pages/index.tsx b/examples/with-yoga/pages/index.tsx
index 01cea81224..87d14b68c4 100644
--- a/examples/with-yoga/pages/index.tsx
+++ b/examples/with-yoga/pages/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Text, Button, Divider } from '@gympass/yoga'
+import { Box, Text, Button, Divider } from "@gympass/yoga";
 
 export default function Home() {
   return (
@@ -7,5 +7,5 @@ export default function Home() {
       <Divider />
       <Button>Yoga Design System</Button>
     </Box>
-  )
+  );
 }
diff --git a/examples/with-yoga/yoga.d.ts b/examples/with-yoga/yoga.d.ts
index c40f516664..0d8c17359f 100644
--- a/examples/with-yoga/yoga.d.ts
+++ b/examples/with-yoga/yoga.d.ts
@@ -1 +1 @@
-declare module '@gympass/yoga'
+declare module "@gympass/yoga";
diff --git a/examples/with-youtube-embed/app/layout.js b/examples/with-youtube-embed/app/layout.js
index 4ee00a2185..23ec8e7d9a 100644
--- a/examples/with-youtube-embed/app/layout.js
+++ b/examples/with-youtube-embed/app/layout.js
@@ -3,5 +3,5 @@ export default function RootLayout({ children }) {
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-youtube-embed/app/page.js b/examples/with-youtube-embed/app/page.js
index 76c95c7374..f500c862de 100644
--- a/examples/with-youtube-embed/app/page.js
+++ b/examples/with-youtube-embed/app/page.js
@@ -1,9 +1,9 @@
-import { YouTubeEmbed } from '@next/third-parties/google'
+import { YouTubeEmbed } from "@next/third-parties/google";
 
 export default function Page() {
   return (
     <div>
       <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
     </div>
-  )
+  );
 }
diff --git a/examples/with-zones/blog/next.config.js b/examples/with-zones/blog/next.config.js
index 040d0f4b38..dd8758b05b 100644
--- a/examples/with-zones/blog/next.config.js
+++ b/examples/with-zones/blog/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  basePath: '/blog',
-}
+  basePath: "/blog",
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-zones/blog/pages/index.tsx b/examples/with-zones/blog/pages/index.tsx
index a1701ccc2b..b6f8ffaa84 100644
--- a/examples/with-zones/blog/pages/index.tsx
+++ b/examples/with-zones/blog/pages/index.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function Blog() {
   return (
@@ -14,5 +14,5 @@ export default function Blog() {
       </ul>
       <Link href="/">Home</Link>
     </div>
-  )
+  );
 }
diff --git a/examples/with-zones/blog/pages/post/[id].tsx b/examples/with-zones/blog/pages/post/[id].tsx
index 39ccf844a8..63cd23cb16 100644
--- a/examples/with-zones/blog/pages/post/[id].tsx
+++ b/examples/with-zones/blog/pages/post/[id].tsx
@@ -1,8 +1,8 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
+import Link from "next/link";
+import { useRouter } from "next/router";
 
 export default function Post() {
-  const router = useRouter()
+  const router = useRouter();
 
   return (
     <div>
@@ -10,5 +10,5 @@ export default function Post() {
       <p>Lorem ipsum</p>
       <Link href="/">Back to blog</Link>
     </div>
-  )
+  );
 }
diff --git a/examples/with-zones/home/components/Header.tsx b/examples/with-zones/home/components/Header.tsx
index e1f9b5a81e..a78cb6e28b 100644
--- a/examples/with-zones/home/components/Header.tsx
+++ b/examples/with-zones/home/components/Header.tsx
@@ -3,5 +3,5 @@ export default function Header() {
     <div>
       <h2>The Company</h2>
     </div>
-  )
+  );
 }
diff --git a/examples/with-zones/home/next.config.js b/examples/with-zones/home/next.config.js
index e54732bb0e..df0398b609 100644
--- a/examples/with-zones/home/next.config.js
+++ b/examples/with-zones/home/next.config.js
@@ -1,23 +1,23 @@
-const { BLOG_URL } = process.env
+const { BLOG_URL } = process.env;
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   async rewrites() {
     return [
       {
-        source: '/:path*',
+        source: "/:path*",
         destination: `/:path*`,
       },
       {
-        source: '/blog',
+        source: "/blog",
         destination: `${BLOG_URL}/blog`,
       },
       {
-        source: '/blog/:path*',
+        source: "/blog/:path*",
         destination: `${BLOG_URL}/blog/:path*`,
       },
-    ]
+    ];
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/with-zones/home/pages/about.tsx b/examples/with-zones/home/pages/about.tsx
index 52733e5902..fb729ea6d2 100644
--- a/examples/with-zones/home/pages/about.tsx
+++ b/examples/with-zones/home/pages/about.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import Link from "next/link";
 
 export default function About() {
   return (
@@ -8,5 +8,5 @@ export default function About() {
         <Link href="/">Go Back</Link>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/with-zones/home/pages/index.tsx b/examples/with-zones/home/pages/index.tsx
index 8a8731a315..a91fb9fdcd 100644
--- a/examples/with-zones/home/pages/index.tsx
+++ b/examples/with-zones/home/pages/index.tsx
@@ -1,7 +1,7 @@
-import Link from 'next/link'
-import dynamic from 'next/dynamic'
+import Link from "next/link";
+import dynamic from "next/dynamic";
 
-const Header = dynamic(import('../components/Header'))
+const Header = dynamic(import("../components/Header"));
 
 export default function Home() {
   return (
@@ -15,5 +15,5 @@ export default function Home() {
         <Link href="/about">About us</Link>
       </div>
     </div>
-  )
+  );
 }
diff --git a/examples/with-zustand/src/app/layout.tsx b/examples/with-zustand/src/app/layout.tsx
index f24cd42b47..82b7065fa9 100644
--- a/examples/with-zustand/src/app/layout.tsx
+++ b/examples/with-zustand/src/app/layout.tsx
@@ -1,9 +1,9 @@
-import StoreProvider from '@/lib/storeProvider'
+import StoreProvider from "@/lib/storeProvider";
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html>
@@ -13,5 +13,5 @@ export default function RootLayout({
         </StoreProvider>
       </body>
     </html>
-  )
+  );
 }
diff --git a/examples/with-zustand/src/app/page.tsx b/examples/with-zustand/src/app/page.tsx
index 50558ff593..33f13a781c 100644
--- a/examples/with-zustand/src/app/page.tsx
+++ b/examples/with-zustand/src/app/page.tsx
@@ -1,5 +1,5 @@
-import Clock from '../components/clock'
-import Counter from '../components/counter'
+import Clock from "../components/clock";
+import Counter from "../components/counter";
 
 export default function Page() {
   return (
@@ -7,5 +7,5 @@ export default function Page() {
       <Clock />
       <Counter />
     </>
-  )
+  );
 }
diff --git a/examples/with-zustand/src/components/clock.tsx b/examples/with-zustand/src/components/clock.tsx
index a11ef0ad8a..6c73dcc062 100644
--- a/examples/with-zustand/src/components/clock.tsx
+++ b/examples/with-zustand/src/components/clock.tsx
@@ -1,38 +1,38 @@
-'use client'
+"use client";
 
-import useInterval from '../lib/useInterval'
-import { useStore } from '../lib/store'
-import { useShallow } from 'zustand/react/shallow'
-import './clock.css'
+import useInterval from "../lib/useInterval";
+import { useStore } from "../lib/store";
+import { useShallow } from "zustand/react/shallow";
+import "./clock.css";
 
 function useClock() {
   return useStore(
     useShallow((store) => ({
       lastUpdate: store.lastUpdate,
       light: store.light,
-    }))
-  )
+    })),
+  );
 }
 
 function formatTime(time: number) {
   // hh:mm:ss
-  return new Date(time).toJSON().slice(11, 19)
+  return new Date(time).toJSON().slice(11, 19);
 }
 
 function Clock() {
-  const { lastUpdate, light } = useClock()
+  const { lastUpdate, light } = useClock();
   // alternative way to fetch single piece of state:
-  const tick = useStore((store) => store.tick)
+  const tick = useStore((store) => store.tick);
 
   useInterval(() => {
-    tick(Date.now())
-  }, 1000)
+    tick(Date.now());
+  }, 1000);
 
   return (
-    <div className={`clock ${light ? 'light' : ''}`}>
+    <div className={`clock ${light ? "light" : ""}`}>
       {formatTime(lastUpdate)}
     </div>
-  )
+  );
 }
 
-export default Clock
+export default Clock;
diff --git a/examples/with-zustand/src/components/counter.tsx b/examples/with-zustand/src/components/counter.tsx
index ddadab20b0..850aaa03b9 100644
--- a/examples/with-zustand/src/components/counter.tsx
+++ b/examples/with-zustand/src/components/counter.tsx
@@ -1,7 +1,7 @@
-'use client'
+"use client";
 
-import { useStore } from '../lib/store'
-import { useShallow } from 'zustand/react/shallow'
+import { useStore } from "../lib/store";
+import { useShallow } from "zustand/react/shallow";
 
 function useCounter() {
   return useStore(
@@ -10,12 +10,12 @@ function useCounter() {
       increment: store.increment,
       decrement: store.decrement,
       reset: store.reset,
-    }))
-  )
+    })),
+  );
 }
 
 function Counter() {
-  const { count, increment, decrement, reset } = useCounter()
+  const { count, increment, decrement, reset } = useCounter();
   return (
     <div>
       <h1>
@@ -25,7 +25,7 @@ function Counter() {
       <button onClick={decrement}>-1</button>
       <button onClick={reset}>Reset</button>
     </div>
-  )
+  );
 }
 
-export default Counter
+export default Counter;
diff --git a/examples/with-zustand/src/lib/StoreProvider.tsx b/examples/with-zustand/src/lib/StoreProvider.tsx
index fee41d7a6c..40a12b59f9 100644
--- a/examples/with-zustand/src/lib/StoreProvider.tsx
+++ b/examples/with-zustand/src/lib/StoreProvider.tsx
@@ -1,21 +1,21 @@
-'use client'
+"use client";
 
-import { type PropsWithChildren, useRef } from 'react'
-import type { StoreInterface, StoreType } from './store'
-import { initializeStore, Provider } from './store'
+import { type PropsWithChildren, useRef } from "react";
+import type { StoreInterface, StoreType } from "./store";
+import { initializeStore, Provider } from "./store";
 
 export interface PreloadedStoreInterface
-  extends Pick<StoreInterface, 'lastUpdate'> {}
+  extends Pick<StoreInterface, "lastUpdate"> {}
 
 export default function StoreProvider({
   children,
   ...props
 }: PropsWithChildren<PreloadedStoreInterface>) {
-  const storeRef = useRef<StoreType>()
+  const storeRef = useRef<StoreType>();
 
   if (!storeRef.current) {
-    storeRef.current = initializeStore(props)
+    storeRef.current = initializeStore(props);
   }
 
-  return <Provider value={storeRef.current}>{children}</Provider>
+  return <Provider value={storeRef.current}>{children}</Provider>;
 }
diff --git a/examples/with-zustand/src/lib/store.ts b/examples/with-zustand/src/lib/store.ts
index 44370bd333..62cba6f1cc 100644
--- a/examples/with-zustand/src/lib/store.ts
+++ b/examples/with-zustand/src/lib/store.ts
@@ -1,15 +1,15 @@
-import { createContext, useContext } from 'react'
-import { createStore, useStore as useZustandStore } from 'zustand'
-import { PreloadedStoreInterface } from './storeProvider'
+import { createContext, useContext } from "react";
+import { createStore, useStore as useZustandStore } from "zustand";
+import { PreloadedStoreInterface } from "./storeProvider";
 
 export interface StoreInterface {
-  lastUpdate: number
-  light: boolean
-  count: number
-  tick: (lastUpdate: number) => void
-  increment: () => void
-  decrement: () => void
-  reset: () => void
+  lastUpdate: number;
+  light: boolean;
+  count: number;
+  tick: (lastUpdate: number) => void;
+  increment: () => void;
+  decrement: () => void;
+  reset: () => void;
 }
 
 function getDefaultInitialState() {
@@ -17,21 +17,21 @@ function getDefaultInitialState() {
     lastUpdate: new Date(1970, 1, 1).getTime(),
     light: false,
     count: 0,
-  } as const
+  } as const;
 }
 
-export type StoreType = ReturnType<typeof initializeStore>
+export type StoreType = ReturnType<typeof initializeStore>;
 
-const storeContext = createContext<StoreType | null>(null)
+const storeContext = createContext<StoreType | null>(null);
 
-export const Provider = storeContext.Provider
+export const Provider = storeContext.Provider;
 
 export function useStore<T>(selector: (state: StoreInterface) => T) {
-  const store = useContext(storeContext)
+  const store = useContext(storeContext);
 
-  if (!store) throw new Error('Store is missing the provider')
+  if (!store) throw new Error("Store is missing the provider");
 
-  return useZustandStore(store, selector)
+  return useZustandStore(store, selector);
 }
 
 export function initializeStore(preloadedState: PreloadedStoreInterface) {
@@ -55,5 +55,5 @@ export function initializeStore(preloadedState: PreloadedStoreInterface) {
       set({
         count: getDefaultInitialState().count,
       }),
-  }))
+  }));
 }
diff --git a/examples/with-zustand/src/lib/useInterval.ts b/examples/with-zustand/src/lib/useInterval.ts
index 5f087ee801..79bdebf89c 100644
--- a/examples/with-zustand/src/lib/useInterval.ts
+++ b/examples/with-zustand/src/lib/useInterval.ts
@@ -1,23 +1,23 @@
-'use client'
-import { useEffect, useRef } from 'react'
+"use client";
+import { useEffect, useRef } from "react";
 
 // https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 export default function useInterval(
   callback: () => void,
-  delay: number | undefined
+  delay: number | undefined,
 ) {
-  const savedCallback = useRef<typeof callback>()
+  const savedCallback = useRef<typeof callback>();
 
   useEffect(() => {
-    savedCallback.current = callback
-  }, [callback])
+    savedCallback.current = callback;
+  }, [callback]);
 
   useEffect(() => {
-    const handler = () => savedCallback.current?.()
+    const handler = () => savedCallback.current?.();
 
     if (delay !== null) {
-      const id = setInterval(handler, delay)
-      return () => clearInterval(id)
+      const id = setInterval(handler, delay);
+      return () => clearInterval(id);
     }
-  }, [delay])
+  }, [delay]);
 }
diff --git a/packages/create-next-app/templates/.prettierrc.json b/packages/create-next-app/templates/.prettierrc.json
new file mode 100644
index 0000000000..a7d8824a65
--- /dev/null
+++ b/packages/create-next-app/templates/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+  "trailingComma": "all",
+  "singleQuote": false,
+  "semi": true
+}
diff --git a/packages/create-next-app/templates/app-tw/js/app/layout.js b/packages/create-next-app/templates/app-tw/js/app/layout.js
index 821f712283..9aef1df7d6 100644
--- a/packages/create-next-app/templates/app-tw/js/app/layout.js
+++ b/packages/create-next-app/templates/app-tw/js/app/layout.js
@@ -1,17 +1,17 @@
-import { Inter } from 'next/font/google'
-import './globals.css'
+import { Inter } from "next/font/google";
+import "./globals.css";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/packages/create-next-app/templates/app-tw/js/app/page.js b/packages/create-next-app/templates/app-tw/js/app/page.js
index 838096b172..a7c2036839 100644
--- a/packages/create-next-app/templates/app-tw/js/app/page.js
+++ b/packages/create-next-app/templates/app-tw/js/app/page.js
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Home() {
   return (
@@ -15,7 +15,7 @@ export default function Home() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            By{' '}
+            By{" "}
             <Image
               src="/vercel.svg"
               alt="Vercel Logo"
@@ -47,7 +47,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
+            Docs{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -64,7 +64,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
+            Learn{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -81,7 +81,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
+            Templates{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -98,7 +98,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
+            Deploy{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -109,5 +109,5 @@ export default function Home() {
         </a>
       </div>
     </main>
-  )
+  );
 }
diff --git a/packages/create-next-app/templates/app-tw/js/next.config.mjs b/packages/create-next-app/templates/app-tw/js/next.config.mjs
index 1d6147825a..4678774e6d 100644
--- a/packages/create-next-app/templates/app-tw/js/next.config.mjs
+++ b/packages/create-next-app/templates/app-tw/js/next.config.mjs
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-export default nextConfig
+export default nextConfig;
diff --git a/packages/create-next-app/templates/app-tw/js/postcss.config.js b/packages/create-next-app/templates/app-tw/js/postcss.config.js
index 33ad091d26..12a703d900 100644
--- a/packages/create-next-app/templates/app-tw/js/postcss.config.js
+++ b/packages/create-next-app/templates/app-tw/js/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/packages/create-next-app/templates/app-tw/js/tailwind.config.js b/packages/create-next-app/templates/app-tw/js/tailwind.config.js
index 8c4d1b21f1..78ebc4e710 100644
--- a/packages/create-next-app/templates/app-tw/js/tailwind.config.js
+++ b/packages/create-next-app/templates/app-tw/js/tailwind.config.js
@@ -1,18 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/packages/create-next-app/templates/app-tw/ts/app/layout.tsx b/packages/create-next-app/templates/app-tw/ts/app/layout.tsx
index e894af81ce..3314e4780a 100644
--- a/packages/create-next-app/templates/app-tw/ts/app/layout.tsx
+++ b/packages/create-next-app/templates/app-tw/ts/app/layout.tsx
@@ -1,22 +1,22 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/packages/create-next-app/templates/app-tw/ts/app/page.tsx b/packages/create-next-app/templates/app-tw/ts/app/page.tsx
index f3d499469f..dc191aa8de 100644
--- a/packages/create-next-app/templates/app-tw/ts/app/page.tsx
+++ b/packages/create-next-app/templates/app-tw/ts/app/page.tsx
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from "next/image";
 
 export default function Home() {
   return (
@@ -15,7 +15,7 @@ export default function Home() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            By{' '}
+            By{" "}
             <Image
               src="/vercel.svg"
               alt="Vercel Logo"
@@ -47,7 +47,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
+            Docs{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -64,7 +64,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
+            Learn{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -81,7 +81,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
+            Templates{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -98,7 +98,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
+            Deploy{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -109,5 +109,5 @@ export default function Home() {
         </a>
       </div>
     </main>
-  )
+  );
 }
diff --git a/packages/create-next-app/templates/app-tw/ts/next.config.mjs b/packages/create-next-app/templates/app-tw/ts/next.config.mjs
index 1d6147825a..4678774e6d 100644
--- a/packages/create-next-app/templates/app-tw/ts/next.config.mjs
+++ b/packages/create-next-app/templates/app-tw/ts/next.config.mjs
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-export default nextConfig
+export default nextConfig;
diff --git a/packages/create-next-app/templates/app-tw/ts/postcss.config.js b/packages/create-next-app/templates/app-tw/ts/postcss.config.js
index 33ad091d26..12a703d900 100644
--- a/packages/create-next-app/templates/app-tw/ts/postcss.config.js
+++ b/packages/create-next-app/templates/app-tw/ts/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/packages/create-next-app/templates/app-tw/ts/tailwind.config.ts b/packages/create-next-app/templates/app-tw/ts/tailwind.config.ts
index c7ead80465..7e4bd91a03 100644
--- a/packages/create-next-app/templates/app-tw/ts/tailwind.config.ts
+++ b/packages/create-next-app/templates/app-tw/ts/tailwind.config.ts
@@ -1,20 +1,20 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from "tailwindcss";
 
 const config: Config = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
     },
   },
   plugins: [],
-}
-export default config
+};
+export default config;
diff --git a/packages/create-next-app/templates/app/js/app/globals.css b/packages/create-next-app/templates/app/js/app/globals.css
index d4f491e152..f4bd77c0cc 100644
--- a/packages/create-next-app/templates/app/js/app/globals.css
+++ b/packages/create-next-app/templates/app/js/app/globals.css
@@ -1,9 +1,9 @@
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
+    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
diff --git a/packages/create-next-app/templates/app/js/app/layout.js b/packages/create-next-app/templates/app/js/app/layout.js
index 821f712283..9aef1df7d6 100644
--- a/packages/create-next-app/templates/app/js/app/layout.js
+++ b/packages/create-next-app/templates/app/js/app/layout.js
@@ -1,17 +1,17 @@
-import { Inter } from 'next/font/google'
-import './globals.css'
+import { Inter } from "next/font/google";
+import "./globals.css";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/packages/create-next-app/templates/app/js/app/page.js b/packages/create-next-app/templates/app/js/app/page.js
index 5f905a8a32..6f7146072b 100644
--- a/packages/create-next-app/templates/app/js/app/page.js
+++ b/packages/create-next-app/templates/app/js/app/page.js
@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import styles from './page.module.css'
+import Image from "next/image";
+import styles from "./page.module.css";
 
 export default function Home() {
   return (
@@ -15,7 +15,7 @@ export default function Home() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            By{' '}
+            By{" "}
             <Image
               src="/vercel.svg"
               alt="Vercel Logo"
@@ -91,5 +91,5 @@ export default function Home() {
         </a>
       </div>
     </main>
-  )
+  );
 }
diff --git a/packages/create-next-app/templates/app/js/app/page.module.css b/packages/create-next-app/templates/app/js/app/page.module.css
index 45d99ea3c8..5c4b1e6a2c 100644
--- a/packages/create-next-app/templates/app/js/app/page.module.css
+++ b/packages/create-next-app/templates/app/js/app/page.module.css
@@ -98,7 +98,7 @@
 
 .center::before,
 .center::after {
-  content: '';
+  content: "";
   left: 50%;
   position: absolute;
   filter: blur(45px);
diff --git a/packages/create-next-app/templates/app/js/next.config.mjs b/packages/create-next-app/templates/app/js/next.config.mjs
index 1d6147825a..4678774e6d 100644
--- a/packages/create-next-app/templates/app/js/next.config.mjs
+++ b/packages/create-next-app/templates/app/js/next.config.mjs
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-export default nextConfig
+export default nextConfig;
diff --git a/packages/create-next-app/templates/app/ts/app/globals.css b/packages/create-next-app/templates/app/ts/app/globals.css
index d4f491e152..f4bd77c0cc 100644
--- a/packages/create-next-app/templates/app/ts/app/globals.css
+++ b/packages/create-next-app/templates/app/ts/app/globals.css
@@ -1,9 +1,9 @@
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
+    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
diff --git a/packages/create-next-app/templates/app/ts/app/layout.tsx b/packages/create-next-app/templates/app/ts/app/layout.tsx
index e894af81ce..3314e4780a 100644
--- a/packages/create-next-app/templates/app/ts/app/layout.tsx
+++ b/packages/create-next-app/templates/app/ts/app/layout.tsx
@@ -1,22 +1,22 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/packages/create-next-app/templates/app/ts/app/page.module.css b/packages/create-next-app/templates/app/ts/app/page.module.css
index 45d99ea3c8..5c4b1e6a2c 100644
--- a/packages/create-next-app/templates/app/ts/app/page.module.css
+++ b/packages/create-next-app/templates/app/ts/app/page.module.css
@@ -98,7 +98,7 @@
 
 .center::before,
 .center::after {
-  content: '';
+  content: "";
   left: 50%;
   position: absolute;
   filter: blur(45px);
diff --git a/packages/create-next-app/templates/app/ts/app/page.tsx b/packages/create-next-app/templates/app/ts/app/page.tsx
index 41d4d97c03..810709063d 100644
--- a/packages/create-next-app/templates/app/ts/app/page.tsx
+++ b/packages/create-next-app/templates/app/ts/app/page.tsx
@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import styles from './page.module.css'
+import Image from "next/image";
+import styles from "./page.module.css";
 
 export default function Home() {
   return (
@@ -15,7 +15,7 @@ export default function Home() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            By{' '}
+            By{" "}
             <Image
               src="/vercel.svg"
               alt="Vercel Logo"
@@ -91,5 +91,5 @@ export default function Home() {
         </a>
       </div>
     </main>
-  )
+  );
 }
diff --git a/packages/create-next-app/templates/app/ts/next.config.mjs b/packages/create-next-app/templates/app/ts/next.config.mjs
index 1d6147825a..4678774e6d 100644
--- a/packages/create-next-app/templates/app/ts/next.config.mjs
+++ b/packages/create-next-app/templates/app/ts/next.config.mjs
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-export default nextConfig
+export default nextConfig;
diff --git a/packages/create-next-app/templates/default-tw/js/next.config.mjs b/packages/create-next-app/templates/default-tw/js/next.config.mjs
index 94be31c3d5..d5456a15d4 100644
--- a/packages/create-next-app/templates/default-tw/js/next.config.mjs
+++ b/packages/create-next-app/templates/default-tw/js/next.config.mjs
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-export default nextConfig
+export default nextConfig;
diff --git a/packages/create-next-app/templates/default-tw/js/pages/_app.js b/packages/create-next-app/templates/default-tw/js/pages/_app.js
index 23002013d7..b97e52fc9a 100644
--- a/packages/create-next-app/templates/default-tw/js/pages/_app.js
+++ b/packages/create-next-app/templates/default-tw/js/pages/_app.js
@@ -1,5 +1,5 @@
-import '@/styles/globals.css'
+import "@/styles/globals.css";
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/packages/create-next-app/templates/default-tw/js/pages/_document.js b/packages/create-next-app/templates/default-tw/js/pages/_document.js
index 54e8bf3e2a..b2fff8b426 100644
--- a/packages/create-next-app/templates/default-tw/js/pages/_document.js
+++ b/packages/create-next-app/templates/default-tw/js/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/packages/create-next-app/templates/default-tw/js/pages/api/hello.js b/packages/create-next-app/templates/default-tw/js/pages/api/hello.js
index df63de88fa..aee21e9afa 100644
--- a/packages/create-next-app/templates/default-tw/js/pages/api/hello.js
+++ b/packages/create-next-app/templates/default-tw/js/pages/api/hello.js
@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: "John Doe" });
 }
diff --git a/packages/create-next-app/templates/default-tw/js/pages/index.js b/packages/create-next-app/templates/default-tw/js/pages/index.js
index a33b1c8c52..fa528e8e8e 100644
--- a/packages/create-next-app/templates/default-tw/js/pages/index.js
+++ b/packages/create-next-app/templates/default-tw/js/pages/index.js
@@ -1,7 +1,7 @@
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
+import Image from "next/image";
+import { Inter } from "next/font/google";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
   return (
@@ -20,7 +20,7 @@ export default function Home() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            By{' '}
+            By{" "}
             <Image
               src="/vercel.svg"
               alt="Vercel Logo"
@@ -52,7 +52,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
+            Docs{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -69,7 +69,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
+            Learn{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -86,7 +86,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
+            Templates{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -103,7 +103,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
+            Deploy{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -114,5 +114,5 @@ export default function Home() {
         </a>
       </div>
     </main>
-  )
+  );
 }
diff --git a/packages/create-next-app/templates/default-tw/js/postcss.config.js b/packages/create-next-app/templates/default-tw/js/postcss.config.js
index 33ad091d26..12a703d900 100644
--- a/packages/create-next-app/templates/default-tw/js/postcss.config.js
+++ b/packages/create-next-app/templates/default-tw/js/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/packages/create-next-app/templates/default-tw/js/tailwind.config.js b/packages/create-next-app/templates/default-tw/js/tailwind.config.js
index 8c4d1b21f1..78ebc4e710 100644
--- a/packages/create-next-app/templates/default-tw/js/tailwind.config.js
+++ b/packages/create-next-app/templates/default-tw/js/tailwind.config.js
@@ -1,18 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/packages/create-next-app/templates/default-tw/ts/next.config.mjs b/packages/create-next-app/templates/default-tw/ts/next.config.mjs
index 94be31c3d5..d5456a15d4 100644
--- a/packages/create-next-app/templates/default-tw/ts/next.config.mjs
+++ b/packages/create-next-app/templates/default-tw/ts/next.config.mjs
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-export default nextConfig
+export default nextConfig;
diff --git a/packages/create-next-app/templates/default-tw/ts/pages/_app.tsx b/packages/create-next-app/templates/default-tw/ts/pages/_app.tsx
index 021681f4dd..a7a790fba5 100644
--- a/packages/create-next-app/templates/default-tw/ts/pages/_app.tsx
+++ b/packages/create-next-app/templates/default-tw/ts/pages/_app.tsx
@@ -1,6 +1,6 @@
-import '@/styles/globals.css'
-import type { AppProps } from 'next/app'
+import "@/styles/globals.css";
+import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/packages/create-next-app/templates/default-tw/ts/pages/_document.tsx b/packages/create-next-app/templates/default-tw/ts/pages/_document.tsx
index 54e8bf3e2a..b2fff8b426 100644
--- a/packages/create-next-app/templates/default-tw/ts/pages/_document.tsx
+++ b/packages/create-next-app/templates/default-tw/ts/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/packages/create-next-app/templates/default-tw/ts/pages/api/hello.ts b/packages/create-next-app/templates/default-tw/ts/pages/api/hello.ts
index f8bcc7e5ca..ea77e8f35b 100644
--- a/packages/create-next-app/templates/default-tw/ts/pages/api/hello.ts
+++ b/packages/create-next-app/templates/default-tw/ts/pages/api/hello.ts
@@ -1,13 +1,13 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from "next";
 
 type Data = {
-  name: string
-}
+  name: string;
+};
 
 export default function handler(
   req: NextApiRequest,
-  res: NextApiResponse<Data>
+  res: NextApiResponse<Data>,
 ) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: "John Doe" });
 }
diff --git a/packages/create-next-app/templates/default-tw/ts/pages/index.tsx b/packages/create-next-app/templates/default-tw/ts/pages/index.tsx
index babaaf67e0..e5667d4021 100644
--- a/packages/create-next-app/templates/default-tw/ts/pages/index.tsx
+++ b/packages/create-next-app/templates/default-tw/ts/pages/index.tsx
@@ -1,7 +1,7 @@
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
+import Image from "next/image";
+import { Inter } from "next/font/google";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
   return (
@@ -20,7 +20,7 @@ export default function Home() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            By{' '}
+            By{" "}
             <Image
               src="/vercel.svg"
               alt="Vercel Logo"
@@ -52,7 +52,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
+            Docs{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -69,7 +69,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
+            Learn{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -86,7 +86,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
+            Templates{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -103,7 +103,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
+            Deploy{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -114,5 +114,5 @@ export default function Home() {
         </a>
       </div>
     </main>
-  )
+  );
 }
diff --git a/packages/create-next-app/templates/default-tw/ts/postcss.config.js b/packages/create-next-app/templates/default-tw/ts/postcss.config.js
index 33ad091d26..12a703d900 100644
--- a/packages/create-next-app/templates/default-tw/ts/postcss.config.js
+++ b/packages/create-next-app/templates/default-tw/ts/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/packages/create-next-app/templates/default-tw/ts/tailwind.config.ts b/packages/create-next-app/templates/default-tw/ts/tailwind.config.ts
index c7ead80465..7e4bd91a03 100644
--- a/packages/create-next-app/templates/default-tw/ts/tailwind.config.ts
+++ b/packages/create-next-app/templates/default-tw/ts/tailwind.config.ts
@@ -1,20 +1,20 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from "tailwindcss";
 
 const config: Config = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
     },
   },
   plugins: [],
-}
-export default config
+};
+export default config;
diff --git a/packages/create-next-app/templates/default/js/next.config.mjs b/packages/create-next-app/templates/default/js/next.config.mjs
index 94be31c3d5..d5456a15d4 100644
--- a/packages/create-next-app/templates/default/js/next.config.mjs
+++ b/packages/create-next-app/templates/default/js/next.config.mjs
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-export default nextConfig
+export default nextConfig;
diff --git a/packages/create-next-app/templates/default/js/pages/_app.js b/packages/create-next-app/templates/default/js/pages/_app.js
index 23002013d7..b97e52fc9a 100644
--- a/packages/create-next-app/templates/default/js/pages/_app.js
+++ b/packages/create-next-app/templates/default/js/pages/_app.js
@@ -1,5 +1,5 @@
-import '@/styles/globals.css'
+import "@/styles/globals.css";
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/packages/create-next-app/templates/default/js/pages/_document.js b/packages/create-next-app/templates/default/js/pages/_document.js
index 54e8bf3e2a..b2fff8b426 100644
--- a/packages/create-next-app/templates/default/js/pages/_document.js
+++ b/packages/create-next-app/templates/default/js/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/packages/create-next-app/templates/default/js/pages/api/hello.js b/packages/create-next-app/templates/default/js/pages/api/hello.js
index df63de88fa..aee21e9afa 100644
--- a/packages/create-next-app/templates/default/js/pages/api/hello.js
+++ b/packages/create-next-app/templates/default/js/pages/api/hello.js
@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: "John Doe" });
 }
diff --git a/packages/create-next-app/templates/default/js/pages/index.js b/packages/create-next-app/templates/default/js/pages/index.js
index b76a1de0a0..e49f72cce9 100644
--- a/packages/create-next-app/templates/default/js/pages/index.js
+++ b/packages/create-next-app/templates/default/js/pages/index.js
@@ -1,9 +1,9 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
-import styles from '@/styles/Home.module.css'
+import Head from "next/head";
+import Image from "next/image";
+import { Inter } from "next/font/google";
+import styles from "@/styles/Home.module.css";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
   return (
@@ -26,7 +26,7 @@ export default function Home() {
               target="_blank"
               rel="noopener noreferrer"
             >
-              By{' '}
+              By{" "}
               <Image
                 src="/vercel.svg"
                 alt="Vercel Logo"
@@ -110,5 +110,5 @@ export default function Home() {
         </div>
       </main>
     </>
-  )
+  );
 }
diff --git a/packages/create-next-app/templates/default/js/styles/Home.module.css b/packages/create-next-app/templates/default/js/styles/Home.module.css
index 7b8e4f942f..827f96590b 100644
--- a/packages/create-next-app/templates/default/js/styles/Home.module.css
+++ b/packages/create-next-app/templates/default/js/styles/Home.module.css
@@ -97,7 +97,7 @@
 
 .center::before,
 .center::after {
-  content: '';
+  content: "";
   left: 50%;
   position: absolute;
   filter: blur(45px);
diff --git a/packages/create-next-app/templates/default/js/styles/globals.css b/packages/create-next-app/templates/default/js/styles/globals.css
index d4f491e152..f4bd77c0cc 100644
--- a/packages/create-next-app/templates/default/js/styles/globals.css
+++ b/packages/create-next-app/templates/default/js/styles/globals.css
@@ -1,9 +1,9 @@
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
+    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
diff --git a/packages/create-next-app/templates/default/ts/next.config.mjs b/packages/create-next-app/templates/default/ts/next.config.mjs
index 94be31c3d5..d5456a15d4 100644
--- a/packages/create-next-app/templates/default/ts/next.config.mjs
+++ b/packages/create-next-app/templates/default/ts/next.config.mjs
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-export default nextConfig
+export default nextConfig;
diff --git a/packages/create-next-app/templates/default/ts/pages/_app.tsx b/packages/create-next-app/templates/default/ts/pages/_app.tsx
index 021681f4dd..a7a790fba5 100644
--- a/packages/create-next-app/templates/default/ts/pages/_app.tsx
+++ b/packages/create-next-app/templates/default/ts/pages/_app.tsx
@@ -1,6 +1,6 @@
-import '@/styles/globals.css'
-import type { AppProps } from 'next/app'
+import "@/styles/globals.css";
+import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
diff --git a/packages/create-next-app/templates/default/ts/pages/_document.tsx b/packages/create-next-app/templates/default/ts/pages/_document.tsx
index 54e8bf3e2a..b2fff8b426 100644
--- a/packages/create-next-app/templates/default/ts/pages/_document.tsx
+++ b/packages/create-next-app/templates/default/ts/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/packages/create-next-app/templates/default/ts/pages/api/hello.ts b/packages/create-next-app/templates/default/ts/pages/api/hello.ts
index f8bcc7e5ca..ea77e8f35b 100644
--- a/packages/create-next-app/templates/default/ts/pages/api/hello.ts
+++ b/packages/create-next-app/templates/default/ts/pages/api/hello.ts
@@ -1,13 +1,13 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from "next";
 
 type Data = {
-  name: string
-}
+  name: string;
+};
 
 export default function handler(
   req: NextApiRequest,
-  res: NextApiResponse<Data>
+  res: NextApiResponse<Data>,
 ) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: "John Doe" });
 }
diff --git a/packages/create-next-app/templates/default/ts/pages/index.tsx b/packages/create-next-app/templates/default/ts/pages/index.tsx
index 02c4dee049..acabe9ca20 100644
--- a/packages/create-next-app/templates/default/ts/pages/index.tsx
+++ b/packages/create-next-app/templates/default/ts/pages/index.tsx
@@ -1,9 +1,9 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
-import styles from '@/styles/Home.module.css'
+import Head from "next/head";
+import Image from "next/image";
+import { Inter } from "next/font/google";
+import styles from "@/styles/Home.module.css";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
   return (
@@ -26,7 +26,7 @@ export default function Home() {
               target="_blank"
               rel="noopener noreferrer"
             >
-              By{' '}
+              By{" "}
               <Image
                 src="/vercel.svg"
                 alt="Vercel Logo"
@@ -110,5 +110,5 @@ export default function Home() {
         </div>
       </main>
     </>
-  )
+  );
 }
diff --git a/packages/create-next-app/templates/default/ts/styles/Home.module.css b/packages/create-next-app/templates/default/ts/styles/Home.module.css
index 6676d2c66b..eee920e64c 100644
--- a/packages/create-next-app/templates/default/ts/styles/Home.module.css
+++ b/packages/create-next-app/templates/default/ts/styles/Home.module.css
@@ -97,7 +97,7 @@
 
 .center::before,
 .center::after {
-  content: '';
+  content: "";
   left: 50%;
   position: absolute;
   filter: blur(45px);
diff --git a/packages/create-next-app/templates/default/ts/styles/globals.css b/packages/create-next-app/templates/default/ts/styles/globals.css
index d4f491e152..f4bd77c0cc 100644
--- a/packages/create-next-app/templates/default/ts/styles/globals.css
+++ b/packages/create-next-app/templates/default/ts/styles/globals.css
@@ -1,9 +1,9 @@
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
+    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
diff --git a/packages/create-next-app/templates/index.ts b/packages/create-next-app/templates/index.ts
index f484ecfd99..c4d7477413 100644
--- a/packages/create-next-app/templates/index.ts
+++ b/packages/create-next-app/templates/index.ts
@@ -1,15 +1,15 @@
-import { install } from '../helpers/install'
-import { copy } from '../helpers/copy'
+import { install } from "../helpers/install";
+import { copy } from "../helpers/copy";
 
-import { async as glob } from 'fast-glob'
-import os from 'os'
-import fs from 'fs/promises'
-import path from 'path'
-import { cyan, bold } from 'picocolors'
-import { Sema } from 'async-sema'
-import pkg from '../package.json'
+import { async as glob } from "fast-glob";
+import os from "os";
+import fs from "fs/promises";
+import path from "path";
+import { cyan, bold } from "picocolors";
+import { Sema } from "async-sema";
+import pkg from "../package.json";
 
-import { GetTemplateFileArgs, InstallTemplateArgs } from './types'
+import { GetTemplateFileArgs, InstallTemplateArgs } from "./types";
 
 /**
  * Get the file path for a given file in a template, e.g. "next.config.js".
@@ -19,10 +19,10 @@ export const getTemplateFile = ({
   mode,
   file,
 }: GetTemplateFileArgs): string => {
-  return path.join(__dirname, template, mode, file)
-}
+  return path.join(__dirname, template, mode, file);
+};
 
-export const SRC_DIR_NAMES = ['app', 'pages', 'styles']
+export const SRC_DIR_NAMES = ["app", "pages", "styles"];
 
 /**
  * Install a Next.js internal template to a given `root` directory.
@@ -39,211 +39,211 @@ export const installTemplate = async ({
   srcDir,
   importAlias,
 }: InstallTemplateArgs) => {
-  console.log(bold(`Using ${packageManager}.`))
+  console.log(bold(`Using ${packageManager}.`));
 
   /**
    * Copy the template files to the target directory.
    */
-  console.log('\nInitializing project with template:', template, '\n')
-  const templatePath = path.join(__dirname, template, mode)
-  const copySource = ['**']
-  if (!eslint) copySource.push('!eslintrc.json')
+  console.log("\nInitializing project with template:", template, "\n");
+  const templatePath = path.join(__dirname, template, mode);
+  const copySource = ["**"];
+  if (!eslint) copySource.push("!eslintrc.json");
   if (!tailwind)
     copySource.push(
-      mode == 'ts' ? 'tailwind.config.ts' : '!tailwind.config.js',
-      '!postcss.config.js'
-    )
+      mode == "ts" ? "tailwind.config.ts" : "!tailwind.config.js",
+      "!postcss.config.js",
+    );
 
   await copy(copySource, root, {
     parents: true,
     cwd: templatePath,
     rename(name) {
       switch (name) {
-        case 'gitignore':
-        case 'eslintrc.json': {
-          return `.${name}`
+        case "gitignore":
+        case "eslintrc.json": {
+          return `.${name}`;
         }
         // README.md is ignored by webpack-asset-relocator-loader used by ncc:
         // https://github.com/vercel/webpack-asset-relocator-loader/blob/e9308683d47ff507253e37c9bcbb99474603192b/src/asset-relocator.js#L227
-        case 'README-template.md': {
-          return 'README.md'
+        case "README-template.md": {
+          return "README.md";
         }
         default: {
-          return name
+          return name;
         }
       }
     },
-  })
+  });
 
   const tsconfigFile = path.join(
     root,
-    mode === 'js' ? 'jsconfig.json' : 'tsconfig.json'
-  )
+    mode === "js" ? "jsconfig.json" : "tsconfig.json",
+  );
   await fs.writeFile(
     tsconfigFile,
-    (await fs.readFile(tsconfigFile, 'utf8'))
+    (await fs.readFile(tsconfigFile, "utf8"))
       .replace(
         `"@/*": ["./*"]`,
-        srcDir ? `"@/*": ["./src/*"]` : `"@/*": ["./*"]`
+        srcDir ? `"@/*": ["./src/*"]` : `"@/*": ["./*"]`,
       )
-      .replace(`"@/*":`, `"${importAlias}":`)
-  )
+      .replace(`"@/*":`, `"${importAlias}":`),
+  );
 
   // update import alias in any files if not using the default
-  if (importAlias !== '@/*') {
-    const files = await glob('**/*', {
+  if (importAlias !== "@/*") {
+    const files = await glob("**/*", {
       cwd: root,
       dot: true,
       stats: false,
-    })
-    const writeSema = new Sema(8, { capacity: files.length })
+    });
+    const writeSema = new Sema(8, { capacity: files.length });
     await Promise.all(
       files.map(async (file) => {
         // We don't want to modify compiler options in [ts/js]config.json
-        if (file === 'tsconfig.json' || file === 'jsconfig.json') return
-        await writeSema.acquire()
-        const filePath = path.join(root, file)
+        if (file === "tsconfig.json" || file === "jsconfig.json") return;
+        await writeSema.acquire();
+        const filePath = path.join(root, file);
         if ((await fs.stat(filePath)).isFile()) {
           await fs.writeFile(
             filePath,
             (
-              await fs.readFile(filePath, 'utf8')
-            ).replace(`@/`, `${importAlias.replace(/\*/g, '')}`)
-          )
+              await fs.readFile(filePath, "utf8")
+            ).replace(`@/`, `${importAlias.replace(/\*/g, "")}`),
+          );
         }
-        await writeSema.release()
-      })
-    )
+        await writeSema.release();
+      }),
+    );
   }
 
   if (srcDir) {
-    await fs.mkdir(path.join(root, 'src'), { recursive: true })
+    await fs.mkdir(path.join(root, "src"), { recursive: true });
     await Promise.all(
       SRC_DIR_NAMES.map(async (file) => {
         await fs
-          .rename(path.join(root, file), path.join(root, 'src', file))
+          .rename(path.join(root, file), path.join(root, "src", file))
           .catch((err) => {
-            if (err.code !== 'ENOENT') {
-              throw err
+            if (err.code !== "ENOENT") {
+              throw err;
             }
-          })
-      })
-    )
+          });
+      }),
+    );
 
-    const isAppTemplate = template.startsWith('app')
+    const isAppTemplate = template.startsWith("app");
 
     // Change the `Get started by editing pages/index` / `app/page` to include `src`
     const indexPageFile = path.join(
-      'src',
-      isAppTemplate ? 'app' : 'pages',
-      `${isAppTemplate ? 'page' : 'index'}.${mode === 'ts' ? 'tsx' : 'js'}`
-    )
+      "src",
+      isAppTemplate ? "app" : "pages",
+      `${isAppTemplate ? "page" : "index"}.${mode === "ts" ? "tsx" : "js"}`,
+    );
 
     await fs.writeFile(
       indexPageFile,
       (
-        await fs.readFile(indexPageFile, 'utf8')
+        await fs.readFile(indexPageFile, "utf8")
       ).replace(
-        isAppTemplate ? 'app/page' : 'pages/index',
-        isAppTemplate ? 'src/app/page' : 'src/pages/index'
-      )
-    )
+        isAppTemplate ? "app/page" : "pages/index",
+        isAppTemplate ? "src/app/page" : "src/pages/index",
+      ),
+    );
 
     if (tailwind) {
       const tailwindConfigFile = path.join(
         root,
-        mode === 'ts' ? 'tailwind.config.ts' : 'tailwind.config.js'
-      )
+        mode === "ts" ? "tailwind.config.ts" : "tailwind.config.js",
+      );
       await fs.writeFile(
         tailwindConfigFile,
         (
-          await fs.readFile(tailwindConfigFile, 'utf8')
+          await fs.readFile(tailwindConfigFile, "utf8")
         ).replace(
           /\.\/(\w+)\/\*\*\/\*\.\{js,ts,jsx,tsx,mdx\}/g,
-          './src/$1/**/*.{js,ts,jsx,tsx,mdx}'
-        )
-      )
+          "./src/$1/**/*.{js,ts,jsx,tsx,mdx}",
+        ),
+      );
     }
   }
 
   /** Copy the version from package.json or override for tests. */
-  const version = process.env.NEXT_PRIVATE_TEST_VERSION ?? pkg.version
+  const version = process.env.NEXT_PRIVATE_TEST_VERSION ?? pkg.version;
 
   /** Create a package.json for the new project and write it to disk. */
   const packageJson: any = {
     name: appName,
-    version: '0.1.0',
+    version: "0.1.0",
     private: true,
     scripts: {
-      dev: 'next dev',
-      build: 'next build',
-      start: 'next start',
-      lint: 'next lint',
+      dev: "next dev",
+      build: "next build",
+      start: "next start",
+      lint: "next lint",
     },
     /**
      * Default dependencies.
      */
     dependencies: {
-      react: '^18',
-      'react-dom': '^18',
+      react: "^18",
+      "react-dom": "^18",
       next: version,
     },
     devDependencies: {},
-  }
+  };
 
   /**
    * TypeScript projects will have type definitions and other devDependencies.
    */
-  if (mode === 'ts') {
+  if (mode === "ts") {
     packageJson.devDependencies = {
       ...packageJson.devDependencies,
-      typescript: '^5',
-      '@types/node': '^20',
-      '@types/react': '^18',
-      '@types/react-dom': '^18',
-    }
+      typescript: "^5",
+      "@types/node": "^20",
+      "@types/react": "^18",
+      "@types/react-dom": "^18",
+    };
   }
 
   /* Add Tailwind CSS dependencies. */
   if (tailwind) {
     packageJson.devDependencies = {
       ...packageJson.devDependencies,
-      autoprefixer: '^10.0.1',
-      postcss: '^8',
-      tailwindcss: '^3.3.0',
-    }
+      autoprefixer: "^10.0.1",
+      postcss: "^8",
+      tailwindcss: "^3.3.0",
+    };
   }
 
   /* Default ESLint dependencies. */
   if (eslint) {
     packageJson.devDependencies = {
       ...packageJson.devDependencies,
-      eslint: '^8',
-      'eslint-config-next': version,
-    }
+      eslint: "^8",
+      "eslint-config-next": version,
+    };
   }
 
-  const devDeps = Object.keys(packageJson.devDependencies).length
-  if (!devDeps) delete packageJson.devDependencies
+  const devDeps = Object.keys(packageJson.devDependencies).length;
+  if (!devDeps) delete packageJson.devDependencies;
 
   await fs.writeFile(
-    path.join(root, 'package.json'),
-    JSON.stringify(packageJson, null, 2) + os.EOL
-  )
+    path.join(root, "package.json"),
+    JSON.stringify(packageJson, null, 2) + os.EOL,
+  );
 
-  console.log('\nInstalling dependencies:')
+  console.log("\nInstalling dependencies:");
   for (const dependency in packageJson.dependencies)
-    console.log(`- ${cyan(dependency)}`)
+    console.log(`- ${cyan(dependency)}`);
 
   if (devDeps) {
-    console.log('\nInstalling devDependencies:')
+    console.log("\nInstalling devDependencies:");
     for (const dependency in packageJson.devDependencies)
-      console.log(`- ${cyan(dependency)}`)
+      console.log(`- ${cyan(dependency)}`);
   }
 
-  console.log()
+  console.log();
 
-  await install(packageManager, isOnline)
-}
+  await install(packageManager, isOnline);
+};
 
-export * from './types'
+export * from "./types";
diff --git a/packages/create-next-app/templates/types.ts b/packages/create-next-app/templates/types.ts
index ae79d6f5a7..925d0737af 100644
--- a/packages/create-next-app/templates/types.ts
+++ b/packages/create-next-app/templates/types.ts
@@ -1,24 +1,24 @@
-import { PackageManager } from '../helpers/get-pkg-manager'
+import { PackageManager } from "../helpers/get-pkg-manager";
 
-export type TemplateType = 'default' | 'app' | 'default-tw' | 'app-tw'
-export type TemplateMode = 'js' | 'ts'
+export type TemplateType = "default" | "app" | "default-tw" | "app-tw";
+export type TemplateMode = "js" | "ts";
 
 export interface GetTemplateFileArgs {
-  template: TemplateType
-  mode: TemplateMode
-  file: string
+  template: TemplateType;
+  mode: TemplateMode;
+  file: string;
 }
 
 export interface InstallTemplateArgs {
-  appName: string
-  root: string
-  packageManager: PackageManager
-  isOnline: boolean
+  appName: string;
+  root: string;
+  packageManager: PackageManager;
+  isOnline: boolean;
 
-  template: TemplateType
-  mode: TemplateMode
-  eslint: boolean
-  tailwind: boolean
-  srcDir: boolean
-  importAlias: string
+  template: TemplateType;
+  mode: TemplateMode;
+  eslint: boolean;
+  tailwind: boolean;
+  srcDir: boolean;
+  importAlias: string;
 }