В этой статье я покажу, как реализовать 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.
- В каталоге вашего проекта создайте новое приложение 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.css
file со следующим начальным кодом, импортирующим в папку 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