#4 - NextJS - Understanding the Routing System and Shared Components with NextJS

Understanding Routes and Shared Components in NextJS

This is a series of articles that will help us create Hcode's e-commerce page using NextJS, React, and JavaScript.

The first part of this series is the setup; if you haven't seen it yet, we recommend watching it first. Then we create the first page and learn how to navigate with the Link component:

In this article, we will talk more about how the NextJS routing system is structured. With this system, we can create routes and links dynamically, which is very useful for dynamically generated content, where your URL is formed by elements coming from a database or another external source. Shall we?

Routes in NextJS

NextJS has a routing mechanism based on the concept of pages, and uses the pages folder as the root base of the routes, with subfolders being an automatic mechanism to generate nested routes.

When a file is added to the pages folder, a route with the name of that file is automatically generated.

Using the pages directory as a reference, just add files and subdirectories from this directory. Note in the example below that index.js within the pages folder will make the main route call this file.

Given the pages folder with the index.js file inside it, the root path will be: pages/index.js → /
The subfolders will be nested paths within the pages folder: pages/blog/index.js → /blog

Shared Components

We can create components that can be reused on other pages, like the top of a website, or another component that can be reused by other components.

We will create a directory called components (which could be named anything else except public and pages) to store the components we create and reuse them inside other components.

Inside this folder, we will create the files Menu.js and Header.js

We will create the public folder for assets like images and other global resources. Inside this folder, we create the images folder, which will contain the Hcode logo that you can download below; add the png file to the public\images folder.

The Menu.js file will contain the menu structure. We will import the Link resource for page navigation.

We will create two constants layoutLink and layoutMenu to format the hyperlinks and the navigation menu items,

To create the navigation menu, we use an array called categories that stores the label, that is, the text to be displayed, the target route link, and a logo of the link.


import Link from 'next/Link'

const layoutLink = {
    color: '#333',
    textDecoration: 'none'

}
const layoutMenu = {
    display: 'inline-block',
    minWidth: '150px',
    fontFamily: 'calibri',
    color: '#333'
}
let categories = [
    {
        label:'JavaScript',
        link:'/javascript',
        icon: '../public/images/js.png'
     },
     {
        label:'PHP 7',
        link:'/php',
        icon: '../public/images/php.png'
     },
     {
        label:'HTML5',
        link:'/html5',
        icon: '../public/images/html5.png'
     },
     {
        label:'Bootstrap 4',
        link:'/bootstrap',
        icon: '../public/images/bootstrap.png'
     }
    ]

const Menu = props => (
    <nav>
        <ul>
            {
            categories.map(items =>(
            <li style={layoutMenu}>
                <Link href={items.link}>
                <a style={layoutLink} >{items.label}</a>
            </Link></li>
            ))
            }
        </ul>
    </nav>
)

export default Menu

The Header.js file will contain the previously created Menu.js component, as well as a logo image that should already be in the public folder. Note that it's not necessary to point to the public folder, even if it is in different directories, like in the case of the Header.js file below, which is in the components folder. This is because the index.js file, which is the root of the application, is outside the components folder.

import Menu from "./Menu";

const Header = props => (
  <div>
    <img src="images/logo-hcode.png" className="img" />
    <Menu />
    {props.content}
    <style jsx>{`
      div {
        display: flex;
        justify-content: space-around;
      }
      .img {
        height: 40px;
      }
    `}</style>
  </div>
);
export default Header;

In the index.js file, we will import the Header.js component, which in turn will also import Menu.js, displaying a navigation menu.

import Header from '../components/Header'

export default function Index(){
    return (
        <div>
            <Header />
            <p>Starting with Next.JS</p>
        </div>
    )
}

Each of the files that make up the Menu route can be a separate file within the pages directory. For example, the route /javascript will call the javascript.js file within pages. For example, the javascript.js file could have the content below, and thus you can create the respective: html5.js; bootstrap.js; php.js.

File: javascript.js

import Header from '../components/Header'

export default function Javascript(){
    return (
        <div>
            <Header />
            <h1>JavaScript</h1>
        </div>
    )
}

Styling Components

In the examples above, we showed two ways to style components, one of them creating constants or variables with styles in the object format, and the other using JSX styling directly in the component with Template String and a pair of Braces before the Template String. We will still see other ways to style components throughout the series.

The result so far will look similar to the image below:

In the next article, we will learn how to create dynamic pages using NextJS.

We hope you enjoyed it, and we'll see you in the next article!

See you there

Glaucio Daniel

javascript

react

nextjs

Understanding Routes and Shared Components in NextJS

Routes in NextJS

Shared Components

Styling Components

Keep learning with Hcode