Next.js + Ant Design + Tailwind CSS kullanarak kombinlenmiş bir proje yapısı oluşturalım.

Nextjs, ant.design ve tailwindcss’i tek bir projede birleştirmek mümkün,bunun sayesinde class atmaları yaparak Ant Design’ın kendi csslerini ezerek müdahale edebileceğimiz bir ortam hazırlamak için böyle bir makale yazıyorum.

Öncelikle geliştirdiğim projede Ant-Design css lerini ezmek için modüler css içinde yada global olarak bir çok ezme işlemi yapmam gerekiyordu yada Ant-Design için konfigürasyonlar içinde kaybolmam gerekiyordu, bunu Tailwind ile pratik bir hale getirmek için böyle bir yöntem aramak istedim ve araştırmalara başladım . Durmadan deneme yanılma yaparak ve her denemede yeni bir hata ile karşılaştığım uzun ve yorucu bir sürecin ardından sorunsuz bir şekilde çalışan bu proje yapısını oluşturabildim.Lafı fazla uzatmadan hemen başlayalım.

Öncelikle bir NextJs projesi oluşturalım.

npx create-next-app@latest

Projemizi oluşturduktan sonra klasör yapımız bu şekilde olacak.

klasör yapısı

Daha sonra rojeyi “ npm run dev ” komutu ile çalıştırmayı deneyin. npm run dev’i çalıştırdıktan sonra tarayıcınız ile http://localhost:3000/ adresine girdiğiniz zaman uygulamanızın NextJs yapısının çalıştığını göreceksiniz.

Daha sonra projeye Ant Design’ı kurun. Ant Design’ı kurmak için terminalinizi açın ve aşağıdaki kodu yazın.

npm install antd

Daha sonra npm run dev yaparak projeyi tekrar run edin Şimdi beraber Ant-Design’ın çalışıp çalışmadığını test edelim Projemizin yapısı içinde bulunan pages/index.js içindeki kodu ekteki gibi düzenleyelim.

http://localhost:3000/ ‘e baktığımız zaman buton gelmiş fakat hiçbir css eklenmemiş . Bunun için Ant-Design ‘ın css dosyalarını projemize tanıtmamız gerekiyor.

pages/_app.js dosyamıza css yüklemesi yapmak için ekte bulunan import işlemini gerçekleştirelim.

import 'antd/dist/antd.css';

Şimdi projemize tekrar bakalım.

Gördüğünüz gibi Ant-Design cssleri başarı ile uygulandı.

Şimdi projemize Tailwind ‘i yükleyelim.

Bunun için terminale aşağıdaki kodu girelim ve Tailwind’i yükleyelim.

npm install -D tailwindcss postcss autoprefixer

Kurulumdan sonra tailwind.config.js ve postcss.config.js oluşturmak için init komutunu çalıştırmamız gerekiyor bunun için tekrar terminalde ekte olan kodu çalıştırmamız gerekiyor.

npx tailwindcss init -p

Şimdi proje yapımıza tekrar baktığınızda yukarıda bahsettiğim iki dosya projemizin kök dizininde oluştuğunu fark edeceksiniz.

Şimdi projemizde bulunan tailwind.config.js dosyasını açalım ve configure edelim (eklediğim kodları kopyalayıp tailwind.config.js dosyasının içine yapıştırabilirsiniz).

Daha sonra style/globals.css dosyanıza @tailwind import işlemlerini yapmamız gerekiyor alt kısımda bulunan 3 satır kodu kopyalayıp global css dosyamıza yapıştıralım.

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

Projemizi konsol üzerinden CTRL+C komutu ile kapatıp npm run dev ile tekrardan başlatalım.

Daha sonra pages/index.js dosyamıza bir span oluşturup tailwind css dosyalarını entegre edelim.

http://localhost:3000/ ‘e baktığımız zaman Tailwind’in çalıştığını görebilirsiniz.

ant design ve tailwindcss’i başarıyla birleştirdik ama Button, Input, Switch gibi bazı bileşenlerde varsayılan antd stilini geçersiz kılmak istiyorum . Bunu oluşturmak için sass kullanacağız çünkü ant-design topluluğu geliştirdiği bileşenlerde sass kullanıyor , bu yüzden sass’ı kurmamız ve bir sonraki adımda yapılandırmamız gerekiyor.

npm install --save-dev sass

daha sonra, .scss dosyasını koyduğumuz belirli klasörü tanımlamak için includePath’leri ekleyerek next.config.js’de sass’ı yapılandırmamız lazım.

Genel olarak Sass dosyasının yapısında dosyalama sistemi şu şekilde olması gerekiyor.

sass/
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Typography rules
|   ...                  # Etc…
|
|– components/
|   |– _buttons.scss     # Buttons
|   |– _carousel.scss    # Carousel
|   |– _cover.scss       # Cover
|   |– _dropdown.scss    # Dropdown
|   ...                  # Etc…
|
|– layout/
|   |– _navigation.scss  # Navigation
|   |– _grid.scss        # Grid system
|   |– _header.scss      # Header
|   |– _footer.scss      # Footer
|   |– _sidebar.scss     # Sidebar
|   |– _forms.scss       # Forms
|   ...                  # Etc…
|
|– pages/
|   |– _home.scss        # Home specific styles
|   |– _contact.scss     # Contact specific styles
|   ...                  # Etc…
|
|– sass-utils/
|   |– _variables.scss   # Sass Variables
|   |– _functions.scss   # Sass Functions
|   |– _mixins.scss      # Sass Mixins
|   |– _helpers.scss     # Class & placeholders helpers
|
|– vendors/
|   |– _bootstrap.scss   # Bootstrap
|   |– _jquery-ui.scss   # jQuery UI
|   ...                  # Etc…
|
|
`– style.scss            # Primary Sass file

Yukarıda bulunan yapıyı kullanarak stlyes klasörümüzü ekteki gibi düzenleyelim.

(styles/base/_reset.scss)

(styles/vendors/_antd.scss)

(styles/vendors/_tailwind.scss)

style.scss

dosyamızı düzenlememiz lazım.

Daha sonra pages/_app.tsx dosyasını açın ve import işlemini düzenleyelim.

Şimdi örnek olarak iki adet component geliştirelim. Ben global olarak şöyle bir şey yapıcam.

styles/components/_button.scss ve styles/components/_input.scss olmak üzere iki adet scss dosyası oluşturalım.

Daha sonra kök dizinimize components isminde bir klasör oluşturup içinde istediğimiz şekilde geliştirmeleri yapalım ben örnek olsun diye söyle bir comp. geliştirdim.

Tarayıcınız ile http://localhost:3000/ adresine girdiğiniz zaman görünen sonuç

İşte sonucumuz ister bu şekilde istersek class olarak tanımlayarak oluşturabiliriz.

Tarayıcınız ile http://localhost:3000/ adresine girdiğiniz zaman görünen sonuç

GitHub - kubilaybzk/Next.js---Ant-Design---Tailwind-CSS: Next.js + Ant Design + Tailwind CSS…