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

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status