Как создать приложение Next.js Starter для простой загрузки нового приложения React
Начать работу с новым приложением React проще, чем когда-либо, с такими фреймворками, как Next.js. Но эти фреймворки не всегда включают в себя все инструменты, которые вы хотите использовать.
Как мы можем использовать Starters, чтобы стать суперпродуктивным при запуске нового проекта с нашими любимыми инструментами?
Что такое Next.js?
Next.js - это фреймворк от Vercel, который позволяет очень быстро запускать новое приложение React.
Некоторые базовые функции включают создание страниц и выборку данных, и они позволяют вам создавать статический сайт или использовать рендеринг на стороне сервера для динамической загрузки вашего приложения.
Кроме того, вы можете воспользоваться его расширенными функциями, такими как маршрутизация или создание API прямо рядом с вашим пользовательским интерфейсом.
Что такое Starter?
По сути, Starter - это репозиторий git в форме шаблона, который позволяет легко создавать предварительно настроенное приложение.
В Starter нет ничего особенного. По сути, это приложение Next.js, которое уже настроено определенным образом и, как правило, обобщено, чтобы его мог использовать каждый.
Например, если вы склонны каждый раз создавать множество приложений одинаково, вам, возможно, придется повторять те же шаги настройки каждый раз, когда вы создаете новое приложение.
Вместо этого вы можете создать Starter, с которого будете начинать свои проекты - и это избавит от необходимости повторять эти первые шаги каждый раз.
Что мы будем строить?
Мы собираемся создать базовый Next.js Starter, который позволит вам или кому-либо еще быстро и легко создать новый проект с этим Starter в качестве отправной точки.
Хотя мы не будем слишком вдаваться в подробности о функциях, так как цель здесь - изучить Starters, мы протестируем это, добавив Sass в Next.js, чтобы кто-то мог легко начать работу со сверхспособностями CSS.
Вы можете проверить Starter на GitHub: github.com/colbyfayock/next-sass-starter.
Создание нового Next.js Starter
Чтобы начать создание Starter, нам нужно начать с приложения Next.js.
Мы можем сделать это, выполнив следующую команду в любом каталоге, в котором вы хотите это создать:
yarn create next-app
# or
npx create-next-appКак только вы запустите это, Next.js попросит вас указать имя проекта. Хотя вы можете использовать все, что захотите, Next.js Starters обычно имеют шаблон имени next-[name]-starter.
Так как мы создаем Sass Starter, я мог бы назвать его next-sass-starter.
После того, как Next.js установит все наши зависимости, вы будете готовы перейти в эту папку и запустить команду, чтобы запустить сервер разработки.
yarn dev
# or
npm run devИ как только сервер разработки запустится, мы должны быть готовы к работе!
На данный момент у нас практически есть базовый стартер. Как упоминалось ранее, в Next.js Starter нет ничего особенного. Так что, если мы перенесем это на Github, мы сразу сможем начать использовать его «как есть».
Вы можете проверить это, выполнив следующее:
yarn create next-app [project-name] -e [GitHub URL]
# or
npx create-next-app [project-name] -e [GitHub URL]После запуска вы должны быть настроены с новым каталогом, в котором есть проект, созданный из вашего Starter со всеми установленными зависимостями.
Но мы хотим сделать больше. Наша цель - добавить функции, которые помогут запустить приложение с более чем стандартными, поэтому давайте добавим Sass.
Добавление Sass в стартер Next.js
Примечание. В нашем примере мы собираемся создать стартер Sass, как могло подразумеваться в названии выше. Не стесняйтесь добавлять любые функции, которые хотите, на этом этапе, независимо от того, включает ли он Sass или нет.
Помните - цель здесь - предоставить что-то, что мы сможем использовать при создании нового проекта с помощью этого стартера.
Затем мы хотим добавить Sass в наш проект. Для начала мы хотим установить sass как зависимость:
yarn add sass
# or
npm install sassЗатем, поскольку Next.js уже ищет расширение файла .scss, мы можем просто обновить два файла CSS в каталоге styles до .scss.
Так что измените следующие файлы:
styles/globals.css => styles/globals.scss
styles/Home.module.css => styles/Home.module.scssЗатем нам нужно настроить наши операторы импорта для распознавания наших новых расширений файлов.
В pages/_app.js обновите импорт стилей вверху до:
import '../styles/globals.scss' И в pages/index.js обновите импорт стилей до:
import styles from '../styles/Home.module.scss'На этом этапе вы можете запустить свой сервер разработки, и мы все равно должны увидеть страницу Next.js по умолчанию.
Чтобы увидеть наш Sass в действии, мы можем обновить некоторые из наших классов, чтобы они использовали вложенные стили вместо отдельных селекторов.
Обновите все селекторы .footer внутри styles/Home.module.scss до следующего:
.footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
img {
margin-left: 0.5rem;
}
a {
display: flex;
justify-content: center;
align-items: center;
}
}Вы можете использовать ту же структуру вложения для обновления .title и .card.
Мы также можем добавить следующее в начало нашего файла styles/Home.module.css:
$color-primary: #0070f3;И обновите все экземпляры цвета в этом файле с #0070f3 на $color-primary:
.title {
...
a {
color: $color-primary;Если перезагрузить страницу, ничего не изменится. Но обновите эту переменную до вашего любимого цвета, например:
$color-primary: blueviolet;И теперь все цвета меняются.
Наконец, поскольку теперь у нас есть стартер Sass, давайте обновим заголовок страницы. Замените «Добро пожаловать в Next.js!» в pages/index.js:
<h1 className={styles.title}>
<a href="https://nextjs.org">Next.js</a> Sass Starter
</h1>И теперь у нас есть отправная точка Sass!
Как и раньше, вы можете проверить это, создав новый проект со своим стартером, когда все изменения будут на GitHub.
yarn create next-app [project-name] -e [GitHub URL]
# or
npx create-next-app [project-name] -e [GitHub URL]Настройка документации Next.js Starter для простой настройки
Пожалуй, одна из самых важных вещей в Starter - это документация.
Это может быть не так важно, если вы используете его только сами. Но если вы хотите, чтобы другие люди использовали его, вы хотите, чтобы они знали, как им пользоваться, иначе они застрянут и расстроятся.
Самая важная часть - это настройка стартера. Настройка вашего Starter в репозитории GitHub - отличный первый шаг. Но если кто-то захочет использовать этот стартер, ему придется клонировать или загрузить это репо, а затем удалить историю git.
Вместо этого вы можете добавить в свой файл README.me команду, которую мы использовали выше, чтобы дать людям инструкции о том, как быстро начать работу, например:
## Getting Started
Run the following command to create a new project with this Starter:
```
yarn create next-app [project-name] -e https://github.com...
# or
npx create-next-app [project-name] -e https://github.com...
```Это предотвратит недоумевание людей, которые могут не понимать, как делать некоторые из этих вещей вручную.
Также важно добавить любую документацию по добавленным вами параметрам конфигурации.
Если вы добавляете некоторые переменные, которые позволяют вам изменять некоторые функции всего сайта, обязательно добавьте примечания о них.
В конечном итоге вы хотите, чтобы люди поняли, как использовать добавленные вами функции, чтобы облегчить им жизнь. Если они этого не понимают, они могут просто вырвать этот код и сделать это вручную.
В конечном итоге создание и публикация Starter призваны облегчить жизнь людям. Возвращаетесь ли вы к своему Starter несколько месяцев спустя или рой новых людей, которые хотят работать продуктивно, вы даете им лучший опыт разработчика, добавляя хорошую документацию.
Некоторые другие вещи, которые следует учитывать
Обобщение функций и добавление конфигурации для Next.js Starter
Добавление функций - отличный способ повысить вероятность использования Starter. Если бы я использовал Starter для создания нового блога, мне бы хотелось, чтобы этот Starter включал мое имя как автора и, возможно, даже страницу «Обо мне».
Но я бы не хотел, чтобы мне приходилось 100 раз заменять чужое имя в коде для обновления моего собственного проекта. Не говоря уже о том, что, увидев это имя на стартере, я скорее почувствую, что это их блог, а не шаблон, который я могу использовать для своего проекта.
Подумайте о том, чтобы начать с использования обобщенного имени во всем проекте. Вместо того, чтобы использовать Colby Fayock’s Blog в Starter, сделайте его My Blog, что сделает его менее личным для создателя для человека, использующего Starter.
Также добавьте некоторые параметры конфигурации. Гораздо проще иметь возможность обновить одну переменную, которая заставит мой проект включать Colby Fayock вместо My Blog, чем искать все файлы, чтобы внести это изменение вручную.
Тщательно выбирайте, где быть самоуверенным
При использовании такого инструмента, как Sass, есть несколько способов использовать этот инструмент. Если вы создадите невероятно конкретную и самоуверенную структуру проекта, вы оттолкнете людей, использующих свой Starter.
Это либо заставит их переработать весь проект, либо они захотят удалить кучу кода, что может заставить их отказаться от использования его в будущем.
