В этой статье я покажу, как реализовать Turbopack и TailwindCSS в приложении NextJS 13.

Если вы хотите сразу приступить к написанию кода, я создал репозиторий шаблонов, который был протестирован и работает как в среде разработки, так и в рабочей среде. Вы можете найти его здесь: https://github.com/thejamesgore/NextJS13-TailwindCSS-Turbopack-Template (Дайте ему звезду! ⭐️)

Введение

Turbopack, преемник Webpack, был выпущен Vercel в октябре 2022 года вместе с NextJS 13. Хотя NextJS 13 имеет функциональные возможности, обеспечивающие обратную совместимость, чтобы свести к минимуму неработающие функции и стимулировать миграцию, я обнаружил, что это не так при одновременном внедрении Turbopack.

TailwindCSS, к сожалению, является примером этого, но зачем вообще использовать Turbopack вместо Webpack?

Вот некоторые из преимуществ, по мнению Vercel:

  • Turbopack быстрее, чем Webpack, а обновления показывают в 700 раз быстрее для больших приложений.
  • Turbopack имеет более быстрое время запуска: для загрузки приложения с 5000 модулей требуется 4 секунды по сравнению с 16,6 секунды для Vite с SWC.
  • Turbopack использует инкрементную архитектуру, основанную на уроках, извлеченных из таких инструментов, как Turborepo и Google Bazel, которые фокусируются на использовании кешей, чтобы избежать повторения ненужной работы.
  • Turbopack построен на Turbo, инфраструктуре инкрементной мемоизации с открытым исходным кодом для Rust, которая позволяет кэшировать результаты функций в программе.
  • В конечном итоге Turbopack будет поддерживать производственные сборки Next.js, как локально, так и в облаке, и будет изначально поддерживать компоненты React Server, а также TypeScript, JSX, CSS и многое другое.
  • Пользователи Webpack получат возможность поэтапной миграции в будущее, основанное на Rust, с Turbopack.

Начиная

Чтобы использовать TailwindCSS с Turbopack в вашем приложении NextJS 13, нам нужно использовать пакет npm с именем concurrenly.

Concurrenly — это пакет npm, который позволяет вам запускать несколько команд… одновременно (отсюда и название!). Это полезно в ситуациях, когда вам нужно запустить несколько процессов одновременно, например, когда вы разрабатываете и развертываете серверное и клиентское приложения, такие как NextJS.

  1. В каталоге вашего проекта создайте новое приложение NextJS 13.
npx create-next-app@latest . --typescript --eslint

2. Установите TailwindCSS и соответствующие зависимости для разработчиков.

npm install -D tailwindcss postcss autoprefixer concurrently          
npx tailwindcss init -p

3. В папке styles создайте два файла input.css и output.css.

4. Настройте TailwindCSS, как обычно, используя input.css в качестве глобальной таблицы стилей, и добавьте рекомендуемые настройки в tailwind.config.js для проектов NextJS 13. Создайте пустой файл output.css.

input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. Включите экспериментальные функции в next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: { appDir: true },
}

module.exports = nextConfig

6. Измените структуру папок, чтобы использовать функции NextJS 13, удалив папку pages , создав папку app в корневом каталоге.

7. Добавьте файл page.js со следующим начальным кодом в папку app.

export default function Home() {
  return (
    <h1 className="m-12 text-2xl ">
      Welcome to NextJS 13 with tailwindcss and turbopack
    </h1>
  )
}

8. Добавьте layout.js, который импортирует output.cssfile со следующим начальным кодом, импортирующим в папку app.

/* eslint-disable @next/next/no-head-element */
import '../styles/output.css'

export default function RootLayout({ children }) {
  return (
    <html>
      <head></head>
      <body>{children}</body>
    </html>
  )
}

9. В package.json измените сценарии "dev" и "build" на следующие.

"scripts": {
    "dev": "concurrently \"next dev --turbo\" \"tailwindcss --input ./styles/input.css --output ./styles/output.css --watch\"",
    "build": "tailwindcss ./styles/input.css --output ./styles/output.css && next build",
    "start": "next start",
    "lint": "next lint"
  },

10. Наконец, запустите npm run dev, который теперь заполнит файл output.css, необходимый для разработки и производства.

Теперь вы можете использовать стили TailwindCSS вместе с Turbopack в своем приложении NextJS 13, которое было успешно протестировано в производственных средах Vercel, Google Cloud и AWS.

Почему это работает?

Сценарий dev одновременно запускает две команды, используя пакет concurrently. Первая команда — next dev --turbo, которая запускает сервер разработки Next.js с флагом --turbo, чтобы включить использование Turbopack для более быстрой разработки. Вторая команда — tailwindcss --input ./styles/input.css --output ./styles/output.css --watch, которая запускает процесс сборки Tailwind CSS с флагом --watch для перестроения выходного файла всякий раз, когда во входном файле обнаруживается изменение.

Сценарий build запускает две команды, описанные выше. Первая команда — tailwindcss ./styles/input.css --output ./styles/output.css, которая запускает процесс сборки Tailwind CSS и просто выводит результат в указанный выходной файл. Вторая команда — next build, которая создает приложение NextJS, используя output.css, оптимизируя приложение для развертывания, включая минимизацию и разделение кода для повышения производительности.

Это все на данный момент. Дайте этой статье 👏аплодисменты👏.

Подписывайтесь на меня на Medium и читайте мои статьи.

Пометьте репозиторий и следите за мной на github https://github.com/thejamesgore/NextJS13-TailwindCSS-Turbopack-Template