Now that we have installed the dependencies, let's create our first Next.js application:
- The first thing we need to do is to create some scripts in our package.json. In each script, we need to specify the src directory. Otherwise, it will try to start Next from the root instead of the src path:
"scripts": {
"start": "next start src",
"dev": "next src",
"build": "next build src"
}
File: package.json
- The main directory in Next is called pages. This is where we will include all the pages we want to render using Next:
cd src && mkdir pages
- The first page we need to create is index.jsx:
const Index = () => <h1>Home</h1>;
export default Index;
File: src/pages/index.jsx
- Now let's run our application using the dev script:
npm run dev
- If everything works, you should see this in your terminal:
- Open http://localhost:3000:
Next.js has its own Webpack configuration and hot reloading enabled. That means if you edit the index.js file you will see the changes reflected without refreshing the page.
- Now let's create an About page to see how the routing works:
const About = () => <h1>About</h1>;
export default About;
File: src/pages/about.jsx
- Now you will see the about page if you go to http://localhost:3000/about. As you can see, Next.js automatically creates a new route for each page we have created. This means we don't need to install React Router to handle the routing.
In Next pages, it is not necessary to import React because it is automatically handled by Next as well.
- Now we need to create a next.config.js file and import the withSass method to use Sass in our project. Unfortunately, this file needs to be written in ES5 syntax because the babel extension to use ES6 is not supported at the moment (https://github.com/zeit/next.js/issues/2916):
const withSass = require('@zeit/next-sass');
module.exports = withSass();
File: src/next.config.js
In this file, we can also add custom Webpack configuration if we need it.
- Then we need to create a special file in the pages directory called _document.js. This file is automatically handled by Next.js, and here we can define the head and body of our document:
import Document, { Head, Main, NextScript } from 'next/document';
export default class MyDocument extends Document {
render() {
return (
<html>
<Head>
<title>Codejobs with Next</title>
<link
rel="stylesheet"
href="/_next/static/style.css"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
File: src/pages/_document.js
The path to the CSS file (/_next/static/style.css) is by default; we should use that one to use styles in our project.
- Now we can create some components to wrap up our pages. The first one we need to create is a navbar for menu options:
import Link from 'next/link';
import './Navbar.scss';
const Navbar = () => (
<div className="navbar">
<ul>
<li>Codejobs</li>
<li><Link href="/">Home</Link></li>
<li><Link href="/about">About</Link></li>
</ul>
</div>
)
export default Navbar;
File: src/components/Navbar.jsx
The Link component is not the same as the React Router Link. There are a few differences; for example, the React Router Link uses the "to" prop and the Next Link uses "href" to specify the URL.
- Now we can add Sass styles for our navbar:
.navbar {
background: black;
color: white;
height: 60px;
ul {
padding: 0;
margin: 0;
list-style: none;
li {
display: inline-block;
margin-left: 30px;
text-align: center;
a {
display: block;
color: white;
line-height: 60px;
width: 150px;
&:hover {
background: white;
color: black;
}
}
}
}
}
File: src/components/Navbar.scss
- Then we need to create our Layout component:
import Navbar from './Navbar';
import './Layout.scss';
const Layout = ({ children }) => (
<div className="layout">
<Navbar />
<div className="wrapper">
{children}
</div>
</div>
)
export default Layout;
File: src/components/Layout.jsx
- The styles for our Layout are as follows:
body {
font-family: verdana;
padding: 0;
margin: 0;
}
.layout {
a {
text-decoration: none;
}
.wrapper {
margin: 0 auto;
width: 96%;
}
}
File: src/components/Layout.scss
- Do you remember the recipe in Chapter 5, Mastering Redux, about listing the top 100 cryptocurrencies from CoinMarketCap (Repository: Chapter05/Recipe2/coinmarketcap)? In this recipe, we are going to do the same using Next.js. The first thing we need to do is to modify the page's index.js file and do an async axios request in the getInitialProps method:
import axios from 'axios';
import Layout from '../components/Layout';
import Coins from '../components/Coins';
const Index = ({ coins }) => (
<Layout>
<div className="index">
<Coins coins={coins} />
</div>
</Layout>
);
Index.getInitialProps = async () => {
const url = 'https://api.coinmarketcap.com/v1/ticker/';
const res = await axios.get(url);
return {
coins: res.data
};
};
export default Index;
File: src/pages/index.js
- Now let's create the Coins component:
// Dependencies
import React, { Component } from 'react';
import { array } from 'prop-types';
// Styles
import './Coins.scss';
const Coins = ({ coins }) => (
<div className="Coins">
<h1>Top 100 Coins</h1>
<ul>
{coins.map((coin, key) => (
<li key={key}>
<span className="left">{coin.rank} {coin.name} <strong>
{coin.symbol}</strong></span>
<span className="right">${coin.price_usd}</span>
</li>
))}
</ul>
</div>
);
Coins.propTypes = {
coins: array
};
export default Coins;
File: src/components/Coins.jsx
- The styles for the Coins component are as follows:
.Coins {
h1 {
text-align: center;
}
ul {
margin: 0 auto;
margin-bottom: 20px;
padding: 0;
list-style: none;
width: 400px;
li {
border-bottom: 1px solid black;
text-align: left;
padding: 10px;
display: flex;
justify-content: space-between;
a {
display: block;
color: #333;
text-decoration: none;
background: #5ed4ff;
&:hover {
color: #333;
text-decoration: none;
background: #baecff;
}
}
}
}
}
File: src/components/Coins.scss