Next.js Notları ve İpuçları

İçindekiler

Proje Kurulumu
Yönlendirme
Sayfalar
API Yolları
Veri Getirme
Stil
Görsel Optimizasyonu
Font Optimizasyonu
Statik Dosya Sunumu
Ortam Değişkenleri
TypeScript Desteği
Dağıtım
Performans Optimizasyonu
Uluslararasılaştırma
Kimlik Doğrulama
Test

Proje Kurulumu

Yeni bir Next.js projesi oluşturun

npx create-next-app@latest my-next-app
cd my-next-app

Geliştirme sunucusunu çalıştırın

npm run dev

Üretim için derleyin

npm run build

Üretim sunucusunu başlatın

npm start

Yönlendirme

Temel yönlendirme

// pages/index.js
export default function Home() {
  return <h1>Anasayfa</h1>
}

// pages/about.js
export default function About() {
  return <h1>Hakkında Sayfası</h1>
}

Dinamik yollar

// pages/posts/[id].js
import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  const { id } = router.query

  return <p>Gönderi: {id}</p>
}

Yakalama-yolu

// pages/posts/[...slug].js
import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  const { slug } = router.query

  return <p>Slug: {slug.join('/')}</p>
}

Link bileşeni

import Link from 'next/link'

export default function NavBar() {
  return (
    <nav>
      <Link href="/">Ana Sayfa</Link>
      <Link href="/about">Hakkında</Link>
    </nav>
  )
}

Programatik yönlendirme

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  return (
    <button onClick={() => router.push('/about')}>
      Hakkında Sayfasına Git
    </button>
  )
}

Sayfalar

Özel Uygulama

// pages/_app.js
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Özel Doküman

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Hata Sayfası

// pages/404.js
export default function Custom404() {
  return <h1>404 - Sayfa Bulunamadı</h1>
}

// pages/500.js
export default function Custom500() {
  return <h1>500 - Sunucu Hatası Oluştu</h1>
}

API Yolları

Temel API yolu

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Next.js'ten Merhaba!' })
}

Dinamik API yolu

// pages/api/posts/[id].js
export default function handler(req, res) {
  const { id } = req.query
  res.status(200).json({ id, message: `Gönderi ${id}` })
}

Veri Getirme

getServerSideProps

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/data`)
  const data = await res.json()

  return {
    props: { data },
  }
}

export default function Page({ data }) {
  return <div>{data.title}</div>
}

getStaticProps

export async function getStaticProps() {
  const res = await fetch(`https://api.example.com/data`)
  const data = await res.json()

  return {
    props: { data },
    revalidate: 60, // Opsiyonel: her 60 saniyede bir yeniden doğrula
  }
}

export default function Page({ data }) {
  return <div>{data.title}</div>
}

getStaticPaths

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }))

  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`)
  const post = await res.json()

  return { props: { post } }
}

export default function Post({ post }) {
  return <div>{post.title}</div>
}

Stil

CSS Modülleri

// styles/Home.module.css
.container {
  padding: 0 2rem;
}

// pages/index.js
import styles from '../styles/Home.module.css'

export default function Home() {
  return <div className={styles.container}>Merhaba Dünya</div>
}

Sass Desteği

npm install sass

// styles/globals.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// pages/_app.js
import '../styles/globals.scss'

CSS-in-JS (Styled JSX)

export default function Button() {
  return (
    <div>
      <button>Click me</button>
      <style jsx>{`
        button {
          background-color: blue;
          color: white;
          padding: 10px 20px;
        }
      `}</style>
    </div>
  )
}

Görsel Optimizasyonu

Next.js Görsel Bileşeni

import Image from 'next/image'

export default function Avatar() {
  return (
    <Image
      src="/images/profile.jpg"
      alt="Profil fotoğrafı"
      width={500}
      height={500}
    />
  )
}

Font Optimizasyonu

Next.js Font Modülü

import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

Statik Dosya Sunumu

Statik dosyaların sunulması

Dosyaları public dizinine yerleştirin:

public/
  images/
    profile.jpg

Kodunuzda erişim:

<img src="/images/profile.jpg" alt="Profil fotoğrafı" />

Ortam Değişkenleri

Ortam değişkenlerini kullanma

// .env.local
DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

// pages/api/db.js
export default function handler(req, res) {
  res.status(200).json({ 
    host: process.env.DB_HOST,
    user: process.env.DB_USER
  })
}

TypeScript Desteği

TypeScript Ekleme

npm install --save-dev typescript @types/react @types/node

Dosya uzantılarını .ts veya .tsx olarak yeniden adlandırın.

Dağıtım

Vercel (önerilir)

npm install -g vercel
vercel

Statik HTML Dışa Aktarım

next build
next export

Performans Optimizasyonu

Otomatik Ön Yükleme

Next.js, bağlantılı sayfalar için JavaScript kodunu arka planda otomatik olarak ön yükler.

Dinamik İçe Aktarımlar

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/hello'))

export default function Home() {
  return (
    <div>
      <DynamicComponent />
    </div>
  )
}

Uluslararasılaştırma

Yönlendirme

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr', 'de'],
    defaultLocale: 'en',
  },
}

Çeviri

import { useRouter } from 'next/router'

const dict = {
  en: { greeting: 'Hello' },
  fr: { greeting: 'Bonjour' },
  de: { greeting: 'Hallo' },
}

export default function Page() {
  const router = useRouter()
  const { locale } = router
  return <h1>{dict[locale].greeting}</h1>
}

Kimlik Doğrulama

NextAuth.js Kullanımı

npm install next-auth

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

export default NextAuth({
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET
    }),
  ],
})

Test

Jest ve React Testing Library

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

// __tests__/index.test.js
import { render, screen } from '@testing-library/react'
import Home from '../pages/index'

describe('Home', () => {
  it('renders a heading', () => {
    render(<Home />)

    const heading = screen.getByRole('heading', {
      name: /welcome to next.js!/i,
    })

    expect(heading).toBeInTheDocument()
  })
})

Testleri çalıştırın:

npm test