Installation

Sistem Gereksinimleri:

Automatic Installation

kullanarak yeni bir Next.js uygulaması başlatmanızı öneririz create-next-appher şeyi sizin için otomatik olarak ayarlar. Bir proje oluşturmak için çalıştırın:

Terminal
npx create-next-app@latest

Kurulum sırasında aşağıdaki istemleri göreceksiniz:

Terminal
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

Komutlardan sonra, create-next-app proje adınızla bir klasör oluşturacak ve gerekli bağımlılıkları yükleyecektir.

Bildiğim iyi oldu:

  • Next.js artık varsayılan olarak TypeScript, ESLint ve Tailwind CSS yapılandırmasıyla birlikte geliyor.
  • Uygulamanızın kodunu yapılandırma dosyalarından ayırmak için isteğe bağlı olarak projenizin kök dizininde bir src dizini kullanabilirsiniz.

Manual Installation

Yeni bir Next.js uygulamasını manuel olarak oluşturmak için gerekli paketleri yükleyin:

Terminal
npm install next@latest react@latest react-dom@latest

package.json dosyanızı açın ve aşağıdaki scripts adresini ekleyin:

package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Bu komut dosyaları, bir uygulama geliştirmenin farklı aşamalarını ifade eder:

Creating directories

Next.js dosya sistemi yönlendirmesi kullanır, yani uygulamanızdaki rotalar dosyalarınızı nasıl yapılandırdığınıza göre belirlenir.

The app directory

Yeni uygulamalar için App Router'ı kullanmanızı öneririz. Bu yönlendirici, React'in en son özelliklerini kullanmanıza olanak tanır ve topluluk geri bildirimlerine dayalı olarak Pages Rout er'ın bir evrimidir.

Bir app/ klasörü oluşturun, ardından bir layout.tsx ve page.tsx dosyası ekleyin. Bunlar, kullanıcı uygulamanızın kök dizinini (/) ziyaret ettiğinde oluşturulacaktır.

App Folder Structure

Gerekli <html> ve <body> etiketleriyle app/layout.tsx içinde bir kök düzen oluşturun:

app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Son olarak, bazı başlangıç içerikleriyle birlikte app/page.tsx adresinde bir ana sayfa oluşturun:

app/page.tsx
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

Bilmekte fayda var: layout.tsx adresini oluşturmayı unutursanız, Next.js, geliştirme sunucusunu next dev ile çalıştırırken bu dosyayı otomatik olarak oluşturacaktır.

App Router'ı kullanma hakkında daha fazla bilgi edinin.

The pages directory (optional)

Uygulama Yönlendiricisi yerine Sayfa Yönlendiricisini kullanmayı tercih ederseniz, projenizin kök dizininde bir pages/ dizini oluşturabilirsiniz.

Ardından, pages klasörünüzün içine bir index.tsx dosyası ekleyin. Bu sizin ana sayfanız olacaktır (/):

pages/index.tsx
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

Ardından, global düzeni tanımlamak için pages/ içine bir _app.tsx dosyası ekleyin. Özel Uygulama dosyası hakkında daha fazla bilgi edinin.

pages/_app.tsx
import type { AppProps } from 'next/app'
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Son olarak, sunucudan gelen ilk yanıtı kontrol etmek için pages/ içine bir _document.tsx dosyası ekleyin. Özel Belge dosyası hakkında daha fazla bilgi edinin.

pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Pages Router'ı kullanma hakkında daha fazla bilgi edinin.

Bilmekte fayda var: Her iki yönlendiriciyi de aynı projede kullanabilmenize rağmen, app adresindeki rotalar pages adresine göre önceliklendirilecektir. Karışıklığı önlemek için yeni projenizde yalnızca bir yönlendirici kullanmanızı öneririz.

The public folder (optional)

Görüntüler, yazı tipleri gibi statik varlıkları depolamak için bir public klasörü oluşturun. Daha sonra public dizini içindeki dosyalara temel URL'den (/) başlayarak kodunuz tarafından başvurulabilir.

Run the Development Server

  1. Geliştirme sunucusunu başlatmak için npm run dev adresini çalıştırın.
  2. Başvurunuzu görüntülemek için http://localhost:3000 adresini ziyaret edin.
  3. app/page.tsx (veya pages/index.tsx) dosyasını düzenleyin ve tarayıcınızda güncellenmiş sonucu görmek için kaydedin.