Что такое Следующий JS?
Прежде чем перейти к изучению Next Js, мы должны знать, что это такое
Next.js — это популярная платформа с открытым исходным кодом для создания приложений React, которая позволяет разработчикам с легкостью создавать серверные приложения React.
Почему мы использовали NextJs?
Он предоставляет набор инструментов и функций, которые делают создание и развертывание современных веб-приложений более эффективными, например:
Рендеринг на стороне сервера: Next.js поддерживает рендеринг на стороне сервера (SSR) из коробки, что означает, что исходный HTML-код создается на сервере и отправляется клиенту, что приводит к более быстрой загрузке страницы и улучшению SEO.
Автоматическое разделение кода: Next.js автоматически разбивает код на более мелкие фрагменты, поэтому загружается только тот код, который необходим для каждой страницы, что сокращает время первоначальной загрузки приложения.
Генерация статического сайта: Next.js позволяет создавать статические сайты (SSG), которые предварительно отображают страницы во время сборки, что приводит к еще более быстрому времени загрузки и снижению нагрузки на сервер.
Маршруты API: Next.js предоставляет простой способ создания маршрутов API, что позволяет легко интегрироваться с внешними источниками данных.
Встроенная поддержка CSS: Next.js имеет встроенную поддержку стилей с использованием модулей CSS или стилизованных компонентов, что упрощает написание и поддержку CSS для вашего приложения.
В целом, Next.js упрощает и ускоряет создание и развертывание современных веб-приложений, а также предоставляет функции, повышающие производительность, SEO и опыт разработки.
Предпосылки изучения Next Js:
Прежде чем погрузиться в изучение Next.js, рекомендуется иметь прочную основу в следующих технологиях:
HTML и CSS: Next.js построен на основе React, что требует глубокого понимания HTML и CSS для создания отзывчивых, хорошо спроектированных веб-приложений.
JavaScript: Next.js — это среда JavaScript, поэтому вы должны хорошо понимать язык и его основы, включая переменные, функции, массивы, объекты, циклы и условные операторы.
React: Next.js построен на основе React, поэтому вы должны хорошо понимать основные концепции React, включая компоненты, состояние, свойства и виртуальный DOM.
Node.js: Next.js использует Node.js для запуска рендеринга на стороне сервера и других задач на стороне сервера. Вы должны иметь хорошее представление о Node.js и о том, как его использовать для создания веб-приложений.
Git: Git — это система контроля версий, которая обычно используется для управления репозиториями кода. Вы должны быть знакомы с Git и знать, как его использовать для управления своим кодом.
Кроме того, рекомендуется, чтобы у вас был некоторый опыт создания веб-приложений, прежде чем погрузиться в Next.js. Хотя Next.js предоставляет много преимуществ по сравнению с vanilla React, он все же может быть сложным, поэтому опыт создания веб-приложений может помочь вам лучше понять концепции и инструменты, используемые в Next.js.
Системные требования
Чтобы начать работу с Next.js, вам необходимо убедиться, что ваша система соответствует следующим требованиям:
Node.js: Next.js построен на основе Node.js, поэтому вам необходимо установить Node.js в вашей системе. Вы можете скачать последнюю версию Node.js с официального сайта: Node.js
NPM: NPM (менеджер пакетов узлов) используется для управления зависимостями для вашего проекта Next.js. Он поставляется в комплекте с Node.js, поэтому он должен быть установлен по умолчанию.
Git: Git — это система контроля версий, которая обычно используется для управления репозиториями кода. В вашей системе должен быть установлен Git для управления вашим проектом Next.js.
Давайте создадим приложение NextJs
Вот пошаговое руководство по созданию приложения Next.js, которое показывает изображения в карточках, реализует бесконечную прокрутку и использует рендеринг на стороне сервера для получения данных с помощью getServerSideProps.
Шаг 1. Настройка проекта
Чтобы начать работу, создайте новый проект Next.js, выполнив следующие команды:
npx create-next-app
my-app cd my-app
Шаг 2. Установите зависимости
Затем установите следующие зависимости:
npm установить axios реагировать на бесконечную прокрутку компонента tailwindcss
Мы будем использовать библиотеку axios для выполнения HTTP-запросов к API, react-infinite-scroll-component для реализации бесконечной прокрутки и tailwindcss для стилизации наших компонентов.
Шаг 3. Создайте компонент карты изображения
Создайте новый файл с именем ImageCard.js в каталоге компонентов и добавьте следующий код:
код:
import React from 'react';
function ImageCard({ image }) {
return (
<div className="rounded overflow-hidden shadow-lg">
<img src={image.urls.regular} alt={image.alt_description} />
<div className="px-6 py-4">
<div className="font-bold text-xl mb-2">{image.user.username}</div>
</div>
</div>
);
}
export default ImageCard;
Этот компонент берет объект изображения в качестве реквизита и отображает его в карточке с именем фотографа.
Шаг 4. Создание компонента бесконечной прокрутки
Создайте новый файл с именем InfiniteScrollImages.js в каталоге компонентов и добавьте следующий код:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import InfiniteScroll from 'react-infinite-scroll-component';
import ImageCard from './ImageCard';
function InfiniteScrollImages() {
const [images, setImages] = useState([]);
const [page, setPage] = useState(1);
useEffect(() => {
fetchImages();
}, []);
const fetchImages = async () => {
const response = await axios.get(`https://api.unsplash.com/photos`, {
params: {
client_id: '<YOUR_API_KEY>',
page: page,
per_page: 9,
},
});
setImages((prevImages) => [...prevImages, ...response.data]);
setPage((prevPage) => prevPage + 1);
};
return (
<InfiniteScroll
dataLength={images.length}
next={fetchImages}
hasMore={true}
loader={<h4>Loading...</h4>}
>
<div className="grid grid-cols-3 gap-4">
{images.map((image) => (
<ImageCard key={image.id} image={image} />
))}
</div>
</InfiniteScroll>
);
}
export default InfiniteScrollImages;
Этот компонент использует хук useState для хранения изображений и номера страницы. Мы используем хук useEffect для получения изображений при монтировании компонента. Функция fetchImages делает HTTP-запрос к Unsplash API для получения изображений и обновляет состояние новыми изображениями и новым номером страницы. Наконец, компонент InfiniteScroll упаковывает карты изображений и загружает дополнительные изображения, когда пользователь прокручивает страницу до конца.
Шаг 5. Создайте индексную страницу
export async function getServerSideProps() {
const { data } = await
axios.get(`https://api.unsplash.com/photos/random`, {
params: {
client_id: '<YOUR_API_KEY>',
count: 9,
},
});
return {
props: {
initialImages: data,
},
};
}
export default function Home({ initialImages }) {
return (
<div className="container mx-auto my-8">
<h1 className="text-4xl font-bold mb-8">Infinite Scroll Images</h1>
<InfiniteScrollImages initialImages={initialImages} />
</div>
);
}
Эта страница использует функцию getServerSideProps для получения начального набора изображений на стороне сервера. Мы делаем запрос к API Unsplash, чтобы получить 9 случайных изображений и передать их компоненту InfiniteScrollImages в качестве реквизита. Наконец, мы визуализируем компонент InfiniteScrollImages на странице.
Шаг 6. Добавьте Tailwind CSS
Next.js поставляется со встроенной поддержкой модулей CSS, поэтому мы можем легко добавить Tailwind CSS в наш проект. Создайте новый файл с именем styles/globals.css и добавьте следующий код:
@tailwind base; @tailwind components; @tailwind utilities;
Затем импортируйте этот файл в файл pages/_app.js:
import '../styles/globals.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
Шаг 7. Добавьте ключ API
Чтобы использовать API Unsplash, вам необходимо создать учетную запись и сгенерировать ключ доступа. Получив ключ доступа, замените файлы InfiniteScrollImages.js и index.js вашим фактическим ключом.
Шаг 8. Запустите сервер разработки
Наконец, запустите сервер разработки, выполнив следующую команду:
npm run dev
Посетите http://localhost:3000 в своем браузере, чтобы увидеть приложение в действии.
Вот и все! Вы создали приложение Next.js, которое показывает изображения в карточках, реализует бесконечную прокрутку и использует рендеринг на стороне сервера для получения данных с помощью getServerSideProps.
Отправьте код на gitLab/gitHub
Теперь давайте развернем его
Шаг 1. Запустите инстанс EC2
Сначала запустите инстанс EC2 с помощью Консоли управления AWS. Обязательно выберите тип экземпляра, соответствующий вашим потребностям, и настройте группу безопасности, чтобы разрешить входящий трафик через порт 80 (HTTP) и 443 (HTTPS).
Шаг 2. Подключитесь к экземпляру
После запуска экземпляра подключитесь к нему с помощью SSH. Вы можете использовать команду ssh в своем терминале или использовать такой инструмент, как PuTTY, если вы работаете на компьютере с Windows.
ssh -i <PATH_TO_PRIVATE_KEY> <USER>@<PUBLIC_IP_ADDRESS>
Замените , и соответствующими значениями.
Шаг 3. Установите Nginx
Затем установите Nginx на экземпляр, используя следующие команды:
sudo apt update sudo apt install nginx
Шаг 4. Клонируйте проект
Затем установите Nginx на экземпляр с помощью следующих команд:
cd /var/www/html sudo git clone <repo url> cd my-app
Шаг 4. Настройка Nginx
Создайте новый файл в /etc/nginx/sites-available/default и добавьте следующую конфигурацию:
server {
server_name www.DOMAINNAME.com DOMAINNAME.com;
index index.html index.htm;
root /var/www/html/my-app; #Make sure using the full path
# Serve any static assets with NGINX
location /_next/static {
alias /var/www/html/my-app/.next/static;
add_header Cache-Control "public, max-age=3600, immutable";
}
location / {
try_files $uri.html $uri/index.html # only serve html files from this dir
@public
@nextjs;
add_header Cache-Control "public, max-age=3600";
}
location @public {
add_header Cache-Control "public, max-age=3600";
}
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location @nextjs {
# reverse proxy for next server
proxy_pass http://localhost:3000; #Don't forget to update your port number
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
listen 80 default_server;
listen [::]:80;
}
Замените своим доменным именем или общедоступным IP-адресом.
Эта конфигурация указывает Nginx прослушивать порт 80 и прокси-запросы к приложению Next.js, работающему на локальном хосте: 3000.
Шаг 5. Перезапустите Nginx
После добавления конфигурации перезапустите Nginx с помощью следующей команды:
sudo systemctl перезапустить nginx
Шаг 6. Установите PM2
Установите PM2 глобально на экземпляре с помощью следующей команды:
sudo npm install -g pm2
Шаг 7. Сборка и запуск приложения Next.js
В корневом каталоге приложения Next.js создайте рабочую версию приложения:
cd /var/www/html/my-app npm run build
Затем запустите приложение с помощью PM2:
pm2 start npm --name "<APP_NAME>" -- start
Замените на имя вашего приложения.
Шаг 8. Сохраните конфигурацию PM2
Сохраните конфигурацию PM2, чтобы обеспечить перезапуск приложения при перезапуске экземпляра:
pm2 save
Шаг 9. Получите доступ к приложению
Введите имя своего домена или общедоступный IP-адрес в браузере, чтобы получить доступ к приложению. Nginx будет передавать запросы приложению Next.js, работающему на локальном хосте: 3000.
Поздравляем, вы успешно развернули приложение Next.js на экземпляре AWS EC2, используя Nginx в качестве обратного прокси-сервера и PM2 в качестве диспетчера процессов!
