DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Next.Js Series #4 - What is the custom 'App' component in Next.Js and how should we use it?
Dylan Oh
Dylan Oh

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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.
Alt Text

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
Enter fullscreen mode Exit fullscreen mode

... 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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

Alt Text

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 😊

Top comments (0)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›