This content originally appeared on DEV Community and was authored by Dylan Oh
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:
- Persisting partial layout throughout the pages (eg. navbar and footer)
- Applying global CSS (which we have done in series #1)
- 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 'component' 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!
This content originally appeared on DEV Community and was authored by Dylan Oh
Dylan Oh | Sciencx (2021-10-03T13:54:08+00:00) Next.Js Series #4 – What is the custom ‘App’ component in Next.Js and how should we use it?. Retrieved from https://www.scien.cx/2021/10/03/next-js-series-4-what-is-the-custom-app-component-in-next-js-and-how-should-we-use-it/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.