roxxhub

Menu

Next.js introduction Part 2

by

Next.js Series

This is the second part of the next.js explained series. Here is the previous part.

In this post, I’ll try to explain some of features and must know trick and tips you should consider while making your next.js site.

Adding components in next.js

Just like in react, you can create a seperate folder for all the reusable components you want. For example, lets create a folder named ‘comps’ in the root directory

next.js components

And as usual I can make as many components here as I want, and simply import them in any page I want. So here’s a simple bootstrap navigation bar code. You first need tp make a new file navbar.jsx in comps. And copy this code there.

import React from 'react'
import Link from 'next/link'
const Navbar = () => {
  return (
<>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <Link class="nav-link" href="/">Home <span class="sr-only">(current)</span></Link>
      </li>
      <li class="nav-item">
        <Link class="nav-link" href="/about">About</Link>
      </li>
      
      
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/>
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>


</>  )
}

export default Navbar

NOTE: add the bootstrap js and css cdn in the _document.js file. Use the Head plugin to add the css and Script plugin for js. Bascially your file should be like this.

import { Html, Head, Main, NextScript } from 'next/document'
import Script from "next/script"

export default function Document() {
  return (
    <Html lang="en">
      <Head>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
      <Script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></Script>
<Script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></Script>
<Script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></Script>
    </Html>
  )
}

Now lets import this in the home page. To do so, we simply link this file in the index.js file using “import Navbar from ‘@/comps/navbar’ “. And then use <Navbar/> to show it wherever we want to.

I have added it just before the <Image src=”/favicon.ico” height={144} width={144}/> and the site looks like this.

next.js ttutorial

You might have noticed I have linked the about page too. But if you click on it, you notice that the navbar ain’t there.

Adding fixed components

As you might know, react is popular for making single page application. Which means a site which doesn’t seem to load when we switch pages, and render only those components which have to change.

This can also be done in next.js. So lets see how we make fixed components which do not need to re render on every change.

For that you need to go to the _app.js file. You might notice it is returning some <Component {…pageProps} /> (You can thing of this piece of code as something that renders every page). Modify the file like this.

import Navbar from "@/comps/navbar"
export default function App({ Component, pageProps }) {
  return (
    <>
    <Navbar/>
  <Component {...pageProps} />
    </>
  )
}

Now you’ll notice that the navbar is available everywhere. You’ll also see that the site does not refresh on every page switch. It is happening because of the Link plugin we used in the navbar component.

Like this you can use components in next.js.

3 thoughts on “Next.js introduction Part 2”

Comments are closed.