Sebastian Gomez

Apr 12, 2023

Updated: Jun 25, 2026

Introduction to Next.js

Introduction to Next.js: master the world of React

What is Next.js?

Before we talk about Next.js, let's talk about React. React is a library that handles the view layer of our applications, but on its own it isn't enough to quickly build a complete application. You need a router, a build system, a way to style your components, and you have to worry about your site's speed and performance, among many other things.

Next.js is a full stack framework created by the Vercel team that uses React as its view library. If you already know React, learning Next.js will feel very familiar. Next.js ships with decisions already made and a defined set of tools, which makes it an "opinionated" framework. In theory, this is the secret sauce, based on the Vercel team's experience building production applications with React.

In fact, since 2024 React officially recommends using a framework like Next.js to start new projects, instead of tools like the now discontinued Create React App.

Next.js features

Next.js has evolved enormously. These are the main features in its current version (v16):

App Router: a file system based routing system using the app/ directory, which replaces the old Pages Router.
React Server Components: components render on the server by default. Only components that need browser interactivity use the 'use client' directive.
Turbopack: the new default bundler that replaces Webpack, with noticeably faster development server startups (you can find the concrete numbers in the official Next.js blog).
Prerendering with multiple strategies: Server Side Rendering (SSR), Static Site Generation (SSG), Incremental Static Regeneration (ISR), and Streaming.
Route Handlers: routes for your API directly in the app/ directory.
Server Actions: server functions you can invoke directly from the client without creating API endpoints.
Automatic optimization: images, fonts, scripts, and metadata optimized automatically.
React 19: full support for the latest version of React, including the React Compiler.

Note: the React Compiler reached its first stable release (v1.0) on October 7, 2025, within the React 19.x line the site uses. It is no longer experimental: you can adopt it in production along with the linting and tooling improvements that shipped with that release.

Server Components versus Client Components

One of the most important innovations of modern Next.js is the distinction between Server Components and Client Components.

Server Components (the default):

They render entirely on the server.
They can access databases and APIs directly.
They send no JavaScript to the browser.
They are ideal for fetching data and rendering static content.

Client Components (opt in with 'use client'):

You need them when you use state (useState), effects (useEffect), or browser events (onClick, onChange).
They hydrate on the client to make them interactive.
Use them only where necessary, to reduce the JavaScript shipped to the browser.

// Server Component (the default, no directive needed)
import LikeButton from './like-button'

export default async function Page() {
  const post = await getPost() // Fetch directly on the server
  return (
    <div>
      <h1>{post.title}</h1>
      <LikeButton likes={post.likes} />
    </div>
  )
}

// Client Component (needs 'use client')
'use client'
import { useState } from 'react'

export default function LikeButton({ likes }) {
  const [count, setCount] = useState(likes)
  return <button onClick={() => setCount(count + 1)}>{count} likes</button>
}

App Router: the new routing system

The App Router uses the app/ directory and file conventions:

app/page.js is the home page (/).
app/about/page.js is the about page (/about).
app/post/[slug]/page.js defines dynamic routes (/post/my-post).
app/layout.js is the shared layout (required at the root).
app/loading.js is the automatic loading UI.
app/error.js handles automatic error handling.

You no longer need getServerSideProps or getStaticProps. Data is fetched directly with async/await in Server Components:

// Before (Pages Router)
export async function getServerSideProps() {
  const data = await fetchData()
  return { props: { data } }
}

// Now (App Router)
export default async function Page() {
  const data = await fetchData() // Right in the component
  return <div>{data.title}</div>
}

What happened to Create React App?

Create React App (CRA) was officially discontinued. The React team no longer recommends it for new projects. The reason is that CRA only generates client side single page applications (SPA), with no support for:

Server Side Rendering (SSR)
React Server Components
Built in routing
Automatic optimization

Instead, React recommends using a framework like Next.js, React Router v7 (with Vite), or Expo for native applications.

And Gatsby?

Gatsby has essentially stopped being a viable option. After being acquired by Netlify, its development has stalled significantly. It no longer appears in React's official recommendations for starting new projects. If you were considering Gatsby, Next.js offers all of its features and more: static generation, image optimization, GraphQL (if you want it), and on top of that SSR, Server Components, and API routes.

When should you use Next.js?

Here's an updated guide to choosing the right tool:

Do you need to build any kind of web application (SPA, SSR, static, or hybrid)? Use Next.js (recommended by React).
Do you need a SPA with custom routing and Vite? Use React Router v7.
Do you need to build a native application for iOS/Android and web? Use Expo.
Do you need a learning project without a framework? Use Vite + React (just to learn the fundamentals).

Conclusions

Next.js is the full stack framework officially recommended by React for building modern web applications.
React Server Components fundamentally change how we build applications: the server does more work and the client receives less JavaScript.
The App Router with the app/ directory is the current standard, offering nested layouts, streaming, and built in error handling.
Create React App and Gatsby are no longer recommended options for new projects.

Exercises to practice

Create a new project with npx create-next-app@latest and explore the structure of the app/ directory.
Build a page that fetches data from an API directly in a Server Component using async/await.
Create an interactive component with 'use client' and combine it with a Server Component.
Implement a dynamic route (app/post/[slug]/page.js) that renders different content based on the URL parameter.

3-point summary

Next.js is the official full stack framework recommended by React, with Server Components, App Router, and Turbopack.
Server Components render on the server by default, sending less JavaScript to the browser and improving performance.
Create React App and Gatsby have been replaced; Next.js is now the standard choice for React applications in production.

I hope this updated post has been useful to you and helps you understand the current state of Next.js in 2026.

Here's the link to the next post about Next.js: Getting Started with Next.js.

Leave me a comment if it helped, if you want to add an opinion, or if you have any questions. Feel free to write to me below. And remember, if you liked it, you can also share it using the social links below.