Add docs for static 404 and pages/404 (#10811)

* Add docs for static 404 and pages/404

* Remove new from docs

* Apply suggestions from code review

Co-Authored-By: Shu Uesugi <shu@chibicode.com>

* Rework using suggestions from review

* Apply suggestions from code review

Co-Authored-By: Shu Uesugi <shu@chibicode.com>

* Update custom-error-page.md

* Update custom-error-page.md

* Update custom-error-page.md

* Fix prettier

Co-authored-by: Shu Uesugi <shu@chibicode.com>
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>

docs/advanced-features/custom-error-page.md

@@ -2,9 +2,30 @@
 description: Override and extend the built-in Error page to handle custom errors.
 ---
 
-# Custom Error Page
+## 404 Page
 
-**404** or **500** errors are handled both client-side and server-side by the `Error` component. If you wish to override it, define the file `pages/_error.js` and add the following code:
+A 404 page may be accessed very often. Server-rendering an error page for every visit increases the load of the Next.js server. This can result in increased costs and slow experiences.
+
+To avoid the above pitfalls, Next.js provides a static 404 page by default without having to add any additional files.
+
+### Customizing The 404 Page
+
+To create a custom 404 page you can create a `pages/404.js` file. This file is statically generated at build time.
+
+```jsx
+// pages/404.js
+export default function Custom404() {
+  return <h1>404 - Page Not Found</h1>
+}
+```
+
+## 500 Page
+
+By default Next.js provides a 500 error page that matches the default 404 page’s style. This page is not statically optimized as it allows server-side errors to be reported. This is why 404 and 500 (other errors) are separated.
+
+### Customizing The Error Page
+
+500 errors are handled both client-side and server-side by the `Error` component. If you wish to override it, define the file `pages/_error.js` and add the following code:
 
 ```jsx
 function Error({ statusCode }) {
@@ -25,9 +46,9 @@ Error.getInitialProps = ({ res, err }) => {
 export default Error
 ```
 
-> `pages/_error.js` is only used in production. In development you'll get an error with the call stack to know where the error originated from.
+> `pages/_error.js` is only used in production. In development you’ll get an error with the call stack to know where the error originated from.
 
-## Reusing the built-in error page
+### Reusing the built-in error page
 
 If you want to render the built-in error page you can by importing the `Error` component: