Layouts had been added earlier than NextJs 13. Nonetheless, ranging from this model layouts have turn into a compulsory a part of our NextJs purposes.
What we’ll see on this tutorial:
- the best way to use the essential app root structure
- utilizing nested layouts
- how layouts protect states
Earlier than we begin, if wanted, make certain to check out the best way to setup your first NexJs 13 app.
use the app root structure
We’ll begin with a easy app that has only a single index web page with the next content material:
// app/web page.js
export default operate Index() {
return (<div>
<h1>The crimson homepage</h1>
</div>)
}Alongside this index web page we’ll add a structure.js file in the identical /app folder, with the next content material:
// app/structure.js
export default operate RootLayout({ youngsters }) {
return (
<html>
<head></head>
<physique model={{"border":"10px strong crimson"}}>
{youngsters}
</physique>
</html>
)
}Now, if we run the app we’ll see the under display screen:
Because the identify implies layouts will outline the wrapping for our important content material. The precise content material of the web page comes from web page.js whereas structure.js supplies the crimson rectangle ornament.
Some notes on the structure.js web page:
structure.jsis a reserved filename. By including astructure.jsfile subsequent to aweb page.jswe’ll get an automated relation between them – the structure wrapping the content material of the web page- it’s obligatory for our app to have a root
app/structure.js. Even when we don’t manually make the file, theapp/structure.jswill likely be generated by NextJs on the first run. It type of serves as a alternative for the _document web page and the _app web page - for those who add a manually
app/structure.jsit’s obligatory to return the html and physique tags - any structure that you just create ought to settle for a
youngstersprop which can function the placeholder for the web page content material (or one other nested structure, a loading UI or an error UI)
Utilizing nested layouts
Alongside the basis structure, we are able to additionally outline layouts for every particular person web page.
The method is identical as for the basis structure. We have to add a structure.js file in the identical folder because the web page.js.
For instance, we’ll add an app/blue folder containing a structure.js and a web page.js:
// app/blue/structure.js
export default operate BlueLayout({ youngsters }) {
return (
<div model={{"border":"10px strong blue"}}>
{youngsters}
</div>
)
}// app/blue/web page.js
export default operate BluePage() {
return (<h1>The blue web page</h1>)
}And now, if we go to http://localhost:3000/blue we’ll see the under web page:
And we’ll do the identical for a inexperienced web page:
For each our blue and inexperienced pages we get the person web page content material (eq: app/blue/web page.js) wrapped within the particular person web page structure (eq: app/blue/structure.js). And all of that is wrapped within the root app structure (app/structure.js). These are the nested layouts in NextJs 13.
Preserving layouts state in NextJs 13
As an example we need to add some hyperlinks in order that we are able to simply navigate from one web page to a different.
The app/structure.js is a superb place so as to add the navigation. Earlier than NextJs 13 we had been utilizing the _app file to do that.
// app/structure.js
import Hyperlink from 'subsequent/hyperlink'
export default operate RootLayout({ youngsters }) {
return (
<html>
<head></head>
<physique model={{"border":"10px strong crimson"}}>
<nav>
<Hyperlink href="/">Dwelling</Hyperlink>{' '}
<Hyperlink href="/inexperienced">Inexperienced</Hyperlink>{' '}
<Hyperlink href="/blue">Blue</Hyperlink>
</nav>
{youngsters}
</physique>
</html>
)
}At this second the primary web page will appear like this:
If we navigate by way of these hyperlinks parts solely the brand new components of the web page will likely be rendered. The foundation structure stays the identical and solely the nested layouts change.
Alongside the hyperlink prefetching that is nice as a result of it signifies that additionally the state is preserved. Let’s add a randomly generated quantity within the root structure:
import Hyperlink from 'subsequent/hyperlink'
export default operate RootLayout({ youngsters }) {
// that is only a take a look at worth
// do not do that in prod !!!
const rand = Math.ground(Math.random() * 100)
return (
<html>
<head></head>
<physique model={{"border":"10px strong crimson"}}>
<h4>Random quantity {rand}</h4>
// remainder of the code right here
</physique>
</html>
)
}This quantity is not going to change after we navigate to any inside web page. Remember that that is true provided that we navigate by way of the interior hyperlink parts. In the event you do a full web page refresh the state is reinstantiated and the random quantity is regenerated.
So, with this conduct, we are able to use the basis structure for presenting issues like person authentification, buying chart icons, and extra. Earlier than this, we have to use another just like the React Context Api
And this concludes our introduction to the NextJs 13 layouts. You possibly can obtain the complete code from right here.
Wanting ahead to seeing you on the subsequent journey within the NextJs realm!
