What Next.js Has to Offer React Developers
Tags: javascript, nextjs
Published: 2023-06-23 15:26:39

*This article was originally written by [Jeffery Morhous](https://www.honeybadger.io/blog/authors/jefferymorhous/) on the [Honeybadger Developer Blog](https://www.honeybadger.io/blog/what-nextjs-has-to-offer-react-devs/).*

Next.js is one of the hottest web frameworks of 2022. It supplements React applications with server-side rendering, static site generation, and more. Picking and choosing which parts of the site to generate on the server rather than on the client can speed up your site while maintaining usability.

Developers familiar with React will find getting started with Next to be not too big of a stretch, and migrating existing apps just as approachable.

Many companies are already using Next.js in production at scale, such as Netflix, Uber, Hulu, and more!

In this article, we'll explain what Next.js is and how it differs
from React. You'll also learn what makes Next.js so great, see
how to migrate from Create React App, and get hands-on experience with building your own blog with the framework.

## Why Next.js?

React is an incredibly popular and powerful JavaScript library. However, using React to run production applications often requires
some additional dependencies. Traditionally, it's been popular for developers to use Create React App to bootstrap their application,
as it comes with a webpack, Babel, ESLint, and a few other dependencies. Middleware, Typescript support, and routing all ship
with Next.js as zero-configuration development tools.

Next.js expands on React's capabilities, introducing a framework for creating apps that are rendered on the server. It contrasts
with Create React App, which pushes the responsibility of rendering all pages to the browser.

### Server-Side Rendering

Server-side rendering (SSR), is not a completely new concept. By doing a lot of the computational
work a single time on the backend, pages are quickly loaded in the browser. Sending less JavaScript code
to be executed on the browser shifts that responsibility to the server, which means it can benefit from doing something
once and repeating it multiple times.

Static generation is similar; in many cases, content doesn’t change between application builds. Static content can be generated once and served to the client upon request in a system that resembles a cache. These pages can even be hosted on a CDN and delivered to the client
even faster. Still, many pages on a React site will have pages with dynamic content, which can still be rendered on the server
and delivered to the client.

### Speed and Search Engine Optimization

Beyond elevating the user experience, another clear benefit of speeding up the rendering of a website is search engine
optimization (SEO). Speed is so important to ranking well on search engines that it’s included in Google’s published description of
what their indexers use to rank websites for performance, called [Core Web Vitals](https://web.dev/vitals/).

Having a performant website and high Core Web Vitals scores does not guarantee a good ranking in search results, but a slow website
will disqualify itself from ranking well. Search engine companies, Google in particular, want users to be happy with the results
shown, and speed is a huge factor in that. Speeding up your React site by leveraging Next.js is a good way to secure a double
win with happier users and better search rankings.

## Incrementally Adopting Next.js from Create React App

If you're already running React in a production application at scale, you're probably not too excited about a major migration.
Fortunately, Next.js is built in a way that **it can be incrementally adopted into an application**.

Migrating from Create React App introduces risk due to the scope of the change, but also requires development time that may be needed to continue work-in-progress.

Migration to Next.js from Create React App begins with removing `react-scripts`. This can be done by running the following in your project directory:

```bash
npm uninstall react-scripts
```

Next, install Next.js in your project directory by running the following:

```bash
npm install next
```

Then, update the scripts section of `package.json`. Replace the `scripts` section with this:

```json
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}
```

Next, you'll change how the `public` directory is used. Move all static assets, including images, into this directory.

The `index.html` file should be moved to the root directory. This should be changed to match Next.js standards,
which involves extracting code from `<head>` into a new `_document.js` file.

Next.js comes with its own file-based routing, so if your project is using React Router, it can be removed as a dependency.
Instead, you'll create a new `pages` directory. Move `App.js` to the `pages` directory and rename it `index.js`.

If your application uses React Router extensively, the maintainers of Next.js have written a more in-depth guide
on [migrating to Next.js' file-based routing](https://nextjs.org/docs/migrating/from-react-router).

[The Next.js guide on migrating from Create React App](https://nextjs.org/docs/migrating/from-create-react-app)
goes more in depth on each of these topics and even discusses ejecting Create React App.

## Creating a New Next.js Application

Next.js is easier to adopt in a new application, and some even consider it easier to use than Create React App due to the zero-config setup process.

You can find the code in this section on [GitHub](https://github.com/JeffMorhous/honeybadger-nextjs-blog-example).

### Basic Environment Setup

If you don't already have Node.js installed, you'll need to install it. On Mac, it's easiest to install it with [Homebrew](https://brew.sh/) by running the following:

```bash
brew install node
```

If you haven't already, install the npm package called `npx` by running the following:

```bash
npm install -g npx
```

### Bootstrap the Application

Finally, you can create a new React app with Next.js by running the following:

```bash
npx create-next-app@latest
```

Once that finishes, you can run your development server with one of the scripts. In the new project directory created by the wizard, run the following:

```bash
npm run dev
```

Visiting `localhost:3000` in your browser should show you your new app!

![Next.js Template Homepage](https://www.honeybadger.io/images/blog/posts/what-nextjs-has-to-offer-react-devs/new-app.png "Next.js Template Homepage")

## Using Next.js to Build a Static-Site Blog with Some React Parts

Without much effort, you can turn your newly created Next.js app into a well-designed blog.

### File-Based Routing

Because Next.js uses file-based routing, the URL of a page is typically its relative file path from the
`pages` directory. Inside your pages directory, make a new directory called `blog`. You can do this from
the command line by running the following:

```bash
mkdir pages/blog
```

Inside the new directory, create a new file for a blog post, called `pages/blog/i-learned-next.js`.

Inside the new file, create a new React component with just an `h1` tag that looks like this:

```react
export default function ILearnedNextJS() {
  return <h1>I Learned Next.js</h1>;
}
```

Visiting `localhost:3000/blog/i-learned-next` takes you to your new page and demonstrates Next's zero-config file-based routing.

### Blogging in Markdown

Next.js pre-renders every page by default, generating HTML and only the essential JavaScript. When pages are loaded, JavaScript "hydrates" the page, making it the interactive application
one would expect. This results in faster load-times, leading to happier users and better SEO. The pre-rendering takes place as either static generation, for pages that don't change often, or
server-side rendering, which is slower but allows for dynamic content.

To implement static generation in Next.js, simply use the `getStaticProps` method in a page. `getStaticProps instructs Next.js to resolve dependencies at build-time, fetching data before
creating the HTML.

We can take advantage of this to fetch-blog content from markdown files, enabling a cleaner writing experience. Start by creating a new directory in the root of your project to store
the files:

```bash
mkdir markdown
```

Inside this markdown folder, create a new file called `i-learned-next.md`. In this file,
paste the following markdown:

```markdown
---
title: 'I learned Next.js'
date: '2022-09-03'
---

I spent some time learning Next.js. The Honeybadger blog is a great
place for me to learn new programming things, and Jeff is my favorite
author there.
```

Next, install a package that will help us parse the header information from the markdown blog posts.

```bash
npm install gray-matter
```

Finally, we'll need to create a file that can parse the markdown. Start by creating a new `lib` directory:

```bash
mkdir lib
```

The Next.js website offers a wonderful example of a function that parses markdown metadata and returns a list of posts, as well as a few other functions. We'll copy that. In `lib`, create
a file called `posts.js` and paste the following:

```react
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

const blogDirectory = path.join(process.cwd(), 'blog');

export function getSortedPostsData() {
  // Get file names under /posts
  const fileNames = fs.readdirSync(blogDirectory);
  const allPostsData = fileNames.map((fileName) => {
    // Remove ".md" from file name to get id
    const id = fileName.replace(/\.md$/, '');

    // Read markdown file as string
    const fullPath = path.join(blogDirectory, fileName);
    const fileContents = fs.readFileSync(fullPath, 'utf8');

    const matterResult = matter(fileContents);

    return {
      id,
      ...matterResult.data,
    };
  });
  // Sort posts by date
  return allPostsData.sort(({ date: a }, { date: b }) => {
    if (a < b) {
      return 1;
    } else if (a > b) {
      return -1;
    } else {
      return 0;
    }
  });
}


export function getAllPostIds() {
  const fileNames = fs.readdirSync(blogDirectory);

  return fileNames.map((fileName) => {
    return {
    params: {
        id: fileName.replace(/\.md$/, ''),
    },
    };
  });
}

export async function getPostData(id) {
  const fullPath = path.join(blogDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');

  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents);

  // Use remark to convert markdown into HTML string
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();

  return {
    id,
    contentHtml,
    ...matterResult.data,
  };
}
```

At the top of `page/index.js`, paste the following:

```react
import { getSortedPostsData } from '../lib/posts';

export async function getStaticProps() {
  const allPostsData = getSortedPostsData();
  return {
    props: {
      allPostsData,
    },
  };
}
```

This calls the `getSortedPostsData()` function at build-time, generating an array of all
the posts called `allPostsData`.

`getPostData` uses `remark` to display the actual text, so we'll need to install it:

```bash
npm install remark remark-html
```

### Display a List of Blog Posts

Your `index.js` has everything needed to display the blog posts in the `markdown` directory. You'll simply pass allPostsData in as a prop to the `Home` component and display each post
in a loop. Your `Home` component (inside `index.js`) should look like this:

```react
export default function Home({ allPostsData }) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Jeff's Blog</title>
      </Head>

      <main className={styles.main}>
        <h2 className={styles.title}>Blog</h2>
        <ul className={styles.description}>
          {allPostsData.map(({ id, date, title }) => (
            <li key={id}>
              <Link href={`/blog/${id}`}>
                <a>{title}</a>
              </Link>
            </li>
          ))}
        </ul>
      </main>
    </div>
  )
}
```

This code displays a "Blog" header and creates a dynamic list of blog posts with links to them.

### Display a Blog Post

First, delete the previously created `i-learned-next.js`. In its place, create a file
in the `blog` directory called `[id].js`. In this file, paste the following code:

```react
import { getAllPostIds, getPostData } from '../../lib/posts';

export async function getStaticProps({ params }) {
  const postData = getPostData(params.id);
  return {
    props: {
      postData,
    },
  };
}

export async function getStaticPaths() {
  const paths = getAllPostIds()
  return {
    paths,
    fallback: false
  }
}

export default function Post({ postData }) {
  return(
    <div>
      <h1>{postData.title}</h1>
      <br />
      <h2>{postData.id}</h2>
      <br />
      <h3>{postData.date}</h3>
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
    </div>
  )
}
```

This simply calls the methods in `posts.js` to fetch the id and post data for the blog post. It then renders the title, ID, and date. Next, it follows the metadata and displays the post content, translating markdown to HTML!

## Conclusion

By now, you should have a functioning Next.js application that statically generates pages from blog posts written in markdown. Your existing React applications can benefit from the static-site generation or server-side rendering that makes Next.js such an incredible framework. If you're starting from scratch, the framework's zero-config setup makes it easy to start
making a fully featured web application that picks and chooses what pages get rendered based on maximum utility for the user. If you followed along with creating your own blog, you can take what you've learned and develop it into your own production application!