0Pricing
Next.js 15 Fullstack Web Apps · Ders

API Yol İşleyicileri Oluşturma

Arka uç mantığı için App Router'ın Yol İşleyicilerini kullanarak sağlam RESTful API uç noktaları oluşturun.

API Yol İşleyicileri Oluşturma, CoddyKit'te ücretsiz bir Next.js 15 Fullstack Web Apps dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Next.js 15 Fullstack Web Apps öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Next.js 15 Fullstack Web Apps kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Welcome to Route Handlers

In Next.js 15, Route Handlers are the powerful way to build backend API endpoints directly within your App Router project.

They allow you to create RESTful APIs, handle webhooks, or perform any server-side logic, all co-located with your frontend code.

Why Use Route Handlers?

Route Handlers offer several benefits:

  • Simplicity: No need for a separate backend server.
  • Co-location: API logic lives next to related UI components.
  • Performance: Built on Web Standard APIs, making them efficient.
  • Flexibility: Support all HTTP methods (GET, POST, PUT, DELETE, etc.).

Creating Your First Handler

To create a Route Handler, define a route.ts (or .js) file inside an app directory segment. For example, app/api/hello/route.ts will handle requests to /api/hello.

Inside this file, you export functions that match HTTP methods, like GET, POST, etc.

Handling GET Requests

The GET function handles HTTP GET requests. It receives a NextRequest object and should return a NextResponse.

Let's create a simple 'hello world' API endpoint.

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello from API!' });
}

How to Access GET Handler

The previous code snippet, placed in app/api/hello/route.ts, creates an endpoint accessible at /api/hello.

When you navigate to http://localhost:3000/api/hello in your browser, you'll see the JSON response: {"message":"Hello from API!"}.

Handling POST Requests

For data submission, you'll use the POST function. It also receives the NextRequest object, which contains the request body.

You can parse the JSON body using await request.json().

import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const data = await request.json();
  return NextResponse.json(
    { message: 'Data received', data },
    { status: 200 }
  );
}

Accessing Request Details

The NextRequest object provides rich access to request details:

  • request.url: The full request URL.
  • request.headers: Request headers (e.g., request.headers.get('Content-Type')).
  • request.nextUrl.searchParams: Query parameters (e.g., ?name=Alice).

These are crucial for dynamic and secure API logic.

Dynamic Segments in Handlers

Just like pages, Route Handlers can have dynamic segments. For example, app/api/items/[id]/route.ts.

You can access these dynamic parameters from the params object passed to your handler function.

import { NextRequest, NextResponse } from 'next/server';

interface Params {
  params: { id: string };
}

export async function GET(
  request: NextRequest,
  { params }: Params
) {
  const id = params.id; // '123' for /api/items/123
  return NextResponse.json({ itemId: id, message: 'Fetched item' });
}

Setting Status and Headers

When returning a NextResponse, you can customize the HTTP status code and headers.

This is important for proper API communication, like indicating success (200, 201) or errors (400, 404, 500).

import { NextResponse } from 'next/server';

export async function DELETE() {
  return new NextResponse(null, { status: 204 }); // No Content
}

Quick Check: Handler Basics

You want to create an API endpoint at /api/products that returns a list of products when a GET request is made.

Which code snippet correctly sets up this handler in app/api/products/route.ts?

Recap: Building API Handlers

You've learned the fundamentals of Next.js 15 Route Handlers!

  • They allow backend logic co-located in the app directory.
  • Define handlers by exporting functions (GET, POST, etc.) in a route.ts file.
  • Use NextRequest to access request details and NextResponse to send responses.
  • Dynamic segments enable flexible API routes.

This powerful feature streamlines fullstack development in Next.js.

Sıkça Sorulan Sorular

“API Yol İşleyicileri Oluşturma” dersi ücretsiz mi?

Evet — “API Yol İşleyicileri Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Next.js 15 Fullstack Web Apps kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Next.js 15 Fullstack Web Apps kursu toplamda 4 dersten oluşur.

“API Yol İşleyicileri Oluşturma” dersinde ne öğreneceğim?

Arka uç mantığı için App Router'ın Yol İşleyicilerini kullanarak sağlam RESTful API uç noktaları oluşturun. Next.js 15 Fullstack Web Apps ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Next.js 15 Fullstack Web Apps öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Next.js 15 Fullstack Web Apps, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“API Yol İşleyicileri Oluşturma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Next.js 15 Fullstack Web Apps dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Next.js 15 Fullstack Web Apps dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. API Yol İşleyicileri Oluşturma
  2. İstek Doğrulama ve Güvenlik
  3. Harici Hizmetleri Entegre Etme
  4. İstek Hızı Sınırlama ve API Hatalarını İşleme
← Next.js 15 Fullstack Web Apps Sayfasına Dön