Развертывание приложения Next.js на Netlify [Создание персонального сайта-блога, часть 4]

Это четвертая часть серии «Создание личного сайта блога». В этой серии мы настроим бесплатную CMS для хранения контента нашего блога на Railway, создадим приложение React с помощью Next.js для генерации статических сайтов и TailwindCSS для представления статей и разместим его на Netlify.

Все статьи:
Часть 1: Размещение бесплатной Strapi CMS на Railway
Часть 2: Настройка базового приложения Next.js локально
Часть 3: Базовое приложение Next.js — страница с записью в блоге
Часть 4: Развертывание приложения Next.js на Netlify

Теперь наконец-то пришло время выложить ваше приложение в сеть!

Сначала вам нужно выложить ваш Git-репозиторий (созданный автоматически при создании приложения Next.js) на GitHub. Перейдите на github.com и войдите в систему (или создайте учетную запись, если вы этого еще не сделали). Создайте новый репозиторий, нажав на правый верхний угол:

Добавьте имя, решите, должен ли репозиторий быть частным или публичным, и нажмите Create. Вы должны увидеть что-то вроде этого

Теперь перейдите в Терминал и в корневой папке вашего приложения зафиксируйте все файлы (если вы поместили переменные окружения в файл .env, то не забудьте добавить их в .gitignore). Теперь давайте выложим ваш репозиторий на GitHub:

git remote add origin YOUR_GITHUB_REPOSITORY
git push -u origin main

После завершения вы должны увидеть свои файлы в GitHub:

Теперь вы готовы развернуть его в Netlify. Перейдите на сайт netlify.com и войдите в систему. Я предлагаю войти с помощью GitHub. Вы попадете на приборную панель, где можно создать новый сайт:

Выберите «Импортировать существующий проект», затем подключитесь к GitHub и выберите свой репозиторий:

Вы должны увидеть что-то вроде этого:

Оставьте все значения по умолчанию и нажмите «Развернуть сайт». Вы увидите, что развертывание находится в процессе. Подождите несколько минут, пока оно не завершится.

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

Когда все будет готово, вы увидите адрес вашего нового сайта:

Перейдите по этому адресу, и вы увидите свою работу в Интернете!

Теперь каждый раз, когда вы что-то добавляете в свой репозиторий, Netlify будет автоматически перестраивать ваше приложение. Помните! Изменение чего-либо в вашей CMS не приводит к перестройке, поэтому если вы хотите иметь свежий контент — вам придется перестроить ваше приложение на Netlify вручную на вкладке Deploys на вашей приборной панели Netlify:

Давайте внесем некоторые изменения в макет сайта, чтобы увидеть эту автоматическую перестройку в действии.

На данный момент вашему сайту не хватает красивой навигационной панели, базового нижнего колонтитула и некоторой адаптации для мобильных устройств. Создайте два новых компонента в директории components:

Navbar.jsx

import Link from "next/link";
import React from "react";

const Navbar = () => {
  return (
    <nav className="z-0 w-full">
      <div className="z-10 bg-blue-500 shadow">
        <div className="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8">
          <div className="flex flex-col sm:flex-row items-center justify-between gap-4 p-2 font-mono">
            <Link href="/">
              <a className="flex-shrink-0">
                <h1 className="font-bold text-xl uppercase text-white">
                  My Personal Blog
                </h1>
              </a>
            </Link>
            <div>
              <div className="flex gap-2">
                <Link href="/">
                  <a className="px-3 py-2 text-sm font-medium text-white hover:underline hover:underline-offset-4 hover:text-white hover:font-bold transition duration-150 ease-in-out cursor-pointer focus:outline-none focus:text-white focus:bg-gray-700 ">
                    Home
                  </a>
                </Link>
                <Link href="/about">
                  <a className="px-3 py-2 text-sm font-medium text-white hover:underline hover:underline-offset-4 hover:text-white hover:font-bold transition duration-150 ease-in-out cursor-pointer focus:outline-none focus:text-white focus:bg-gray-700 ">
                    About
                  </a>
                </Link>
                <Link href="/contect">
                  <a className="px-3 py-2 text-sm font-medium text-white hover:underline hover:underline-offset-4 hover:text-white hover:font-bold transition duration-150 ease-in-out cursor-pointer focus:outline-none focus:text-white focus:bg-gray-700 ">
                    Contact
                  </a>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;

и Footer.jsx.

import React from "react";

const Footer = () => {
  return (
    <footer className="bg-blue-500 py-8 w-full">
      <div className="flex flex-wrap justify-center">
        <div className="text-sm text-white font-mono font-semibold py-1">
          Copyright © YOUR_NAME 2022
        </div>
      </div>
    </footer>
  );
};

export default Footer;

Теперь настройте ваш файл pages/_app.js для использования этих вновь созданных компонентов

function MyApp({ Component, pageProps }) {
  return (
    <div className="flex flex-col items-center bg-white">
      <Navbar />
      <Component {...pageProps} />
      <Footer />
    </div>
  );
}

И, наконец, внесите небольшие изменения в pages/index.js для лучшего отображения списка постов на различных разрешениях экрана:

export default function Home({ posts }) {
  return (
    <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-8 mx-4">
      {posts.map((post) => (
        <BlogPostPreview post={post} key={post.attributes.slug} />
      ))}
    </section>
  );
}

Теперь зафиксируйте все файлы и отправьте изменения на GitHub.

git push

Подождите несколько минут и проверьте свой сайт, размещенный на Netlify.

Выглядит лучше, не правда ли?

И это все на сегодня — ваш сайт начинает куда-то двигаться! В следующей части серии статей вы реализуете простую функцию Show all posts for specific Tag. До встречи!