Next.js Bootstrap Starter - Nice Template Navbar Header and Few Pages

May 03, 2021

Introduction
Create Next.js Project
Install Bootstrap
Layout Component
Navbar Header Component
Modify Index
Articles Page
Write Page
Lets Run it
Complete Code
What Next

Introduction

In this post, we will do following:

create a Next.js project
Install Bootstrap
Create few components (Navbar, Layout)
Create Few Pages

Create Next.js Project

npx create-next-app <folder_name>

It will install basic dependencies for Next.js, React.js and some folders.

Install Bootstrap

Now we will install bootstrap and react-bootstrap libraries.

npm i bootstrap react-bootstrap

Your package.json should look somewhat similar to following

{
  "name": "ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "bootstrap": "^4.6.0",
    "next": "10.2.0",
    "react": "17.0.2",
    "react-bootstrap": "^1.5.2",
    "react-dom": "17.0.2"
  }
}

Layout Component

Create new file under /components/layout/simple.jsx You need to create folders.

import Navbar from '../navbar/navbar'
import React from 'react'

export default function SimpleLayout(props) {
  return (
    <>
      <Navbar />
      <main role="main">
        {props.preContainer && props.preContainer}
        <div className="album py-5 bg-light">
          <div className="container">
            {props.children}
          </div>
        </div>
      </main>
    </>
  )
}

Lets create a navbar header component Create a file /components/navbar/navbar.jsx

import React from 'react'
import { Nav, Button } from 'react-bootstrap';
import Link from 'next/link'

export default function Navbar() {
  return (
    <Nav className="navbar navbar-expand-lg navbar-dark bg-dark">
  <div className="container-xl">
    <Link href="/">
      <a className="navbar-brand">GyanBlog</a>
    </Link>
    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>

    <div className="collapse navbar-collapse" id="navbarsExample07XL">
      <ul className="navbar-nav mr-auto">
        <li className="nav-item active">
          <Link href="/">
            <a className="nav-link">Home <span className="sr-only">(current)</span></a>
          </Link>
        </li>
        <li className="nav-item">
          <Link href="/articles">
            <a className="nav-link">Articles</a>
          </Link>
        </li>
        <li className="nav-item">
          <Link href="/write">
            <a className="nav-link">Write</a>
          </Link>
        </li>
      </ul>
      <ul className="navbar-nav px-3">
        <li className="nav-item text-nowrap">
          <Button className="nav-link">
              Signup
          </Button>
        </li>
      </ul>
    </div>
  </div>
</Nav>
  )
}

We have mentioned following links:

/
/articles
/write

Modify Index

Rename /pages/index.js to /pages/index.jsx

import Head from 'next/head'
import SimpleLayout from '../components/layout/simple'

export default function Home(initialData) {
  return (
    <SimpleLayout>
      <section className="jumbotron text-center">
        <div className="container">
          <h1>Subscribe to GyanBlog</h1>
          <p className="lead text-muted">
            Learn and Share
          </p>
        </div>
      </section>

      <div className="row">
        <h1>Hey People</h1>
        <p>
          For understanding of this project, see: 
        </p>
      </div>
    </SimpleLayout>
  )
}

Articles Page

Add new file /pages/articles.jsx

import Link from 'next/link'
import SimpleLayout from '../components/layout/simple'
import ArticlesJumbo from '../components/jumbo/articles'

export default function Articles(initialData) {
  return (
    <SimpleLayout preContainer={<ArticlesJumbo />}>
      <div className="row">
        <div className="col-md-4">
          <div className="card mb-4 shadow-sm">
            <Link href={`/#`}><a>
              <svg className="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
            </a></Link>
            <div className="card-body">
              <h3>Article 1</h3>
              <p className="card-text">Hey Article</p>
            </div>
          </div>
        </div>
        <div className="col-md-4">
          <div className="card mb-4 shadow-sm">
            <Link href={`/#`}><a>
              <svg className="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
            </a></Link>
            <div className="card-body">
              <h3>Article 2</h3>
              <p className="card-text">Hey Article</p>
            </div>
          </div>
        </div>
      </div>
    </SimpleLayout>
  )
}

Write Page

Add a new file: /pages/write.jsx

import SimpleLayout from '../components/layout/simple'

export default function Write() {
  return (
    <SimpleLayout>
      <div className="row">
        Write Form
      </div>
    </SimpleLayout>
  )
}