title: Next.js not able to pre-render error page
body: <p>I recently started to use Next.JS on a new project and it's working fine but I can't figure out how to keep my layout state active on client side when I throw a 404 error after clicking on a wrong link. </p>
  
  <p>Thanks to <a href="https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/" rel="nofollow noreferrer">Adam's Wathan article</a>, I'm able to share my state between different pages :</p>
  
  <p>On home page</p>
  
  <p><a href="https://i.stack.imgur.com/B5Moh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B5Moh.png" alt="enter image description here"></a></p>
  
  <p>On "about" page</p>
  
  <p><a href="https://i.stack.imgur.com/emB4P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/emB4P.png" alt="enter image description here"></a></p>
  
  <p>But if i click on "error", it will render the _error.tsx without preserving data i wrote in the input.
  <a href="https://i.stack.imgur.com/EEI8m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EEI8m.png" alt="enter image description here"></a></p>
  
  <p>This page seems to render the whole app tree on server side, despite the fact I provide the same layout. Is there anyway to prefetch this page, just like a regular one and avoid to lose some information without using a solution like Redux ? I'm note quite familiar with it and it seems a bit too much in this case.</p>
  
  <p>Here is my code:
  pages/_error.tsx</p>
  
  <pre><code>import { getLayout } from "../components/layout/mainLayout"
  import { withTranslation } from "../i18n";
  import { FlexDirectionProperty } from "csstype";
  
  const imgStyle = {
    maxWidth: "100%",
    maxHeight: "100%"
  };
  
  const figureStyle = {
    height: "80vh",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "column" as FlexDirectionProperty
  };
  
  const CustomError: any = ({ status, t }: any) =&gt; (
    &lt;&gt;
      &lt;figure style={figureStyle}&gt;
        &lt;figcaption&gt;
          &lt;h1&gt;Statut:{t('WELCOME')}&lt;/h1&gt;
        &lt;/figcaption&gt;
        &lt;img
          alt="Showing a properly cat according the status code"
          src={`https://http.cat/${status}`}
          style={imgStyle}
        /&gt;
      &lt;/figure&gt;
    &lt;/&gt;
  )
  
  CustomError.getLayout = getLayout;
  
  CustomError.getInitialProps = async ({ res, err }: any) =&gt; {
    const statusCode = res ? res.statusCode : err ? err.statusCode : null
  
    return {
      statusCode: statusCode,
      namespacesRequired: ["common"]
    }
  };
  
  export default withTranslation('common')(CustomError)
  </code></pre>
  
  <p>components/layout/header.tsx</p>
  
  <pre><code>import Link from "next/link";
  import Navbar from "react-bootstrap/Navbar";
  import Nav from "react-bootstrap/Nav";
  import Form from "react-bootstrap/Form";
  import Button from "react-bootstrap/Button";
  import { withTranslation, i18n } from "../../i18n";
  import { capitalize } from "../../helpers/utils";
  import Modal from "react-bootstrap/Modal";
  import { useState } from "react";
  
  const loadStamp = +new Date();
  
  const Header: any = ({ t }: any) =&gt; {
    const [show, setShow] = useState(false);
    const [active, setActive] = useState("home");
  
    return (
      &lt;&gt;
        &lt;Navbar fixed="top" bg="light"&gt;
          &lt;Nav className="mr-auto" activeKey={active}&gt;
            &lt;Nav.Item&gt;
              &lt;Link href="/"&gt;
                &lt;Navbar.Brand onClick={() =&gt; setActive("home")} href="/"&gt;Random Project&lt;/Navbar.Brand&gt;
              &lt;/Link&gt;
            &lt;/Nav.Item&gt;
            ...
          &lt;/Nav&gt;
        &lt;/Navbar&gt;
      &lt;/&gt;);
  };
  
  export default withTranslation("common")(Header);
  </code></pre>
  
  <p>components/layout/mainLayout.tsx</p>
  
  <pre><code>import Header from "./header";
  import "bootstrap/dist/css/bootstrap.min.css";
  import "../../public/stylesheets/style.scss";
  
  type LayoutProps = {
    title?: string;
    children: any;
  };
  
  const Layout: React.FunctionComponent&lt;LayoutProps&gt; = ({ children }) =&gt; (
    &lt;&gt;
      &lt;Header /&gt;
      &lt;main role="main" className="main"&gt;
        {children}
      &lt;/main&gt;
    &lt;/&gt;
  );
  
  export const getLayout: any = (page: any) =&gt; &lt;Layout&gt;{page}&lt;/Layout&gt;
  
  export default Layout
  </code></pre>
  
  <p>And my _app.tsx</p>
  
  <pre><code>import React from 'react'
  import App from 'next/app'
  import { appWithTranslation } from '../i18n'
  
  class MyApp extends App&lt;any&gt; {
  
      render() {
          const { Component, pageProps } = this.props
          const getLayout = Component.getLayout || ((page: any) =&gt; page)
  
          return (
              &lt;&gt;
                  {getLayout(
                      &lt;Component {...pageProps}&gt;&lt;/Component&gt;
                  )}
              &lt;/&gt;
          )
      }
  }
  
  export default appWithTranslation(MyApp)
  </code></pre>