---
title: Proje oluşturma
description: Örnek Next.js projesini oluşturun, proje yapısını inceleyin ve uygulama ayarlarını yapılandırın.
---

## Next.js Projesi Oluşturma

Next.js projesi oluşturmak oldukça kolaydır. Terminalinizde aşağıdaki komutu çalıştırmanız yeterlidir.

```bash
npx create-next-app myikas-app --example "https://github.com/ikascom/ikas-sample-app-nextjs/tree/initial"
```

Ardından proje dizinine geçin ve uygulamayı çalıştırın.

```bash
cd myikas-app
pnpm dev
```

Kurulum tamamlandıktan sonra `package.json` dosyasının bulunduğu proje kök dizininde `pnpm dev` komutunu çalıştırın ve tarayıcınızda [http://localhost:3000/](http://localhost:3000/) adresini açın. Herhangi bir hata görmüyorsanız uygulama geliştirmeye başlamaya hazırsınız.

## Proje Yapısı

Proje yapısı şu şekildedir:

```txt
@types/
app/
globals/
lib/
public/
.env.example
.gitignore
eslint.config.mjs
LICENSE
next-env.d.ts
next.config.ts
package.json
pnpm-lock.yaml
README.md
tsconfig.json
```

## Uygulamanızı Yapılandırma

<Callout type="info" title="App Key ve App Secret">
Uygulamanızı çalıştırmadan önce Partners Dashboard üzerinden **App Key** ve **App Secret** bilgilerinizi almanız gerekir. Adımlar için [Partner panelinde uygulama oluşturma](https://builders.ikas.com/docs/app-development/nextjs-tutorial/create-app) sayfasına bakın.
</Callout>

### Environment Dosyasını Güncelleme

Next.js, `.env` dosyasındaki environment değişkenlerini `process.env` içine yüklemeyi yerleşik olarak destekler. Ayrıntılar için [bu bağlantıya](https://nextjs.org/docs/basic-features/environment-variables) göz atabilirsiniz.

Önce proje kök dizinindeki `.env.example` dosyasını kopyalayarak `.env` adında yeni bir dosya oluşturun. Ardından bu dosyadaki değişkenleri kendi App Key, App Secret ve `DEPLOY_URL` değerlerinizle güncelleyin.

```bash title="File: .env"
# NEXT_PUBLIC_* variables can be used on client-side
# Replace it with your App Key
NEXT_PUBLIC_APP_KEY=<Your-App-Key>

# Cannot be accessible on the client-side
# Replace it with your App Secret
APP_SECRET=<Your-App-Secret>

# Replace it with your Deployment URL
DEPLOY_URL=<NGROK_URL for local or Your-App-Deployment-Address for production>
```

### Yapılandırma Dosyasını Kontrol Etme

`.env` dosyasını güncelledikten sonra `globals/config.ts` dosyasına göz atalım. Bu dosyada `.env` dosyasından yüklenen environment değişkenleri `config` objesine aktarılır.

Bu değişkenleri ikas'ta yetkilendirme sürecini başlatırken ve ikas API'ye erişirken kullanacağız.

```typescript title="File: globals/config.ts"
export const config = {
  appId: process.env.NEXT_PUBLIC_APP_KEY || '',
  appSecret: process.env.APP_SECRET || '',

  // Api access scopes will be used to start oauth2 flow
  // Update scopes according to app requirements
  scope: 'read_products,write_products',

  deployUrl: process.env.DEPLOY_URL || 'http://localhost:3000',
  callbackUrl: (process.env.DEPLOY_URL || 'http://localhost:3000') + '/api/oauth/callback',
};
```