What is the default folder structure in a Next.js 13+ (App Router) project?
The default folder structure centers around an 'app' directory with file-based routing, where folders define routes and special files define the UI behavior
Next.js 13 introduced the App Router as a new approach to building applications, built on React Server Components. The App Router uses a file-system based router where the structure of folders and files inside the 'app' directory directly defines your application's routes and behavior. This convention-over-configuration approach eliminates the need for manual route setup and provides built-in support for layouts, loading states, error handling, and more .
- 1
layout.tsx: Defines shared UI that wraps around page content. The root layout (app/layout.tsx) is required and must contain <html> and <body> tags. Layouts are not re-rendered during navigation, making them efficient for persistent elements like headers and footers .
- 2
page.tsx: Represents the unique UI for a route. Every route segment that should be publicly accessible must contain a page.tsx file. These are Server Components by default.
- 3
loading.tsx: Creates a loading UI (automatically wrapped in a Suspense boundary) that displays while the page content is loading. This improves perceived performance by showing immediate feedback .
- 4
error.tsx: Defines a custom error UI that catches errors in the route segment. Must be a Client Component (use 'use client') and receives 'error' and 'reset' props .
- 5
not-found.tsx: Displays a custom 404 page when a route is not found or when the notFound() function is called .
- 6
route.ts: Creates custom API endpoints (replacing pages/api in the Pages Router). Allows handling different HTTP methods (GET, POST, etc.) .
- 7
template.tsx: Similar to layout.tsx but creates a new instance on each navigation, useful for animations or state that should reset between routes .
- 8
global-error.tsx: A fallback error UI that wraps the entire application. Only used in production and must include its own <html> and <body> tags .
Route groups, created by wrapping folder names in parentheses like (marketing), allow you to organize routes logically without affecting the URL structure. This is particularly useful for separating sections like marketing pages, authentication flows, or admin areas while maintaining clean URLs like /about and /login instead of /marketing/about or /auth/login . Additionally, you can use private folders by prefixing folder names with an underscore (e.g., _components) to indicate they are for internal organization and should not be treated as routes .
Dynamic routes are created using square brackets in folder names, such as [slug] or [id]. This captures URL parameters that can be accessed in your page component via the params prop. For catch-all routes, you can use [...slug] to match multiple path segments, or [[...slug]] for optional catch-all routes. These patterns enable flexible content structures like blog posts, product pages, or any parameterized content .
- 1
public/: Stores static assets like images, fonts, and files that need to be publicly accessible. Files here are served at the root URL (e.g., /images/logo.png) .
- 2
src/: An optional directory for source code. If used, the app directory should be placed inside src/app/ .
- 3
middleware.ts: Located at the project root, this file allows you to run code before requests complete, useful for authentication, redirects, and rewriting URLs .
- 4
api/: A convention for API routes within the app directory, with route.ts files handling server-side logic for endpoints like /api/hello .
Scenario Questions
0-2 years experience
- 1You need a new page at `/dashboard` in a fresh Next.js 13 project using the App Router. Where do you create the file and what do you name it?
- 2After adding `about/page.tsx` you still get a 404 for `/about`. What folder might be missing or misnamed?
- 3If you want a header that appears on every page, which file would you add and where would it live?
2-5 years experience
- 1Your team wants a nested route `/products/[id]/reviews`. Describe the folder hierarchy you would create under `app` and any special files needed for loading states.
- 2During a review you see a `layout.tsx` placed inside `app/api`. Why could that cause unexpected behavior, and how would you correct it?
- 3Static images referenced in a component inside `app` aren't loading from `public`. What folder‑structure issue might be causing this?
5-8 years experience
- 1We are building a large e‑commerce site with multiple teams owning different sections. How would you organize the `app` directory to enable independent deployment, shared layouts, and avoid route collisions?
- 2A performance regression appeared after adding `app/profile/settings/page.tsx`. Explain how the default hierarchy could affect server‑side rendering and what refactoring you might consider.
- 3Discuss the trade‑offs of placing shared UI components inside `app/components` versus a top‑level `components` folder in a monorepo.
8+ years experience
- 1Our organization is migrating from the legacy `pages` router to the App Router across many micro‑frontends. What strategy would you propose for restructuring the folder layout to minimize disruption and keep consistency?
- 2How would you define a company‑wide convention for the `app` directory that balances flexibility for feature teams with enforceable standards for SEO, accessibility, and testing?
- 3When integrating a third‑party CMS that generates dynamic routes, how does the default Next.js 13 folder structure need to adapt, and what edge cases should we anticipate?
Follow-up Questions
- How would you add a global layout that wraps every page?
- What happens if you place a `page.tsx` directly under `app` without a subfolder?
- Can you explain how the `loading.tsx` file fits into this structure?