Next.Js Series #4 - What is the custom 'App' component in Next.Js and how should we use it?

We are going to introduce the custom 'App' component in Next.Js and its use cases.

When we used 'create-next-app' command to create our Next.Js project, there is an existing file called '_app.js' under our 'pages' folder.

import '../styles/globals.css'
import '../styles/author.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

This is the default App component that you get and it is used by Next.Js to initialize pages. You could imagine it as an entry point of all your pages component, which rendered within this 'App' container. This App component receives two parameters which are 'Component' and 'pageProps'. 'Component' is basically the current active page component, and whenever the route of our app is changed, 'Component' will be updated to the new page component. 'pageProps' is the initial data that we inject into pages when the page is first loaded. This can be done by calling 'getInitialProps'on the custom App component.

There are several useful cases for this custom 'App' component:

1. Persisting partial layout throughout the pages (eg. navbar and footer)
2. Applying global CSS (which we have done in series #1)
3. Keeping states between pages (because custom 'App' component is a higher level component）

In this series, we are going to demonstrate how to apply a NavBar component for all the pages.

First, we create a NavBar component under a new 'components' folder.

import styles from '../styles/navbar.module.css'

function NavBar(){
    return(
        <div className={styles.container}>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    )
}

export default NavBar

... and let's do some simple styling.

.container {
    width: 100%;
    margin: 0;
    background: rgba(0,0,0,0.8);
    color: white
}

.container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.container ul  li {
    float: left;
}

.container ul li:hover{
    color:black
}

After the NavBar component has been created, we import it to the '_app.js' file.

import '../styles/globals.css'
import '../styles/author.css'
import NavBar from '../components/NavBar'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

This NavBar component will now show in every page of our app.

How cool and simple it is! You may also apply other persistant layout such as footer, including copyright information etc to the pages in the same way.

Hope you get a basic understanding on how this higher level custom 'App' component could make our life easier when developing a Next.Js app. Stay tune for the future articles on Next.Js!

Do follow me for more future articles on web design, programming and self-improvement 😊