Введение
Недавно начал работать с Next.js, и это изменило мою игру. Изначально я перешел с Vue на React, но, посмотрев пару видео о Next, решил перейти на него next (каламбур 😂). Вот мой шаблонный код, который я использую для каждого проекта.
Настройка Next.js
Во-первых, нам нужно настроить наше приложение Next.js.
npx create-next-app <project-name>
Как только он будет создан, cd в проект
cd <project-name>
Настройка CSS попутного ветра
Теперь нам нужно установить Tailwind CSS и его одноранговые зависимости.
npm install tailwindcss@latest postcss@latest autoprefixer@latest
Затем инициализируйте Tailwind. Это должно создать 2 файла конфигурации
- хвостовой ветер.config.js
- postcss.config.js
npx tailwindcss init -p
После этого откройте tailwind.config.js и замените массив содержимого следующим
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}"
],
Откройте файл global.css, удалите CSS по умолчанию и добавьте директивы Tailwind.
@tailwind base; @tailwind components; @tailwind utilities;
Заворачивать
На данный момент это просто вопрос очистки нескольких других ненужных импортов и CSS по умолчанию. После этого должно быть гладко.
