10 видов шаблонного кода на NextJS

Шаблонный код  —  это минимальный код многократного использования, который требуется всем приложениям и встречается в каждом из них. Это такой многоразовый «клей» для компонентов. 

В статье мы расскажем о некоторых популярных видах шаблонного кода на NextJS.

1. Next Right Now

JavaMentor
JavaMentor

Первый из них называется 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 и даёт возможность добавления собственных функций.

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

Заключение

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

Спасибо за внимание!

Читайте также:

Читайте нас в Telegram, VK и Яндекс.Дзен


Перевод статьи Ankit Jain: Top NextJS Boilerplates for 2021

Предыдущая статья6 технологий, которые помогут стать востребованным фронтенд-разработчиком в 2021
Следующая статьяКак создать бессерверное приложение с помощью AWS Chalice