Skip to content

What is Next.js?

Next.js is a React framework for building full-stack web applications. React gives you components, and Next.js adds routing, server rendering, data fetching and a build setup around them. Vercel maintains it, and it was first released in 2016. React's own docs list Next.js among the frameworks they recommend for new apps.

In the App Router, folders inside app become URL segments, and a page.js file makes that route public. Pages are React Server Components by default, so they can be async and fetch data before any HTML reaches the browser. This file renders a page for every post at /blog/[slug], with getPost standing in for your own data function:

// app/blog/[slug]/page.js
export default async function Page({ params }) {
  const { slug } = await params;
  const post = await getPost(slug);
  return <h1>{post.title}</h1>;
}

Why learn Next.js?

Next.js teaches you where code runs. A Server Component can query a database or use an API key without sending that code to the browser, and you add 'use client' to the top of a file only when a component needs state, event handlers or browser APIs like localStorage. Working out that boundary is a big part of full-stack React, and Next.js has you decide it file by file.

Get comfortable with React before you start. Next.js adds its own ideas on top, like layouts, caching rules and the server and client split, and its error messages are harder to follow when you're unsure which parts are React and which are Next.js. Once React feels familiar, building one small multi-page site is a good way to meet those ideas one at a time.

Practice Next.js on Frontend Mentor

The stack is your choice on every Frontend Mentor challenge, and the multi-page and data-driven ones get the most out of Next.js's routing and server rendering.

Space tourism multi-page website has four pages with tabbed content, a clean introduction to folders as routes and a shared layout for the navigation. Personal blog turns each article in the provided data.json into its own page through one dynamic [slug] route. RSS feed reader goes further. Many feeds block requests from browser code on other sites, so fetching and parsing them in Server Components or Route Handlers is the practical approach, and the brief recommends a full-stack build with accounts.

Start building free

Take your Next.js skills further

Want a more structured approach? This learning path takes you through its challenges in order, from first principles to real-world projects.

advanced

JavaScript frameworks and libraries

Using a JavaScript framework can provide many benefits. In this path, we outline core concepts and provide a sequence of challenges to help you reinforce knowledge and gain hands-on experience with your chosen framework.

Challenges to practice Next.js with

Every challenge works with any tech stack. These are good ones to build with Next.js, from easiest to hardest.

  • Free+

    Space tourism multi-page website

    • HTML
    • CSS
    • JS
    intermediate

    This project is a fun collaboration with Scrimba and Kevin Powell! If you like, you can follow along and watch Kevin complete the project on Scrimba. Lots to learn!

  • Premium

    Personal blog

    • HTML
    • CSS
    • JS
    intermediate

    This multi-page personal blog project has a JSON file to practice working with dynamic data. You can even use a headless CMS to take the difficulty up a notch!

  • Premium

    Tech conference site

    • HTML
    • CSS
    • JS
    intermediate

    Build a multi-page site for a tech conference. Browse the speakers, filter the schedule by day and track, and save talks. Optional bonus: pull the content from a CMS.

  • Free

    REST Countries API with color theme switcher

    • HTML
    • CSS
    • JS
    • API
    advanced

    Build a countries app with search, filtering, detail pages, and a light/dark theme using any JS framework. Country data is provided as JSON.

  • Free

    RSS feed reader

    • HTML
    • CSS
    • JS
    advanced

    Build an RSS feed reader that lets users subscribe to blogs and news sources, organize feeds into categories, and browse articles in a unified timeline.

  • Premium

    Audiophile e-commerce website

    • HTML
    • CSS
    • JS
    guru

    This huge e-commerce challenge will provide an incredible test for your front-end skills. Once you're done, you'll have an amazing project to add to your portfolio!

View more challenges

Solutions made with Next.js

View more solutions

Related technologies

  • What is React?

    React is a JavaScript library, created at Facebook, for building user interfaces from components. You write them in JSX, and React keeps the page in sync.

  • What is TypeScript?

    TypeScript is JavaScript with syntax for types, made by Microsoft. It checks your code before it runs and compiles to plain JavaScript for any browser.

  • What is Node.js?

    Node.js is a JavaScript runtime built on Chrome's V8 engine. It runs JavaScript outside the browser, so you can write servers, APIs and command-line tools.

Join 1,204,964 people building portfolio-worthy projects

Our highly supportive, positive community is here to help you improve your skills. We all try to help each other out wherever possible. We’d love to welcome you to our community!

Log in