How to add the Forbidden page in NextJS 15?

A new experimental feature in NextJS 15.1.0.

Photo by Pankaj Patel on Unsplash

While I was checking Next.js documentation to refresh my knowledge and deep dive into some topics, I found that they introduced a new feature and I was very excited to start testing and see how it works I have been waiting for a a long time.

The feature is about introducing a new file convention called forbidden.tsx.

This file is used to render UI when the forbidden function is invoked from the component — during the authentication —

To start using this feature, we have first to enable the experimental authInterrupts option in next.config.js configuration file:

Add authInterrupts option

Now, let’s create a page called Portal and we allow only the admins to access it:

The portal page

As you see in the code above, we invoked a function called forbidden() to prevent non-admin users from accessing this page.

By doing this, Next.js will render the forbidden page:

The forbidden page

Now, when we try to access the portal page, we will see the forbidden page:

Next.js renders forbidden page instead of portal