Using various NextJS layouts or importing CSS conditionally based on the requirements

Question

Using various NextJS layouts or importing CSS conditionally based on the requirements

I'm currently in the process of transitioning a legacy app to Nextjs. This app consists of two distinct layouts: one for the public facing aspect and another for the admin section. Each layout has its own set of CSS files. However, due to Nextjs limitations that only allow CSS imports in the custom _app.js file, I am unable to separate the layouts as intended. I want to avoid mixing the admin CSS with the public layout and vice versa. How should I proceed in this scenario?

I attempted to use styled-jsx, but it ended up causing more challenges. Wrapping the entire CSS file with thousands of lines using css.global caused a multitude of errors, such as not supporting nesting, among others.

javascript webpack next.js

Answer 1

Answer №1

If you want to keep your files organized, consider placing them in the /public folder and manually controlling the CSS imports. A custom _document.jsx page is a great spot for handling these included styles.

Keep in mind that this workaround allows you to separate these files from your other CSS bundles, making them accessible to the public via URL.

Answer 2

If you want to keep your files organized, consider placing them in the /public folder and manually controlling the CSS imports. A custom _document.jsx page is a great spot for handling these included styles.

Keep in mind that this workaround allows you to separate these files from your other CSS bundles, making them accessible to the public via URL.

Answer 3

Answer №2

To create variation in layout components, you can utilize the dynamic function and switch between them within the _app.js file. This informative article highlights the capabilities of using dynamic.

If you encounter issues with nesting due to applying a sass/scss file from a CSS compiler within styled-jsx, consider enabling sass/scss support in styled-jsx.

_app.js

const App = ({ Component, pageProps }) => {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

Layout.js

import dynamic from 'next/dynamic';

const mapLayoutToComponent = {
  public: dynamic(import("./layouts/Public")),
  admin: dynamic(import("./layouts/Admin"))
}

const Layout = props => {
  const [layoutState, setLayoutState] = React.useState('public');
  const Component = mapLayoutNameToComponent[layoutState];

  return <Component>{props.children}</Component>
}

layouts/Public.js

import '../styles/public.css';

const Public = (props) => {
  return <>{props.children}</>
};

layouts/Admin.js

import '../styles/admin.css';

const Admin = (props) => {
  return <>{props.children}</>
};

Answer 4

To create variation in layout components, you can utilize the dynamic function and switch between them within the _app.js file. This informative article highlights the capabilities of using dynamic.

If you encounter issues with nesting due to applying a sass/scss file from a CSS compiler within styled-jsx, consider enabling sass/scss support in styled-jsx.

_app.js

const App = ({ Component, pageProps }) => {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

Layout.js

import dynamic from 'next/dynamic';

const mapLayoutToComponent = {
  public: dynamic(import("./layouts/Public")),
  admin: dynamic(import("./layouts/Admin"))
}

const Layout = props => {
  const [layoutState, setLayoutState] = React.useState('public');
  const Component = mapLayoutNameToComponent[layoutState];

  return <Component>{props.children}</Component>
}

layouts/Public.js

import '../styles/public.css';

const Public = (props) => {
  return <>{props.children}</>
};

layouts/Admin.js

import '../styles/admin.css';

const Admin = (props) => {
  return <>{props.children}</>
};

Using various NextJS layouts or importing CSS conditionally based on the requirements

Answer №1

Answer №2

_app.js

Layout.js

layouts/Public.js

layouts/Admin.js

Similar questions

Beware, search for DomNode!

Issue with OnClientClick functionality not functioning as expected

What is the best way to send parameters to a callback function in a jQuery $.getJSON method?

The directive in an ionicModal is executed first, even before the controller is fully loaded

Include a parent class within the style tags in your CSS code

Is there a way to change a .pptx document into a base64 string?

The art of creating drop shadows in Three.js

When clicking on the side-bar, it does not respond as expected

Here's a guide on how to display texts underneath icons in Buttons using Material UI

XML integration with Jplayer is not functioning properly

How does the object scope receive, process, and prepare the update for display within the AngularJs view?

How can I showcase the index of `<tr>` and `<td>` elements in a dynamically generated table

Choose and adjust the size of images with a specific aspect ratio using jQuery

Proper method for executing a synchronous AJAX POST request and subsequently submitting a form

How can I resize an element using jQuery resizable and then revert it back to its original size with a button click?

Accessing the user's referral URL in Express.js when they submit a post

NestJS WebSocketGateway fails to initialize due to a technical glitch

Having trouble updating text in a PDF using NodeJS and hummus library

Error: Node.js Express is unable to recognize the content type

The process of verifying email addresses using Angular 5