Multiple layouts in NextJS or conditional css import #22136

PlopTheReal · 2021-02-12T21:20:52Z

PlopTheReal
Feb 12, 2021

I’m working on moving legacy app to Nextjs. The app has two layouts: public and admin part. Every layout has it’s own css files. Because of the nextjs restrictions when you can import css only in custom _app.js file I can’t split layouts. I don’t want to include admin css to the public layout and vice versa and the modules solution will be a problem as I have quite large CSS with a bunch of rules that aren't pure.

I'm importing the public css such as

import '../styles/public.scss';

Then for the admin layout I've tried to add the CSS manually like:

{this.props.admin && <link rel="stylesheet" href="admin.css" />}

But the admin styles are placed after the public styles within the header.
What can I do in this scenario? Also is there is a way to customize the placement of the styles from webpack?

meliborn · 2021-02-17T23:58:27Z

meliborn
Feb 17, 2021

Absolutely the same case. I thought it's very common case when you have admin and public part with different css, but I still can't find a solution :(

6 replies

meliborn May 18, 2021

There are no components, it's just a big css file with global rules which I need to include only in admin part (url starts from /admin)

eyalcohen4 Jun 2, 2021

Have you found a workaround?

vikasg603 Jun 9, 2021

This is a common case scenario, and there must be a solution for it with an internal css loader.
There is a solution using styled-jsx, but then again, as it creates internal CSS rather than external CSS files, it will be not good from caching point of view.

Noitidart Feb 14, 2022

Did anyone find a solution yet? I was thinking of using react-frame but it's a work-around https://swiftcarrot.dev/react-frame

ppyrzanowski Jul 2, 2022

It would be nice if we could have multiple global.css and specify multiple global contexts where it does a complete full page reload when switching between global contexts. Multi-zones could help but not sure about the reusability of components between "zones".

mizdra · 2022-07-03T10:47:34Z

mizdra
Jul 3, 2022

In my opinion, the following three features are needed to make this work.

process Global CSS with css-loader, but not automatically insert it into the head element
- Import CSS files from _app.js with an import statement to take advantage of Next.js' built-in CSS optimization
- However, it does not automatically insert it into the head element.
Insert Global CSS at runtime
- Allow the user to decide which stylesheet to insert based on runtime information
- Probably use the Head component of next/head and the link tag.
Provide a way to get the URL of the built CSS file at runtime
- Normally, CSS file names change frequently due to Cache Busting
- On the other hand, if you don't know the name of the file, you cannot embed the stylesheet in a link tag.

Example (NOTE: This code is from my imagination and is not official):

import { useRouter } from 'next/router';

// The D mode in https://github.com/webpack/webpack/issues/14893
// But, this mode is not implemented yet.
const commonSheetUrl = new URL('../styles/common/global.css', import.meta.resolve);
const adminSheetUrl = new URL('../styles/admin/global.css', import.meta.resolve);

function App({ Component, pageProps }) {
  const { asPath } = useRouter();
  const isAdmin = asPath === '/admin';
  return (
    <>
      <Head>
        {!isAdmin && <link rel="preload" href={commonSheetUrl} as="style" />}
        {!isAdmin && <link rel="stylesheet" href={commonSheetUrl} />}
        {isAdmin && <link rel="preload" href={adminSheetUrl} as="style" />}
        {isAdmin && <link rel="stylesheet" href={adminSheetUrl} />}
      </Head>
      <Component {...pageProps} />
    </>
  );
}

My gut feeling is that it would be difficult to solve this problem with a user-side workaround, and it appears that improvements to the Next.js build system are needed.

0 replies

mizdra · 2022-07-03T11:17:28Z

mizdra
Jul 3, 2022

Loading unnecessary style sheets cannot be avoided, but the style sheets can be scoped to minimize their impact. Depending on the use case, this workaround may be available.

// pages/_document.tsx

import Document, { Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps } from 'next/document';
import { ReactElement } from 'react';

type MyDocumentProps = {
  theme: 'common' | 'admin';
};
type MyDocumentInitialProps = MyDocumentProps & DocumentInitialProps;

export default class MyDocument extends Document<MyDocumentProps> {
  static async getInitialProps(ctx: DocumentContext): Promise<MyDocumentInitialProps> {
    const initialProps = await Document.getInitialProps(ctx);
    const pathname = ctx.req?.pathname;
    const theme = pathname === '/admin' ? 'admin' : 'common';
    return { ...initialProps, theme };
  }

  render(): ReactElement {
    return (
      <Html data-theme={this.props.theme}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// pages/_app.tsx
import '../styles/common/global.scss';
import '../styles/admin/global.scss';

function App({ Component, pageProps }) {
  // ...
}

// styles/common/global.scss

// NOTE: The level of detail has been increased from 1 to 11
// because of the combination of attribute selectors and element selectors.
// This may result in unexpected style overrides.
[data-theme='common'] {
  body {
    background: 'blue';
  }
}

// You can use `:where` to reduce the level of detail.
// NOTE, however, that this is not supported in Safari 13.x and below.
// ref: https://developer.mozilla.org/en-US/docs/Web/CSS/:where
// :where([data-theme='common']) {
//   body {
//     background: 'blue';
//   }
// }

// styles/admin/global.scss

// NOTE: The level of detail has been increased from 1 to 11
// because of the combination of attribute selectors and element selectors.
// This may result in unexpected style overrides.
[data-theme='admin'] {
  body {
    background: 'red';
  }
}

// You can use `:where` to reduce the level of detail.
// NOTE, however, that this is not supported in Safari 13.x and below.
// ref: https://developer.mozilla.org/en-US/docs/Web/CSS/:where
// :where([data-theme='admin']) {
//   body {
//     background: 'red';
//   }
// }

1 reply

cdking007 Nov 14, 2022

for those who are facing issue may replace const theme to following
const theme = ctx.req.url.includes("/admin") ? "admin" : "common";

cpatti97100 · 2022-12-01T16:03:18Z

cpatti97100
Dec 1, 2022

I have read that inside _app.js you can do the following:

if (someCondition){
  import('../styles/rtl.css');
}

but would this code run on the client and/or on the server? if server, does it run for every request?

EDIT: it seems to work on a new nextjs project

1 reply

zia-khan-dev Mar 5, 2024

@cdking007 Thanks man! you saved my day!!!!

mena234 · 2023-03-20T06:47:44Z

mena234
Mar 20, 2023

The solutions mentioned above are great, but the styles always apply after moments from the page's initial load, which makes great layout shifting.

1 reply

wheelo Aug 25, 2023

how to solve this problem

chiefdeals · 2023-12-06T16:38:37Z

chiefdeals
Dec 6, 2023

+1

1 reply

abi83 May 22, 2024

Wondering how this simple use case cannot be solved for ages. Struggling with nextjs14 whole evening already. ((

ryan-a-git · 2024-05-22T22:32:30Z

ryan-a-git
May 22, 2024

The solution that I found was to move the styles from the css file into a style tag in the layout where I wanted them to apply.

What I wanted and what it seems this thread it about
global.css
layout.ts
page.tsx
/page1
page1.css
layout.tsx //import page1.css
page.tsx

Unfortunately this seems to apply it to all pages.

Solution
global.css
layout.ts
page.tsx
/page1
layout.tsx //add css in <style> here
page.tsx

example

export default function Layout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {

  return (
    <>
    <style>
    {` CSS Here `}
    </style>
    <>
    )
}

That way the css loads only on subpages within this layout. Ordinarily I would just use tailwind but I had to style an external component.

Sorry for posting on an old thread! Just wanted to help anyone new who might be having a similar issue.

0 replies

Yuniac · 2024-10-25T12:23:43Z

Yuniac
Oct 25, 2024

Cannot believe such a simple and common feature is impossible to implement in the all-mighty nextjs

0 replies

chiefdeals · 2024-10-25T17:30:19Z

chiefdeals
Oct 25, 2024

Thennnnnn, do it for us Get Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ From: Yusuf Sabbag ***@***.***> Sent: Friday, October 25, 2024 5:24:09 AM To: vercel/next.js ***@***.***> Cc: chiefdeals ***@***.***>; Comment ***@***.***> Subject: Re: [vercel/next.js] Multiple layouts in NextJS or conditional css import (Discussion #22136) Cannot believe such a simple and common feature is impossible to implement in the all-mighty nextjs — Reply to this email directly, view it on GitHub<#22136 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A6G4PMBSOTJEQBF6RRMCMHLZ5IZ6TAVCNFSM6AAAAABQTFLVUCVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMBVGIYTMMI>. You are receiving this because you commented.Message ID: ***@***.***>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Multiple layouts in NextJS or conditional css import #22136

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 9 comments 10 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Multiple layouts in NextJS or conditional css import #22136

Replies: 9 comments · 10 replies

Replies: 9 comments 10 replies