What is Next.js?

Next.js is a React framework. React is arguably the best JavaScript framework out there, with a few key metrics that back that up.

It has led the user satisfaction category for frameworks 3 out of the last 5 years, coming in first in 2016, 2017, & 2019, and second in 2018 & 2020 according to the State of JS. React also leads the pack of JavaScript frameworks in job postings, with only Angular coming close but having a much lower user satisfaction rating (88% user satisfaciton for React vs. 42% for Angular).

So, you could spend your time learning Angular and you may or may not like it (I have no experience with it, but have heard... not great things), or you could learn another framework highly rated by users like Vue or Svelte, but there are a lot less job postings out there for those. When it comes to a JavaScript framework that is both in-demand and user-friendly, React is a great choice.

There are plenty of reasons for this: React is relatively easy to learn and use if you know both JavaScript and HTML, (which you should before getting into a JavaScript framework in the first place), there's a robust community, great developer tools, the reusable components make things easier to develop and maintain, the virtual DOM provide higher performance and a clean user experience, etc. There are, however, a couple of problems related to rendering all the content on the client-side as React does. First, before the content loads all the JavaScript must load, and your application needs to run to determine what to show on the page, so the page takes longer to become visible to the user. Second, there are some content SEO issues with JavaScript apps. Google bots can easily scan and understand HTML pages, but when it comes to pages with JavaScript, the process of indexing gets slower and more complex, and a single error in JavaScript code can make indexing impossible.

Next.js is a framework for React that provides a solution to both of these problems out of the box with server rendering (also called static pre-rendering). It also provides solutions for code bundling, compiling, and code splitting; as well as a host of other handy built-in features, like support for SASS or any CSS-in-JS library, automatic routing, hot reloading, and more. Next.js offers a great developer experience, lightning fast and easy deployment through Vercel (makers of Next.js as well) and is used in many big websites like: TikTok, Netflix, Twitch, Hulu, Nike, Ticketmaster, Audible, and many more. 

After being interested in Next.js for some time, I decided to dip my toes in this week and go through some of their documentation and learning modules, which take you through building a blog site and give you exposure to the setup of Next.js and some of the prominent features. In very little time I had a lightning fast blog site with dynamic routing up and deployed by Vercel. You can check it out at: https://www.kennyporterfield.dev. It's currently just a blog, but I plan to work on some other React/Next projects and hosting them there in the future, as I don't really need two blogs. In this post though, I'm going to walk through at a high level what that was like.

Getting Started

To get started with Next.js, assuming you have Node installed, you go to your directory of choice in your terminal, and enter the following command:

npx create-next-app my-app

Now you should have a new directory called whatever you specified (my-app). From inside that directory, you can run the command:

npm run dev

This starts your Next.js app’s development server on port 3000 (http://localhost:3000/). You should see there the starter page for Next.js which looks like this:

The page you're looking at is located at pages/index.js. If you go there in your code editor and start making changes, you'll notice that the browser will update automatically, almost instantly. This is due to Next.js's Fast Refresh feature, and is super handy for viewing any updates you make.

Routing

Next.js has a file-system based router built on the concept of pages. A page is a React Component exported from a file in the pages directory. The component can have any name, but you must export it as a default export. When a file is added to the pages directory it's automatically available as a route based on its file name. You can add more folders in the pages directory and they will be part of the route as well. For example, you can go into pages, create a folder called favorite , and a file inside of that called animals. export default a React component with JSX in it, go to http://localhost:3000/favorite/animals and see whatever you put there. T So if you just added a header that says "My favorite animals are turtles" by adding:

export default function FirstPost() {
  return <h1>My favorite animals are turles</h1>
}

Now if you go to http://localhost:3000/favorite/animals you should see:

The Link Component

The Link Component is what allows you to do client-side navigation to a different page in the application. Client-side navigation means that the page transition happens using JavaScript, which is faster than the default navigation done by the browser. When linking between pages on your Next.js website, you need to import the Link Component from next/link and wrap your a tags in a Link tag and put the href inside of it, like this:

import Link from 'next/link'

export default function FirstPost() {
  return (
    <>
      <h1>My favorite animals are turtles</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  )
}

This will link us back to our homepage, and on our index.js page we could import the Link Component as well and add the following somewhere in the component to get back to the page we created:

import Link from 'next/link'
.
.
.
<Link href="/favorite/animals">
  <a>Favorite Animals</a>
</Link>

There are some really nice benefits to the routing system with the Link Component in Next.js.

• Next.js automatically does code splitting, so each page only loads what’s necessary for that page. That means when the homepage is rendered, the code for other pages is not served initially. This ensures that the homepage loads quickly even if you have hundreds of pages.
• Only loading the code for the page you request also means that pages become isolated. If a certain page throws an error, the rest of the application would still work.
• In a production build of Next.js, whenever Link components appear in the browser’s viewport, Next.js automatically prefetches the code for the linked page in the background. So by the time the link for a page is clicked, the code for the destination page will already be loaded in the background, and the page transition will be near-instant.

Next Steps

Now that we've introduced Next.js, talked about and seen some of the benefits it provides, have gotten started with a Next.js app, and know how to navigate between pages, I think that's a good stopping point for this blog post. I will follow up with another post on the big feature of Next.js, server side rendering, as well as some other topics to cover in Next.js to really get going with it.