Setting up a Basic Next.js Application

Next.js is an end to end framework that is built on top of React.js and Node.js. Which means it is a single framework that stretches over your front and back end. This means most of your front end code looks like React.js and most of your back end code looks like Node.js.

Even though the code looks very familiar, Next.js brings a lot to the table and there are plenty of reasons it is one of the most popular back end javascript frameworks. Here are just a few:

• Zero Configuration. Out of the box Next.js is set up to compile and bundle your code.
• Static Page Generation. It is remarkably easy to set up and easily increase your application's SEO and speed.
• File System Routing. Routing is incredibly simple and helps keep relevant code together.

There are plenty more reasons to use Next.js and you can check them out at their documentation. But I'm going to focus on those three for this article.

Next.js has a command line tool to bootstrap an app for you, but I'm not going to use that here, because I think making it yourself really helps you understand what's going on.

So first, we need to install some packages. npm i next react react-dom That's all we're going to need today. However, we're also going to need to set up our package.json to have our scripts run next commands so add these.

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

• next dev starts up a development server with Next.js
• next build compiles the code for production
• next start starts the Next.js production server

One of Next.js' cool features is Hot Reloading with React Refresh. So you only have to run npm run dev once for this demo and your code will automatically update, it will even attempt to preserve your React State if it can.

Now let's talk about how Next.js handles routing. In your root directory make a pages directory. Now make a file called index.js in there and we're going to make a very basic React component.

const Home = () => (
  <div>
    My Next.js HomePage
  </div>
);

export default Home;

That's all you need. You don't even need to import React. Now if you run npm run dev and navigate to http://localhost:3000 you can see your application.

The pages directory controls routing through file names. So if you put an about.js in your pages directory the url would be http://localhost:3000/about. But it also works with folders so if you made a profile directory in pages and created an index.js in there, its url would be http://localhost:3000/profile.

Next.js also provides a React component to handle client-side navigation. So we could modify our index.js to get around to all our other pages like this.

import Link from 'next/link';

const Home = () => (
  <div>
    My Next.js HomePage
    <Link href='/about'><a>About</a></Link>
    <Link href='/profile'><a>Profile</a></Link>
  </div>
);

export default Home;

This all looks like basic React code so let's spice it up a little with some server code.

Let's make our about page and take advantage of Next.js' Static Page Generation. Static Generation occurs when we build our Next.js application, and it generates the HTML for our page. This means it can be cached by a CDN and crawled by a Search Engine. Which means it's easier for your users to find, and your site loads faster for them as well.

If your page doesn't incorporate any data Next.js is already going to use Static Generation to build it, but it can also do that if you are using data. This is especially useful for things that you don't expect to change often, like blogs or in our example contact information that's stored in a database.

So let's open up our about.js and give it some content.

Don't worry too much about the import at the top here, it's just a database helper to get our users' data.

import userHelpers from '../../database';

const About = ({ users }) => (
  <div>
    About
    <ul>
      { users.map(user => (
        <li key="user.id">
          {user.email}
        </li>
      )) }
    </ul>
  </div>
);

export const getStaticProps = async () => {
  const response = await userHelpers.getAllUsers();
  const users = JSON.parse(JSON.stringify(response));
  return {
    props: {
      users,
    },
  };
};

export default About;

Notice that we have our React code up at the top taking in props, this all looks very familiar. But down below we have getStaticProps this is server side code that we can write here since it pertains to this page and when Next.js builds our application it won't bundle it with the client side code so you can even use database helpers. Next.js is even smart enough to know that we used that import statement in our getStaticProps so don't bundle it with the React code.

So, at build time Next.js takes the props that we return from getStaticProps and passes them into our React function and uses that to generate some HTML for our client.

Hopefully this got you interested enough in Next.js to go give it a try. It has a ton of other really interesting features. Such as dynamic routing through file names, and a way to dynamically pre-render pages for dynamic routes. It can also easily handle Server Side Rendering. And it supports CSS modules right out of the box.

This is only the tip of the iceberg, Next.js has a lot to offer and if you're used to writing React and Node.js code than it's very intuitive and easy to learn.