Error handling in Next 13

Next 13 Error Handling

As a web developer, you’re constantly on the lookout for ways to simplify your work, and if you’re not yet familiar with Next.js 13, it’s about time you got acquainted with it. This version of Next.js has been available for a few months now and comes loaded with some fantastic features that have the potential to revolutionize your web development. However, it’s important to note that it’s currently in beta and should not be used in production. That said, you can still experiment with it and try out some of its new features, such as the error.(js|jsx|ts|tsx) file, which allows you to create an Error Boundary for each specific page. But be aware that to use Next.js 13’s new features, you must utilize the new app directory.

I’ve created two new folders called counter and components inside the app directory. Let’s take a closer look at the contents of these folders.

The template file, template.tsx, will serve as the foundation for the counter page. Let’s dive in and take a closer look at the contents of our file.

import { FC } from "react";

interface CounterTemplateProps {
    children: React.ReactNode | React.ReactNode[];
}

const CounterTemplate: FC<CounterTemplateProps> = ({ children }) => {
    return (
        <div>
            <h1>Counter</h1>

            {children}
        </div>
    );
};

export default CounterTemplate;