Не применяются стили к компонентам в Next.js

Всем привет! Осваиваю Next. Столкнулся с непонятной проблемой.

Есть компонент Htag

export interface IHtagProps
  extends DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> {
  tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
  children: ReactNode;
  colorWith?: boolean;
}

Сам компонент выглядит так:

export const Htag = ({
  tag,
  children,
  colorWith,
  className,
  ...props
}: IHtagProps): JSX.Element => {
   return (
     <h1
       className={cn(styles.h1, className, {
         [styles.h_white]: colorWith == true,
       })}
     {...props}
     >
       {children}
     </h1>
   );
}

Применяю его для Layout, периодически где надо добавляю классы дополнительные.

<Htag tag="h1" colorWith={true} className={styles.h1}>
    Заголовок
</Htag>

У меня применяются классы и самого компонента, и дополнительные. Все нормально. По такому же принципу использую и несколько других компонентов.

Но как только я начинаю использовать их на страницах в директории pages, стили перестают применяться. В чем подвох?