precedent

Прецедент

Строительные блоки для вашего следующего проекта

Введение · Развертывание в одном клике · Технический стек + функции · Автор

Введение

Прецедент - это самоуверенная коллекция компонентов, крючков и коммунальных услуг для вашего проекта Next.js.

Развертывание одного клика

Вы можете развернуть этот шаблон в Vercel с кнопкой ниже:

Вы также можете клонировать и создать это репо локально со следующей командой:

npx create-next-app precedent --example " https://github.com/steven-tey/precedent "

Затем установите зависимости с выбранным менеджером пакетов:

npm i
yarn
pnpm i

Технологический стек + функции

Precedent-Demo.mp4

Рамки

• Next.js - React Framework для создания приложений для выступления с лучшим опытом разработчика
• Клерк - всеобъемлющая платформа управления пользователями с красиво разработанными компонентами реагирования, выпадает

Платформы

• Vercel - легко просмотреть и развернуть изменения с GIT

UI

• Tailwind CSS-первая коммунальная структура CSS для быстрой разработки пользовательского интерфейса
• Radix - примитивы, такие как Modal, Popover и т. Д., Чтобы создать звездный пользовательский опыт
• Движение Framer - библиотека движения для с легкостью реагировать на анимирующие компоненты
• Lucide-красиво простые, идеальные значки для пикселей
• next/font - оптимизируйте пользовательские шрифты и удалите внешние сетевые запросы для повышения производительности
• ImageResponse - генерируйте динамические изображения открытых графиков на краю

Крючки и коммунальные услуги

• useIntersectionObserver - React Hook, чтобы наблюдать, когда входит элемент или покидает просмотр
• useLocalStorage - Постоянные данные в локальном хранилище браузера
• useScroll - React Hook для наблюдения за положением прокрутки (пример)
• nFormatter - номера форматов с суффиксами, такими как 1.2k или 1.2M
• capitalize - используйте первую букву строки
• truncate - усекайте строку до указанной длины
• use-debounce

Качество кода

• TypeScript-Проверка статического типа для сквозных типов
• Кратчее - самоуверенный форматер кода для последовательного стиля кода
• Eslint - подключаемый Linter для lete.js и TypeScript

Разнообразный

• Vercel Analytics-отслеживайте уникальные посетители, просмотр страниц и многое другое в удобном для конфиденциальности

Автор

• Стивен Тей (@steventey)