June 1, 2023

Why Next.js 13.4 is Exciting: A Personal Perspective

If you're like me, using Next.js to hack a personal blog together on the weekend, you're going to love the latest update from Next.js - version 13.4!

A Little Background: The Page Router

Before we dive into the exciting new stuff, let's take a quick detour to understand how routing used to work in Next.js. Traditionally, Next.js used a system known as the "Page Router". In this system, every file inside the 'pages' directory automatically became a route. For instance, if you had a file named 'blog.js' inside your 'pages' directory, it would be accessible via the '/blog' route in your application.

// pages/blog.js

export default function Blog() {
  return <div>Welcome to my blog!</div>

This approach was simple and intuitive, but it had its limitations. The main constraint was that it forced a strictly "pages-only" directory structure, which could lead to a cluttered directory if you had other files you wanted to keep alongside your pages.

The Game Changer: The App Router

Now, let's get to the exciting part. Next.js 13.4 introduces a new feature called the App Router, which is a game changer for hobbyist developers like myself. The App Router allows us to have a single 'app' directory where we can organize our pages alongside any other related files. This concept is known as colocation and it allows for more efficient development.

// app/blog/page.tsx

export default function Blog() {
  return <div>Welcome to my tech blog!</div>

In the example above, the 'page.tsx' file inside the 'blog' directory would be accessible via the '/blog' route in your application. This approach allows you to keep all files related to a specific feature or page together in the same directory, improving the maintainability and navigation of your codebase.

Embracing a Feature-Driven Structure

The App Router encourages a feature-driven structure. A feature is a group of files that are related to each other and represent an area or topic of your project. For example, you might have features for your blog, a crypto tracker, and a script for automating some work tasks.

// app/crypto-tracker/page.tsx

export default function CryptoTracker() {
  return <div>Welcome to my crypto tracker!</div>

In the example above, the 'page.tsx' file inside the 'crypto-tracker' directory would be accessible via the '/crypto-tracker' route in your application. This approach allows you to keep all files related to the 'crypto-tracker' feature together in the same directory.

Why I'm Excited About the App Router

The App Router brings several benefits that make me excited:

  1. Colocation: I can keep related files together, which makes it easier to understand and navigate my codebase.
  2. Scalability: The feature-driven structure scales well as my projects grow.
  3. Flexibility: I have more freedom in how I structure my projects.
  4. Intuitiveness: The structure aligns with the way I think about features and functionality.

A Glimpse at My Project Structure

Here's a glimpse at how I might structure a project using the App Router:

// app structure
β”œβ”€β”€ components/
β”‚   β”œβ”€β”€ FancyButton/
β”‚   β”‚   └── FancyButton.tsx
β”œβ”€β”€ blog/
β”‚   β”œβ”€β”€ BlogPost/
β”‚   β”‚   └── BlogPost.tsx
β”‚   β”œβ”€β”€ page.tsx
β”‚   └── useBlogPosts.ts
β”œβ”€β”€ crypto-tracker/
β”‚   β”œβ”€β”€ CryptoChart/
β”‚   β”‚   └── CryptoChart.tsx
β”‚   β”œβ”€β”€ page.tsx
β”‚   └── useCryptoData.ts
β”œβ”€β”€ work-scripts/
β”‚   β”œβ”€β”€ EmailAutomation/
β”‚   β”‚   └── EmailAutomation.tsx
β”‚   β”œβ”€β”€ page.tsx
β”‚   └── useWorkScripts.ts
β”œβ”€β”€ hooks/
β”‚   └── useSomething.ts
└── utils/
    └── makeThings.ts

In this structure, we have global folders like 'components', 'hooks', and 'utils'. We also have feature folders like 'blog', 'crypto-tracker', and 'work-scripts'. Each feature folder contains all the relevant files for that feature, including components, hooks, and a 'page.tsx' file for the route.

Wrapping Up

The shift from the Page Router to the App Router in Next.js 13.4 is a significant development in the Next.js ecosystem. It provides developers with more flexibility and control over their project structure, making it easier to build and maintain large-scale applications. As a hobbyist, I find this update particularly exciting as it aligns with the way I think about features and functionality, making my development process more intuitive and efficient. So, if you're like me, hacking away on personal projects over the weekend, give Next.js 13.4 a try. I'm sure you'll find it as exciting as I do as I implement it for this blog! Happy coding!


← All writing