• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Codemotion Magazine

Codemotion Magazine

We code the future. Together

  • Discover
    • Live
    • Tech Communities
    • Hackathons
    • Coding Challenges
    • For Kids
  • Watch
    • Talks
    • Playlists
    • Edu Paths
  • Magazine
    • Backend
    • Frontend
    • AI/ML
    • DevOps
    • Dev Life
    • Soft Skills
    • Infographics
  • Talent
    • Discover Talent
    • Jobs
  • Partners
  • For Companies
Home » Frontend » A Quick Guide to NextJS
Frontend

A Quick Guide to NextJS

NextJS is becoming more and more popular among web and UX developers in general because of its ability to act as a “bridge” between the backend and frontend worlds. Read this Codemotion guide to discover how to get started, best practices, key concepts, and more.

March 11, 2022 by Codemotion

How to get started with NextJS Framework
Table Of Contents
  1. What Is NextJS and Why Are People Using It?
    • What Does NextJS do Exactly?
  2. How to Install NextJS
  3. NextJS or Gatsby
  4. The Future of the Web is Here
  5. Sources

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.

reactive programming in distributed architecture
The Next.js Framework provides a solution for the server-side rendering (SSR) of React components.

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.

You need Node.js for getting started with Next.js

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.

Sources

  • Next.js: Getting Started
  • React Website
  • How to Install Next.js
  • Gatsby.js Vs Next.js
  • Why Gatsby?

facebooktwitterlinkedinreddit
Share on:facebooktwitterlinkedinreddit

Tagged as:Frameworks Web Developer

Don’t Miss Codemotion’s First Devs Book Club With Michele Riva!
Previous Post
How to Boost Performance With Lazy Loading
Next Post

Related articles

  • 8 Reasons Why Kids Should Learn to Code
  • A Quick Guide to NextJS
  • The Ultimate Guide to JavaScript | Learn JS to Grow Your Career
  • Kick Off a React JS Project: CRA, Next.js or Gatsby?
  • Why you should learn functional programming
  • Tips For Every Full-Stack Developer In 2020
  • Thinking in Web Component
  • Will Low-Code Take Over the World in 2023?
  • How-To Guide: Creating a Blog in 5 Mins with SvelteKit
  • What’s Coming For Frontend Devs in 2023: Trends and Frameworks

Primary Sidebar

Learn new skills for 2023 with our Edu Paths!

Codemotion Edu Paths for 2023

Codemotion Talent · Remote Jobs

Game Server Developer

Whatwapp
Full remote · TypeScript · Kubernetes · SQL

Back-end Developer

Insoore
Full remote · C# · .NET · .NET-Core · Kubernetes · Agile/Scrum

Full Stack Developer

OverIT
Full remote · AngularJS · Hibernate · Oracle-Database · PostgreSQL · ReactJS

Data Engineer

ENGINEERING
Full remote · Amazon-Web-Services · Google-Cloud-Platform · Hadoop · Scala · SQL · Apache-Spark

Latest Articles

Will Low-Code Take Over the World in 2023?

Frontend

Pattern recognition, machine learning, AI algorithm

Pattern Recognition 101: How to Configure Your AI Algorithm With Regular Rules, Events, and Conditions

AI/ML

automotive software

Automotive Software Development: Can Agile and ASPICE Coexist?

DevOps

programming languages, 2023

Which Programming Languages Will Rule 2023?

Infographics

Footer

  • Magazine
  • Events
  • Community
  • Learning
  • Kids
  • How to use our platform
  • Contact us
  • Become a Contributor
  • About Codemotion Magazine
  • How to run a meetup
  • Tools for virtual conferences

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

DOWNLOAD APP

© Copyright Codemotion srl Via Marsala, 29/H, 00185 Roma P.IVA 12392791005 | Privacy policy | Terms and conditions

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • RSS

DOWNLOAD APP

CONFERENCE CHECK-IN