Best Next.js examples in 2024 (updated)

By Max Ikaheimo

28th October, 2022

If you're planning on building a web app in 2024, you should strongly consider using Next.js. In case you're unfamiliar, Next.js is a React framework that simplifies building dynamic and fast web applications.

It’s the second most known and used framework, according to the State of JavaScript 2021 survey, and not without reason.

In this blog post, we'll look at some of the best examples of Next.js websites and web applications to get an idea of what's possible with this powerful tool. 

In this post:

What is Next.js?

Next.js is a great choice for any project, whether a simple personal website or a large-scale eCommerce storefront. 

For example, if you want to create a NextJS app, you can use a library like React Apollo Client to fetch and manage your data. Numerous libraries are also available for Next.js that make internationalization (i18n) a breeze, so your site can reach a global audience. 

We wrote a pretty comprehensive post about what Next.js is already, so that we won’t go deep into the subject, but for this article, the definition proposed by Vercel will suffice. “Next.js is a flexible React framework that gives you building blocks to create fast web applications."

But if you want to read more, check this out What is Next.js?

Why use Next.js?

1. It's easy to get started 

If you're new to React, you’ve built a React app, or you’re coming from another framework such as Angular or Vue, you'll find that Next.js is very easy to learn, use, and create a new project. 

The documentation is excellent, and plenty of Next.js tutorials
and resources are available online to help you get up to speed quickly. Even starting from scratch, you can have a basic web app up and running quickly.

2. Next.js is very fast 

Each page in a Next.js web app is a static site, meaning the initial load time is extremely fast—faster than a traditional dynamic web app built with PHP, Ruby on Rails, or CSS modules. 

And because the pages are pre-rendered on the server, subsequent interactions with those pages are also very fast since the browser doesn't have to make any additional REST API requests to the server. This creates a snappy and responsive user experience, essential for any modern web app.

3. Next.js is SEO-friendly 

Because the pages are all static files generated at build time, search engines can easily index them and rank them high in the search results. 

This is unlike traditional dynamic web apps, where the search engine crawlers may have difficulty indexing the content because it's dynamically generated on the server when a user requests it. As a result, your web app will get more organic traffic if it's built with Next.  And that means more potential customers and users for your business or project!

4. Next supports features like server-side rendering and code splitting out of the box  

These features are essential for performance but can only be implemented correctly if you're building your own React framework from scratch. 

With Next, you don't have to worry about anything—it's all taken care of for you.  All you need to do is focus on building your web app.

5.  Simple Routing

Next.js provides a simple routing system that makes it easy to map URLs to specific pages or components in your application. This makes it easy to create single page applications (SPAs) that are fast and responsive. But if you want to set a dynamic route, the framework allows you to.

Best Next.js examples

Next.js is so flexible that you can build your favorite NextJS project using this amazing JavaScript framework. Let’s look at some of the best projects we’ve found. 

Streaming

Next.js is excellent for building front-end applications. One of the benefits of Next.js is that it is well-suited for streaming applications. In contrast to traditional architectures, which typically require the entire application to be downloaded before it can be used, Next.js allows portions of the application to be loaded on demand. 

This makes Next.js applications more responsive and eliminates the need for large data transfers. Additionally, Next.js applications can take advantage of server-side rendering, which can further improve performance. 

Hulu

Next.js allows Hulu to maintain a fast, seamless website for users. Their opening SPA provides an engaging and fluid experience. As a large streaming company with thousands of daily visitors, Hulu doesn’t break under pressure. Instead, users will find content and new pages to load quickly, even for users in low-bandwidth areas.

TikTok

TikTok is quickly becoming the most popular social media platform, and its website helps scaffold this. Users will find the site intuitive and easy to learn. With Tiktok’s focus on videos, the quick transitions between one video to the next is efficient and engaging. Next.js helps their videos be bold, bright, and not lose clarity when scrolling through. 

Twitch

Twitch has great mobile optimization. The layout allows users to quickly scroll through and switch from one stream to the next without any hang-ups. Unlike other streaming social media platforms that can become bogged down, the pre-rendered pages for Twitch allow the site to maintain fast over high amounts of traffic. 

News sites

Next.js is well-suited for developing news sites. Next.js offers several features ideal for news organizations, including a flexible page layout system, built-in support for TypeScript, and a wide range of tools for optimizing performance. 

Next.js is also easy to deploy and scale, making it a good choice for sites that receive a lot of traffic. In addition, Next.js integrates well with other software, such as content management systems (CMSs) and analytics platforms. As a result, Next.js is a good option for companies who want to build fast, efficient, and scalable news sites.

Product Hunt

Product Hunt is an efficient site. They boast a flexible layout where users can quickly find where they need to go. The website has many pages, many discussion boards, and it effectively loads each one. If users are looking for a specific item from these pages, Product Hunt’s search function is error tolerant as it allows a variety of inputs to be understood.

Vice

Next.js helps Vice, a popular News network, hold up to the amount of traffic. Pre-rendered pages let users click through with ease, even during peak times. The layout itself is evident and accessible. Users can tell how to move around. In addition, their images are bright and don’t lose clarity with size.

Futurism

Futurism’s mobile site is awesome. It is optimized for the user with bright colors, fast-loading images, and more. The mobile site presents content in a logical, easy-to-understand way that helps users find and read the articles they seek. Compared to the desktop site, the mobile one does not leave any information out; it is just as detailed. 

eCommerce

Next.js offers a great deal of flexibility for eCommerce developers. With Next.js, you can choose from various plugins and templates to create a unique shopping experience for your customers. In addition, Next.js makes it easy to integrate with third-party services, allowing you to accept payments, manage inventory, and track shipping information all in one place. 

Best of all, Next.js is backed by an active community of developers who always work on new features and updates. As a result, Next.js is constantly evolving to meet the needs of the eCommerce industry. If you're looking for a comprehensive platform to help you build a successful online store, Next.js is the right choice.

Nike

Nike’s homepage is every bit of engaging. Their links are fast and responsive, and by clicking through, you can move from one page to the next without hassle. Most importantly, their website focuses on the user. The search bar automatically shows suggested search options based on the user inputs and potential products a customer is looking for. 

Doordash

Doordash’s mobile site presents personalized experiences to users. It effectively calculates the user's location and potential nearby restaurants with filters for different types of foods, quality of restaurants, location, and price. This seamless process efficiently moves users to where they want to go.   

Leafly

The moment you go on Leafly, they automatically provide nearby stores depending on location. Each store has responsive links that take you to pages with additional information. The website is also very accessible to disabled or impaired users. It has a great color contrast and underlines words when your cursor is above them. Overall, it has a personalized feel that will keep users coming back. 

SaaS

Next.js is a powerful tool for building fast and scalable web applications. It is particularly well-suited for SaaS businesses, which often need to handle large amounts of data and traffic. 

Next.js provides many essential features for SaaS businesses, including server side rendering, code splitting, and automatic static optimization. These features allow Next.js applications to load quickly and efficiently, even under heavy load. In addition, Next.js is easy to set up and use, making it an ideal platform for businesses that need to get up and running quickly. 

Notion

Notion’s mobile website doesn’t leave anything out. Their mobile site includes interactive elements to have the same content as their desktop one and a personalized experience for a mobile audience. As a popular workspace, Next.js helps Notion’s site handle the influx of traffic. Not to forget that their site has alt text for all images and has excellent contrast, making it accessible to all users. 

InVision

As a workspace, Invision has many people using it daily. And their site is filled with colorful and dynamic elements, from videos to images. Thanks to Next.js, their speed does not crumble under pressure. Users will find that even with the amount of content and traffic, pages load effortlessly, reducing the time users wait. 

Auth0

Auth0 has high traffic, both from people viewing the service and from customers logging into the service. Even with that, you’ll find their site effortlessly and quickly navigated. Their use of images makes it easy to tell where each link leads, and these links load fast. Plus, Auth0 has a customer service bot that personalizes the experiences. It truly keeps the user coming back. 

Entertainment

One of the key advantages of Next.js is that it makes it easy to fetch data from APIs and render pages on the server side. Next.js apps can be swift and responsive, even on slow internet connections. Next.js also has built-in support for SEO, which is essential for any entertainment site that wants to rank high in search engine results. 

In addition, Next.js has several particularly well-suited features for entertainment sites. For example, Next.js supports lazy loading of images, saving bandwidth and improving load times on mobile devices. Next.js also has a built-in image optimizer, which can help reduce images' file size without compromising quality. 

TED

Just looking at TED’s homepage, users see that there are lots of images. But they are just as clear and bright as their larger counterparts. Also, lazy image loading allows for pages presenting many images not to be bogged down, creating a responsive mobile site. Users can smoothly move from one page to another without long loading times. 

Nintendo

Nintendo’s desktop and mobile sites appear seamless to users. The navigation bar has a layout that keeps the user moving. When a user clicks on a page, the next loads in only a couple of milliseconds. The site is also filled with images. Smaller images used throughout the site appear clear and do not lose quality. 

LEGO for Kids

Lego for Kids is exactly what it needs to be: accessible for children. Their mobile site has intuitive navigation that children can understand without additional help. The games and videos themselves are efficient and error-tolerant. Since Next.js makes it easy to render pages, children in low-bandwidth areas will still have a responsive site. 

Finance

Next.js is very secure. It uses modern security practices like encryption and HTTPS to protect user data. It’s also highly scalable. It can easily handle large traffic and keep the site running smoothly. 

Finally, Next.js is easy to use. It has a simple syntax that makes it easy to get started with and is well-documented so that you can find answers to any questions. Overall, Next.js is an excellent choice for finance sites due to its speed, security, scalability, and ease of use.

Western Union

Western Union’s mobile website has additional interactive elements to avoid losing any content from the desktop. Plus, it is easy to use. When users go on the site, they can see what Western Union is, how to sign up, and how to send and pick up money. With the prevalence of people using money-sending applications, this website stands up to the amount of traffic in security and speed. 

SumUp

SumUp is blazingly fast. Many dynamic images load seemingly instantaneously when a user scrolls through SumUp's site. When users click links, a loading bar at the top of the page helps facilitate smooth page changes. Users will appreciate the speed and ease of the site. Its simple design leads users to where they want to go. 

The Verge

Scrolling through, users will find the organization of the Verge intuitive. Having a large amount of content, Verge uses a split screen where one side moves slower than the other. This allows specific articles to stand out to the user. Plus, their unique site uses many smaller photos with great quality. 

Our experience with Next.js

Teleport

We worked with Teleport's marketing team as their team extension to migrate their Markdown-managed content to Sanity.io Headless CMS. This enabled centralized and efficient content management for Teleport's multi-user team. This included consulting services and helping them pick the best tool stack to set up marketing and A/B testing scripts.

Teleport: Web development for an IT infrastructure access platform

Veri

We built Veri's new site with Next.js and Prismic, a stack ready to be scaled as Veri's business grows. With the help of these modern web technologies, we saw an astonishing increase in Google Lighthouse's performance score and enabled composable and Headless content management.

Veri: Website development for a health-tech company

Closing thoughts

Next.js is a versatile tool that can be used for any project, from simple personal websites to large-scale eCommerce stores.

Many libraries available for Next.js make adding features like internationalization (i18n) easy, so your site can reach a global audience.

In this blog post, we've looked at some of the best examples of Next.js websites and web applications so you can get an idea of what's possible with this powerful tool.