DEV Community

Özlem
Özlem

Posted on • Updated on

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;
Enter fullscreen mode Exit fullscreen mode

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

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

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.
Image description

Sıra echarts'da:

yarn add echarts ve yarn add echarts-for-react
dependency'leri ekledikten sonra ilk grafiğimizi oluşturabiliriz.

Bölüm 3) echarts.js ile ilk grafiğimiz

Top comments (0)