Next.js Explained Simply
Learn what Next.js is.
What’s up everyone? You've likely heard of NextJS, but maybe it's not exactly clear what it is. In this guide, I'm going to unpack exactly what NextJS is, highlight some features of NextJS, and discuss a bit about how it works. Let’s dive in.
What is it?
NextJS is a React framework for web applications, like dashboards, websites, and more. React is a JavaScript library used for building user interfaces. What NextJS does is it comes in and creates opinionated guardrails for how it believes React should be used in a web application.
While some critics have issues with how much NextJS abstracts away, NextJS removes the need for the developer to stress about bundling or compiling and allows the dev to get straight to work. This means it's incredibly fast and easy to get started with NextJS if you have some understanding of React.
NextJS is extremely popular for a couple of reason. It's used by a variety of companies, both large and small, to create their marketing websites as well as their user dashboards.
One might say that the primary reason it's so popular is that you don't need a computer science degree to use it. Again, critics may not like that NextJS removes the need for the developer to get into the nitty-gritty of configuring their React project, but NextJS's clear documentation, the strong community of developers around it, and the simplicity of its basic infrastructure makes it an approachable framework for developers of all skill levels.
Support is strong in the NextJS community. It's easy to find answers to most questions with a simple search through a search engine, Reddit, or Stack Overflow, and it's not difficult to find a quick template that can get most people up and running in a few minutes. There are many single-click deployment templates that use NextJS and Vercel to spin up new projects quickly.
NextJS is created by the team at Vercel, which is a frontend cloud designed to get Next.js projects up and running quickly. Vercel has a lot of motivation to make sure Next.js is a solid tool for developers, but some believe this relationship locks you into Vercel if you want to deploy a Next.js project. It's true that it can be difficult to self-host if you're not familiar with it, but several options exist that allow you to deploy from your git repository. Some examples include Railway, Netlify, and Digital Ocean, each with their own strengths and weaknesses.
Features
So what makes Next.js special? We'll dive into each of these features more as we go through this series, but I can start with something I mentioned before: Next.js allows you to get started right away without worrying about too much configuration of a new project. The things that slow many developers down like bundling and compiling are taken care of for them. I will say, though, that developers who don't understand fundamental React will be at a disadvantage when getting started with Next.js.
Next.js features a file-system based router, which is built on top of server components. This routing system supports layouts, nested routes, loading states and suspense, error handling and more. The routing system is also responsible for redirecting and navigating, so it's easy to say that Next.js has robust capabilities when it comes to this feature.
Client-side and server-side rendering come included with Next.js with client and server components from React. Going a level deeper, you're also able to optimize these components further with static site generation or dynamic rendering down to the page level.
A quick note here on client-side rendering, or CSR. There is some concern here that CSR negatively impacts SEO because some search engines rely mostly on HTML to read a site, but CSR relies on JavaScript. Modern search engines can and do render JavaScript now, so this is less of an issue when it comes to indexing. That said, you should still do as much server-side rendering as possible for your pages that prioritize SEO just to make things easier. But, don't be afraid to use client components to add functionality to your site for fear that it'll negatively impact SEO, it won't.
Next.js makes data fetching simple by using server components that allow for async/await fetch API calls. Server components are the preferred way to fetch data, as it can result in faster load time as well as better-protected credentials, but it's still possible to add client side fetch calls for things like infinite scrolling and more.
Developers have the flexibility to choose how they style their projects, too. While Next.js enforces its opinions about how React should be used, it doesn't for how CSS should be used. You can use TailwindCSS, CSS modules, and more.
Out-of-the-box, Next.js provides optimizations for images, fonts, and scripts that you opt into by simply using the built-in components within Next.js. You don't need to opt into these if you have your own solutions, which is just another way Next.js adds flexibility to your project.
The last feature I'll discuss in this video is Next.js's TypeScript support. TypeScript allows you to stay type-safe in your project and ensures the whole process from development to deployment to optimization goes well..
How does it work?
So how does all this work? Next.js breaks their architecture into 4 areas: accessibility, fast refresh, compiler, and supported browsers. Let's start by talking about accessibility.
Accessibility
The Next.js team has added accessibility features to the framework by default. That means you don't need to configure anything to start developing even if you typically develop with accessibility features enabled. Beyond that, the Next.js team has made it easier to design the web for end users who need accessibility features.
One major way Next.js does this is through route announcements with screen readers. As a user goes from page to page, Next.js looks to the meta title, h1, or pathname to announce what page the user is going to. Next.js can do this with routes both on the server using the traditional anchor tag as well as on the client side with their link component.
Lastly, Next.js enables linting for accessibility by default to help catch accessibility issues early. This helps remind you that you need to add alt tags to images, use aria attributes correctly, and include role attributes when necessary.
Fast refresh
Fast refresh is a React feature that Next.js has enabled by default since version 9.4. This reloads your browser's page while maintaining your client-side state when saving changes to a file. This helps speed up development by allowing your changes to be reflected on your development server in near real-time.
This also helps when you run into errors. You don't need to reload your app anytime you run into a syntax or runtime error. Simply fix the error as it shows in the error message, and save your file again. As long as you fix the error, everything will refresh without having to restart your server.
However, if you do want to force a full reload each time you edit a file, you can add the JavaScript comment // @refresh reset anywhere in your file to disable fast refresh. This is local to the file, so you'll need to add this anywhere you want to use it.
Compiler
Next.js's compiler is written in Rust and allows Next.js to minify your code for production, and it is enabled by default since Next.js 12. Babel and Terser are replaced by SWC, which is a Rust-based platform built to help speed up the development process. The Next.js team claims that their compiler is 17 times faster than Babel. However, if you already have a Babel configuration or use unsupported features, you will be opted out of the Next.js compiler and use Babel instead.
Support
Browsers
Next.js supports all modern browsers by default. That means Chrome version 64+, Edge 79+, Firefox 67+, Opera 51+, and Safari 12+ are all supported. You can target specific browser versions by setting the "browserlist" configuration in your package.json.
JavaScript Features
You're also able to use all the latest JavaScript features with no configuration. That means things like async/await, spread operators, dynamic imports, optional chaining, and more are all available to you.
Final Thoughts
And that's it for what Next.js is. In later guides, we'll be going over when you should consider using Next.js, how to get started with it, and then I'll dive deep into individual features that Next.js has to offer.