Announcing THE Book on Server Side Rendering for React with Next.js

Celý článek

With the high demand for SEO and high-performant web application, server-side rendering has become innevitable for commercial websites since they need to be found and ranked higher than their competitors.

Building SSR with frontend frameoworks/libraries like React is quite challenging and the flow can get tricky.

Next.js is a platform that simplifies SSR and helps the developr focus on just building a React app.

Why NextJS

Next.js was built to bridge the gap between frontend and backend development. Since it is built on React, there is a really low learning curve for frontend developers who want to start building fullstack Javascript web applications. It also has some incredible features that come built in.

Here’s a list of some Next.js features:

• Ease of use
• Automatic code splitting for faster page loads
• Simple client-side routing
• Server-side rendering and prefetch
• Easy to implement with Express and other Node.js HTTP Server

We will not go through all of them in this article but extra resources would be made available for further perusing

The Next.js Book

This book is first of its kind and covers everything you need to know on building Next.js while teaching a lot of modern practices for building web apps.

Some of the topics you will enjoy learning include:

• React fundamentals (refresher)
• Server side rendering
• Optimization
• Media transformation and optimization for speed
• Offline capabilities
• Data with GraphQL
• Data with Rest
• Isomorphic data fetching
• Authentication and security, etc

A Simple NextJS Example

To give you a fair idea of now Next.js works, we are going to take a practical example.

Installing Next To get started using Next, you can use the Create Next App, but to give you a more practical guide, let’s go through a manual installation. Create a new directory for our starter project:

mkdir next-starter && cd next-starter

Initialize your node project:

npm init -y

Now, install the next , react and react-dom:

npm install next react react-dom

You will also need to create a pages folder in the root of your application:

mkdir pages

we will talk about the pages folder in depth later on in the article

When this is done, you will need to add a line to the package.json file that would run our next server:

    {
      "name": "next-starter",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "next"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "next": "^6.0.0",
        "react": "^16.3.2",
        "react-dom": "^16.3.2"
      }
    }

Now, you can start your server by running the command:

npm run dev

This will start your development server at http://localhost:3000. When you open the URL in your browser, you get this:

Creating Routes

You’re getting this 404 error because we have not created any new routes. In Next.js, you create routes by creating new pages. All the routes for your application will be stored in the pages directory. Let’s create a new index route for our application as follows:

    cd pages
    touch index.js

Edit the index.js file to look like this:

    // pages/index.js
    import React from 'react';
    class Index extends React.Component {
      render() {
        return (
          <h1>Welcome to Next.js</h1>
        );
      }
    }
    export default Index;

Now, when you save your file, and you head back to the browser, you get the following

Linking Pages

Next comes with a Link component built in that allows users to easily navigate across pages on the client. If you use the <a> tags for your links, you will be navigating to the page via the server and that defeats the whole point.

To see this at work, let’s create a new about route and link the index route to it. When you add the link component, your index.js will look like this:

    import React from 'react';
    import Link from 'next/link';
    class Index extends React.Component {
      render() {
        return (
            <div>
                <h1>Welcome to Next.js</h1>
                <Link href="/about">
                    <a>Read about Next</a>
                </Link>
            </div>
        );
      }
    }
    export default Index;

We also need to create the about page. To do that, create a new file in the pages directory:

touch about.js

And add the following to it:

    import React from "react";
    import Link from "next/link";
    class About extends React.Component {
        render() {
            return(
                <div>
                    <h1>About Page</h1>
                    <Link href="/index"><a>Home</a></Link>
                </div>
            );
        }
    }
    export default About;

You may be asking “how does this come in handy”. When you use the Link component from Next, you have the ability to prefetch routes. When you add prefect to your route like this:

<Link prefetch href="./about"><a>Read about Next</a></Link>

Next goes as ahead and automatically loads the JavaScript for that route with the use of service workers .

Just the Tip of the Iceberg

You have just seen the most basic example of Next.js. There are tons of features to explore that make building user experience much faster and easier. The Hands on Next.js book will teach you practical Next.js by showing you how to build cool sample apps an Airbnb clone, an online store and a blog.