I have been building websites with Next.js for a while now. Our studio Impeccify has shipped over 100 pages using the App Router and I wanted to share some stuff I learned along the way.
These are not things you read in the docs. These are things you figure out after building real projects for real clients.
1. Metadata setup matters more than you think
Most tutorials show you the basic metadata export and move on. But if you want your pages to actually rank on Google, you need to go deeper.
Here is what we put on every page:
- Title with the main keyword near the front
- Description under 160 characters with a clear value prop
- Open Graph tags for social sharing
- Canonical URL to avoid duplicate content
- Structured data (FAQ schema, breadcrumbs, etc)
The structured data part is what most people skip. But it is what gets you those rich results in Google search. We add FAQ schema to every tool page and it makes a noticeable difference in click through rates.
2. Do not put everything in a layout file
When I first started with App Router, I tried to put as much as possible in layout files. Navigation, footer, providers, metadata. It made sense at the time.
The problem is layout files do not re-render when you navigate between pages. That is actually the whole point of layouts. But it means if you have any state that needs to reset between pages, it will not work in a layout.
Now I keep layouts minimal. Just the basic wrapper, maybe shared navigation, and that is it. Everything else goes in the page component.
3. Static generation is still the default for a reason
With all the talk about server components and streaming, it is easy to forget that most pages should just be statically generated. If your page does not need real time data, let Next.js build it at compile time.
All our calculator and tool pages are static. They load instantly because there is no server round trip. The JavaScript hydrates on the client for interactivity, but the initial HTML is already there.
For a marketing site or a tool site, static generation gives you the best performance scores. And performance scores affect your Google rankings.
4. Image handling needs a plan
Next.js has the Image component and it is great. But you need a plan for how you handle images across the whole site, not just per page.
Things to decide upfront:
- Where do images live? Public folder or external CDN?
- What sizes do you need? Define your breakpoints early
- Do you need blur placeholders? They look nice but add build time
- Are you using SVGs for icons? Do not put SVGs through the Image component
We use Lucide for icons (SVG components), keep most images in the public folder for small sites, and use external CDN for anything with lots of images.
5. Error and loading states are not optional
This one sounds obvious but I see so many sites that just show a blank screen when something goes wrong. Next.js makes error handling easy with error.js and loading.js files.
Every route group should have:
- A loading.js with a decent skeleton or spinner
- An error.js that actually tells the user something went wrong
- A not-found.js for 404s that helps people find what they need
These are small files that take 5 minutes to create but they make a huge difference in how professional the site feels.
Wrapping up
These are things that come from building real sites for real clients. Not everything in web development is about knowing the newest framework feature. Sometimes it is about the boring fundamentals that make your site actually work well.
If you want to see how we apply this stuff, check out the free tools we built at impeccify.com. Things like CSS converters, nutrition calculators, and math tools. All built with Next.js App Router.
Top comments (0)