What Is Next.js? A Look at the Popular JavaScript Framework
Next.js comes with features that are guaranteed to take your application from zero to production in no time while providing an easy to learn curve, simplicity, and powerful tooling at your disposal.
Next.js extends the original Facebook React library and the create-react-app package to provide an extensible, easy-to-use, and production-proof React framework.
This guide will walk you through Next.js, exploring why you should use Next.js and the different applications using Next.js in production. Furthermore, we’ll discuss the elements of Next.js, including its features of Next.js. Lastly, we’ll learn how to create our first Next.js application.
What Is Next.js?
Next.js is a React framework that allows you to build supercharged, SEO-friendly, and extremely user-facing static websites and web applications using the React framework. Next.js is known for the best developer experience when building production-ready applications with all the features you need.
It has hybrid static and server rendering, TypeScript support, smart bundling, route prefetching, and more, with no extra configuration needed.
Why Use Next.js
This section will explore why you should learn Next.js. We’ll also look at the different applications you can build with Next.js.
Image Optimizations
Next.js provides automatic image optimizations with instant builds. Image optimization is a powerful feature prebuilt into Next.js because managing and optimizing images requires many configurations, and manually optimizing images can take a toll on your productive time.
Internationalization
Another great feature added to Next.js is internationalization. Creating an enterprise application can easily be used and translated into different languages worldwide. This feature is an addition to Next.js and makes Next.js internationally recognized because it takes less configuration to get internalization set up.
Next.js Analytics
Next.js provides an analytical dashboard that can be configured to show accurate visitor data and page insights from out of the box. With this feature, you can quickly build out an analytical dashboard and gain valuable insights into your visitors and page insights without extra coding or configuration.
Zero Config
Next.js compiles and builds automatically with hot refresh without any extra configuration from you, and it automatically scales and optimizes your production application.
Achieving hot refresh or automatic refresh on a traditional frontend application comes with many hurdles. It requires choosing and installing the right libraries, and carrying out the configurations for each library to work correctly. Next.js solves this problem by providing a hot refresh right out of the box with zero installation and configuration from you.
Prebuilt SSR, SSG, and CSR Support
With Next.js, you support server-side rendering, static generation, and client-side rendering in one application. You can decide the type of application you want to build and how you intend to compile your application to best suit your use case.
Server-side rendering makes Next.js suitable for large-scale SEO-oriented production-ready applications, and configuring it is a breeze.
Apps Using Next.js
Below is the list of applications developed with Next.js. Since Next.js is supported by Fortune 500 companies, including GitHub, Uber, and Netflix.
Below are the top 5 applications built with Next.js.
TikTok
TikTok is a prevalent social online video community where users upload short-form mobile videos with millions of daily users.
The web page of TikTok is developed with Next.js to scale and optimized for millions of daily active users.
Hashnode
Hashnode is a free online blogging platform targeting developers, and it’s built with Next.js. Hashnode records millions of users, making Next.js suitable to power small to large-scale applications.
Twitch Mobile
Twitch is an online social platform for chatting, interacting, and enjoying different types of content and entertainment. Next.js also powers it.
Hulu
Hulu is a streaming platform similar to Netflix, allowing users to watch movies and TV shows online created with Next.js.
Binance
Binance is a popular cryptocurrency portal with news, price tickets, and a possibility to buy and sell, recording millions of active users and crypto trading daily. Next.js also powers Binance.
To find out more companies and websites using Next.js, you can visit the official Next.js showcase page for more information.
What You Can Build
In Next.js, there is no limit to the type of applications that you can develop. You can develop different kinds of applications using Next.js. Also, any application you choose to create with Next.js will still have all the benefits and features of Next.js without any extra configurations from you.
Below is the list of application types you can build with Next.js:
- MVP (Minimum Viable Product)
- Jamstack websites
- Web Portals
- Single web pages
- Static websites
- SaaS products
- E-commerce and retail websites
- Dashboards
- Complex and demanding web applications
- Interactive user interfaces
Features of Next.js
Below we’ll spell out the features of Next.js and what you stand to gain using Next.js in your project.
Routing
Routing is one of the essential features of Next.js. Next,.js uses the file-based routing system based on the pages to structure how your application’s routing will look. Every file and folder created inside the pages folder is automatically converted to route in Next.js.
Next.js routing system is divided into 3 different types, and below, we’ll explore each of them.
Index Routing
The page folder has index.js automatically, which becomes the route for the homepage route /. You can also define an index.js page for all your routes in any folder. For instance, you can define pages/profiles/index.js, which will automatically be mapped to the /profiles page.
Take this example, for instance:
- pages
- index.js
- profile
- index.js
- [user].js
The above page structure will map the folders and files to a URL structure. For example / for the pages/index.js, /profile/ for the pages/profile/index.js, and /profile/user for pages/profile/user.js, respectively.
Nested Routes
Nested routes are created within a parent route. To create a nested route, you need to create a parent route/folder within the pages folder and add either folders or files within to create a nested route.
Have a look at this example:
- pages
- index.js
- dashboard
- index.js
- user.js
In the script above, the user.js and index.js files are nested with the dashboard parent route, meaning that the URLs can only be accessed with the dashboard route.
Dynamic Routes
It is achieved via dynamic routes. Dynamic routes are always indeterminate. They can be generated via API calls or assign an ID or slug to the URL.
To create a dynamic route in Next.js, add a square bracket [id].js around the filename or the directory name. You can name the file or directory any name of your choice, but a square bracket [] must be attached to make it dynamic.
Take a look at this example:
- pages
- dashboard
- [user].js
- profile
The script above makes the [user].js dynamic, which means the profile page must be accessed with /dashboard/2/profile or /dashboard/johndoe/profile.
From the official documentation, you can learn more and the different tricks to create a more advanced routing system in Next.js.
Static File Serving
In Next.js, serving static files or assets such as icons, self-hosted fonts, or images is done through the public folder, the only source of truth for static assets.
The public folder should not be renamed according to the Next.js docs. Serving static assets through the public folder is very straightforward, according to how Next.js has configured it.
Pre-Rendering
One of the enormous features of Next.js is pre-rendering, which makes Next.js work very well and very fast. Next.js pre-renders every page by generating each page HTML in advance alongside the minimal JavaScript they need to run through a process known as Hydration.
There are two forms of pre-rendering in Next.js:
- Server-side Rendering (SSR)
- Static Generation (SG) How data is fetched is the crucial difference between SG and SSR. For SG, data is fetched at build time and reused on every request (which makes it faster because it can be cached), while in SSR, data is fetched on every request.
Absolute Imports
As of Next.js 9.4, absolute imports were introduced, meaning you no longer have to import components with relatively long directories.
For instance, you don’t need to import components like the one below:
import InputField from "../../../../../../components/general/forms/inputfield"
But you use the following style to import components:
import InputField from "components/general/forms/inputfield";
Linking Pages
Next.js provides the next/link for navigating between pages. Navigating between pages in your apps can be done with the Link component exported by the next/link.
Assuming we have these page structures in your pages folder and you want to link the pages together, you can achieve it using the following script:
- pages
- index.js
- profile.js
- settings.js
- users
- index.js
- [user].js
You link the pages using this script below:
import Link from "next/link";
export default function Users({users) {
return (
<div>
<Link href="/">Home</Link>
<Link href="/profile">Profile</Link>
<Link href="/settings">
<a> Settings </a>
</Link>
<Link href="/users">
<a> Settings </a>
</Link>
<Link href="/users/bob">
<a> Settings </a>
</Link>
</div>
)
}
Styling
Next.js gives you the luxury of creating and having many styles as needed in your project. By default, Next.js comes with three different styles right out of the box viz: global CSS, CSS Modules, and style-jsx.
Drawbacks of Next.js
As with every good thing, Next.js has its disadvantages, which you must consider before using it for your next project. In this section, we’ll explore the drawbacks of Next.js.
Development and Maintenance Cost
With Next.js, flexibility comes with high costs in development and maintenance. To make changes and maintain the application, you’ll need a dedicated Next.js developer and frontend expert who will cost more.
Lack of Built-in State Manager
Next.js does not support state management right out of the box. If you need any state management, you’ll have to install it and use it like you would with React.
Low on Plugins
With Next.js, you won’t have access to many easy-to-adapt plugins.
How to Create a Next.js App
This section will explore the practical use of Nuxtjs and how to create a NuxtJS application. However, let’s explore some of the few essential concepts in developing a Nuxtjs application.
Creating Next.js Application
Creating a new Next.js project is very easy and straight to the point. You can create a Nuxt project differently, but the most preferred and recommended approach is CLI.
To create a new Next.js application with CLE, ensure you have npx installed (npx is shipped by default since npm 5.2.0) or npm v6.1 or yarn.
Next, type in the following command in the right folder you want to place your Next.js project:
npx create-next-app
// Follow the instructions to create your first Next.js project.
cd <project-name>
npm run dev
Make sure to replace the <project-name> with your actual project name. You can then start creating different pages and components required by your project.
Next.js Elements
When creating a new Next.js project, you’ll notice that it comes with different elements, page, and folder structures that can be overwhelming for beginners to grasp. However, we’ll explore some of the elements of Next.js below.
Folder Structure
After creating a new Next.js project from a CLI, you’ll notice a Next.js app with a lean folder tree. This default folder structure is the bare minimum to run a Next.js app. When you start building your project, you’ll have more folders and files than the framework initially.
The only Next.js specific folders are the pages, public, and styles folders. These should not be renamed unless you’re prepared to adjust additional configurations.
Below is the default folder structure for a new Next.js project:
# other files and folders, .gitignore, package.json...
- pages
- api
- hello.js
- _app.js
- index.js
- public
- favicon.ico
- vercel.svg
- styles
- globals.css
- Home.module.css
Pages
Pages are one of the Next-specific folders, and below are some things you need to know about Next.js pages.
Pages are React components, and each file in the pages folder is a web page, and each web page is a React Component. For instance, we have a React component inside the Pages folder, resulting in a web page URL.
// Location: /pages/index.js
// is just a basic React component
export default Index() {
return <h1>Welcome to Home</h1>
}
Next.js comes with pre-created custom pages prefixed with underscores such as _app.js and _document.js. Next.js uses the _app.js custom page component to initialize the pages. It resides inside the pages folder, while the _document.js custom page component augments your application’s <html> and <body> tags.
The framework also uses a file-based routing system based on pages, wherein each page automatically becomes a route based on its file name. For instance, a page at pages/user will be located at /user, and pages/index.js at /.
Summary
Next.js should come to mind when building enterprise and production-ready applications using React because it’s designed to simplify the hassle involved in building production applications with its features, tooling, and configuration.
In this guide, we’ve explored the different features of this framework and identified why you should build your next enterprise-ready applications using Next.js. You now know that even if you’ve never tried Next.js before, there are plenty of reasons to give it a go.
Let us know in the comments section what you’ll be building with these new superpowers!