First, create an empty project folder and initialize npm in it:

$ mkdir next-js-condensed
$ cd next-js-condensed
$ npm init

After that, let's install the Next.js package:

$ npm install nextjs@latest --save-dev
$ npm install react@latest react-dom@latest --save

We save Next.js to devDependencies to clearly separate dependencies for the client and for the server. Server-side dependencies will be in the devDependencies section; the client's will be in the regular section.

If you're using Git or any similar source control tool, it makes sense to add an ignore file that will remove the build artifacts folder from source control. We show an example .gitignore file here:

.DS_Store
.idea
.next
.vscode
build
coverage
node_modules
npm-debug*
out
yarn-debug*
yarn-error*

In order to start the server, by convention we need to define a start script in package.json, so we will add the following there:

{
  "scripts": {
    "start": "next"
  }
}

Now, you can start the server by typing this in the console:

$ npm start

Now, if you visit http://localhost:3000 in your browser, you will see the running server.

Now, let's create the first page and place it in the pages folder:

// pages/index.js
import React from "react";
export default () => (<div>Hello, World!</div>);

Now, if you run the dev server (npm start) and visit http://localhost:3000, you will see this page:

Now, let's see how Next.js handles errors in your files:

// pages/index.js
import React from "react";
export default () => (<div><p>Hello, World!</div>);
//                          ^ here we purposely not closing this tag

Then, reload the page to see this:

Next.js supports two kinds of production usage, static and dynamic, the main difference being that a static build can be served by any static HTTP server as a static website, whereas dynamic usage means that there will be a Next.js server that executes the production build:

1. Static mode is best suited for simple websites with no dynamic content. We need to add a script to package.json:

      {
        "scripts": {
         "build": "next build",
         "static": "next export"
       }
     }

2. Then, we have to add a next.config.js with a path map (this was fixed in 6.0.0; you no longer have to do it for 1-1 matches of filesystems and URLs):

      // next.config.js
      module.exports = {
          exportPathMap: () => ({
              '/': {page: '/'}
          })
      };

3. Now...

Now that we know how to make Next.js routing, let's make another page:

// pages/second.js
import React from "react";
export default () => (<div>Second</div>);

This new page is accessible via http://localhost:3000/second.

Now, let's add a link to that second page to the index page.

1. In order to do proper client-side navigation, we need to import a link component from Next.js:

      // pages/index.js
      import React from "react";
      import Link from "next/link";
      export default () => (<div><Link href...

Of course, no real app can live with only static URLs based on just pages, so let's add a bit of dynamic routing to our app:

1. Let's start with a small data source stub:

      // data/posts.js
      export default [
          {title: 'Foo'},
          {title: 'Bar'},
          {title: 'Baz'},
          {title: 'Qux'}
      ];

2. Now, let's connect it to our index page:

      // pages/index.js
      import React from 'react';
      import Link from "next/link";
      import Nav from "../components/Nav";
      import posts from "../data/posts";

      export default () => (
          <div>

              <Nav/>

              <hr/>

              <ul>
            {posts.map((post, index) => (
                <li key={index}>
                    <Link href...

If you look at the location bar of the browser when you visit the second page, you'll see something like http://localhost:3000/second?id=0, which is fine, but not pretty enough. We can add some niceness to the URL schema that we use. This is optional, but it's always good to have SEO-friendly URLs instead of query-string parameters.

In order to do that, we should use a special as prop of the Link component:

<Link as={`/post/${index}`} href={{pathname: '/second', query: {id: index}}}>
    <a>{post.title}</a>
</Link>

But, if you visit such a link and reload the page, you will see 404 Page Not Found error. Why is that? It's because URL masking (a technology we just used) works on the client side at runtime, and when we reload the page we need to teach the server to work with such...

Even though Next.js can split your app into route-based asynchronously loaded chunks, it is always a good idea to split further if it is needed. The less unnecessary code the user loads up front, the better.

The technique is very simple and completely supported by Next.js:

import dynamic from 'next/dynamic';

And then, anywhere on demand, we can do the loading:

import dynamic from 'next/dynamic'

const FooDynamic = dynamic(import('../components/Foo'))

export default class Page extends React.Component {
  
  state = {show: false};
  
  show = () => this.setState({show: true});
  
  render() {
    return (
      this.state.show ? <FooDynamic/> : <button onClick={this.show}>Show!</button>
    );
  }

}

Here, the component will not be loaded until it is actually placed on the page (that is, rendered...

There are many ways a Next.js app can be styled.

The simplest way is to use inline styles. Obviously, this is the worst possible way, but we'll start small:

const selectedStyles = {
    fontWeight: 'bold'
};

const regularStyles = {
    fontWeight: 'normal'
};

const Btn = ({href, onClick, children, pathname}) => (
    <button style={pathname === href ? selectedStyles : regularStyles}}>
        {children}
    </button>
);

Obviously, this does not scale at all. Luckily, Next.js offers a technique called JSS (one of many ways to have CSS in JS), and JSS can be used straight inside JSX to define styles:

// components/button.js
import React from 'react';
import {withRouter} from 'next/router';

export default withRouter(({href, onClick, children, router}) => (
    <span>
        ...

Generally speaking, it's better to refer to images from CSS so that the entire presentation layer is configured in one place. It's usually a red flag when you want to insert an image in a JS component. We're not talking about image URLs coming from API responses; those are always inserted dynamically.

In this case, you should just refer to an image as you normally do. Next.js and Webpack will take care of this, and if the image is small enough, will even Base64-encode it and put it inline in CSS.

As a quick reference, let's add an icon to a Nav component:

// components/Nav.css
.logo-css {
    background: url(/static/js.jpg) no-repeat center center;
    background-size: cover;
}
.logo {
    background: url(/static/js.jpg) no-repeat center center;
    background-size: cover;
}

We must place the image in the static...

There are many graph/chart libraries available on the market, but for the sake of an example, we will use the one that is truly React-based and can deliver high performance.

1. The first step, as usual, is installation:

      $ npm i react-vis --save

2. Next, let's create a simple graph on the index page.

We need to add library styles (this assumes that you have added the with Css plugin in the previous step):

      import "react-vis/dist/style.css";

3. Next, let's implement a simple graph; we should import the required parts:

      import {HorizontalGridLines, LineSeries, XAxis, XYPlot, YAxis} from 'react-vis';

4. Then, we can add a graph implementation, so the resulting page will look like this:

      // pages/index.js
      ... other imports
      import {HorizontalGridLines, LineSeries, XAxis, XYPlot, YAxis} from...

In this chapter, we learned how to create pages, add components to them, make styles, and insert different kinds of media. In the next chapters, we will address more advanced topics, such as configuration.