Skip to content
TagsNext.js

What is Next.js?

Next.js is a framework built on top of React. Where React gives you the tools to build user interfaces, Next.js adds a layer of structure and functionality that makes building full websites and web applications much more straightforward. Things like page routing, data fetching, and performance optimization come built in, so you spend less time configuring and more time building.

Next.js is maintained by a company called Vercel and has become one of the most popular tools in the React ecosystem. If React is on your learning list, Next.js is a natural and rewarding next step.

Why learn Next.js?

If you're getting into web development, Next.js teaches you patterns that come up constantly in real projects, like how to structure routes, how to fetch data efficiently, and how to think about performance from the start. Learning Next.js is a great way to take your skills to the next level, especially if you're interested in or already use React.

Next.js also consistently ranks as one of the most widely used frameworks in professional web development. Many companies that already use React have adopted Next.js as their go-to choice for building production websites and apps.

Practice Next.js on Frontend Mentor

Learning a framework like Next.js can seem a little daunting at first. The best way to get comfortable with Next.js is to use it to build real projects, which is the whole idea behind Frontend Mentor.

Our challenges give you a professional design to work from, complete with assets and style guides. You'll practice setting up routes, fetching and managing in data, and structuring a project with Next.js the way you would in the real world. Building projects on Frontend Mentor gives you the hands-on experience that tutorials alone can't provide, and you'll have a portfolio to show it.

Recommended Next.js challenges

Hand-picked challenges to help you practice Next.js at every skill level.

  • Free

    Loopstudios landing page

    • HTML
    • CSS
    • JS
    junior

    This challenge is perfect if you're looking to test your CSS Grid chops. Even without Grid, this project will be a fun one to help you practice your layout skills!

  • Free

    Insure landing page

    • HTML
    • CSS
    • JS
    junior

    Test your layout skills with this HTML & CSS only landing page. This challenge is perfect if you're starting to get confident in laying out web pages.

  • Premium

    Dine restaurant website

    • HTML
    • CSS
    • JS
    intermediate

    This two-page website is perfect if you're starting to become more confident in your front-end skills. The challenge includes tricky design details and form validation.

  • Free

    E-commerce product page

    • HTML
    • CSS
    • JS
    intermediate

    In this challenge, you'll build a beautiful product page. We'll be putting your JS skills to the test with a lightbox product gallery and cart functionality!

  • Premium

    Entertainment web app

    • HTML
    • CSS
    • JS
    advanced

    This multi-page entertainment web app will have you working with JSON data, routing, state management, and search functionality.

  • Premium

    Photosnap multi-page website

    • HTML
    • CSS
    • JS
    advanced

    In this challenge, you'll be building the marketing site for a photo-sharing app. This will be a perfect opportunity to put your CSS Grid skills to the test!

  • Free

    Rock, Paper, Scissors game

    • HTML
    • CSS
    • JS
    advanced

    This challenge will test your HTML, CSS and JavaScript skills. There's even a Rock, Paper, Scissors, Lizard, Spock version if you really want to challenge yourself.

  • 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!

  • Premium

    Product feedback app

    • HTML
    • CSS
    • JS
    guru

    This will be a perfect portfolio piece! You'll be working with JSON, managing state, and building like a real-world app. You can even create it as a full-stack project!

View more challenges

Solutions made with Next.js

View more solutions

Take your Next.js skills further

Want a more structured approach? This learning path guides you through curated Next.js challenges—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.

Related tags

  • #react

    React is a popular JavaScript library for building user interfaces. It is efficient and declarative, using a virtual DOM to optimize updates to the UI. React is often used with other libraries or frameworks.

  • #typescript

    TypeScript is a statically-typed superset of JavaScript that adds optional type annotations, enabling more robust code analysis and error detection. It enhances development experience with better tooling, autocompletion, and refactoring, and compiles to standard JavaScript for browser compatibility.

Join 1,146,987 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