Шаблонный код — это минимальный код многократного использования, который требуется всем приложениям и встречается в каждом из них. Это такой многоразовый «клей» для компонентов.
В статье мы расскажем о некоторых популярных видах шаблонного кода на NextJS.
1. Next Right Now
Первый из них называется Next Right Now.
Этот шаблонный код пригоден для промышленной эксплуатации, применяет фреймворк Next.js и содержит различные заранее заданные настройки, которые можно использовать под конкретные требования. Кроме того, в него можно добавлять собственные настройки.
2. RAN
Ещё один популярный шаблонный код, называющийся также React GraphQL и Next.js Toolkit.
Имеет такие функции, как горячая перезагрузка для разработки, SEO ready (Готовность к поисковой оптимизации), performance first (Производительность превыше всего), функции ES6, CSS-in-JS (CSS в JS), а также интегрированные eslint и prettier.
Кроме того, в нём есть интерфейс командной строки для быстрого (за считанные секунды) создания новых страниц.
3. Next.js Starter
Это шаблонное приложение для создания веб-приложений с использованием Express, SASS/SCSS, Bootstrap, Reactstrap (Boostrap 4 для React), а также набора иконок Ionicons.
Кроме того, оно поддерживает функции аутентификации посредством OAuth и электронной почты с помощью Passport; функции защищённого сеанса с использованием куков и CSRF-токенов для предотвращения атак, связанных с подделкой межсайтовых запросов; функции обработки маршрутов и т. д.
Акцент здесь сделан на предоставлении всей необходимой базовой функциональности, позволяющей напрямую добавлять бизнес-логику. Репозиторий теперь обозначен как архив, но всё равно это хороший шаблонный код для начинающих.
4. Next Blog Firestore
А это шаблонный код для создания сайтов с целью ведения блогов. Он использует Next.js для рендеринга на стороне сервера (SSR) и задействует Firebase Firestore API для хранения и получения данных.
Кроме того, здесь применяется пользовательская система управления контентом (CMS), созданная с помощью React, контейнера состояний Mobx State Tree и библиотеки Styled Components для добавления, обновления или удаления содержимого.
Этот шаблонный код предоставляет такие функции, как мультиязычная поддержка, поддержка нескольких авторов, статьи и публикации по тегам и категориям, вывод статей и публикаций блога в сайдбар, поисковая оптимизация, а также интегрированные eslint и prettier.
5. Next.js Redux Starter
Этот шаблонный код предназначен для создания сложных приложений.
Он использует Redux для управления состоянием приложений вместе с динамической маршрутизацией с помощью Express и next-routes.
Кроме того, он задействует стилевое оформление Styled Components с интегрированным модульным тестированием, применяя react-testing-library и linting.
6. Nextron
А это шаблонный код для создания красивых настольных приложений.
Чтобы делать такие приложения, достаточно знаний о вебе и применения NextJS и Electron.
Если вам потребуется создавать настольные приложения, обязательно ознакомьтесь с этими примерами создания таких настольных приложений.
7. next-boilerplate
Этот шаблонный код предназначен для создания хорошо структурированных приложений на Next.js и TypeScript.
Он предоставляет множество функций благодаря входящим в его состав компонентам и инструментам, таким как Next.js, TypeScript, Redux, Express.js, SASS/SCSS, Reverse Proxy, Babel, Eslint и многим другим.
В next-boilerplate также имеется встроенный инструмент CLI (интерфейс командной строки) для оптимизации создания новых компонентов.
А кроме того, он поддерживает Docker для запуска приложения внутри контейнеров.
8. nextjs-mongodb-app
А это шаблон для создания полнофункциональных бессерверных приложений с использованием Next.js и MongoDB.
Он поддерживает такие функции, как аутентификация с помощью passportjs, сеансы, промежуточное ПО и т. д.
9. KNESTS
Это шаблонный код на стороне клиента и сервера или Hackathon starter.
В его состав входят: PostgreSQL, Knex.js, NestJS, Next.js, GraphQL, React (с хуками и TypeScript), Material-UI, многоэтапные сборки Docker-образов, инструмент Docker compose и полностью настроенный конвейер сборки в Gitlab.
Этот шаблонный код очень легко использовать и запускать приложение с помощью Docker.
10. Devii
Этот шаблонный код предназначен для настройки блога разработчика по примеру дизайна сайта Medium со всеми самыми крутыми и минималистичными функциями.
Он поддерживает генератор статических сайтов на основе разметки, горячую перезагрузку, автоматическую генерацию RSS-лент, поисковую автоматизацию, Google Analytics, форматирование в стиле Github и даёт возможность добавления собственных функций.
Если вам нужен простой сайт для ведения блога с поддержкой разметки, то этот шаблонный код будет незаменим с точки зрения разработчика.
Заключение
Все виды шаблонного кода содержат базовый, необходимый код, требующийся для создания любого приложения. И у каждого из них свои преимущества и недостатки. Всё зависит от типа проекта и его требований.
Спасибо за внимание!
Читайте также:
- Одномерный клеточный автомат в JavaScript
- Введение: 4 новейших операции JavaScript
- Сравниваем WebGL-фреймворки Three.js и Babylon.js
Читайте нас в Telegram, VK и Яндекс.Дзен
Перевод статьи Ankit Jain: Top NextJS Boilerplates for 2021
