Building Universal Server Rendered Apps with React and Next.js 3.0

Next.js is a framework for quickly building universal (also called Isomorphic) server-rendered web apps with React. In this tutorial I'm going to get you started with Next.js to build an example demo app showing the essential concepts of server rendered React apps.

Building apps with Next.js is dead easy, you just create a pages directory and place React components in it. Next.js will take care of everything.

Now lets get started

Installing Next.js 2.0

You can install Next.js 2.0 via npm with:

npm install --save next react react-dom

Installing Next.js 3.0

Next.js 3.0 is still in beta, you can also install it via npm with:

npm install next@beta react react-dom --save

Adding NPM Scripts to package.json

Building apps with Next.js is a matter of using three commands:

next
next build
next start

So lets add NPM scripts to trigger these commands:

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

Adding Pages

To create pages you first need to create a pages directory:

mkdir pages

Adding the Home Page

Create an index.js file inside pages folder and put this content in it:

import Link from 'next/link'
export default () => (
<div>
            <Link href='/'><a>Home</a></Link> -
            <Link href='/about'><a>About Me</a></Link> - 
            <Link href='/contact'><a>Contact</a></Link>  
            <br></br>
            <p>This is the home page</p>

</div>
)

Adding the About Page

Next create an about.js file inside pages folder then put the following content:

import Link from 'next/link'
export default () => (
<div>
            <Link href='/'><a>Home</a></Link> -
            <Link href='/about'><a>About Me</a></Link> - 
            <Link href='/contact'><a>Contact</a></Link>  
            <br></br>
            <p>This is about page</p>
</div>
)

Adding the Contact Page

Add contact.js file inside pages folder then put the following:

import Link from 'next/link'
export default () => (
<div>
            <Link href='/'><a>Home</a></Link> -
            <Link href='/about'><a>About Me</a></Link> - 
            <Link href='/contact'><a>Contact</a></Link>  
            <br></br>
            <p>This is the contact page</p>

</div>
)

Now you can launch next with:

npm run dev

Your app will be available from http://localhost:3000.

As you can see the names of files inside pages directory become the routes except for / which points to index.js

  • Author: Techiediaries Team