Core File Conventions: page.tsx, layout.tsx, template.tsx & not-found.tsx0%
Dynamic Routes ([id]), Catch-All Routes ([...slug]) & Route Groups ((group))

Core File Conventions: page.tsx, layout.tsx, template.tsx & not-found.tsx

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Core File Conventions: page.tsx, layout.tsx, template.tsx & not-found.tsx

Next.js uses a special file system convention inside the app directory. Naming files with reserved conventions (page, layout, template, loading, error, not-found) automatically wires up routing, nested layouts, state persistence, and error boundaries.

1. The Core File Hierarchy

Output
app/
├── layout.tsx # Root Layout (wraps entire application: <html> & <body>)
├── page.tsx # Homepage (/)
├── not-found.tsx # Global 404 handler
├── courses/
│ ├── layout.tsx # Nested Layout for /courses/*
│ ├── loading.tsx # Loading skeleton for /courses/*
│ ├── page.tsx # Courses Catalog (/courses)
│ └── [slug]/
│ ├── page.tsx # Course Detail (/courses/:slug)
│ └── error.tsx# Local Error Boundary

2. layout.tsx: Nested & Persistent Layouts

A layout is UI that is shared between multiple routes. Layouts preserve state, remain interactive, and do not re-render when navigating between sibling routes!

TSX
// app/layout.tsx (Root Layout - Required)
import type { Metadata } from 'next';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import './globals.css';
 
export const metadata: Metadata = {
title: 'MSK Institute | Premier Tech Education',
description: 'Learn full-stack web development and data analytics.'
};
 
export default function RootLayout({
children
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className="bg-slate-50 text-slate-900 min-h-screen flex flex-col">
<Navbar />
<main className="flex-1">{children}</main>
<Footer />
</body>
</html>
);
}

3. template.tsx vs layout.tsx

While layout.tsx preserves state across navigation, template.tsx creates a brand-new instance for each child route on navigation:

  • DOM elements are recreated.
  • State is not preserved.
  • Effects (like useEffect) re-sync.
  • Ideal for: Page entrance/exit animations (Framer Motion) or logging per-page views.

4. not-found.tsx: Custom 404 Pages

Next.js renders not-found.tsx when an invalid URL is visited, or when the notFound() function is programmatically triggered:

TSX
// app/courses/[slug]/page.tsx
import { notFound } from 'next/navigation';
import { getCourseBySlug } from '@/lib/db';
 
export default async function CourseDetailPage({ params }: { params: Promise<{ slug: string }> }) {
const { slug } = await params;
const course = await getCourseBySlug(slug);
 
if (!course) {
notFound(); // Programmatically invokes closest not-found.tsx!
}
 
return <div><h1>{course.title}</h1></div>;
}
Interactive Quiz

Multiple Choice Questions

Question 1
Which file is strictly required in the root of the app/ directory and must contain the <html> and <body> tags?
Question 2
What is the fundamental behavioral difference between layout.tsx and template.tsx during client-side navigation?
Question 3
How do you programmatically trigger the not-found.tsx component when an entity does not exist in the database?
Question 4
What prop must every layout.tsx component accept and render?
Question 5
Can a sub-folder (e.g. app/dashboard/settings/) have its own nested layout.tsx?
Next Lesson

Dynamic Routes ([id]), Catch-All Routes ([...slug]) & Route Groups ((group))

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Next.js 15 Overview & App Router vs Pages Router ArchitectureDynamic Routes ([id]), Catch-All Routes ([...slug]) & Route Groups ((group))

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext