Next.js HoC to render the Error page and send the correct HTTP status code from any page
npm install next-with-errornext-with-error
!Dependencies
Next.js plugin to render the Error page and send the correct HTTP status code from any page's getInitialProps.
This higher-order-components allows you to easily return Next.js's Error page + the correct HTTP status code just by defining error.statusCode in your pages getInitialProps:
``jsx
// pages/something.js
const SomePage = () => (
SomePage.getInitialProps = async () => {
const isAuthenticated = await getUser();
if (!isAuthenticated) {
return {
error: {
statusCode: 401
}
};
}
return {
// ...
};
};
`
Contents:
- Installation
- Usage
- [withError([ErrorPage])(App)](#witherrorerrorpageapp)generatePageError(statusCode[, additionalProps])
- [](#generatepageerrorstatuscode-additionalprops)
- Custom error page
- Custom props
- Automatic Static Optimization
`bash`
npm install next-with-error
Adapt pages/_app.js so it looks similar to what is described in the official Next.js documentation and add the withError HoC.
Example
`jsx
// _app.jsx
import withError from 'next-with-error';
class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
return
}
}
export default withError()(MyApp);
`
Then, in any of your pages, define error.statusCode if needed in your page's getInitialProps
`jsx
// pages/article.js
import React from 'react';
import fetchPost from '../util/fetch-post';
class ArticlePage extends React.Component {
static async getInitialProps() {
const article = await fetchPost();
if (!article) {
// No article found, let's display a "not found" page
// Will return a 404 status code + display the Error page
return {
error: {
statusCode: 404
}
};
}
// Otherwise, all good
return {
article
};
}
render() {
return (
export default HomePage;
`
If you find the code to write the error object is a bit verbose, feel free to use the generatePageError helper:
`jsx
import { generatePageError } from 'next-with-error';
// ...
SomePage.getInitialProps = async () => {
const isAuthenticated = await getUser();
if (!isAuthenticated) {
return generatePageError(401);
}
return {};
};
`
You can use the additionalProps argument to pass custom props to the Error component.
By default, withError will display the default Next.js error page. If you need to display your own error page, you will need to pass it as the first parameter of your HoC:
`jsx
import Error from './_error';
// ...
export default withError(ErrorPage)(MyApp);
`
Work to automate this is tracked here.
The error object properties are accessible via the props of your custom Error component (props.statusCode, props.message, etc if you have custom props).
⚠️ If your custom Error page has a getInitialProps method, the error object will be merged in getInitialProps's return value. Be careful to not have conflicting names.
You can also pass custom props to your Error Page component by adding anything you would like in the error object:
`jsx
// /pages/article.js
const HomePage = () => Hello there!
;
HomePage.getInitialProps = () => {
return {
error: {
statusCode: 401,
message: 'oopsie'
}
};
};
export default HomePage;
`
`jsx
// /pages/_error.js
import React from 'react';
const Error = (props) => {
return (
<>
{props.error.message}
export default Error;
`
⚠️ Be careful to add default values for your custom props in the Error component, as Next.js routing may bypass next-with-error's behavior by showing the 404 page without the message variable (in this example).
> You have opted-out of Automatic Static Optimization due to getInitialProps in pages/_app
This plugin, like most Higher-order-Component relying on extending the _app` file, will opt-you-out of the Automatic Static Optimization of Next.js. This is a known trade-off to avoid declaring this HoC on each one of your pages.
Things will probably change once Next.js support for plugins will ship.