Why Next.js 13 Still Matters in 2026

You might think a framework from 2022 would be outdated by 2026, but Next.js 13 introduced the App Router, which has become the standard for new Next.js projects. The core concepts—server components, file-based routing, and simplified data fetching—are still the foundation of every modern Next.js application. If you're starting a new project today, the App Router is the default choice, and understanding it is non-negotiable.

In 2026, Next.js has evolved, but the fundamentals remain. The App Router's approach to mixing server and client components gives you the performance of static sites with the interactivity of a full React app. For a founder building a SaaS MVP, this means faster page loads, better SEO, and less time spent on configuration. I've seen many teams cut their initial build time by 30-40% just by using the App Router's conventions instead of wrestling with a custom setup.

If you're coming from the old Pages Router, the mental model shift is real. But it's worth it. Let me show you how to get started with a practical example: a simple leaderboard app (think Truist's internal leaderboard) that fetches and displays user scores. This will cover the essentials without getting bogged down in theory.

Setting Up Your First Next.js 13 Project with TypeScript

To create a new Next.js 13 project with TypeScript, run:

npx create-next-app@latest my-leaderboard --typescript --app

The --app flag ensures you get the App Router structure. The --typescript flag sets up TypeScript out of the box. In 2026, TypeScript is the default recommendation for any serious project—it catches errors before they hit production, and the tooling is better than ever.

Once the command finishes, navigate into the project and start the dev server:

cd my-leaderboard
npm run dev

You'll see a basic page at http://localhost:3000. Before we modify anything, let's look at the folder structure. You'll notice an app directory instead of pages. This is the heart of the App Router. Inside, you'll find layout.tsx and page.tsx. The layout wraps all pages, and the page defines the content for the root route.

For a beginner, this setup is refreshingly simple. You don't need to configure Babel or Webpack manually—Next.js handles it. The focus is on your code, not the build tooling.

Understanding the App Router: File-Based Routing Explained

File-based routing means the file system determines your URLs. In the App Router, every folder with a page.tsx file becomes a route. For example:

• app/page.tsx → /
• app/about/page.tsx → /about
• app/leaderboard/page.tsx → /leaderboard

For dynamic routes, you use square brackets. If you want a route for each user, create app/users/[id]/page.tsx—then /users/123 will render that page with id as a parameter.

In our leaderboard example, we'll create a simple static route at /leaderboard. But let's also add a dynamic route for individual user profiles later. The key insight is that the file structure is your site map. This makes it incredibly easy to reason about your app's navigation, especially when you're scaling from a few pages to dozens.

If you're still using the Pages Router, I'd recommend reading our guide on comparing App Router and Pages Router to understand the trade-offs before you commit.

Building Your First Page: Server Components vs. Client Components

Open app/page.tsx and replace the default content with a simple heading:

export default function Home() { return 
Welcome to the Leaderboard
;
}

By default, every component in the App Router is a Server Component. This means it runs on the server and sends only the rendered HTML to the client. For static content, this is perfect—it's fast and SEO-friendly.

But sometimes you need interactivity—like a button that updates a score. That's where Client Components come in. To make a component a client component, add 'use client' at the top of the file. For example:

'use client';
import { useState } from 'react'; export default function ScoreButton() { const [score, setScore] = useState(0); return (  setScore(score + 1)}> Score: {score}  );
}

The rule of thumb: use server components by default, and only add 'use client' when you need browser APIs or state. This keeps your bundle small and your pages fast. In our leaderboard, the list of scores can be a server component, while the button to add a score is a client component.

Fetching Data in Next.js 13: Server-Side and Static Generation

Data fetching is where the App Router shines. You can fetch data directly inside a server component using async functions. For example, to fetch scores from an API:

async function getScores() { const res = await fetch('https://api.example.com/scores'); return res.json();
} export default async function Leaderboard() { const scores = await getScores(); return ( 
 {scores.map(score =>
{score.user}: {score.points}
)} 
 );
}

By default, fetch in a server component uses static generation (SSG)—the data is fetched at build time and cached. This is great for pages that don't change often. If you need fresh data on every request, you can set the cache option:

const res = await fetch('https://api.example.com/scores', { cache: 'no-store' });

This gives you server-side rendering (SSR) on demand. For a leaderboard that updates frequently, you might want a hybrid: use revalidate to set a time-based cache:

const res = await fetch('https://api.example.com/scores', { next: { revalidate: 60 } });

This re-fetches the data at most every 60 seconds. It's a sweet spot for many use cases.

In 2026, you also have access to React's use hook for streaming data, but the async server component pattern is still the simplest way to get started.

Styling Your Next.js App: CSS Modules and Tailwind CSS

Next.js supports CSS Modules out of the box. Create a file like leaderboard.module.css and import it:

import styles from './leaderboard.module.css'; export default function Leaderboard() { return 
...
;
}

CSS Modules scope your styles locally, so you don't have to worry about class name collisions. It's a solid choice for component-level styling.

If you prefer a utility-first approach, Tailwind CSS is a great option. To set it up, install it and create a tailwind.config.js. In 2026, the setup is even simpler—just run npm install -D tailwindcss postcss autoprefixer and npx tailwindcss init -p. Then use classes directly in your JSX:

...

Both approaches work well. For a quick MVP, Tailwind lets you iterate faster without writing custom CSS files. For a polished product with a design system, CSS Modules might be cleaner. The choice is yours—Next.js supports both without extra configuration.

Deploying Your Next.js App to Vercel in 2026

Vercel is the company behind Next.js, so deployment is seamless. Push your code to a GitHub repository, then import it into Vercel. The platform automatically detects Next.js, installs dependencies, and builds your app. In 2026, Vercel's edge network is even faster, and you get preview deployments for every pull request—critical for team collaboration.

To deploy manually, you can also use the Vercel CLI:

npm i -g vercel
vercel

The CLI walks you through the setup and gives you a live URL in seconds. For production, you'll want to connect your domain and set up environment variables for any API keys.

One thing I always tell founders: don't overthink deployment. Vercel's free tier is enough for a small MVP. You can scale later. The key is to get your app live so you can start getting feedback.

Next Steps: Advanced Patterns and Where to Go from Here

You've built a basic leaderboard with Next.js 13 and TypeScript. Now you're ready to explore more advanced patterns:

• Middleware for authentication and redirects.
• Route Handlers (API routes) to create your own backend endpoints.
• Server Actions to mutate data without writing a separate API.
• Streaming and Suspense for progressive rendering.

When you're ready to build a full product, consider how these patterns fit into a SaaS MVP. If you need help, we offer SaaS MVP development services—our team has built dozens of Next.js applications for startups, and we know the pitfalls to avoid.

The App Router is a big shift, but it's worth mastering. With TypeScript and the patterns I've shown, you'll be building fast, scalable web apps in no time. Start with a small project, experiment, and don't be afraid to break things. That's how you learn.