REACT и NEXT JS вместе с Tailwind CSS

RedDeveloper
07.02.2023 13:03
REACT и NEXT JS вместе с Tailwind CSS

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

Что такое Next JS?

NextJS - это react framework, построенный как open-source поверх библиотеки React. Он создан компанией vercel. Фреймворк NextJS имеет быструю поисковую систему, оптимизирующую приложения react с нулевой конфигурацией. NextJS помогает создавать готовые к производству приложения и обеспечивает наилучший опыт благодаря таким функциям, как рендеринг на стороне сервера, предварительная выборка маршрутов, интеллектуальное пакетирование и т.д.

Такие компании, как Vercel, Netflix, Hulu, Expo и другие, используют NextJS для своих приложений. Теперь это побуждает нас создавать ваши веб-приложения с помощью Next. Ниже перечислены некоторые функции, в которых NextJS будет полезен для вас:

  • Посадочные страницы
  • Маркетинговые веб-сайты
  • SEO-дружественные веб-приложения

Как и где развернуть приложения NEXT JS?

Vercel позволяет вам разрабатывать, предварительно просматривать и отправлять каждую функцию Next js без конфигурации в лучшую инфраструктуру фронтенда. В Vercel встроен CI/CD для приложений Next js. Мы также можем добавить пользовательские домены для веб-сайтов.

Теперь давайте приступим к созданию NEXT APP вместе с Tailwind CSS.

npx create-next-app -e with-tailwindcss project_name
cd project_name

Откройте проект с помощью редактора и запустите код с помощью следующей команды. Запустите npm run dev или yarn dev или pnpm dev, чтобы запустить сервер разработки на http://localhost:3000 .

Наполните pages/index.js следующим содержимым:

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

Ссылки

  • Next.js от Vercel - React Framework
  • Tailwind UI - Официальные компоненты и шаблоны Tailwind CSS
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

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

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.