Getting Started with Next.js 13+ App Directory
A comprehensive guide to building modern web applications with Next.js 13's new app directory structure, server components, and routing.
Getting Started with Next.js 13+ App Directory
Next.js 13 introduced a revolutionary new way to build React applications with the app directory structure. This new paradigm brings server components, improved routing, and better performance out of the box.
What's New in the App Directory?
The app directory represents a fundamental shift in how we structure Next.js applications:
1. Server Components by Default
// This is a server component by default
export default function HomePage() {
return (
<div>
<h1>Welcome to my portfolio</h1>
<p>This renders on the server!</p>
</div>
);
}
Server components provide several benefits:
- Reduced bundle size
- Better SEO
- Faster initial page loads
- Direct database access
2. New File-based Routing
The new routing system uses special file names:
page.tsx- Defines a routelayout.tsx- Shared UI for route segmentsloading.tsx- Loading UIerror.tsx- Error UInot-found.tsx- 404 UI
3. Layouts and Templates
Layouts are perfect for shared navigation and styling:
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<Navigation />
<main>{children}</main>
<Footer />
</body>
</html>
);
}
Setting Up Your First App Directory Project
Let's walk through creating a new Next.js 13+ project:
Step 1: Create the Project
npx create-next-app@latest my-portfolio --typescript --tailwind --app
cd my-portfolio
Step 2: Project Structure
Your project should look like this:
app/
├── layout.tsx
├── page.tsx
├── globals.css
├── about/
│ └── page.tsx
└── blog/
├── page.tsx
└── [slug]/
└── page.tsx
Step 3: Creating Your First Pages
Create a simple about page:
// app/about/page.tsx
export default function AboutPage() {
return (
<div>
<h1>About Me</h1>
<p>I'm a software engineer passionate about modern web development.</p>
</div>
);
}
Advanced Features
Dynamic Routes
Create dynamic blog posts:
// app/blog/[slug]/page.tsx
interface Props {
params: { slug: string };
}
export default function BlogPost({ params }: Props) {
return (
<article>
<h1>Blog Post: {params.slug}</h1>
</article>
);
}
Loading and Error States
// app/blog/loading.tsx
export default function Loading() {
return <div>Loading blog posts...</div>;
}
// app/blog/error.tsx
'use client';
export default function Error({
error,
reset,
}: {
error: Error;
reset: () => void;
}) {
return (
<div>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</div>
);
}
Best Practices
1. Use Server Components When Possible
Only use client components when you need:
- Event listeners
- Browser APIs
- State management
- Effects
2. Optimize Images
import Image from 'next/image';
export default function Hero() {
return (
<Image
src="/hero.jpg"
alt="Hero image"
width={1200}
height={600}
priority
/>
);
}
3. Implement Proper SEO
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }: Props) {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
images: [post.coverImage],
},
};
}
Conclusion
The Next.js 13+ app directory provides a powerful foundation for building modern React applications. With server components, improved routing, and built-in optimization features, it's easier than ever to create fast, SEO-friendly web applications.
Start experimenting with these features in your next project, and you'll quickly see the benefits of this new architecture.
Resources
Tags
Related Posts
Getting Started with Next.js 13: App Router Deep Dive
React Performance Optimization: Advanced Techniques
