En çok kullandığım, yararlı bulduğum ve sevdiğim React ve Next.js kaynaklarının bir listesi
-
- React Hook Form => Önerdiğim
- Formik
- Yup
- zod => önerdiğim
-
- React Query => önerdiğim
- SWR
- axios => HTTP isteklerini yapmak için SWR ve react-query için önerdiğim
-
- Zustand => önerdiğim
- Redux Toolkit
-
- react-icons => Popüler ikon kütüphanelerinden ikonları React uygulamasına eklemek için
- react-csv
- react-toastify => Bildirimler için
- react-hot-toast => Bildirimler için
- sonner => Bildirimler için
- react-helmet => SEO ayarı için
- react-modal => Modal penceresi oluşturmak için
- react-beautiful-dnd => Sürükle ve bırak özellikleri eklemek için
- @react-pdf/renderer => pdf oluşturmak için
- @editorjs/editorjs => Markdown content oluşturmak için
- react-email => Email oluşturmak için
- react-infinite-scroller => Sonsuz kaydırma için
- react-leaflet => Harita kullanımı için
- framer-motion => Animasyonlar için
- react-chartjs-2 => Grafikler için
- react-joyride => Site turu için
- query-string => query'İ stringe çevirmek için
- lodash.debounce => Optimizasyon için
- storybook => UI bileşenlerin geliştirilip test edilmesi için
- react-loading-skeleton => Yükleme göstergesi için
- react-table => Tablo oluşturmak ve yönetmek için
- firebase
- supabase
- clerkjs => Sadece birkaç satır kodla bütün kullanıcı doğrulama işlemlerini halledin
- next-offline => Next.js uygulamasını çevrimdışı kullanabilmek için
- next-auth => Doğrulama işlemleri için
- next-translate => Çoklu dil desteği için
- next-i18next => Çoklu dil desteği için
- next-intl => Çoklu dil desteği için
- next-sitemap => sitemap oluşturmak için
- nextjs-progressbar => progress bar için
- @next/mdx => mdx dosyaları için
- next-mdx-remote => Serverdan mdx dosyası çekmek için
- @next/bundle-analyzer => Uygulamanızdaki paketlerin boyutunu analiz etmenize yardım eder
- next-pwa
- next-compose-plugins => Birden fazla paketi bir arada kullanmak için
- next-themes => Next.js uygulamasında tema kulanmak için
- pusher-js => Realtime işlemler için
- database-js => Database
- prisma => Database orm
- drizzle => database orm
- stripe => Ödeme işlemleri
- nextjs-toploader
-
TailwindCSS => Önerdiğim
-
shadcnUI => Önerdiğim
-
aceternity => Framer motion ile yapılmış animasyonlu UI componentleri
- class-variance-authority
- tailwind-merge
- @tailwindcss/forms
- @tailwindcss/typography
- tailwindcss-debug-screens
- prettier-plugin-tailwindcss
- Reddit clone Next.js
- Spotify clone Next.js
- Messanger clone Next.js
- E-commerce clone Next.js
- Real time chat app Next.js
-
- Prototürk | React ile Proje Geliştirme Serisi => React için önerdiğim kaynak
- Yunus Eş => React başlangıç için önerdiğim Kaynak
- Mehmet Pekcan | Sıfırdan İleri Seviye Next.js v13 => Next.js için önerdiğim kaynak
- Mehmet Pekcan | Sıfırdan, İleri Seviye Next.js 13 ile Web App Geliştirme => Next.js için önerdiğim
pnpx create-next-app -e https://github.com/dukeofsoftware/next-project-starter
pnpm add -D vercel
pnpx vercel login
pnpx vercel link
name: deploy
on:
push:
branches:
- main
workflow_dispatch:
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: pnpm/action-setup@v2
with:
node-version: 16
cache: pnpm
- run: pnpm install --immutable --frozen-lockfile
- run: pnpx vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- run: pnpx vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- run: pnpx vercel deploy --prod --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
- id: deploy
run: echo "::set-output name=url::$(pnpx vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})"
name: preview
on:
pull_request:
workflow_dispatch:
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
jobs:
preview:
runs-on: ubuntu-latest
environment:
name: preview
url: ${{ steps.deploy.outputs.url }}
steps:
- uses: actions/checkout@v3
- uses: pnpm/action-setup@v2
with:
node-version: 16
check-latest: true
cache: pnpm
- run: pnpm install --immutable
- run: pnpx vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
- run: pnpx vercel build --token=${{ secrets.VERCEL_TOKEN }}
- id: deploy
run: echo "::set-output name=url::$(pnpx vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})"