Ошибка: Font file not found: Can’t resolve ‘../fonts/GeistMonoVF.woff’ в Next.js

disel

Эта ошибка возникает, когда Next.js не может найти указанный файл шрифта. Давайте рассмотрим, как правильно настроить шрифты в вашем проекте Next.js и устранить эту ошибку.

1. Проверьте путь к файлу шрифта

Убедитесь, что файл GeistMonoVF.woff действительно существует в указанной директории. Если вы используете относительный путь, он должен быть правильным относительно файла, в котором вы его подключаете.

  • Если файл находится в src/fonts, путь должен быть ../fonts/GeistMonoVF.woff.
  • Если файл находится в public/fonts, путь должен быть /fonts/GeistMonoVF.woff.

2. Рекомендуемое место для шрифтов

Next.js рекомендует хранить статические файлы, такие как шрифты, в папке public. Это позволяет легко обращаться к ним через корневой URL.

Шаги для перемещения шрифта:

  1. Переместите файл GeistMonoVF.woff в папку public/fonts:javascriptpublic/fonts/GeistMonoVF.woff
  2. Обновите путь к файлу в вашем коде:javascriptconst geistFont = localFont({ src: '/fonts/GeistMonoVF.woff', variable: '--font-geist', });

Теперь Next.js сможет найти файл, так как все ресурсы в папке public доступны через корневой URL.

3. Использование next/font для локальных шрифтов

Next.js предоставляет встроенный способ работы с локальными шрифтами через модуль next/font. Это упрощает загрузку шрифтов и их оптимизацию.

Пример использования:

javascript

import localFont from 'next/font/local';

const geistFont = localFont({
  src: '/fonts/GeistMonoVF.woff',
  variable: '--font-geist',
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={geistFont.variable}>
      <body>{children}</body>
    </html>
  );
}

4. Проверка конфигурации Webpack

Если вы используете кастомную конфигурацию Webpack в next.config.js, убедитесь, что она поддерживает загрузку файлов шрифтов. Например, добавьте правило для обработки файлов .woff и .woff2:

javascript

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      type: 'asset/resource',
      generator: {
        filename: 'static/fonts/[name][ext]',
      },
    });
    return config;
  },
};

5. Очистка кэша браузера

Иногда браузер может кэшировать старую версию файлов. Очистите кэш браузера или откройте сайт в режиме инкогнито, чтобы убедиться, что изменения применились.

6. Проверка на ошибки в пути

Если вы используете относительный путь, убедитесь, что он корректен относительно файла, где он используется. Например, если вы подключаете шрифт из src/app/(site)/layout.js, путь ../fonts/GeistMonoVF.woff должен быть правильным относительно этой папки.

Итог

Наиболее рекомендуемый способ — переместить файл шрифта в папку public/fonts и использовать абсолютный путь /fonts/GeistMonoVF.woff. Это устранит большинство проблем с доступом к файлу.Если ошибка сохраняется, дайте знать, и я помогу вам разобраться! 😊

Похожие записи/страницы: