Building fast landing pages with Next.js (App Router)

When I'm building a landing page or portfolio, my main goal is simple: keep the UI clean, the codebase easy to change, and the page fast even on low-end devices. Next.js (App Router) is great for this because server components are the default and the routing model is straightforward.

My default structure

I keep page composition in the app route, UI pieces in components, and static configuration/data in a small libs folder. That way, I can iterate on content without touching layout logic.

app/
  page.tsx
  blog/
    page.tsx
    [slug]/page.tsx
components/
  NavBar.tsx
  Footer.tsx
libs/
  data.ts

Performance checklist I follow

• Use server components by default; add "use client" only when needed (animations, state, event handlers).
• Keep data shaping in one place (like libs/data.ts) so pages stay simple.
• Prefer static rendering for content pages (blog posts, landing pages) when possible.
• Avoid heavy client-side libraries in global layout; load them only on pages that need them.
• Keep above-the-fold content tight: strong heading, short copy, clear CTA.

Small UX details that matter

Speed isn't just about Lighthouse. Consistent spacing, readable typography, and clear navigation reduce bounce rate. I usually add a short excerpt, visible tags, and a simple back link so users can browse quickly.

If a page is easy to scan, it feels faster — even before you measure it.