Bölüm 2) Next.js, TailwindCss ve echarts.js kurulumu

yarn create next-app --typescript

Typescript nereden çıktı?

Şimdiye kadar küçük projelerde ihtiyaç duymamıştım ve mülakatlar için dökümanları gözden geçirmiştim. Fakat büyük projelerde çalışmak için TypeScript bilgimi artırmam gerektiğini farkettim, bu sebeple bu projeye TypeScript'i de ekledim.

TailwindCSS ile kolay ve orantılı UI çıkarma yeteneği için projeye ekleme şansım varsa ekliyorum. Madem kendi portfolyomu yaratıyoruz TailwindCSS eklemezsem olmazdı.
cd proje_adi ile proje klasörüme girdikten sonra
yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p ile tailwindCSS dependency'lerini ekliyorum.

Ve styles içindeki globals.css adlı klasöre

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

ekledim.
Ardından tailwind.config.js dosyasına

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Next.js için özelleştirilmiş config ayarlarını burada belirttiği gibi ekledim. Kodu yazacağımız dosyalardaki kullanılan class isimlerine bakacak ve kullanmadıklarımızı temizleyecek (purge).

yarn dev komutu ile projeyi localde ayağa kaldırdım.