Next.js Integration

Integrate Premonize with your Next.js application.

Installation

npm install axios
# or
yarn add axios

Setup API Client

Create a reusable API client for making requests:

// lib/launchkit.js
import axios from 'axios';

const launchkit = axios.create({
  baseURL: 'https://premonize.com/api/v1',
  headers: {
    'Authorization': `Bearer ${process.env.LAUNCHKIT_API_KEY}`,
    'Content-Type': 'application/json',
  },
});

export default launchkit;

Waitlist Form Component

// components/WaitlistForm.jsx
'use client';

import { useState } from 'react';
import launchkit from '@/lib/launchkit';

export default function WaitlistForm() {
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState('idle');
  const [position, setPosition] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('loading');

    try {
      const { data } = await launchkit.post('/waitlist/subscribers', {
        email,
        referral_code: new URLSearchParams(window.location.search).get('ref'),
      });

      setPosition(data.data.position);
      setStatus('success');
    } catch (error) {
      setStatus('error');
    }
  };

  if (status === 'success') {
    return (
      

        
You're on the list!
        
Your position: #{position}
      
    );
  }

  return (
    

       setEmail(e.target.value)}
        placeholder="Enter your email"
        required
        className="w-full px-4 py-2 border rounded-lg"
      />
      
        {status === 'loading' ? 'Joining...' : 'Join Waitlist'}
      
    
  );
}

Fetch Changelog Posts

// app/changelog/page.jsx
import launchkit from '@/lib/launchkit';

async function getChangelog() {
  const { data } = await launchkit.get('/changelog/posts', {
    params: { published: true, limit: 10 }
  });
  return data.data;
}

export default async function ChangelogPage() {
  const posts = await getChangelog();

  return (
    

      
Changelog
      {posts.map((post) => (
        

          {post.type}
          
{post.title}
          

        
      ))}
    
  );
}

Environment Variables

# .env.local
LAUNCHKIT_API_KEY=sk_live_xxxxxxxxxxxxx