In this post, I will show you the next js implementation with react js. I will do a sample web app called BitzPrice which is an app that shows the bitcoin price by using an API from bitcoin. and then I will show you how to deploy it to the azure static web app.
so let's get started with the next js.
Part 1: Setting environments for development
Step 1: Installing Dependencies.
npm install next react react-dom --save
After the package have been successfully installed we will get a file called package.json
in that file, delete everything inside script tag and add the following
Step 2: Adding scripts.
"dev":"next"
"build":"next build"
"start":"next start"
so that our package.json will look like the following
{
"name": "Next",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"start": "next start"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"isomorphic-unfetch": "^3.1.0",
"next": "^10.0.5",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
Step 3: Project structure.
Create one directory for a page called pages this directory is useful for routing. next js by default will iterate through this directory and create routing for all pages inside this pages directory so we don't have to create the pages manually as we do in the react js application. that is one use of next js.
after that, we will create a directory called components for putting all the components inside this directory.
the project structure should look like this.
Part 2: Start Implementation
Step 1: creating pages.
inside the pages directory create two pages called index.js and about.js
so we have two different pages. but both have the same navigation bar so that we have to implement the navigation bar once and use it for both of the pages.
so in the component directory create the navbar.js component so that we will just import this component on both of our two pages.
inside this navbar.js add the following code.
import Link from 'next/link';
const Navbar = () => (
<nav className="navbar navbar-expand navbar-dark bg-dark mb-4">
<div className="container">
<a className="navbar-brand" href="#">BitzPrice</a>
<div className="collapse navbar-collapse">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link href="/"><a className="nav-link">Home</a></Link>
</li>
<li className="nav-item">
<Link href="/about"><a className="nav-link">About</a></Link>
</li>
</ul>
</div>
</div>
</nav>
);
export default Navbar;
next, we will create a component called layout.js this component is like the high order function in react js that used to surround the pages so that the navbar and other common services will be provided. so put the following code inside this layout.js
import Head from 'next/head';
import Navbar from './Navbar';
const Layout = (props) => (
<div >
<Head>
<title>BitzPrice</title>
<link rel='stylesheet' href="https://bootswatch.com/4/cerulean/bootstrap.min.css" />
</Head>
<Navbar />
{props.children}
</div>
);
export default Layout;import Head from 'next/head';
import Navbar from './Navbar';
const Layout = (props) => (
<div >
<Head>
<title>BitzPrice</title>
<link rel='stylesheet' href="https://bootswatch.com/4/cerulean/bootstrap.min.css" />
</Head>
<Navbar />
{props.children}
</div>
);
export default Layout;
{props.children} this code will pass the children from the child component to the parent or layout component so that it will be displayed as it is. in this application, we will use this code to display the price of bitcoin in different currencies.
next, create the price.js component inside the component directory. this component will show the price on the index directory.
and add the following code inside.
import React from 'react'
class Prices extends React.Component {
state = {
currency: 'EUR'
}
render() {
let list = '';
if (this.state.currency === 'USD') {
list = <li className="list-group-item">
Bitcoin rate for {this.props.bpi.USD.description} : <span className="badge badge-primary">
{this.props.bpi.USD.code}
</span> <strong>{this.props.bpi.USD.rate}</strong>
</li>
} else if (this.state.currency === 'GBP') {
list = <li className="list-group-item">
Bitcoin rate for {this.props.bpi.GBP.description} : <span className="badge badge-primary">
{this.props.bpi.GBP.code}
</span> <strong>{this.props.bpi.GBP.rate}</strong>
</li>
} else if (this.state.currency === 'EUR') {
list = <li className="list-group-item">
Bitcoin rate for {this.props.bpi.EUR.description} : <span className="badge badge-primary">
{this.props.bpi.EUR.code}
</span> <strong>{this.props.bpi.EUR.rate}</strong>
</li>
}
return (<dev>
<ul className="list-group">
{list}
</ul>
<br />
<select onChange={e => this.setState({
currency: e.target.value
})} className="form-control">
<option value="USD"> USD</option>
<option value="GBP"> GBP</option>
<option value="EUR"> EUR</option>
</select>
</dev>
)
}
}
export default Prices;
next, add the following code to the index.js file we have previously created in the pages directory.
import Layout from '../Components/Layout'
import Fetch from 'isomorphic-unfetch';
import Prices from '../Components/Prices'
const index = (props) => (
<div>
<Layout>
<h1>Welcome to the index page.</h1>
</Layout>
<Prices bpi={props.bpi.bpi} />
{/* {props.bpi.bpi.USD.description} */}
</div>
);
index.getInitialProps = async function () {
const res = await Fetch("https://api.coindesk.com/v1/bpi/currentprice.json");
const data = await res.json();
return {
bpi: data
}
}
export default index;
in the above code, the price from the API will be fetched and passed to the price.js component so that it will render in a structured manner. the price component is expecting this information using props. next, we will add the about.js page just to show how the routing works. On this page, we will add some texts to show that the page is displaying on the about page. so create about.js inside the pages directory and add the following code inside that file.
import Layout from '../Components/Layout';
const index = () => (
<div>
<Layout>
<h1>
Welcome to the About page!
</h1>
</Layout>
</div>
);
export default index;
so far we have done with the implementation part let us see what we have done by running the app.
use the following command to run this application locally.
npm run dev
then we got the following result
if we go to the specified URL given by the next js for the application we will get the following page.
YEAH!! so this means everything is working fine locally the next thing we will do is to deploy this application to the azure static web app. you can find the Github code here
Part 3: Deploying the app to azure
Step 1: configuring GitHub
we have to first configure GitHub on our local machine and push the code to the GitHub source control. I will not go in-depth with that like how to install the GitHub for the local machines and things similar to this staff are considered as already known. so we will proceed to add remote on our code, committing the application, and push it to Github.
okay, so the first thing to do is create a repository for our web application inside the GitHub repositories.
after that, we have to add this repository to our local machine.
so open cmd if you are on Windows or terminal if you are on some other Linux operating system. navigate to the project directory from the cmd or terminal. if you are using vs code you don't have to do this just click on the terminal tab then you will get a terminal with the current working directory.
next to this let us initialize the git repository locally.
git init
this will create an empty git repository
then let us add a remote repository where our code will be pushed.
git remote add [remoteName] [link to the remote git repository]
in my case it will be like this
git remote add cloudbloq https://github.com/CloudBloq/BitzPrice
before we commit the changes to the local repository we have to update the package.json file to use it for the azure configuration.
add the following to the script tag inside package.json
"build":"next build && next export"
you will see the purpose of adding this later.
so that our full package.json look will be like this
{
"name": "Next",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"build": "next build && next export",
"start": "next start"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"isomorphic-unfetch": "^3.1.0",
"next": "^10.0.5",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
next to this commit the changes to the local repository
you can do this by the following command
git commit -m "commit message"
then push it to GitHub
git push cloudbloq
Step 2: Integrate Azure to GitHub and deploy the code
Okay only some staffs remain keep walking with me
go to the Azure portal home page Azure portal
you should have an azure account for deploying the app. if you don't have any you can go and create a student free account
you should use student email like someone@student.oauife.edu.ng
once you created and login to your account you will see a page like this.
Let us go to the deployment now
First, we should have a resource group so let us create a resource group. go to the Resource groups option from the top listed tabs.
you will get this page.
then click on the Add* option at the top
after filling in all the necessary information click on the Review+create option at the bottom that is decorated with blue color. so that you will successfully create a resource group. the purpose of this resource group is to group some similar things. we will use it later to create a static web app.
Alright!
let us go to the main goal. which is creating the static web app.
so go back to the Azure portal
on the top left you can see there is an option for Static Web app(preview) click that option.
then you will get into this page.
Click on the Add button at the top left corner.
you will see a page like this.
choose the resource you have created before on the option of Resource Group
then it will ask you to SignIn using Github click that and a page to authorize the azure with GitHub will come.
Click on the green Authorize button at the bottom right. then it will ask you to put in the password and after that, it will redirect you back to the azure site with some other additional options.
fill all the necessary information on the options listed below
in my case it will be like this
and choose react on the build preset options
then when you are sure of filling in all the necessary information click the **Review + Create" option on the bottom.
Then you will get this page.
Click on the create button at the bottom and wait till finish the build.
After it successfully builds it will create the static web app. click on the dialog coming with text like Go to Resources at the top right corner. when you click that you will get a page like this.
YES!!! our static web is ready now. let us check it by clicking on the link.
but I am not getting what I want. what may be the problem?
Click on the deployment history and click on GitHub action runs
you will see this page
it means that it is still building.
remember what I have said to you before. you can see now the use of the below script tag. our app is building on GitHub because of this script.
"build":"next build && next export"
after some time i got my website
check out the site BitzPrice
Top comments (0)