Ломаются стили next.js

Я пишу классы четко в соответствии с документацией. Я создаю файл для компонента, например, header.module.scss. Импортирую его в компонент. Использую className={style.header}, чтобы у меня отобразились стили. В результате, вместо того, чтобы классы были по сути такими: header_header__23jbsd, они выглядят так: header-module-scss-module__jDkeEW__header. При создании проекта еще на стартовой верстке от next стили выглядят как раз все примерно так: header_header__23jbsd. То есть сначала имя файла стилей, то есть header, потом сам класс _header и хеш. Я не уверен, что они должны быть именно такими, но уже несколько раз при создании проекта они сначала выглядят короткими красивыми, а спустя время становятся такими длинными. Да в принципе на сайтах, где используется next везде классы как раз такие. Может просто нужно сделать кукую то настройку?

Пример кода:

import styles from "./header.module.scss"

export default function Header(){ 
    return (
        <header className={styles.header}>
            <div className={styles.headerContainer}>
                
            </div>
        </header>
    )
};

.header{
    padding: 20px 0;
}

.headerContainer{
    max-width: 765px;
}

Дерево файлов:

И файл конфига. Его я не настраивал вообще:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;