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
Инструменты для веб-скрапинга с открытым исходным кодом: Python Developer Toolkit
Инструменты для веб-скрапинга с открытым исходным кодом: Python Developer Toolkit

20.03.2023 14:01

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

Калькулятор CGPA 12 для семестра
Калькулятор CGPA 12 для семестра

20.03.2023 12:24

Чтобы запустить этот код и рассчитать CGPA, необходимо сохранить код как HTML-файл, а затем открыть его в веб-браузере. Для этого выполните следующие действия:

ONLBest Online HTML CSS JAVASCRIPT Training In INDIA 2023
ONLBest Online HTML CSS JAVASCRIPT Training In INDIA 2023

20.03.2023 11:15

О тренинге HTML JavaScript :HTML (язык гипертекстовой разметки) и CSS (каскадные таблицы стилей) - две основные технологии для создания веб-страниц. HTML обеспечивает структуру страницы CSS (визуальное и звуковое) оформление для различных устройств. Наряду с графикой и сценариями HTML и CSS являются...

Как собрать/развернуть часть вашего приложения Angular
Как собрать/развернуть часть вашего приложения Angular

20.03.2023 08:46

Вам когда-нибудь требовалось собрать/развернуть только часть вашего приложения Angular или, возможно, скрыть некоторые маршруты в определенных средах?

Запуск PHP на IIS без использования программы установки веб-платформы
Запуск PHP на IIS без использования программы установки веб-платформы

19.03.2023 13:43

Установщик веб-платформы, предлагаемый компанией Microsoft, перестанет работать 31 декабря 2022 года. Его закрытие привело к тому, что мы не можем запускать наши php-файлы через localhost на наших компьютерах. Мне с трудом удалось установить его и я решил поделиться этой статьей, чтобы помочь тем,...

Оптимизация React Context шаг за шагом в 4 примерах
Оптимизация React Context шаг за шагом в 4 примерах

19.03.2023 13:03

При использовании компонентов React в сочетании с Context вы можете оптимизировать рендеринг, обернув ваш компонент React в React.memo сразу после поставщика контекста. Это позволит избежать ненужных повторных рендеров.