Как быстро создать и развернуть веб-сайт Jamstack с помощью Next.js

Почему Next.js - разумный выбор

Создание сайтов в 2010 году

Когда я начинал с фронтенд-разработки, я использовал только HTML, CSS и JavaScript. Поскольку в то время внутренним разработчикам в моей команде нужно было подключить его к CMS, я встраивал его в файлы PHP.

Я не использовал никаких фреймворков вроде Angular или React. Это был просто HTML, CSS и немного jQuery. Кроме того, не было препроцессора CSS, который мог бы мне помочь. Ну, они были, но я этого не знал.

Эта история изначально была опубликована на ByRayRay.dev

Создание сайтов в 2020 году

В настоящее время в нашем распоряжении много инструментов. Такие фреймворки, как React и Vue.js, предоставляют нам фантастический набор инструментов, позволяющий создавать веб-сайты намного быстрее.

В настоящее время я больше не использую PHP, потому что он заставил меня настроить свой компьютер с Apache и MySQL (или любой другой базой данных).

На мой взгляд, когда дело доходит до создания веб-сайтов, сейчас у нас это намного лучше. Мы можем извлекать данные из всех видов API и превосходно отображать их на нашем веб-сайте.

Почему Next.js - разумный выбор

Я знаю, что сейчас нужно сделать так много вариантов. Что вы собираетесь использовать в качестве платформы для создания своего веб-сайта? Какой фреймворк или генератор статических сайтов вы собираетесь использовать?

Доступно так много инструментов!

Я всегда буду делать ставку на JavaScript! Это мой язык №1 для использования в веб-разработке - как интерфейсном, так и серверном.

Вот почему Next.js - разумный выбор для создания веб-сайтов. Вы можете спросить: «Почему?» Я скажу тебе.

Next построен на основе React.
У него отличный набор плагинов.
Вы можете загружать данные на стороне сервера.
Получение данных по желанию пользователя - не проблема с Ajax.
React - одна из самых простых библиотек для работы, когда вы только изучили JavaScript.
Вы можете загружать контент из Markdown, MDX, JSON, API, YAML, GraphQL и многих других источников данных и платформ CMS.
Он имеет встроенную поддержку TypeScript.
Отличная встроенная оптимизация изображений.
Хорошо, если вы цените производительность и SEO.
Большой объем документации и Руководство по началу работы.

Если вы еще не уверены, попробуйте другие генераторы статических сайтов. Есть тонна в наличии.

Когда вам следует выбрать Next.js

Прежде чем приступить к программированию, хорошо подумать о том, что вы хотите создать. Это может помочь упростить процесс разработки. Но также полезно знать, что вам нужно в вашем наборе инструментов знаний, чтобы упростить процесс создания веб-сайта с помощью Next.

Вы должны быть знакомы с JavaScript! Если вы не знаете JavaScript, это не будет разумным выбором. Изучите JavaScript, прежде чем погрузиться в какую-либо структуру или библиотеку JavaScript.
Было бы неплохо, если бы вы тоже знали React. Дальше строится поверх него.
Не существует заранее определенного способа написания стиля. Вы можете использовать любой препроцессор или любую структуру CSS.
Вы должны знать HTML и CSS. Если вы их не знаете, не начинайте с JavaScript. Вам, вероятно, будет непросто создать что-то с Next.

Как создать сайт с Next.js

1. Установка

На вашем компьютере должны быть установлены Node.js и Git. Если у вас нет Node, проще всего загрузить установщик.

2. Создайте проект.

Это так же просто, как запустить эту команду в своем терминале:

npx create-next-app

Во-первых, он задаст вам вопрос: «Как называется ваш проект?» Введите название вашего проекта, и он сгенерирует все необходимые файлы.

В вашем терминале перейдите в каталог вашего проекта. Скрипт покажет вам папку, когда он установит все зависимости.

Когда вы откроете эту папку через свой любимый редактор, она должна выглядеть примерно так:

3. Добавьте контент и стиль.

Если вы проверите папку pages, вы увидите два файла JavaScript и одну папку.

index.js - это ваша домашняя страница. _app.js - это оболочка для всех компонентов страницы. Здесь вы можете добавить все виды глобального стиля.

Запустите npm run dev и откройте свой браузер на localhost:3000. Теперь вы можете увидеть свой новый веб-сайт Next.js.

Если вы хотите получить контент из файлов Markdown, API или CMS, я рекомендую проверить все стартовые проекты из Next.

Запускать его локально - это круто, но в конечном итоге вы захотите показать его всему миру.

4. Создайте проект GitHub.

Прежде чем мы сможем его развернуть, создайте проект и безопасно разместите там свой код.

Мы хотим разместить его бесплатно на Netlify. Для Netlify вам следует добавить файл конфигурации, чтобы ваш сайт заработал в кратчайшие сроки.

Создайте netlify.toml файл и скопируйте в него этот код:

[build]
  command = "npm run build"
  publish = "out"

С помощью этого кода вы сообщаете Netlify, какая у вас команда сборки и в какой папке она должна обслуживать эту версию сборки.

5. Разверните на Netlify бесплатно

Войдите в Netlify и создайте новый проект на основе вашей учетной записи GitHub.

Выберите репозиторий, в котором находится ваш веб-сайт, и нажмите «Далее». Следующий шаг должен быть настроен за вас из-за файла netlify.toml.

Когда все пойдет по плану, вы должны увидеть, что выполняется развертывание.

Когда процесс сборки и развертывания будет завершен, вы сможете посетить свой сайт, нажав «Предварительный просмотр развертывания». Теперь ваш сайт активен, и вы можете поделиться им со всем миром.

Конечно, я рекомендую потратить разумное количество времени на добавление контента и стилизацию, чтобы они были очень приятными для глаз ваших посетителей. Желаю тебе удачи!