Next.js, Authentication, project root

[Fred638]

Body

A few questions when implementing authentication with Next.js. Many tutorials refer to the root directory. This is sometimes not clear. So what is considered the root directory: Top-level project folder, src or app directory? And where are auth.ts, auth.config.ts and middleware.ts files placed in?

Any links to Next.js Authentication project structure best practices or tutorials greatly appreciated. Thanks!

Guidelines

• I have read and understood this category's guidelines before making this post.

[RamezCh]

Hello @Fred638,

The root directory is the one you initialize with npm init which is usually the parent folder of next.config.js and package.json.

project-root/
├── app/                     # App Router (pages, layouts, etc.)
│   ├── api/                 # API routes
│   │   └── auth/            # Authentication-related API endpoints
│   │       └── route.ts     # API route handler
│   ├── layout.tsx           # Root layout
│   ├── page.tsx             # Home page
│   └── protected/           # Protected routes
│       └── page.tsx         # Protected page
├── src/                     # Optional: Application source code
│   ├── lib/                 # Reusable logic
│   │   ├── auth.ts          # Authentication logic (e.g., login, logout)
│   │   └── auth.config.ts   # Authentication configuration (e.g., OAuth settings)
│   └── components/          # Reusable components
├── middleware.ts            # Middleware for route protection (e.g., redirect unauthenticated users)
├── next.config.js           # Next.js configuration (e.g., redirects, headers)
├── package.json             # Project dependencies and scripts
└── .env                     # Environment variables

There is no fixed structure it depends on the company you work at, some may follow ones like in tutorials, some might have their own.
This is link to official documentations and their structure https://nextjs.org/docs/app/getting-started/project-structure

[Fred638]

Thanks a lot! This outline makes things clearer.

[RamezCh]

No worries at all, @Fred638! Just a heads-up, feel free to close this discussion when you're no longer looking for answers or further responses.

[anav5704]

Hello Fred638.

In short, the root of your project is indeed the top-level project folder.

Here are some GitHub repositories you can reference:

• Simple Next.js + NextAuth.js project - This is a simple quotes app I had built a while back. Instead of having auth.ts in the root, I placed it in auth/index.ts just to keep things tidier.
• Complex Next.js + NextAuth.js project - This is the dub.co repository. They are using Turborepo as their monorepo so it might be a bit confusing to get around, but its a more real world example.

[rajkhatri398]

Root Directory
For Next.js 13+ (App Router), the root is typically:
/app (main route folder)
/src (if using src/ structure, /src/app becomes root)

Auth File Placement
auth.ts / auth.config.ts → /auth.ts (root) or /lib/auth.ts
middleware.ts → Root (/middleware.ts) to protect all routes.
Session/Callback Handlers → Inside /app/api/auth/[...nextauth] (if using NextAuth.js).

Middleware must be in root to intercept all routes.
Auth config can be in /lib or root for easy imports.
Use route.ts (App Router) instead of pages/api for API handlers.

[AymaneMehdi]

Great questions this confusion is super common when starting with authentication in Next.js, especially with newer versions using the /app directory!

📁 What is the "root directory"?

In most Next.js projects, the root directory is the top-level project folder (where package.json , next.config.js, and node_modules are located).
Not to be confused with the src/ or app/ folders — those are inside the root.

📂 Where to place common auth-related files?

• auth.ts / auth.config.ts

• Usually go in a folder like lib/ or utils/ at the root or in src/
• Example :

/lib/auth.ts
/lib/auth.config.ts

• middleware.ts

• Should always be in the root directory, alongside next.config.js.
• It must be at the root level so Next.js can detect and apply it automatically.
• Example :

/middleware.ts ✅
/src/middleware.ts ❌ (won’t work)

✅ Best Practices :

• Use a lib/ folder to organize reusable logic like auth.ts.
• Keep middleware at the root — it has special behavior and only works there.
• If you’re using Auth.js (formerly NextAuth) or Clerk/Supabase/Auth0, check their docs for specific structure, but the general principles above still apply.

🔗 Recommended Resources :

• Official Auth.js (NextAuth) Docs :
  https://authjs.dev/getting-started/

• Next.js Middleware Docs :
  https://nextjs.org/docs/app/building-your-application/routing/middleware

• Clerk + Next.js Auth Example (App Router) :
  https://clerk.com/docs/quickstarts/nextjs

[Fred638]

@AymaneMehdi Thanks for pointing out! This sorts out a lot of confusion.