Everything You Should Know About Next.js App Router – My Experience
Based on personal experience
Next.js is a powerful React framework that blends the best of both server-side and client-side rendering, making it an ideal choice for building fast, SEO-friendly, and scalable web applications. Whether you’re building a content-heavy blog, an e-commerce site, or a SaaS platform, the App Router in Next.js offers a modern and flexible approach to routing, layouts, and server interactions. With features like React Server Components, Server Actions, and nested routing, it gives developers full-stack capabilities while staying inside the familiar React ecosystem.
In this article, I share my personal experience using the Next.js App Router – what it does well, where it stumbles, and how to avoid common pitfalls. If you’re wondering whether Next.js is right for your next project, or just want to get better at using it, this guide covers everything from performance tips to deployment challenges.
Next.js is a powerful and flexible React framework that enables you to build high-performance web applications. One of the defining features in NextJs is the Server-Side Rendering (SSR). This makes NextJs great for performance and SEO. It’s versatile, supporting both static and highly interactive applications. Some might say it’s the Swiss knife of web frameworks.
The popularity of the frameworks comes from its flexibility, great developer experience, strong react eco-system, great documentation and also effective marketing.
When Should You Use NextJs
Consider a SaaS project: a fast, SEO-optimized landing page, a dynamic blog using MDX or Payload CMS, and an interactive app core utilizing client side rendering.
You can build pretty much anything from: e-commerce stores, corporate websites, dashboards, content heavy websites like a blog and news sites, documentation websites and everything in between.
At its heart, NextJs it’s React, but rendered on the server with a few powerful features.
Features
Some of my favorite features include:
- Client and Server Rendering
- The choice to fetch data on the Server and Client
- Server Actions
- React Server Components
- Opinionated Routing and Nested Layouts
- Ability to build API Endpoints
- Dynamic HTML Streaming
- Build in Image, Font and Script Optimizations (which are nice to have)
Ecosystem’s Honorable Mentions
What sets NextJs apart for me is the eco system. Note that some of the tools and libraries that I will mention here are not specific to NextJs. You can use them with other ReactJs frameworks and libraries.
- ReactUI Libraries – HeroUI, ShadCN
- Content Management – PayLoad CMS, WordPress and Markdown MDX JS
- Authentication: AuthJs, Better Auth (I haven’t used it yet)
- Emails: Resend, AWS SES
- Database Library: Prisma & Drizzle
- Databases: Firebase, MongoDB, PlantetScale, Convex, AWS Aurora and Upstash.
- AI Tools: Windsurf, Cursor, Github Copilot.
- Vibe Coders: v0, Lovable, Bolt, Cloude Code and Firebase Studio
Hosting
When it comes down to hosting you have many affordable options. We could split them into three categories: Server, Serverless and Static, but I won’t go into detail, which one is which and why one is better than other.
Some options include:
- Vercel
- Self Hosting on VPS (there are many methods of doing this like using Docker)
- Digital Ocean App Platform
- Fly.io
- Amplify
- Render
- Railway
- Netlify
- Zeabur
- GitHub Pages (SSG)
- FlightControl
- Cloudflare
and there is much more options out there…
I personally use a VPS to host all of my projects. It’s cheap, fast and I have the flexibility to do whatever I like.
Resources
When it comes to resources, my go-to is the official documentation and any AI tools like Gemini, ChatGPT and Claude. The official documentation is very well written and it gets updated regularly, but like anything, it takes time to get used to. Also of course, YouTube is a great resource to learn everything that you need to know.
Most AI tools are now up to date now, which makes development with NextJs even easier.
And lastly, If you are in a lookout for a pre-made templates, check out the Vercel free library.
NextJs Misconceptions
Is NextJs Full-Stack
This is a tough one to answer. For many small-to-medium applications and teams, yes – absolutely. Next.js lets you build your UI and handle server-side logic all in one place. You get Server-Side Rendering (SSR) to generate pages on the fly, API routes that act as your custom backend endpoints, and Server Actions that let you run server-side code directly from your components. A good way to describe it might be: a front-end framework with superpowers.
For beginners and solo developers, it’s a friendly way to dive into full-stack development without the hassle of managing multiple projects. You can confidently say that Next.js offers full-stack capabilities straight out of the box.
Just keep in mind – every superhero has their limits. For large, complex systems or heavy backend tasks, you might still need a dedicated backend or extra tooling. But for what it’s designed to do, Next.js is an excellent middle ground – powerful, flexible, and perfect for building modern web apps quickly and efficiently.
NextJs is slow
I think the misconception comes mostly from the local development speed, build speed and not understanding how to properly use NextJs especially the router which is an issue. It’s very easy to get make mistakes as a beginner that can lead to your app feeling slow.
Let’s start with the dev mode:
It’s a fact that Turbopack isn’t as fast as Vite in development mode. This can make people new to Next.js think their website is slow, but that’s not the case. Local development speed doesn’t equal the final build. To see the real speed, you need to run “npm run build" and then “npm run start". The difference is pretty substantial. Also, it’s not really fair to compare Vite and Turbopack directly because Turbopack has to do a lot more work. Just to be clear, I’m not an expert on built tools.
Hosting is Hard
I see “hosting is hard” a lot on Reddit and X and there is a lot of truth to this.
In general, hosting on a NodeJs server is as hard as any other framework. You can put your project in a docker container or run it with pm2 and it will run. Some people assume that you have serverless magically appear when you use NextJs which is not the case.
Problem here comes from hosting on a serverless platform or in other platforms rather than Vercel in general. When you start looking at Serverless platforms, you’ll see that all of them have different implementations which makes deploying NextJs hard. You have to re-adjust your app, install extra adapters, change the way your code works, deal with more errors and so on. It can be a painful process.
You might ask, why extra adapters?
A key limitation of Next.js is its distinct build output format. As I understand it, complicates efforts to easily support deployment across a other hosting platforms. Instead, the engineers of other hosting providers are forced to reverse-engineer and translate Next.js’s build output to their own systems. This creates extra work and potential instability for these providers and it makes it harder for us, developers to host as we have to do extra work.
Netlify has a good read on this if you are interested: Netlify NextJs Story.
A few months ago, there was a security problem with the mindware, and reading from X, my understanding was that bad communication and different implementations led to a bit of a problem when it came to patching the security vulnerability.
And just to finalise my point, some of the other frameworks out there use Nitro Build. Nitro allows the creation of web servers with everything you need and deploy them wherever you prefer – they share target presets and make it easy for hosting providers.
I do want to mention that for most of us, hosting on a Nodejs server using Docker is totally fine.
NextJs Doesn’t Scale
NextJs can scale. It obviously depends on how you use it. We could break this into three: Node.js Runtime, Edge Runtime and Serverless.
To start with, you can use it as a Serverless Application which giving you scalability. The only bottleneck would be your wallet. It does look like Vercel are putting a lot of effort to make it cheaper and cost efficient for everybody.
I haven’t had the need to do this myself, but you could scale horizontally behind a load balancer.
You can use Incremental Static Regeneration to numb the pain on your server and use Static Export if you want.
Just know that VPS and a Posgreess database can go a long way! You can always resize your server to take more load.
I don’t think that Nextjs can solve all problems. You don’t need to use NextJs solely to build your project. You can use any back-end language of your choice to do the heavy lifting. I tried Hono recently and it’s beautiful. That’s an option if you want to stay in the JS ecosystem.
The Bad
Development Server is slow
That’s a fact. I assume that there is a lot that NextJs needs to process in development mode. It doesn’t bother me, I don’t even notice it, but maybe I am just used to it. Saying this, I have seen people reporting super slow dev server. Just make sure you update your project and use –turbopack.
Build times are slow
Personally, I experience no issues with local build times, especially since the introduction of --turbopack. For my mid-sized projects, it has effectively halved the build duration. However, the same projects take approximately 3-6 minutes to build on a Shared 4-core, 8GB Ram Hetzner server and roughly 1 min on Dedicated 4vCPU’s with 16GB Ram. Turbopack --turbopack already offers big improvement in build speed and I’ve seen indications on X that further optimizations are expected.
There is also another bundler called Rspack. I won’t go into details here, but basically the Rspack team has created a community plugin for Next.js which sounds awesome. I haven’t tested it myself yet so I won’t talk about it in this video.
Too many Major changes
With NextJs v15, I think that we’ve reached a level where we don’t get too many breaking changes. I personally haven’t any major problems in the past year, but I can defiantly agree that NextJs 13 was a bit rough to start with.
Edge Middware
Middleware defaults to using the Edge runtime which can be a pain.
For those of you that are not sure what the middleware does, it basically allows you to run code before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.
The NextJs team is already working on a NodeJs runtime. I did try it, but without any luck.
Overkill for smaller apps
To some degree true. You don’t need to use NextJs for everything.
I am glad that we solve this problem, quickly.
Debugging Issues
I think that debugging has become a lot better with the latest updates. I have no issues here.
Conclusion
I personally love NextJs and I will be using it for most of my new projects. It is my default option. I appreciate the server side rendering and I’ve started to use the API routes a lot. No regrets so far, having everything in one project has been great.
For single page application, I will stick to Vite and NodeJs / Hone for the backend.
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
