Başlarken

Quickstart (Next.js App Router)

Next.js 14 App Router ile Kimlix kimlik doğrulamayı birkaç adımda ekleyin.

Note: The @kimlix/nextjs and @kimlix/react packages are not yet published to npm. SDK packages will be available after the public beta launch.

Example repo: example-next

1. Yeni Next.js projesi oluşturun

Terminal

pnpm create next-app@latest my-app --yes

2. Install @kimlix/nextjs

Terminal (available after public beta)

cd my-app && pnpm add @kimlix/nextjs @kimlix/react

3. Middleware ekleyin

middleware.ts (proje kökü):

middleware.ts

import { kimlixMiddleware } from '@kimlix/nextjs';

export default kimlixMiddleware({
  projectId: process.env.KIMLIX_PROJECT_ID!,
});

export const config = { matcher: ['/((?!.*\\..*).*)'] };

4. Provider ve bileşenleri ekleyin

app/layout.tsx içinde:

app/layout.tsx

import { KimlixProvider } from '@kimlix/nextjs';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <KimlixProvider projectId={process.env.KIMLIX_PROJECT_ID!}>
          {children}
        </KimlixProvider>
      </body>
    </html>
  );
}

Giriş sayfasında SignIn, header'da UserButton kullanın.

5. Projeyi çalıştırın

.env.local içinde KIMLIX_PROJECT_ID ve gerekirse NEXT_PUBLIC_KIMLIX_API_URL tanımlayın.

Terminal

pnpm dev

6. İlk kullanıcıyı oluşturun

Dashboard’a gidin (http://localhost:3000), kayıt olun veya giriş yapın. Proje ayarlarından Client ID’yi alıp uygulamanızda kullanın.