Skip to content
Codeloom

Topics / Next.js

Next.js

Full-stack React. Routing, SSR, server components, and the App Router.

Browse 48 tutorials → Other topics

Why learn Next.js?

  • The standard for production React apps.

  • Server components solve real performance and data-loading problems.

  • First-class hosting story on Vercel, but also self-hostable.

  • One framework for frontend, API routes, and full-stack data flow.

What you can build with Next.js

E-commerce and SaaS apps Marketing sites with dynamic content Server-rendered dashboards Full-stack apps with shared TS types

Next.js tutorials

48 articles · page 1 of 3

Hand-written tutorials, ordered as a recommended learning path.

  1. 01 What Is Next.js? A clear introduction to Next.js — what it is, why it exists on top of React, what the App Router and Server Components actually do, and where it fits compared to plain React, Astro, and Remix.
  2. 02 Install & First App A practical walkthrough for installing Next.js 15 with create-next-app, understanding every file in the generated project, running the dev server, and shipping a production build.
  3. 03 App Router Basics A practical guide to the Next.js App Router — file-based routing, nested layouts, dynamic segments, client-side navigation with Link and useRouter, and the special loading and error files.
  4. 04 Server Components A practical guide to React Server Components in Next.js — what runs where, the use client boundary, how to fetch data inside components, and a first look at server actions.
  5. 05 API Routes Patterns Build robust Next.js API routes with proper validation, error handling, authentication, rate limiting, and testing patterns for production apps.
  6. 06 i18n Guide Build multilingual Next.js apps with the App Router using locale routing, server-side translations, dynamic language switching, and SEO best practices.
  7. 07 SEO Optimization Optimize your Next.js app for search engines with the Metadata API, dynamic Open Graph images, sitemaps, robots.txt, and JSON-LD structured data.
  8. 08 Server Actions: Forms Learn how to use Next.js Server Actions for form handling, data mutations, optimistic updates, and error handling with practical examples.
  9. 09 Streaming & Loading UI Build instant-loading Next.js pages with streaming, Suspense boundaries, loading.tsx files, and skeleton UIs for the best user experience.
  10. 10 Next.js vs Astro vs Remix Compare Next.js, Astro, and Remix on rendering, performance, and developer experience. Find the best meta-framework for your 2026 web project.
  11. 11 App Router Migration A practical migration guide from Next.js Pages Router to App Router covering routing, data fetching, layouts, metadata, and common pitfalls.
  12. 12 Intercepting Routes Build modal patterns in Next.js using intercepting routes. Learn the (.) convention, combining with parallel routes, and handling hard refreshes.
  13. 13 i18n App Router Set up multi-language support in Next.js App Router using route-based locale segments, dictionaries, and middleware-based locale detection.
  14. 14 Image Optimization Strategies Master the next/image component with advanced optimization strategies including responsive images, blur placeholders, CDN configuration, and performance tips.
  15. 15 ISR & Revalidation Master Incremental Static Regeneration and on-demand revalidation in Next.js to serve fresh content without rebuilding your entire site.
  16. 16 Auth Middleware Implement authentication middleware in Next.js to protect routes, redirect unauthenticated users, and manage JWT or session-based auth at the edge.
  17. 17 Middleware Patterns Practical middleware patterns for Next.js including authentication, A/B testing, geolocation routing, bot detection, and request logging.
  18. 18 OG Image Generation Generate dynamic Open Graph images in Next.js using @vercel/og and the ImageResponse API for social media previews with custom fonts and layouts.
  19. 19 Parallel Routes Guide Learn how to render multiple pages simultaneously in the same layout using Next.js parallel routes and the @folder naming convention.
  20. 20 Rate Limiting APIs Implement rate limiting for Next.js API routes and route handlers using in-memory stores, Redis, and middleware patterns to protect your endpoints.