## Introduction Next.js is a framework for quickly building universal (also called Isomorphic) server-rendered web apps with React. In this tutorial you will learn essential concepts of server-rendered React apps by creating a demo app with Next.js. Building apps with Next.js is simple. You just create a pages directory and place React components in it. Next.js will take care of everything else. This tutorial was originally published in [techiediaries](https://www.techiediaries.com/universal-react-apps-nextjs/) Now let's get started First we need to install the required tools: ## 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 () => (

Home - About Me - Contact

This is the home page

) ### 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 () => (

Home - About Me - Contact

This is about page

) ### Adding the Contact Page Add contact.js file inside pages folder then put the following: import Link from 'next/link' export default () => (

Home - About Me - Contact

This is the contact page

) Now you can launch next with: npm run dev Your app will be available from [http://localhost:3000](http://localhost:3000). As you can see the names of files inside pages directory become the routes except for / which points to index.js ## Conclusion Universal apps become very popular in these days and thanks to React and Next.js you can build them in a matter of a few commands. Thanks for reading!

Library Tutorials