Next JS

Getting Started

System Requirements

Node.js or later
MacOS, Windows (including WSL), and Linux are supported

Setup

We recommend creating a new Next.js app using create-next-app, which sets up everything automatically for you. To create a project, run:

npx create-next-app

# or

yarn create next-app

After the installation is complete, follow the instructions to start the development server. Try editing pages/index.js and see the result on your browser.

For more information on how to use create-next-app, you can review the create-next-app documentation

Change Scripts of package.json
Add these scripts to the scripts section of package.json. Then, we can run the code with the command npm run dev.

//package.json

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

Routing
Next.js has file-system based router built on concept of pages. So, we need to create a folder named pages and whatever the name of the file would be, the same would be the name of route. You will know better about it when we make use of this concept.
We will be creating two pages, one would be the home page and another would be about page.
So, let’s create index.js file inside the pages directory with simple welcome text.

//pages/index.js

const Index = () => {
return (
<div>
<h1>Welcome to Next Application</h1>
</div>
);
}

export default Index;

Now, create about.js file inside same pages directory with following code.

//pages/about.js

const About = () => {
return(
<div>
<h1>
About NextJS
</h1>
<p>Application to Demonstrate NextJS Basics</p>
</div>
);
}

export default About;

f you haven’t run the project yet, then run with npm run dev command. you will see the home page because index.js will take ‘/’ route. For now add ‘/about’ to the url to navigate to about page. We will build a navigation sections with bootstrap later on.

Components
We can create the components in Next.js same as of react. So, let’s create Navbar component and the Layout component which includes layout of our simple demo application.
First, let’s create the Navbar Component. So, we create folder named components to the root of the project. Inside components folder, create navbar.js file which includes navigation menu for the project and also include bootstrap CDN for better design. Also, we are going to implement styled jsx just to demonstrate how they are used in next.js. These styles would be available to only this component.

//components/navbar.js

import Link from 'next/link';const Navbar = () => {
return(
<div>
<ul>
<li><Link href="/"><a>Home</a></Link></li>
<li><Link href="/about"><a>About</a></Link></li>
</ul><style jsx>{`
ul {
background: #333;
color: #fff;
list-style: none;
display: flex;
}ul li {
font-size: 22px;
margin-right: 50px;
}ul li a {
color: #fff;
text-decoration: none;
}
`}</style>
</div>
);
}

export default Navbar;

You can see how router navigation is done with next/link in the above code.
Now, we need to create a layout for the project. So, we will create layout.js file inside the components folder and we will use the navbar component in layouts.

//components/layout.js

import Head from 'next/head';
import Navbar from './navbar';
const Layout = (props) => {
return(
<div>
<Head>
<title>Hello Next.js</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
</Head>
<Navbar />
<div className="container">
{props.children}
</div>
</div>
);
}
export default Layout;

Course in English:

Course in Russian: