Skip to content

Next.Js App Router Private Route

Usage of Next.Js Private router will make the page render on the client side only, it eliminates the server-side rendering for the page. This is done purposefully to make sure no hydration error occurs.


To use Private Route with Next.Js, you need to install the next plugin for react auth kit.

To install and save in your package.json dependencies, run:

Install With NPM
npm install --save @auth-kit/next
Install With Yarn
yarn add @auth-kit/next
Install With PNPM
pnpm install --save @auth-kit/next


To make a page private, react-auth-kit included a component NextAuth. By simply wrapping the page.jsx or layout.jsx into the NextAuth will make the page secure from unauthorized access. It works seamlessly on any number of pages.

Provide the fallbackPath prop in the NextAuth while using the component. If the user is not authorized, the page will be redirected to the fallback path.

// Implement in the layout.jsx
import NextAuth from '@auth-kit/next/NextAuth';

export default function Layout({
}: {
    children: React.ReactNode
}) {
    return <NextAuth fallbackPath={'/login'}>{children}</NextAuth>
// Implement in the page.jsx
import NextAuth from '@auth-kit/next/NextAuth';

export default function Page() {
    return (
        <NextAuth fallbackPath={'/login'}>



— 🔑 —

React Auth Kit is Apache 2.0 License code