codedamn logo
codedamn

Nextjs Layout

  • Vishnupriya's profile image
    Vishnupriya
    Team codedamn
Nextjs Layout

Today’s blog is about “Nextjs Layout”. There may be many techniques for dealing with layouts in Nextjs however our motive is to make it as clean as can be, and I will provide an explanation for it.

Next.js is the React framework and its miles an incredible framework for growing programs with React because it comes preconfigured with quite a few need-to-have features that might in any other case be a pain to configure each time. This is the splendor of building packages with Next.js.

As a professional front-end developer, it is a superb practice to split your large files into smaller gadgets and one way you could do this is by means of defining your layouts that might be used across your pages, then wrapping your page components with the layouts and then in the one’s web page additives, a combination of the smaller additives units, buttons would be a good example.

This isn’t a terrible concept in any respect but the technique Nextjs ships out without the box begins with the page thing documents skipping the layouts. This blog would show you an easy way to head through the layout.

Let’s go through the concept first!

In React one factor is constant (JSX). We write JSX instead of undeniable HTML to present us a candy mix of JS and HTML that is better however maximum times we frequently neglect that JSX compiles to vanilla JS functions.

That is why it is constantly recommended to search for the raw JS that exists in JS net frameworks because it helps in supplying you with the ability to innovate, tweak and destroy a few set guidelines every time we select to, especially because of the reality that a few frameworks are so well built that it’s nearly invisible due to their pre-configured styles and structure.

Every element is compiled to a rendering feature, this indicates a Page issue compiles to render function which in turn due to JS is an object. If we determine to add data to the function object generated by using the jsx compilation, we can put in force a high order thing that reads this information and uses the records to provide the format solution. The react version allows us to deconstruct a web Page into a sequence of components. A lot of these components are often reused among pages.

//Example
import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ fruits }) {
  return (
    <><Navbar /><main>{fruits}</main><Footer /></>
  )
}

Adding layout in next.js!

You construct a format for the usage of the custom app in next.js. The custom app is an excessive order aspect.

1. The First step is to import the main component, sidebar, header, and footer in the layout component.

2. After the first step we import format components in the _app.js app and using layout wrap the current component.

Single Shared Layout

If you only have one layout on your entire softwareyou could create a customizable app and wrap your utility with the format. Since the aspect is re-used whilst changing pages, its element state could be saved.

//Example
import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout><Component {...pageProps} /></Layout>
  )
}
 
//Example 

import React from 'react' 
import App from 'next/app' 
import SiteLayout from './components/SiteLayout' 
class MyApp extends App { 
render() { 
const { Component, pageProps } = this.props 
return ( <SiteLayout> 
<Component {...pageProps}></Component> 
</SiteLayout>
 ) 
} 
} 
export default MyApp

Layout in <App> on the current URL

If your wishes are handiest barely greater complex than what can be done with a single shared layout, you are probably capable of getting away with rendering an extraordinary tree primarily based on the current URL.
By using an examining router.pathname, you may determine out which “section” of your site you are presently in, and render the corresponding tree of layout:

//Example
import React from 'react' 
import App from 'next/app' 
import SiteLayout from '../components/SiteLayout' 
import AccountSettingsLayout from '../components/AccountSettingsLayout' 
class MyApp extends App { 
render() { 
const { Component, pageProps, router } = this.props 

if (router.pathname.startsWith('/account-settings/')) { 
return ( 
<SiteLayout> 
<AccountSettingsLayout> 
<Component {...pageProps}></Component> 
</AccountSettingsLayout> 
</SiteLayout>
 ) 
} 
return ( 
<SiteLayout> 
<Component {...pageProps}></Component> 
</SiteLayout> 
) 
} 
} 
export default MyApp

Interested in learning Blockchain and Solidity? Click here!
And for Python 3, Click here for the link!

Static “layout” property to page components

One manner to avoid your App factor developing in complexity through the years is to transport the obligation of defining the page format to the page component as opposed to the App issue.

you can do this via attaching static assets like the layout to your page components and analyzing that from the interior of your App aspect.

//Example
import React from 'react' 
import App from 'next/app' 
class MyApp extends App { 
render() { 
const { Component, pageProps } = this.props 
const Layout = Component.layout || (fruits => <>{fruits}</>) 
return ( 
<Layout> 
<Component {...pageProps}></Component> 
</Layout> 
) } 
} 
export default MyApp

So I hope that the above-mentioned points were helpful for you and you must have got a clear image.

User avatar