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;

The template accepts a single prop, children, which can contain any additional elements or components that we may want to include within the page. The component includes a basic heading and renders the children prop directly below it.

We are going to take a closer look at the page.tsx file. This file imports and renders the Counter component, which contains all of the logic for our counter.

import Counter from "../components/Counter";

const CounterPage = () => {
    return <Counter />;
};

export default CounterPage;

The Counter component is implemented as a functional component that employs state hooks to manage the counter’s value. Additionally, it features buttons that enable incrementing and decrementing of the value. If the counter value becomes less than 0 or greater than 3, an exception is thrown.

"use client";

import { useEffect, useState } from "react";
import styles…