Next.js 13 and above introduces a new App Router system with support for layouts, nested routing, and server components.
File-Based Routing
Create routes by structuring folders in the app directory:
app/
page.js
about/
page.js
blog/
[slug]/
page.js
Layouts
Persistent UI elements like navbars or sidebars belong in layout.js.
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Navbar />
{children}
<Footer />
</body>
</html>
);
}
Loading UI
Use loading.js in each route folder to show skeleton UIs while the page loads.
Error Handling
Use error.js to gracefully catch rendering issues in route segments.
Metadata API
Next.js handles SEO with built-in metadata configuration:
export const metadata = {
title: 'Home | MySite',
description: 'Welcome to my site',
};
Server & Client Components
Everything is server-rendered by default. Add 'use client' to enable interactivity:
'use client';
export default function ToggleButton() {
const [on, setOn] = useState(false);
return <button onClick={() => setOn(!on)}>{on ? 'On' : 'Off'}</button>;
}
Wrap-Up
The App Router introduces a clean architecture for scalable apps. Embrace server components for performance and use layouts, loading, and error files to enhance UX.