What Is NextJS and Why Are People Using It?
The continual state of change that the internet has been under since it became widespread has made good web application development something of a moving target. Next.js is a front-end framework that aims to marry the world of UX and backend functionality, and achieves that goal with remarkable effectiveness.
Web developers are constantly striving for the best mix of functionality and good user experience, one significant step forward in this area has been that of single-page applications (SPAs). These improved the user experience by removing the need to reload pages based on the user’s input. Unfortunately, they weren’t perfect, as the implementation meant that much of the content on the page was obscured from search engines. This was because the content was only visible after it was called on by a user action, which search engine web crawlers don’t execute.
The Next.js Framework provides a way around this conflict with a ready-to-go solution for the server-side rendering (SSR) of React components. React components enable developers to essentially construct self-contained elements that manage their own state, not only allowing for the quick and easy re-use of code but also making it possible to make broad, sweeping changes to a website with very little effort.
Rendering these React components on the server (as opposed to the client) has a number of benefits. Firstly, the page’s load times appear much faster, ensuring the user experience is improved. Secondly, the resulting page is indexable and crawlable by search engines, so the site’s visibility is not negatively affected by switching to React.
What Does NextJS do Exactly?
As mentioned above, the problem with React components is that they can be slower to load and they are opaque to search engines. If you look at the code of a vanilla React page, it is essentially a collection of references that direct the client to a particular React component. The client then has to go retrieve those components and render them, which often leads to a perceptible wait.
Next.js allows for the rendering of these React components on the server before the page is sent to the client. The server will typically render these components more quickly than a client browser could and the result is delivered to the browser where Next.js takes care of the client-side aspect of any dynamic components. This also makes the resulting page crawlable because the React components have essentially been baked into the page—the code of the component is there, rather than a reference to the component.
Of course, the original source code with all the calls to various React components remains, so you will still benefit from being able to implement new features and make changes to existing ones with the same convenience.
How to Install NextJS
If you have decided to take advantage of Next.js, the next step is obviously to install it. Please note that Next.js is compatible with Windows, MacOS, and Linux systems, and the specifics of some of the actions you will need to take will vary depending on the system you are using. For example, creating a new folder in Windows is different to creating a new folder in a headless Linux install.
The first thing you need is the latest version of Node.js. This should make the npm command available in your command line environment of choice. If you struggle with the installation process, Node.js has detailed instructions on its website.
Once you have Node.js installed, create a new folder somewhere on your computer to store your Next.js projects. You can call this folder whatever you like, though it would typically be called something like “nextjs”. Then create a folder inside there with the name of the project you plan to work on.
Next, head into your command line environment—if you haven’t already—and navigate to your new project folder. Once inside the project folder, you need to initialise it as a Node project by typing npm init -y. The npm command initialises a new Node project, while the -y argument tells it to use the default settings.
Now it’s time to install Next and React. From the same location, enter the command, npm install next react react-dom, which should leave you with three items in your project folder;
- package.json
- package-lock.json
- node-modules (folder)
Once that’s done, it’s time to open your project folder in your editor of choice. If you don’t have a preference or aren’t sure what to use, VS Code is a free, lightweight code editor that is available on Windows, Mac, and Linux.
From your editor, open up the package.json file and scroll to the “scripts” variable. Replace the values like this;
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
Code language: JavaScript (javascript)This will add the Next.js build commands that you will be using in your project.
And that’s it; you’re ready to go! Your project is set up with Next.js installed and ready for you to start adding React components. Once you are ready to try your project out, you can open the terminal of your editor and run the command, npm run dev, which should make your app available through localhost on port 3000. Just navigate to localhost:3000 in your browser of choice.
NextJS or Gatsby
While Next.js has many advantages, it is far from the only player in the game. Gatsby.js is another popular framework, but which of them should you use? The answer, like many things in life, depends on your particular circumstances.
Next.js relies on server-side functionality to operate—the server must render the components before sending the page to the client. Gatsby, on the other hand, is entirely client-side, with all of the page generation being handled at build-time rather than runtime.
In short, if you are running a static site, many of the advantages provided by Next.js will be wasted on it as there will be no call for dynamic content. For a more dynamic site, however, Next.js’ implementation makes it more suitable thanks to the runtime build aspect of the framework.
If you were to poll developers right now, there’s a good chance you would find Gatsby coming out on top, but that balance has been shifting, and if Next.js hasn’t already emerged as the framework of preference between these two, it seems sure to do so in the near future.
The Future of the Web is Here
Regardless of which framework you prefer, the trend in web development seems clear—improved user experience without sacrificing the power of a strong backend implementation. Frameworks like NextJS are providing a much-needed bridge between these two historically disconnected aspects of web design and development, and their capabilities continue to grow in line with the underlying technologies that power them.
With every feature and quality-of-life improvement that frameworks like this bring, the web becomes more stable, more future-proofed, and easier to maintain.