diff --git a/.eslintrc.json b/.eslintrc.json
index 48265b1a66af938..cda24c1d8079ba3 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -69,7 +69,7 @@
           "warn",
           {
             "functions": false,
-            "classes": false,
+            "classes": true,
             "variables": true,
             "enums": true,
             "typedefs": true
diff --git a/packages/next/build/analysis/extract-const-value.ts b/packages/next/build/analysis/extract-const-value.ts
index e067b1c73eeb764..a08c9d40b9a961c 100644
--- a/packages/next/build/analysis/extract-const-value.ts
+++ b/packages/next/build/analysis/extract-const-value.ts
@@ -15,6 +15,8 @@ import type {
   VariableDeclaration,
 } from '@swc/core'
 
+export class NoSuchDeclarationError extends Error {}
+
 /**
  * Extracts the value of an exported const variable named `exportedName`
  * (e.g. "export const config = { runtime: 'experimental-edge' }") from swc's AST.
@@ -138,7 +140,6 @@ export class UnsupportedValueError extends Error {
     this.path = codePath
   }
 }
-export class NoSuchDeclarationError extends Error {}
 
 function extractValue(node: Node, path?: string[]): any {
   if (isNullLiteral(node)) {
diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
index fd44ba7a7b34040..9b50860283000c9 100644
--- a/packages/next/client/index.tsx
+++ b/packages/next/client/index.tsx
@@ -289,6 +289,18 @@ export async function initialize(opts: { webpackHMR?: any } = {}): Promise<{
   return { assetPrefix: prefix }
 }
 
+const wrapApp =
+  (App: AppComponent) =>
+  (wrappedAppProps: Record<string, any>): JSX.Element => {
+    const appProps: AppProps = {
+      ...wrappedAppProps,
+      Component: CachedComponent,
+      err: initialData.err,
+      router,
+    }
+    return <AppContainer>{renderApp(App, appProps)}</AppContainer>
+  }
+
 export async function hydrate(opts?: { beforeRender?: () => Promise<void> }) {
   let initialErr = initialData.err
 
@@ -396,18 +408,6 @@ export async function hydrate(opts?: { beforeRender?: () => Promise<void> }) {
     await window.__NEXT_PRELOADREADY(initialData.dynamicIds)
   }
 
-  const wrapApp =
-    (App: AppComponent) =>
-    (wrappedAppProps: Record<string, any>): JSX.Element => {
-      const appProps: AppProps = {
-        ...wrappedAppProps,
-        Component: CachedComponent,
-        err: initialData.err,
-        router,
-      }
-      return <AppContainer>{renderApp(App, appProps)}</AppContainer>
-    }
-
   router = createRouter(initialData.page, initialData.query, asPath, {
     initialProps: initialData.props,
     pageLoader,
diff --git a/packages/next/lib/is-serializable-props.ts b/packages/next/lib/is-serializable-props.ts
index e42407efc85f4fa..77a8025e7559f2b 100644
--- a/packages/next/lib/is-serializable-props.ts
+++ b/packages/next/lib/is-serializable-props.ts
@@ -5,6 +5,16 @@ import {
 
 const regexpPlainIdentifier = /^[A-Za-z_$][A-Za-z0-9_$]*$/
 
+export class SerializableError extends Error {
+  constructor(page: string, method: string, path: string, message: string) {
+    super(
+      path
+        ? `Error serializing \`${path}\` returned from \`${method}\` in "${page}".\nReason: ${message}`
+        : `Error serializing props returned from \`${method}\` in "${page}".\nReason: ${message}`
+    )
+  }
+}
+
 export function isSerializableProps(
   page: string,
   method: string,
@@ -131,13 +141,3 @@ export function isSerializableProps(
 
   return isSerializable(new Map(), input, '')
 }
-
-export class SerializableError extends Error {
-  constructor(page: string, method: string, path: string, message: string) {
-    super(
-      path
-        ? `Error serializing \`${path}\` returned from \`${method}\` in "${page}".\nReason: ${message}`
-        : `Error serializing props returned from \`${method}\` in "${page}".\nReason: ${message}`
-    )
-  }
-}
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index a5e24bed21dc8a1..bc51644d9325034 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -346,77 +346,6 @@ function getScripts(
   })
 }
 
-/**
- * `Document` component handles the initial `document` markup and renders only on the server side.
- * Commonly used for implementing server side rendering for `css-in-js` libraries.
- */
-export default class Document<P = {}> extends Component<DocumentProps & P> {
-  /**
-   * `getInitialProps` hook returns the context object with the addition of `renderPage`.
-   * `renderPage` callback executes `React` rendering logic synchronously to support server-rendering wrappers
-   */
-  static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
-    return ctx.defaultGetInitialProps(ctx)
-  }
-
-  render() {
-    return (
-      <Html>
-        <Head />
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    )
-  }
-}
-
-// Add a special property to the built-in `Document` component so later we can
-// identify if a user customized `Document` is used or not.
-const InternalFunctionDocument: DocumentType =
-  function InternalFunctionDocument() {
-    return (
-      <Html>
-        <Head />
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    )
-  }
-;(Document as any)[NEXT_BUILTIN_DOCUMENT] = InternalFunctionDocument
-
-export function Html(
-  props: React.DetailedHTMLProps<
-    React.HtmlHTMLAttributes<HTMLHtmlElement>,
-    HTMLHtmlElement
-  >
-) {
-  const {
-    inAmpMode,
-    docComponentsRendered,
-    locale,
-    scriptLoader,
-    __NEXT_DATA__,
-  } = useContext(HtmlContext)
-
-  docComponentsRendered.Html = true
-  handleDocumentScriptLoaderItems(scriptLoader, __NEXT_DATA__, props)
-
-  return (
-    <html
-      {...props}
-      lang={props.lang || locale || undefined}
-      amp={inAmpMode ? '' : undefined}
-      data-ampdevmode={
-        inAmpMode && process.env.NODE_ENV !== 'production' ? '' : undefined
-      }
-    />
-  )
-}
-
 function AmpStyles({
   styles,
 }: {
@@ -938,13 +867,6 @@ export class Head extends Component<HeadProps> {
   }
 }
 
-export function Main() {
-  const { docComponentsRendered } = useContext(HtmlContext)
-  docComponentsRendered.Main = true
-  // @ts-ignore
-  return <next-js-internal-body-render-target />
-}
-
 export class NextScript extends Component<OriginProps> {
   static contextType = HtmlContext
 
@@ -1106,6 +1028,84 @@ export class NextScript extends Component<OriginProps> {
   }
 }
 
+/**
+ * `Document` component handles the initial `document` markup and renders only on the server side.
+ * Commonly used for implementing server side rendering for `css-in-js` libraries.
+ */
+export default class Document<P = {}> extends Component<DocumentProps & P> {
+  /**
+   * `getInitialProps` hook returns the context object with the addition of `renderPage`.
+   * `renderPage` callback executes `React` rendering logic synchronously to support server-rendering wrappers
+   */
+  static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
+    return ctx.defaultGetInitialProps(ctx)
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+// Add a special property to the built-in `Document` component so later we can
+// identify if a user customized `Document` is used or not.
+const InternalFunctionDocument: DocumentType =
+  function InternalFunctionDocument() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+;(Document as any)[NEXT_BUILTIN_DOCUMENT] = InternalFunctionDocument
+
+export function Html(
+  props: React.DetailedHTMLProps<
+    React.HtmlHTMLAttributes<HTMLHtmlElement>,
+    HTMLHtmlElement
+  >
+) {
+  const {
+    inAmpMode,
+    docComponentsRendered,
+    locale,
+    scriptLoader,
+    __NEXT_DATA__,
+  } = useContext(HtmlContext)
+
+  docComponentsRendered.Html = true
+  handleDocumentScriptLoaderItems(scriptLoader, __NEXT_DATA__, props)
+
+  return (
+    <html
+      {...props}
+      lang={props.lang || locale || undefined}
+      amp={inAmpMode ? '' : undefined}
+      data-ampdevmode={
+        inAmpMode && process.env.NODE_ENV !== 'production' ? '' : undefined
+      }
+    />
+  )
+}
+
+export function Main() {
+  const { docComponentsRendered } = useContext(HtmlContext)
+  docComponentsRendered.Main = true
+  // @ts-ignore
+  return <next-js-internal-body-render-target />
+}
+
 function getAmpPath(ampPath: string, asPath: string): string {
   return ampPath || `${asPath}${asPath.includes('?') ? '&' : '?'}amp=1`
 }