typescript nextjs starter

Неопинированный стартер типового ядра для next.js

Высокая масштабируемая основа с лучшим DX. Все инструменты, необходимые для создания вашего следующего проекта.

_{Создан Жоао Педро с помощью многих замечательных участников.}

Функции

• ⚡ Next.js 15 (маршрутизатор приложения)
• ⚛ React 19
• ⛑ TypeScript
• ? Eslint 9 - чтобы найти и исправить проблемы в вашем коде
• ? Красиво - форматер кода для последовательного стиля
• ? Хаски - для запуска сценариев, прежде чем совершать
• ? Commitlint - чтобы убедиться, что ваши сообщения о коммите следуют за конвенцией
• ? Reportate - чтобы держать ваши зависимости в актуальном состоянии
• Пожизненная полоса-запустите Eslint и красивее против поставленных файлов GIT
• ? PR Workflow - Запустите тип Проверка и Линтерс на запросах на притяжение
• EditorConfig - Последовательные стили кодирования в редакторах и IDES
• ? Картирование пути - импортные компоненты или изображения с использованием префикса @
• ? CSP - Политика безопасности контента для повышения безопасности (минимальная политика по умолчанию)
• ? T3 Env-тип-безопасные переменные среды
• ? Перенаправления - легко добавить перенаправления в ваше приложение

Быстрый старт

Лучший способ начать с этого шаблона - использовать Create Next App.

 # pnpm
pnpm create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# yarn
yarn create next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter
# npm
npx create-next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter

Разработка

Чтобы начать проект локально, запустите:

pnpm dev

Откройте http://localhost:3000 с вашим браузером, чтобы увидеть результат.

Отзывы

«Этот стартер, безусловно, является лучшим стартером для TypeScript для следующей.
- Арафат Захан

«Я действительно могу порекомендовать Stearscript Starter Repo Next.js как прочную основу для ваших будущих проектов Next.js».
- Корфиц

«Блестящая работа!»
- SOHAM DASGUPTA

Витрина

Список веб -сайтов, которые начались с стартера Next.js Typescript:

• Freeinvoice.dev
• Понятие аватар
• IKEA низкая цена
• Hygraph.com
• Rocketseat.com.br
• adagaschapeco.com
• infork.vercel.app
• Cryptools.dev
• Добавьте свой

Документация

Требования

• Node.js> = 20
• PNPM 9

Структура каталога

• .github - конфигурация GitHub, включая рабочий процесс CI.
  
• .husky - конфигурация хаски и крючки.
  
• public - Статические активы, такие как robots.txt, изображения и любимый.
  
• src - исходный код приложения, включая страницы, компоненты, стили.

Сценарии

• pnpm dev - Запускает приложение в режиме разработки по адресу http://localhost:3000 .
• pnpm build - создает оптимизированную производственную сборку вашего приложения.
• pnpm start - запускает приложение в производственном режиме.
• pnpm type-check -проверка кода с использованием компилятора TypeScript.
• pnpm lint - запускает Eslint для всех файлов в каталоге src .
• pnpm lint:fix - Запускает Eslint Fix для всех файлов в каталоге src .
• pnpm format - запускается красивее для всех файлов в каталоге src .
• pnpm format:check - Проверьте более симпатичный список файлов, которые необходимо отформатировать.
• pnpm format:ci - более красивая проверка для CI.

Картирование пути

TypeScript предварительно сконфигурирована с помощью пользовательских сопоставлений путей. Чтобы импортировать компоненты или файлы, используйте префикс @ .

 import { Button } from '@/components/Button' ;
// To import images or other files from the public folder
import avatar from '@/public/avatar.png' ;

Переключитесь на пряжу/NPM

Этот стартер по умолчанию использует PNPM, но этот выбор ваш. Если вы хотите переключиться на пряжу/NPM, удалите файл pnpm-lock.yaml , установите зависимости с пряжей/NPM, измените рабочий процесс CI и Husky Git Hooks, чтобы использовать команды пряжи/NPM.

ПРИМЕЧАНИЕ. Если вы используете пряжу, обязательно выполните эти шаги из документации Husky, чтобы Git Hooks не сбои с пряжей в окнах.

Переменные среды

Мы используем T3 Env для управления переменными среды. Создайте файл .env.local в корне проекта и добавьте там переменные среды.

При добавлении дополнительных переменных среды схема в ./src/lib/env/client.ts или ./src/lib/env/server.ts должна быть обновлена соответствующим образом.

Перенаправления

Чтобы добавить перенаправления, обновите массив redirects в ./redirects.ts . Это напечатано, поэтому вы получите автозаполнение для свойств.

CSP (политика безопасности контента)

Политика безопасности контента (CSP)-это уровень безопасности, который помогает обнаружить и смягчить определенные типы атак, включая сценарии поперечного сайте (XSS) и атаки впрыска данных. CSP реализован в файле next.config.ts .

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

Лицензия

Этот проект лицензирован по лицензии MIT - см. Файл License.md для получения дополнительной информации.