ts nextjs tailwind starter

Next.js + Tailwind CSS + TypeScript Starter и Cowerplate

? TS-NEXTJS-TAILWIND-Starter

Next.js + Tailwind CSS + TypeScript Starter, упакованный с полезными функциями разработки.

Сделано Теодором Кларенсом

Функции

Этот репозиторий есть? батарея с:

• ⚡ Next.js 14 с приложением маршрутизатора
• ⚛ React 18
• Машинопись
• ? Tailwind CSS 3 - настроенный с переменными CSS для расширения основного цвета
• ? Предварительно построенные компоненты-компоненты, которые автоматически адаптируются с цветом вашего бренда, проверьте здесь для демонстрации
• ? Шутка - настроено для модульного тестирования
• ? Абсолютный псевдоним импорта и пути - импортные компоненты с использованием @/ prefix
• ? Eslint - найдите и исправляйте проблемы в вашем коде, также будет автоматически сортировать ваш импорт
• ? Красивее - форматируйте свой код последовательно
• ? Husky & Lint Stared - запустите сценарии на ваших поэтапных файлах до их совершения
• ? Традиционная коммита - убедитесь, что вы и ваши товарищи по команде следите
• ⏰ release-please , пожалуйста-сгенерируйте свой изменен
• ? Действия GitHub - проведите свой код на PR
• ? Автоматическая филиала и выпуска Autolink - Branch будет автоматически создан на расписании , и автоматически связана с PR
• Фрагменты - коллекция полезных фрагментов
• ? Функция «Открытый граф» - Потрясающий открытый график, сгенерированный с использованием OG, разветвляется и разверните!
• ? Карта сайта - автоматически генерировать sitemap.xml
• ? Пакет расширения - легко устанавливайте общие библиотеки, дополнительные компоненты и конфигурации.

Смотрите детали функции и ChangeLog? для большего.

Вы также можете проверить все детали и демонстрации в моем блоге:

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

Начиная

1. Клонировать этот шаблон, используя один из трех способов

1. Используйте этот репозиторий в качестве шаблона

   Раскрытие: используя этот репозиторий в качестве шаблона, в вашем репозитории будет атрибуция.

   Я признателю, если вы это сделаете, так что этот шаблон тоже может быть известен другим?

   

2. Использование create-next-app

   pnpm create next-app  -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter ts-pnpm

   Если вы все еще хотите использовать каталог страниц ( не активно поддерживается ), вы можете использовать эту команду

   npx create-next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter/tree/pages-directory project-name

3. Используя degit

   npx degit theodorusclarence/ts-nextjs-tailwind-starter YOUR_APP_NAME

4. Развернуть в Vercel

2. Установите зависимости

Его рекомендуется использовать PNPM , чтобы хаски могли работать должным образом.

pnpm install

3. Запустите сервер разработки

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

pnpm dev

Откройте http: // localhost: 3000 с вашим браузером, чтобы увидеть результат. Вы можете начать редактировать страницу, изменяя src/pages/index.tsx .

4. Измените по умолчанию

Есть некоторые вещи, которые вам нужно изменить, включая заголовок, URL -адреса, любимые и т. Д.

Найдите все комментарии с! StarterConf, затем следуйте руководству.

Не забудьте изменить имя пакета в package.json

5. Конвенция о сообщении

Этот стартер использует обычные коммиты, обязательно использовать его для совершения изменений.

Проекты с использованием TS-nextJS-TailWind-Starter

• theodorusclarence.com (источник)
• Notiolink (источник)
• NextJs + Materia UI + TypeScript

Вы используете этот стартер? Пожалуйста, добавьте свою страницу (и репо) в конце списка с помощью запроса на вытягивание. ?

Пакет расширения?

Этот стартер теперь оснащен пакетом расширения.

Вы можете легко добавить расширение, такое как Form + Components React Hook + Components, сборник рассказов и, скорее всего, просто используя одну командную строку.

Cleanshot.2021-12-04.at.18.54.07-trimmed.mp4

Проверьте репозиторий пакета расширения для команд

Обновление маршрутизатора приложений

В связи с обновлением маршрутизатора приложений пакет расширения в настоящее время устарел . Это будет обновлено в будущем. Вы все еще можете использовать их по копированию и вставки файлов.