Назад к проектам
В разработкеNext.jsReactTypeScriptTailwind CSSVitest2026

Frontend Mentor (Next.js)

Приложение Next.js 16 с React 19 для заданий Frontend Mentor: структура по челленджу (изолированные ассеты, маршруты и стили), индекс сложностей и статусов, соглашения в репозитории. Правила линта и форматирования.

Смотреть демоСмотреть код

Скриншоты проекта

Frontend Mentor (Next.js) — vista previa

1 / 5

Чему я научился

  • App Router и вложенные layout по группам маршрутов
  • Изоляция челленджей в папках, чтобы не смешивать стили и ресурсы
  • Типизированные данные индекса (объединения типов и общие константы)

Дополнительно

  • У каждого челленджа есть превью, решение на Frontend Mentor и код на GitHub.
  • У каждого челленджа есть бейджи сложности и статуса, а также описание и теги.
  • Внутри челленджа есть элемент, видимый только с клавиатуры (Tab/Shift+Tab), чтобы вернуться к началу.
  • На /start показаны два связанных с Frontend Mentor сайта и чем они отличаются.

Технические детали

  • •Next.js 16 (App Router), React 19, TypeScript 5
  • •Tailwind CSS 4
  • •ESLint, Prettier, Vitest