Is it possible to customize the mounting element of NextJS or apply additional classes to the __next div?

Question

Is it possible to customize the mounting element of NextJS or apply additional classes to the __next div?

In a nutshell, I'm currently working on a project where my aim is to make the content "fill" the vertical space below the static header. Previously, in React with tailwind, I achieved this like so:

<body class="flex flex-col h-screen text-gray-600 work-sans leading-normal text-base tracking-normal">
    <header class="flex h-18 bg-white shadow-md">
        {/* header menu options */}
    </header>
    <div class="flex flex-1 h-full bg-gray-200 p-6">
        {/* page content */}
    </div>

However, with NextJS, it seems that the mounting div (i.e.

<div id="__next">

) is placed between the body and the rest of the content. If I adjust the CSS to apply #__next { height: 100% }, the filling does not function correctly and causes overflow. The structure ends up looking like this:

<body class="flex flex-col h-screen text-gray-600 work-sans leading-normal text-base tracking-normal">
    <div id="__next">
        <header class="flex h-18 bg-white shadow-md">
            {/* header menu options */}
        </header>
        <div class="flex flex-1 h-full bg-gray-200 p-6">
            {/* page content */}
        </div>
    </div>

I have included screenshots for a visual representation of why the additional div is causing issues: https://i.sstatic.net/xZloH.jpg

Two possible solutions to resolve this issue theoretically are to add classes to the #__next div or to mount to the body instead of the #__next div. Does anyone know how to implement either of these?

Edit: It might be possible for me to change the layout to a fixed header with padding on top of the content element, which could bypass the problem. However, I am still curious about the feasibility of the solutions I mentioned, as if they are not viable, it would signify a technical limitation of NextJS that is not widely discussed.

javascript css next.js jsx tailwind-css

Answer 1

Answer №1

To fix the issue, I removed classes from the body and applied them to the #__next container div:

I followed a similar approach outlined in this example for using Tailwind with Next.js.

Then, I made changes to the styles/index.css

@tailwind base;

/* Your custom base styles here */
/* #__next {
  height: 100%;
} */

/* Start purging... */
@tailwind components;
/* Stop purging. */

html,
body {
  @apply bg-gray-50 dark:bg-gray-900;
}

#__next {
  @apply flex flex-col h-screen text-gray-600 leading-normal text-base tracking-normal;
}

/* Your custom component styles here */
.btn-blue {
  @apply px-4 py-2 font-bold text-white bg-blue-500 rounded;
}

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

/* Your custom utilities */

As previously mentioned, it's crucial to add the classes to #__next rather than the body.

The key directives to note are:

#__next {
  @apply flex flex-col h-screen text-gray-600 leading-normal text-base tracking-normal;
}

In response to your query title, this method demonstrates one way to incorporate Tailwind styles into the #__next container div.

Another option involves adding the classes after the component or page has loaded using either the componentDidMount() lifecycle hook or the useEffect hook like so:

useEffect(() => {
    document.querySelector("#__next").className =
      "flex flex-col h-screen text-gray-600 leading-normal text-base tracking-normal";
  }, []);

Referencing the Next.js documentation on Custom document, you'll find that the Main component and NextScript are integral to Next.js functioning correctly and cannot be altered. Therefore, I believe the solutions provided above are the optimal means of applying classes to the #__next container div.

Answer 2

To fix the issue, I removed classes from the body and applied them to the #__next container div:

I followed a similar approach outlined in this example for using Tailwind with Next.js.

Then, I made changes to the styles/index.css

@tailwind base;

/* Your custom base styles here */
/* #__next {
  height: 100%;
} */

/* Start purging... */
@tailwind components;
/* Stop purging. */

html,
body {
  @apply bg-gray-50 dark:bg-gray-900;
}

#__next {
  @apply flex flex-col h-screen text-gray-600 leading-normal text-base tracking-normal;
}

/* Your custom component styles here */
.btn-blue {
  @apply px-4 py-2 font-bold text-white bg-blue-500 rounded;
}

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

/* Your custom utilities */

As previously mentioned, it's crucial to add the classes to #__next rather than the body.

The key directives to note are:

#__next {
  @apply flex flex-col h-screen text-gray-600 leading-normal text-base tracking-normal;
}

In response to your query title, this method demonstrates one way to incorporate Tailwind styles into the #__next container div.

Another option involves adding the classes after the component or page has loaded using either the componentDidMount() lifecycle hook or the useEffect hook like so:

useEffect(() => {
    document.querySelector("#__next").className =
      "flex flex-col h-screen text-gray-600 leading-normal text-base tracking-normal";
  }, []);

Referencing the Next.js documentation on Custom document, you'll find that the Main component and NextScript are integral to Next.js functioning correctly and cannot be altered. Therefore, I believe the solutions provided above are the optimal means of applying classes to the #__next container div.

Answer 3

Answer №2

One simple way to ensure your NextJS application fills the entire screen height is to adjust the parent elements' heights using the 100vh unit (which represents 1% of the viewport height).

html, body, #__next, #app {
  min-height: 100vh;
}

Your HTML structure can be structured like this:

<html>
<head><!-- head content --></head>
<body>
  <div id="__next">
    <div id="app"><!-- this is the main element of your app --></div>
  </div>
</body>
</html>

Answer 4

One simple way to ensure your NextJS application fills the entire screen height is to adjust the parent elements' heights using the 100vh unit (which represents 1% of the viewport height).

html, body, #__next, #app {
  min-height: 100vh;
}

Your HTML structure can be structured like this:

<html>
<head><!-- head content --></head>
<body>
  <div id="__next">
    <div id="app"><!-- this is the main element of your app --></div>
  </div>
</body>
</html>

Answer 5

Answer №3

If you want to customize the html or body tags, you can do so by creating a custom document in ./pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'

class CustomDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body className="custom-class-name">
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default CustomDocument

Keep in mind that you must include these tags in your file: <Html>, <Head />, <Main />, and <NextScript />.

For more information, check out the full documentation

In this context, the element with the __next id is essential for rendering the main app and cannot be removed or altered. You can apply CSS targeting #__next in _document.js using the @apply directive from tailwind instead of modifying the HTML of the element (as it may not be possible)

Answer 6

If you want to customize the html or body tags, you can do so by creating a custom document in ./pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'

class CustomDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body className="custom-class-name">
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default CustomDocument

Keep in mind that you must include these tags in your file: <Html>, <Head />, <Main />, and <NextScript />.

For more information, check out the full documentation

In this context, the element with the __next id is essential for rendering the main app and cannot be removed or altered. You can apply CSS targeting #__next in _document.js using the @apply directive from tailwind instead of modifying the HTML of the element (as it may not be possible)

Answer 7

Answer №4

The simplest method I discovered to accomplish this was by updating the styles/globals.css.

/*
  Make sure that the topmost enclosing elements stretch to cover the entire height of the screen
  in order for the background image to fill the whole screen
*/
html,
body,
#__next {
  height: 100%;
}

It is important to remember that the global.css needs to be imported into _app.tsx

Answer 8

The simplest method I discovered to accomplish this was by updating the styles/globals.css.

/*
  Make sure that the topmost enclosing elements stretch to cover the entire height of the screen
  in order for the background image to fill the whole screen
*/
html,
body,
#__next {
  height: 100%;
}

It is important to remember that the global.css needs to be imported into _app.tsx

Is it possible to customize the mounting element of NextJS or apply additional classes to the __next div?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Clear the modal form in Codeigniter and AJAX upon closing the edit modal

The content within Contentful is presented in a JSON object format, but accessing specific values is proving to be

Creating a custom component results in an extended duration to 'eliminate' its children

Guidelines for Implementing Stylesheets from a Referenced Node Module

How can I embed input tag with the data-plugin attribute into a DOM element?

Having difficulty in making the left sidebar stay fixed

Background PHP/JS authentication through HTTP

Extracting object properties and tallying their occurrences

Line up with miniature stature

What is the best way to display database information on my webpage according to the selected item in the combo box?

Having trouble populating a Material-UI collapsible table with data in React. Any tips on what may be causing this issue?

Resizable icon next to inline element caused width adjustment

Display the final row by hovering over the line

The CSS styles are failing to load properly for the antd Menu option

Leverage jQuery to organize and categorize JSON information received through an Ajax call

Tips for showing data associated with the chosen option from a dropdown list in Angular.js fetched from an API

Is it possible to customize the close icons on the autocomplete feature in Material UI?

Exploring the Applications of Directives in Multiple Modules within Angular 2

The 'wrapper' property is not present in the 'ClassNameMap<never>' type in Typescript

Dispense CSS using a React element