CODEWITHSUNDEEP
reactjsnext.jssasstailwind-css
Yuval Zarfati
Yuval Zarfati

Reputation: 11

Why NextJs app dir global css not applying after migrating from pages to app?

I'm currently migrating from pages directory to the app directory for my NextJs project. I have created the app directory and in order to use internationalization, I use next-intl so my folder strcture looks like this: app/[locale]/layout.tsx. I have my globals.scss inside my styles folder (I dont have an src folder, everything is in the root of the project). for some reason when I import my globals.scss inside my root layout, I can see it generated correctly inside the .next/static/css folder, but no css is applies at all.

This is my root layout:

import '@/styles/globals.scss';
import 'react-credit-cards-2/dist/es/styles-compiled.css';

import { AntdRegistry } from '@ant-design/nextjs-registry';
import { Metadata } from 'next';
import { Providers } from './providers';

interface RootLayoutProps {
  children: React.ReactNode;
  params: { locale: string };
}

export default function RootLayout({ children, params }: RootLayoutProps) {
  return (
    <html lang={params.locale}>
      <body>
        <AntdRegistry>
          <Providers locale={params.locale}>{children}</Providers>
        </AntdRegistry>
      </body>
    </html>
  );
}

export const metadata: Metadata = {
  icons: [{ rel: 'apple-touch-icon', url: '/icons/icon.png' }],
  manifest: '/manifest.json',
};

These are my providers:

'use client';

import messagesConfig from '@/lang/config';
import { AuthProvider } from '@/providers/auth.provider';
import GoogleApiProvider from '@/providers/google-api.provider';
import withTheme from '@/theme';
import {
  MutationCache,
  QueryCache,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query';
import { App, ConfigProvider, message } from 'antd';
import { useState } from 'react';

interface ProvidersProps {
  children: React.ReactNode;
  locale: string;
}

export function Providers({ children, locale }: ProvidersProps) {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            refetchOnWindowFocus: false,
            refetchOnMount: false,
            refetchOnReconnect: false,
            retry: false,
            staleTime: 5 * 60 * 1000,
          },
        },
        queryCache: new QueryCache({
          onError: (error: any) => {
            if (error.response.data.error) {
              message.error(error.response?.data.error);
            }
          },
        }),
        mutationCache: new MutationCache({
          onError: (error: any) => {
            if (error.response.data.error) {
              message.error(error.response?.data.error);
            }
          },
        }),
      })
  );

  return withTheme(
    <App>
      <QueryClientProvider client={queryClient}>
        <GoogleApiProvider>
          <ConfigProvider
            locale={messagesConfig[locale].antDesignLocale}
            direction={messagesConfig[locale].dir}
          >
            {children}
          </ConfigProvider>
        </GoogleApiProvider>
      </QueryClientProvider>
    </App>
  );
}

Note that my pages directory is disabled. I changed its name so that only my app directory is taken into account.

Tried:

UPDATE: I found out the bug is related to my folder structure with internationalization. I'm using next-intl, and after following their docs guide, my folder structure looked like this: app/[locale]/layout.tsx where the app directory only had the [locale] folder inside. I found out that after removing this setup and placing my layout.tsx inside my app directory (and also removing everything related to next-intl configuration) importing my global.scss worked just fine. If anybody have more information about this I would love to know because I can't seem to fix it and use next-intl.

This is the guide I used: https://next-intl-docs.vercel.app/docs/getting-started/app-router

Upvotes: 1

Views: 961

Answers (2)

RapsodyEuphoria
RapsodyEuphoria

Reputation: 11

I had the exact same issue after adding next-intl to my project. This is because of the middleware, which catches every requests; including css files.

In the end, I fixed my problem by adding this custom matcher to src/middleware.ts (thanks to this post: https://stackoverflow.com/a/76873535).

export const config = {
  // Match only internationalized pathnames
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

Upvotes: 1

AL Faiz Ahmed
AL Faiz Ahmed

Reputation: 332

A bit late but may be this pause caused by alias @/
try to import it like

import "../styles/globals.scss"

or

import "../to-your-styles-folder-path/globals.scss"

Upvotes: 0

Related Questions