Next js Boilerplate
v3.60.5
Boilerplate and Starter for Next.js with App Router, Tailwind CSS, and TypeScript ⚡️ Prioritizing developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Vitest (replacing Jest), Testing Library, Playwright, Commitlint, VSCode, Tailwind CSS, Authentication with Clerk, Database with DrizzleORM (PostgreSQL, SQLite, и MySQL), мониторинг ошибок с Sentry, регистрация с Pino.js и управление журналами, мониторинг как код, сборник рассказов, многоязычный (i18n), безопасность с Arcjet (обнаружение бота, ограничение скорости, защита атак и т. Д.) И многое другое.
Клонируйте этот проект и используйте его для создания собственного проекта Next.js. Вы можете проверить живую демонстрацию на следующей.
 |  |   |
 |  | |
 |  | |
| Добавьте здесь свой логотип |
Живая демонстрация: next.js coalerplate
| Зарегистрироваться | Войти |
|---|---|
 | |
Сначала опыт разработчика, чрезвычайно гибкая структура кода и сохранить только то, что вам нужно:
@Встроенная функция от Next.js:
Запустите следующую команду в вашей местной среде:
git clone --depth=1 https://github.com/ixartz/Next-js-Boilerplate.git my-project-name
cd my-project-name
npm installДля вашей информации все зависимости обновляются каждый месяц.
Затем вы можете запустить проект локально в режиме разработки с Live Reload, выполнив:
npm run devОткройте http: // localhost: 3000 с вашим любимым браузером, чтобы увидеть ваш проект.
Чтобы начать, вам нужно будет создать учетную запись клерка на Clerk.com и создать новое приложение на приборной панели клерка. Как только вы это сделаете, скопируйте значения NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY и CLERK_SECRET_KEY и добавьте их в файл .env.local (не отслеживается GIT):
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_keyТеперь у вас есть полностью функциональная система аутентификации с Next.js, включая такие функции, как регистрация, регистрация, вход, забыл пароль, сбросить пароль, профиль обновления, обновление пароля, обновление электронной почты, удаление учетной записи и многое другое.
В проекте используется мороропо-палор, безопасный тип ORM, который совместим с базами данных PostgreSQL, SQLite и MySQL. По умолчанию проект настроен на беспрепятственную работу с PostgreSQL, и у вас есть возможность выбрать любого поставщика базы данных PostGRESQL по вашему выбору.
Для перевода в проекте используется next-intl в сочетании с Crowdin. Как разработчик, вам нужно только позаботиться о английской (или другой языке по умолчанию). Переводы для других языков автоматически генерируются и обрабатываются Crowdin. Вы можете использовать Crowdin для сотрудничества с вашей командой по переводу или перевести сообщения самостоятельно с помощью машинного перевода.
Чтобы настроить перевод (i18n), создайте учетную запись на Crowdin.com и создайте новый проект. В недавно созданном проекте вы сможете найти идентификатор проекта. Вам также нужно будет создать новый токен личного доступа, перейдя в настройки учетной записи> API. Затем, в ваших действиях GitHub, вам необходимо определить следующие переменные среды: CROWDIN_PROJECT_ID и CROWDIN_PERSONAL_TOKEN .
После определения переменных среды в ваших действиях GitHub ваши файлы локализации будут синхронизироваться с Crowdin каждый раз, когда вы подталкиваете новый коммит в main ветвь.
.
├── README.md # README file
├── .github # GitHub folder
├── .husky # Husky configuration
├── .storybook # Storybook folder
├── .vscode # VSCode configuration
├── migrations # Database migrations
├── public # Public assets folder
├── src
│ ├── app # Next JS App (App Router)
│ ├── components # React components
│ ├── libs # 3rd party libraries configuration
│ ├── locales # Locales folder (i18n messages)
│ ├── models # Database models
│ ├── styles # Styles folder
│ ├── templates # Templates folder
│ ├── types # Type definitions
│ ├── utils # Utilities folder
│ └── validations # Validation schemas
├── tests
│ ├── e2e # E2E tests, also includes Monitoring as Code
│ └── integration # Integration tests
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration Вы можете легко настроить Next JS Cowerplate, выполнив поиск всего проекта для FIXME: для быстрого настройки. Вот некоторые из наиболее важных файлов для настройки:
public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png и public/favicon-32x32.png : ваш сайт Favicon Faviconsrc/utils/AppConfig.ts : файл конфигурацииsrc/templates/BaseTemplate.tsx : тема по умолчаниюnext.config.mjs : Next.js configuration.env : переменные среды по умолчаниюУ вас есть полный доступ к исходному коду для дальнейшей настройки. Предоставленный код является лишь примером, который поможет вам начать ваш проект. Небо - предел.
Чтобы изменить схему базы данных в проекте, вы можете обновить файл схемы, расположенный по адресу ./src/models/Schema.ts . Этот файл определяет структуру ваших таблиц базы данных, используя библиотеку мороженного орм.
После внесения изменений в схему генерируйте миграцию, выполнив следующую команду:
npm run db:generateЭто создаст файл миграции, который отражает изменения вашей схемы. Миграция автоматически применяется во время следующего взаимодействия с базой данных, поэтому нет необходимости запускать его вручную или перезапустить сервер.
Проект следует за обычной спецификацией Commits, что означает, что все сообщения о коммите должны быть отформатированы соответствующим образом. Чтобы помочь вам написать сообщения о коммите, проект использует Commerizen, интерактивный CLI, который проводит вас через процесс коммита. Чтобы использовать его, запустите следующую команду:
npm run commit Одним из преимуществ использования обычных коммитов является возможность автоматического генерирования файла CHANGELOG . Это также позволяет нам автоматически определять номер следующего версии на основе типов коммитов, которые включены в выпуск.
Все модульные тесты расположены рядом с исходным кодом в том же каталоге, что облегчает их поиск. Проект использует библиотеку Vitest и React Testing для модульного тестирования. Вы можете запустить тесты со следующей командой:
npm run testПроект использует Playwright для интеграции и сквозного (E2E) тестирования. Вы можете запустить тесты со следующими командами:
npx playwright install # Only for the first time in a new environment
npm run test:e2e В локальной среде визуальное тестирование отключено, а терминал отобразит сообщение [percy] Percy is not running, disabling snapshots. Полем По умолчанию визуальное тестирование работает только в действиях GitHub.
Папка маршрутизатора приложений совместима со временем выполнения Edge. Вы можете включить его, добавив следующие строки src/app/layouts.tsx :
export const runtime = 'edge' ; Для вашей информации миграция базы данных не совместима со временем выполнения Edge. Таким образом, вам нужно отключить автоматическую миграцию в src/libs/DB.ts :
await migrate ( db , { migrationsFolder : './migrations' } ) ;После отключения, вы должны запустить миграцию вручную с:
npm run db:migrateВам также необходимо запустить команду каждый раз, когда вы хотите обновить схему базы данных.
В процессе сборки миграции базы данных выполняются автоматически, поэтому нет необходимости запускать их вручную. Тем не менее, вы должны определить DATABASE_URL в переменных вашей среды.
Затем вы можете создать производственную сборку с:
$ npm run buildОн генерирует оптимизированную производственную сборку шаблона. Чтобы проверить сгенерированную сборку, запустите:
$ npm run start Вам также необходимо определить переменные среды CLERK_SECRET_KEY , используя свой собственный ключ.
Эта команда запускает локальный сервер, используя производственную сборку. Теперь вы можете открыть http: // localhost: 3000 в предпочтительном браузере, чтобы увидеть результат.
Проект использует Sentry для мониторинга ошибок. В среде разработки не требуется дополнительная настройка: Next.js Cowerplate предварительно настроен для использования Sentry и Spotlight (Sentry for Development). Все ошибки будут автоматически отправлены в ваш местный экземпляр Spotlight, что позволит вам испытать Sentry локально.
Для производственной среды вам нужно создать часовой учетную запись и новый проект. Затем, в next.config.mjs , вам необходимо обновить атрибуты org и project в функции withSentryConfig . Кроме того, добавьте свой Sentry DSN в sentry.client.config.ts , sentry.edge.config.ts и sentry.server.config.ts .
Next.js Cowerplate полагается на Codecov для решения отчетности по покрытию кода. Чтобы включить Codecov, создайте учетную запись Codecov и подключите ее к своей учетной записи GitHub. Ваши репозитории должны появиться на вашей панели управления Codecov. Выберите желаемый репозиторий и скопируйте токен. В действиях GitHub определите переменную среды CODECOV_TOKEN и вставьте токен.
Обязательно создайте CODECOV_TOKEN как секрет действий GitHub, не вставляйте его непосредственно в исходный код.
Проект использует pino.js для регистрации. В среде разработки журналы отображаются в консоли по умолчанию.
Для производства проект уже интегрирован с лучшим стеком для управления и запроса ваших журналов с помощью SQL. Чтобы использовать лучший стек, вам необходимо создать лучшую учетную запись стека и создать новый источник: перейдите к своему лучшему журналу стека в панели управления> Источники> Подключить источник. Затем вам нужно дать имя своему источнику и выбрать Node.js в качестве платформы.
После создания источника вы сможете просматривать и копировать токен своего источника. В переменных вашей среды вставьте токен в переменную LOGTAIL_SOURCE_TOKEN . Теперь все журналы будут автоматически отправлены и проживают и принимают лучшее стек.
Проект использует проверку, чтобы убедиться, что ваша производственная среда всегда работает. Через регулярные промежутки времени проверка запускает тесты, заканчивающиеся *.check.e2e.ts и уведомляет вас, если какой -либо из тестов не удастся. Кроме того, у вас есть гибкость для выполнения тестов из нескольких мест, чтобы гарантировать, что ваше приложение будет доступно во всем мире.
Чтобы использовать Checkly, вы должны сначала создать учетную запись на их веб -сайте. После создания учетной записи сгенерируйте новый ключ API на панели управления Checkly и установите переменную среды CHECKLY_API_KEY в действиях GitHub. Кроме того, вам необходимо будет определить CHECKLY_ACCOUNT_ID , который также можно найти на вашей панели Checkly в соответствии с настройками пользователя> General.
Чтобы завершить настройку, обновите файл checkly.config.ts с вашим собственным адресом электронной почты и производственным URL.
Проект использует Arcjet, продукт Security As Code, который включает в себя несколько функций, которые можно использовать индивидуально или объединить, чтобы обеспечить защиту для вашего сайта.
Чтобы настроить Arcjet, создайте бесплатную учетную запись и получите свой ключ API. Затем добавьте его в переменную среды ARCJET_KEY .
Arcjet настроен с двумя основными функциями: обнаружение бота и Arcjet Shield WAF:
Arcjet настроен с центральным клиентом в src/libs/Arcjet.ts который включает в себя правила щита WAF. Дополнительные правила настроены в src/app/[locale]/layout.tsx на основе типа страницы.
Next.js Cowerplate включает в себя встроенный анализатор пакета. Его можно использовать для анализа размера ваших связей JavaScript. Чтобы начать, запустите следующую команду:
npm run build-statsЗапустив команду, она автоматически откроет новое окно браузера с результатами.
Проект уже настроен с помощью Studio для изучения базы данных. Вы можете запустить следующую команду, чтобы открыть студию базы данных:
npm run db:studioЗатем вы можете открыть https://local.drizzle.studio с вашим любимым браузером для изучения вашей базы данных.
Если вы являетесь пользователем VSCODE, вы можете получить лучшую интеграцию с VSCODE, установив предложенное расширение в .vscode/extension.json . Стартовый код создает настройки для беспроблемной интеграции с VSCODE. Конфигурация отладки также предназначена для опыта отладки Frontend и Backend.
С плагинами, установленными в вашем VSCODE, Eslint и Creatier могут автоматически исправить код и отображать ошибки. То же самое относится и к тестированию: вы можете установить расширение Vistest VSCODE для автоматического запуска ваших тестов, а также показывает покрытие кода в контексте.
Pro Tips: Если вам нужна проверка широкопровода проекта с TypeScript, вы можете запустить сборку с CMD + Shift + B на Mac.
Все могут внести свой вклад в этот проект. Не стесняйтесь открывать проблему, если у вас есть какие -либо вопросы или найти ошибку. Полностью открыто для предложений и улучшений.
Лицензировано по лицензии MIT, Copyright © 2024
Смотрите лицензию для получения дополнительной информации.
| | |
| | |
| | |
| Добавьте здесь свой логотип |
Сделано с ♥ creativedesignsguru
Ищете индивидуальную шволю, чтобы начать свой проект? Я был бы рад обсудить, как я могу помочь вам построить его. Не стесняйтесь обращаться в любое время по адресу [email protected]!
