Building Universal Server Rendered Apps with React and Next.js 3.0
Receive new React tutorials.
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:
Follow @ahmedbouchefraAbout the author
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
Read our other tutorials
- Angular Tutorial
- Laravel 6 Tutorial
- React Tutorial
- React Hooks Tutorial
- React Native Tutorial
- Webpack Tutorial
- PHP Tutorial
- JavaScript Tutorial
- Django Tutorial
- Java Spring Tutorial
- Rails 6 Tutorial
- Ionic 4 Tutorial
- TypeScript Tutorial
- Bootstrap 4 Tutorial
- Electron Tutorial
- Cordova Tutorial
- HTML Tutorial
- GraphQL Tutorial
- CSS Grid Layout Tutorial
- PWA Tutorial
