Next.js is a React-based JavaScript framework providing the building blocks for developing fast, flexible, and highly dynamic web applications. Next.js abstracts the loading of content, making it easier for developers to build scalable, performant, and feature-rich applications. The framework offers server-side rendering, automatic code splitting, hot code reloading, automatic routing, component-specific styles, and dynamic component imports. Next.js is widely used by popular companies such as Netflix, Uber, and Twitch, and is known for its speed, performance, and flexibility in building both static and dynamic web applications.
What is Next.js?
Next.js is a frontend development framework built on top of React to provide a set of helpful features and functionalities primarily aimed at enabling Server Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR).
React apps built with Next.js can render the first page on the server instead of the browser, enabling fast, performant, user-friendly, and SEO-optimized applications to be built with little to no configuration.
With Next.js, developers can render JavaScript on the server side and deliver an HTML file to the browser which can then be crawled by search engine bots. Previously, Single Page Applications ran into issues whereby their content wasn’t crawled or indexed by search engines, as much of the content was dynamically generated. While workarounds existed, they required a lot of extra work – something that Next.js streamlines and simplifies.
Core principles of Next.js
Next.js is not a new framework. It’s been around since 2016 and was built with several core principles in mind. It’s important to note that – like most frameworks – Next.js is not a magic solve-all solution. Choosing which framework to use in any given scenario is a major decision, and the following core principles should be carefully considered:
What is Next.js used for?
Traditional React apps use client-side rendering, which was very common in the earlier days of the internet. Unfortunately, client-side-only rendering often comes with a much slower first contentful paint, making it difficult for pages to be crawled by search engine bots and hurting search engine optimization.
Next.js is extensively used to build react apps but enables pages to render on the server side. The first thing the user or bot will see is the server-rendered HTML file. At this point, client side rendering takes place through a process called JavaScript hydration, working much like traditional react apps.
With Next.js, the user gets fully interactive content, search engine bots see fully rendered HTML and pages, and all of this is done in much faster times than in the past (with traditional React apps).
Next.js shines when it comes to data fetching. Next offers several strategies for server-side rendering – depending on the application’s specific needs, while still allowing for traditional client-side and static site generation. Below we explore all of Next’s rendering options.
Static Site Generation (SSG)
Static Site Generation is often referred to as pre-rendering, whereby pages are rendered at build time. The server fetches the data from the cloud or database and returns it as props to the component, changing the component’s behavior and/or what is visible as it is rendered by the client’s browser.
Next.js can be used to build applications that render HTML locally. It’s then uploaded to a static host or storage bucket and is then easily cached by a CDN. Static Site Generation is ideal for static applications such as blogs and for pages whose data doesn’t frequently change.
Server-Side Rendering (SSR)
When building applications that require data to change often, Server-Side Rendering (SSR) becomes necessary. With SSR, the HTML page is built whenever a user makes a request. As the request is sent to the server, it responds with the page’s HTML code, from which the page is fully loaded.
With static generation, data is fetched on build time. With server-side rendering, it’s fetched at request time. The page requests the latest data from the server or database each time a user makes a request.
Incremental Static Regeneration (ISR)
Incremental Static Regeneration has a use-case that sits in between SSG/CSR and SSR, letting Next.js build apps that regenerate single pages in the background. There are specific time intervals at which this regeneration needs to happen. ISR occurs as requests are made by users.
Routing in Next.js
There are 3 main types of routing that Next.js provides features and tools for:
API routing:
Next allows you to create API routes directly within its file structure. Files inside the ‘page/api’ folder will show in the ‘/api/*’ and are now endpoints. Note that these bundles are server-side and don’t affect bundle sizes on the client side. You can build an API using this API route feature in Next.js and won’t need to forward calls from any existing APIs.
Page routing:
Adding a page to the directory in a Next app automatically makes it available as a route. This isn’t unique to Next and can also be handled by backend frameworks such as Express.js.
Internationalized routing:
Internationalized routing functions similarly to page routing in Next.js apps, but add an extra dimension (language/locale) to the app’s routing process. Next.js comes with i18n routing support built-in. Once provided with a list of the locales (along with the default), Next can handle all the routing automatically.
Advantages of using Next.js
As we’ve mentioned before, Next.js is not a magic solution that works in every situation.. Leveraging the following advantages of Next.js can give your Next.js applications an edge when it comes to speed, SEO, and more:
Image optimization | Next.js includes a host of features for image optimizations that boost performance speed, load pages faster, ensure consistent visual appearance, etc. Images are always served in the right size on each device, improving Core Web Vitals and assisting SEO efforts. |
SEO | Next’s image optimization and support for pre-rendering and server-side rendering all help towards building applications that are optimized for search engines. Next.js solves many SEO issues (large first contentful paint, pages not being crawled, etc.) that were hard to fix with traditional React apps. |
Built-in TypeScript | Next.js offers fully integrated TypeScript support with a zero-configuration setup, and includes types for pages, APIs, and more – right out of the box. |
Easy deployment | Thanks to platforms like Vercel, deploying your Next.js application is fast, simple, and requires zero configuration. Additionally, Next.js applications can deploy to any hosting provider that supports Node.js. |
Rapid refresh by default | Next.js has a fast refresh feature that lets you make changes to React components and see immediate feedback on these edits. This feature also ensures that you don’t lose component state when making edits, even when working with large-scale applications. |
Disadvantages of using Next.js
While not all of these limitations are universal advantages, it’s worth paying attention to how they can potentially restrict the situations where Next.js is a viable solution. Let’s take a look at some of Next.js’s limitations.
API routing limitations:
While Next.js does offer API routing, it’s better suited to smaller-scale uses including creating API proxies and middleware. Next.js isn’t ideal for creating APIs that do heavy lifting or handle business logic as they require fine-tuning and need to be secured.
Using an existing codebase:
For existing codebases, moving over to Next.js can be a major time sink due to often needing extensive refactoring and testing. Before moving a project onto Next.js, there should be a careful analysis of the required work to the existing codebase.
Issues with using a CDN:
Server-side rendering often has issues using CDNs. Unless you are using hybrid rendering (such as ISG) and exporting your website, you may not be able to use a CDN.
