Create a custom 500 error page for my Next.js website?

To add a custom layout and styling for your 500 page, you'll need to create a /pages/_error.js file:

cd pages && touch _error.js

In development mode, a stack error will be shown that tells you what the error is.

In the production environment, the contents of the /pages/_error.js file will be shown.

Some example code for that page could look like this:

export default class extends Component {
  render () {
    return (
      <div style={{padding: "15px"}}>
        <span>An error occurred.</span>
      </div>
    )
  }
}

You can add whatever message, styling, etc. to the page you'd like.