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