Стартовый шаблон Next.js

Содержание

1. Обзор
2. 🎉 Особенности
3. 🚀 Развертывание
4. 🎯 Начало работы
   1. 1. Клонируйте этот шаблон одним из трех способов
   2. 2. Установка зависимостей
   3. 3. Настройка переменных окружения
   4. 4. Подготовить хаски
   5. 5. Запустите сервер разработки
5. ⚙️ Обзор скриптов
6. 🤝 Вклад
7. ❤️ Поддержка

Привет, Я создал стартовый шаблон для next.js, он также содержит typescript, tailwind, shadcn/ui. Я уже писал об этом здесь, но я добавил некоторые новые функциональные возможности, такие как: Next-auth, Prisma, React-hook-form, T3-env.
Поэтому я хотел бы попросить вас дать обратную связь и рассказать о любых недостающих функциях.
Если вам понравился проект, я буду благодарен, если вы оставите звезду. 🌟 https://github.com/Skolaczk/next-starter

Обзор

Стартовый шаблон Next.js с такими функциями, как TypeScript, Tailwind CSS, Next-auth, Eslint, инструменты тестирования и многое другое. Начните свой проект с эффективностью и стилем.

🎉 Особенности

• 🚀 Next.js 14 (маршрутизатор приложений)
• ⚛️ React 18
• 📘 Typescript
• 🎨 TailwindCSS - сортировка, объединение и линтинг классов
• 🛠️ Shadcn/ui - настраиваемые компоненты пользовательского интерфейса
• 🔒 Next-auth - Простая библиотека аутентификации для Next.js (провайдер GitHub)
• 🛡️ Prisma - ORM для node.js
• 📋 React-hook-form - Простое и эффективное управление формами
• 🔍 Zod - Библиотека валидации схем
• 🧪 Библиотека тестирования Jest & React - Настроена для модульного тестирования
• 🎭 Playwright - Настроена для e2e тестирования
• 📈 Абсолютный импорт и псевдоним пути - Импорт компонентов с использованием префикса @/
• 💅 Prettier - Форматировщик кода
• 🧹 Eslint - инструмент для линтинга кода
• 🐶 Husky & Lint Staged - Запуск скриптов на ваших стадийных файлах перед их фиксацией
• 🔹 Icons - От Lucide
• 🌑 Темный режим - С next-themes
• 🗺️ Sitemap & robots.txt - С next-sitemap
• 📝 Commitlint - Линтует ваши коммиты в git
• 🤖 Github actions - Линтовка вашего кода на PR
• ⚙️ T3-env - Управление переменными окружения
• 💯 Идеальная оценка Lighthouse

🚀 Развертывание

Легко разверните свое приложение Next.js с помощью Vercel, нажав на кнопку ниже:

🎯 Начало работы

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

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

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

npx create-next-app -e https://github.com/Skolaczk/next-starter my-project-name

1. Использование git clone

git clone https://github.com/Skolaczk/next-starter my-project-name.

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

npm install

3. Настройка переменных окружения

Создайте файл .env и установите переменные окружения из файла .env.example.

4. Подготовить хаски

Это необходимо, если вы хотите, чтобы husky работал

npm run prepare

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

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

npm run dev.

и открыть http://localhost:3000/, чтобы увидеть это приложение.

⚙️ Обзор скриптов

Следующие скрипты доступны в файле package.json:

• dev: Запуск сервера разработки
• build: Сборка приложения
• start: Запустить производственный сервер
• preview: Выполнение команд build и start вместе
• lint: Линтовать код с помощью Eslint
• lint:fix: Исправление ошибок линтинга
• format:check: Проверяет код на правильность форматирования
• format:write: Исправление ошибок форматирования
• typecheck: Проверка типа TypeScript без создания файлов
• test: Запуск модульных тестов
• test:watch: Запуск модульных тестов в режиме наблюдения
• e2e: Запуск сквозных тестов
• e2e:ui: Запуск сквозных тестов с пользовательским интерфейсом
• postbuild: Генерировать карту сайта
• prepare: Установка Husky для управления Git-хуками

🤝 Вклад

Чтобы внести свой вклад, пожалуйста, выполните следующие шаги:

1. Форкните репозиторий.
2. Создайте новую ветку.
3. Внесите свои изменения и зафиксируйте их.
4. Внесите изменения в форк репозитория.
5. Создайте запрос на притяжение.

❤️ Поддержка

Если вам понравился проект, я буду благодарен, если вы оставите звезду. 🌟😊

Сделано Michał Skolak