> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js Minimal Boilerplate

> Kom igång snabbt med vår minimala Next.js-mall för att integrera Dodo Payments i din Next.js-applikation

## Översikt

Next.js minimala mall ger en färdig att använda startpunkt för att integrera Dodo Payments med din Next.js-applikation. Denna mall inkluderar kassa-sessioner, webhook-hantering, kundportal och moderna UI-komponenter för att hjälpa dig att börja ta emot betalningar snabbt.

<Info>
  Detta boilerplate använder Next.js 16 App Router med TypeScript, Tailwind CSS 4 och `@dodopayments/nextjs`-adaptern.
</Info>

### Funktioner

* **Snabb start** - Kom igång på under 5 minuter
* **Betalintegration** - Förkonfigurerat checkoutflöde med `@dodopayments/nextjs`
* **Modern UI** - Rent, mörkt prissättningsgränssnitt med Tailwind CSS
* **Webhook-hantering** - Färdig webhook-ändpunkt för betalningshändelser
* **Kundportal** - Hantering av prenumerationer med ett klick
* **TypeScript** - Fullständigt typat med minimala, fokuserade typer
* **Förifylld checkout** - Visar hur kunddata skickas för bättre användarupplevelse

## Förutsättningar

Innan du börjar, se till att du har:

* **Node.js 20.9+** (krävs för Next.js 16)
* **Dodo Payments-konto** (för att få tillgång till API och Webhook-nycklar från instrumentpanelen)

## Snabbstart

<Steps>
  <Step title="Clone the Repository">
    ```bash theme={null}
    git clone https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate.git
    cd dodo-nextjs-minimal-boilerplate
    ```
  </Step>

  <Step title="Install Dependencies">
    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Get API Credentials">
    Registrera dig på [Dodo Payments](https://dodopayments.com/) och hämta dina uppgifter från instrumentpanelen:

    * **API-nyckel:** [Instrumentpanel → Utvecklare → API-nycklar](https://app.dodopayments.com/developer/api-keys)
    * **Webhook-nyckel:** [Instrumentpanel → Utvecklare → Webhooks](https://app.dodopayments.com/developer/webhooks)

    <Tip>
      Se till att du är i **testläge** medan du utvecklar!
    </Tip>
  </Step>

  <Step title="Configure Environment Variables">
    Skapa en `.env`-fil i rotmappen:

    ```bash theme={null}
    cp .env.example .env
    ```

    Uppdatera värdena med dina Dodo Payments-uppgifter:

    ```env theme={null}
    DODO_PAYMENTS_API_KEY=your_api_key_here
    DODO_PAYMENTS_WEBHOOK_KEY=your_webhook_signing_key_here
    DODO_PAYMENTS_RETURN_URL=http://localhost:3000
    DODO_PAYMENTS_ENVIRONMENT=test_mode
    ```

    <Warning>
      Commita aldrig din `.env`-fil till versionshantering. Den ingår redan i `.gitignore`.
    </Warning>
  </Step>

  <Step title="Add Your Products">
    Uppdatera `src/lib/products.ts` med dina faktiska produkt-ID:n från Dodo Payments:

    ```typescript theme={null}
    export const products: Product[] = [
      {
        product_id: "pdt_001", // Replace with your product ID
        name: "Basic Plan",
        description: "Get access to basic features and support",
        price: 9999, // in cents
        features: [
          "Access to basic features",
          "Email support",
          "1 Team member",
          "Basic analytics",
        ],
      },
      // ... add more products
    ];
    ```
  </Step>

  <Step title="Run the Development Server">
    ```bash theme={null}
    npm run dev
    ```

    Öppna [http://localhost:3000](http://localhost:3000) för att se din prissättningssida!
  </Step>
</Steps>

## Projektstruktur

```text theme={null}
src/
├── app/
│   ├── api/
│   │   ├── checkout/          # Checkout session handler
│   │   ├── customer-portal/   # Customer portal redirect
│   │   └── webhook/           # Webhook event handler
│   ├── components/
│   │   ├── Footer.tsx         # Reusable footer
│   │   ├── Header.tsx         # Navigation header
│   │   └── ProductCard.tsx    # Product pricing card
│   ├── globals.css            # Global styles
│   ├── layout.tsx             # Root layout
│   └── page.tsx               # Pricing page (home)
└── lib/
    └── products.ts            # Product definitions
```

## Anpassning

### Uppdatera produktinformation

Redigera `src/lib/products.ts` för att ändra:

* Produkt-ID:n (från din Dodo-instrumentpanel)
* Prissättning
* Funktioner
* Beskrivningar

### Förifyll kunddata

I `src/app/components/ProductCard.tsx`, ersätt de hårdkodade värdena med din faktiska användardata:

```typescript theme={null}
customer: {
  name: "John Doe",
  email: "john@example.com",
},
```

### Uppdatera kundportalen

I `src/app/components/Header.tsx`, ersätt det hårdkodade kund-ID:t:

```typescript theme={null}
const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID
```

Du kan genomföra ett testköp för att få kund-ID:t för testning.

## Webhook-händelser

Boilerplaten visar hur två webhook-händelser hanteras i `src/app/api/webhook/route.ts`:

* `onSubscriptionActive` - Triggas när en prenumeration blir aktiv
* `onPaymentSucceeded` - Triggas när en betalning lyckas

Lägg till din affärslogik inuti dessa hanterare:

```typescript theme={null}
onSubscriptionActive: async (payload) => {
  // Grant access to your product
  // Update user database
  // Send welcome email
},
```

Lägg till fler webhook-händelser vid behov.

För lokal utveckling kan du använda verktyg som [ngrok](https://ngrok.com/) för att skapa en säker tunnel till din lokala server och använda den som din webhook-URL.

## Distribution

### Bygg för produktion

```bash theme={null}
npm run build
npm start
```

### Distribuera till Vercel

\[

![Distribuera med Vercel](https://vercel.com/button)

]\([https://vercel.com/new/clone?repository-url=https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate](https://vercel.com/new/clone?repository-url=https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate))

Glöm inte att lägga till dina miljövariabler i Vercel-instrumentpanelen!

### Uppdatera Webhook-URL

Efter distribution, uppdatera din webhook-URL i [Dodo Payments Dashboard](https://app.dodopayments.com/developer/webhooks):

```
https://example.com/api/webhook
```

## Felsökning

<AccordionGroup>
  <Accordion title="Module not found or build errors">
    Radera `node_modules` och installera om beroenden:

    ```bash theme={null}
    rm -rf node_modules package-lock.json
    npm install
    ```
  </Accordion>

  <Accordion title="Checkout redirect fails">
    **Vanliga orsaker:**

    * Ogiltigt produkt-ID - kontrollera att det finns i din Dodo-instrumentpanel
    * Fel API-nyckel eller miljöinställning i `.env`
    * Kontrollera webbläsarkonsol och terminal efter fel
  </Accordion>

  <Accordion title="Webhooks not receiving events">
    För lokal testning, använd [ngrok](https://ngrok.com) för att exponera din server:

    ```bash theme={null}
    ngrok http 3000
    ```

    Uppdatera webhook-URL:en i din [Dodo-dashboard](https://app.dodopayments.com/developer/webhooks) till ngrok-URL:en. Kom ihåg att uppdatera din .env-fil med rätt webhook-verifieringsnyckel.
  </Accordion>

  <Accordion title="Customer portal link doesn't work">
    Ersätt den hårdkodade `CUSTOMER_ID` i `src/app/components/Header.tsx` med ett faktiskt kund-ID från din Dodo-instrumentpanel.

    Eller integrera ditt autentiseringssystem och din databas för att hämta kund-ID:t dynamiskt.
  </Accordion>
</AccordionGroup>

## Lär dig mer

* [Dodo Payments Dokumentation](https://docs.dodopayments.com/)
* [Dokumentation för Checkout Sessions](https://docs.dodopayments.com/developer-resources/checkout-session)
* [Webhooks Dokumentation](https://docs.dodopayments.com/developer-resources/webhooks)

## Support

Behöver du hjälp med mallen?

* Gå med i vår [Discord-community](https://discord.gg/bYqAp4ayYh) för frågor och diskussioner
* Kolla in [GitHub-repositoriet](https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate) för problem och uppdateringar
* Kontakta vårt [supportteam](mailto:support@dodopayments.com) för hjälp