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 [email protected] 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
Most Popular Posts
Anguar 12 New Features 10+ Best Anguar 9/10 Templates for Developers 3+ Ways to Add Bootstrap 4 to Angular 10/9 With Example & Tutorial Angular 11 CRUD REST API Angular 11 Tutorial with HttpClient Routing and Navigation with Angular 11 Router Full Vue 3 Tutorial by Example CSS Centering CSS Grid Layout Tutorial Adding Comments to JSON How to Delete Local/Remote Git Branches Webpack Tutorial for Angular Developers GraphQL Tutorial for Angular Developers Git and GitHub for Angular Developers Bootstrap 5 with Sass and Gulp 4 Tutorial by ExampleReact Newsletter
Get our React Native book for free!