We rebuilt one of our client projects three times before we got it right. The third attempt used Next.js, and here's why it worked. The drastic shift to using the app router and server components transformed our approach, reduced load times, and ultimately enhanced user experiences. I remember the initial skepticism from my team, but once we dove into this improved React framework, we witnessed first-hand the efficiency it could deliver.
Why This Matters (and Why I Care)
As a developer at Beyin Digital in Abu Dhabi, I’ve worked on a range of projects that required speed and efficiency. Next.js 15 brought both to the table. The app router offers a structured way to handle routing while server components allow for faster page loads by reducing client-side JavaScript. These aren’t just buzzwords; they’ve real implications that improved our product delivery. I genuinely believe that for anyone developing on top of the React framework in 2025 and beyond, mastering these features will be essential. This isn’t just about keeping up; it’s about leading and innovating, ensuring our projects stand out and perform even better.
The Basics You Actually Need
Before diving into advanced usage, it’s crucial to understand the core concepts of Next.js 15's app router and server components. The app router allows for nested routing and an organized file structure, while server components let you offload data fetching and rendering to the server.
Here’s an example showing how to set up the app router in a simple Next.js application using TypeScript:
// app/page.tsx
import React from 'react';
// Main component for the root page
const HomePage: React.FC = () => {
return <h1>Welcome to the Home Page!</h1>;
};
export default HomePage;
// app/about/page.tsx
import React from 'react';
// Component for the About page
const AboutPage: React.FC = () => {
return <h2>About Us</h2>;
};
export default AboutPage;
This structure allows for easily defined routes based on file locations. The `app` directory keeps everything organized.
How I Build With It (Step by Step)
Let’s take a deep dive into getting a minimal application up and running using Next.js 15, featuring both the app router and a server component for fetching data.
1. **Set Up Your Next.js Project**
Start by creating a new Next.js project using TypeScript.
```bash
npx create-next-app@latest my-next-app --typescript
cd my-next-app
```
2. **Implement the App Router**
In your `app` directory, create the following structure:
```
app/
├── page.tsx
├── about/
│ └── page.tsx
└── users/
└── page.tsx
```
With each `page.tsx` file functioning as a distinct route.
3. **Create a Server Component to Fetch Data**
Write a server component that fetches user data from an API.
```typescript
// app/users/page.tsx
import React from 'react';
// Fetching user data from an external API
async function fetchUsers() {
const res = await fetch('https://jsonplaceholder.typicode.com/users');
return res.json();
}
const UsersPage: React.FC = async () => {
const users = await fetchUsers();
return (
<div>
<h1>User List</h1>
<ul>
{users.map((user: { id: number; name: string }) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
};
export default UsersPage;
```
In the above structure, we’re making use of the server functions to fetch user data and render it right from the server.
4. **Run Your Application**
You can run your application using the next command:
```bash
npm run dev
```
Visit `http://localhost:3000` and navigate to `/users` to see your fetched user list.
By following these steps, you’ve established a foundational project using Next.js 15 featuring the app router and server components.
Mistakes I Made (So You Don't Have To)
1. **Overcomplicated Routing**
Early on, I created deeply nested structures in the app router that made my files hard to manage. Keeping routes flat and organized is much clearer and easier to follow.
2. **Neglecting Error Handling in Async Functions**
Initially, I didn’t wrap my data fetching in try-catch blocks. This led to unhandled promise rejections. Wrapping async functions in try-catch has saved me from many headaches.
3. **Ignoring Environment Variables**
I hard-coded sensitive information when making API calls. This scraped the project’s integrity. Always use environment variables to manage secrets, even in development!
4. **Not Utilizing Static Generation**
I missed the opportunity to use static generation for some high-profile pages at first. Using static generation can significantly improve performance. It's essential to know when to use it.
Advanced Tips From Production
1. **Dynamic Routing with Server Components**
Don’t miss out on dynamic routes. Next.js 15 allows for easy dynamic routes using the app router. Just create a directory structure with parameters and you’ll be amazed at how seamlessly it integrates.
```typescript
// app/users/[id]/page.tsx
import React from 'react';
const UserDetailPage: React.FC<{ params: { id: string } }> = async ({ params }) => {
const user = await fetchUser(params.id);
return <h2>{user.name}</h2>;
};
export default UserDetailPage;
```
2. **Utilize Middleware**
With Next.js 15, you can implement middleware for auth or data fetching needs. This can elevate user experience by handling redirects before rendering.
3. **Focus on SEO Optimization**
Next.js makes it easy to optimize SEO attributes. Utilize the `Head` component for meta tags and descriptions, which can help your app rank better in search results.
My Honest Take
Next.js 15 brings a fantastic suite of features that are not just incremental improvements but foundational changes for how we build React applications. The app router simplifies routing management, while server components let us deliver swift, seamless experiences. If you’re not working with Next.js 15 yet, you’re missing out on tools that can drastically improve your project performance and scalability.
With these insights, I hope you can skip the missteps I made and implement a solid Next.js 15 structure right from the start. Happy coding!
---
*Mohamed Qurashi | Full-Stack Developer at Beyin Digital | [https://qurashi.dev](https://qurashi.dev)*
---
**Further reading:**
**Related articles on this blog:**