Layouts in Next.js
There may be many approaches to handling layouts in Nextjs but mine is as easy as can be, and I can explain why. Nextjs is the React framework for production (http://nextjs.org). It is a remarkable framework for developing applications with React as it comes preconfigured with a lot of must-have features that would otherwise be a pain to configure every time. This is the beauty of building applications with Nextjs.
As a professional front-end developer, it is a good practice to split your large files into smaller units and one way you could do that is by defining your layouts that would be used across your pages, then wrapping your page components with the layouts (thereby isolating some layout-centric logic) and then in those page components, a mix of the smaller components units (e.g Buttons). Which is not a bad idea at all but the approach Nextjs ships out with out of the box starts with the page component files skipping the layouts. What if you still wanted to use layouts? This article would show you an easy way to go by it.
THE CONCEPT
Before we dive right into the implementation, let us understand the working principle. In React one thing is constant (JSX). We write JSX instead of plain HTML to give us a sweet mix of JavaScript and HTML which is cool but most times we often forget that JSX compiles to vanilla javascript functions. Here's an example below:
This is why it is always recommended to look for the raw javascript that exists in javascript web frameworks as it helps in giving you the ability to innovate, tweak and break a few set rules whenever we choose to especially due to the fact that some frameworks are so well built that it's almost invisible because of their pre-configured patterns and structure.
From the link above you can see that the written JSX compiles to raw javascript which is a function and As a result of the underlying javascript that compiled function is an object meaning, we can add extra information to the object of that function. You might ask how this relates to the implementation of layouts in Nextjs but let me explain.
Every component is compiled to a render function, this means a page component compiles to render function which in turn as a result of javascript is an object (https://academind.com/learn/javascript/functions-are-objects/). If we decide to add information to the function object generated by the JSX compilation, we can implement a High Order Component that reads this data and uses the data to provide the layout solution. You might want to read that again.
THE IMPLEMENTATION
From the code sandbox above let us break down the implementation. You might want to open this code sandbox in another tab to easily read the following section.
- layouts/(admin,default).js: We implement our layout components in these files but for this example, they are just wrappers having a side-nav (for the admin) and top-nav (for the default). You can extend them to have their own logic but for now, we are only using UI to differentiate the layouts
- pages/(index, admin,contact-us).js: In all the page components we just add the information of the chosen layout in string format so that it would be added to the render function output. This is what we would use in our Layout High Order Component.
- pages/_app.js: In this file, we just wrapped the entry component with our Layout Component (this would be explained later). And then passed both the pageProps value produced by Nextjs to both the Layout Component and the Entry Component. This is so that we can have all the data we need to implement any layout-centric logic and our layout High Order Component and also still have that data available in your Entry Component so as not to break the natural flow of Nextjs.
- layouts/layout-wrapper.js: In this file, is the High Order Component the Heart of this functionality. First, we import the admin and default layouts and assign them to the matching string values used in the page components in an object (you can have this object in a separate file to serve as an Enum) (Lines 1–7). Second, at Line 11 in the main layout component function, we access the layout string in the child component using props.children.type.layout (this is where React/Nuxtjs puts the value after the compilation of the render function. Feel free to explore other values for your own curiosity) then we use the value to pick the select the equivalent layout component in our layouts object above. Finally, from Lines 13–18, we do a simple checker to prevent any errors if the layout is not found the default layout is returned and if found we return the corresponding layout and in both cases, we pass in the props so that it is available in our layout component files.
And that's it. Feel free to mess around with the code to see just how it works. I am sure that you would realize how easy it is. This can serve as a solution for layouts at least until the Nextjs team implements the functionality natively. Happy Coding.
