Skip to main content
The Suada Next.js SDK provides seamless integration with Next.js applications, offering server-side rendering support, API route handlers, and optimized components.

​
Overview

The Next.js SDK is designed to work seamlessly with Next.js 13+ applications, providing:
  • Server-side rendering support
  • API route handlers for OAuth callbacks
  • Optimized components with Tailwind CSS
  • TypeScript support
  • App Router compatibility

​
Prerequisites

Before you begin, ensure you have:
  • Next.js 13.0.0 or higher
  • React 18.0.0 or higher
  • Node.js 16.0.0 or higher
  • A Suada API key

​
Installation

Install the Next.js SDK and its dependencies: 
npm install @suada/next @suada/core
# or
yarn add @suada/next @suada/core
# or
pnpm add @suada/next @suada/core

​
Quick Start

​
1. Configure Environment Variables

Create or update your .env.local file: 
NEXT_PUBLIC_SUADA_API_KEY=your-api-key
NEXT_PUBLIC_SUADA_BASE_URL=https://api.suada.ai

​
2. Set Up Provider

Wrap your application with the Suada provider in your root layout: 
// app/layout.tsx
import { SuadaProvider } from '@suada/next';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <SuadaProvider
          config={{
            apiKey: process.env.NEXT_PUBLIC_SUADA_API_KEY!,
          }}
        >
          {children}
        </SuadaProvider>
      </body>
    </html>
  );
}

​
3. Add Integration Components

Use the integration components in your pages: 
// app/page.tsx
import { IntegrationButton, IntegrationList } from '@suada/next';

export default function Home() {
  return (
    <div className="p-4">
      <h1>My Integrations</h1>
      <IntegrationButton provider="notion" />
      <IntegrationList />
    </div>
  );
}

​
Core Features

​
🔒 OAuth Integration

The SDK provides built-in support for OAuth flows: 
// app/api/auth/callback/route.ts
import { handleOAuthCallback } from '@suada/next';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const code = searchParams.get('code');

  if (!code) {
    return new Response('No code provided', { status: 400 });
  }

  try {
    await handleOAuthCallback(code);
    return Response.redirect(new URL('/success', request.url));
  } catch (error) {
    return new Response('Authentication failed', { status: 500 });
  }
}

​
🎨 Styling

Components are styled with Tailwind CSS and can be customized: 
// app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .suada-integration-button {
    @apply px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600;
  }
}

​
🔄 Server Components

Use the SDK with Next.js Server Components: 
// app/integrations/page.tsx
import { getIntegrations } from '@suada/next';

export default async function IntegrationsPage() {
  const integrations = await getIntegrations();

  return (
    <div>
      <h1>Connected Integrations</h1>
      {integrations.map((integration) => (
        <div key={integration.id}>
          {integration.name} - {integration.status}
        </div>
      ))}
    </div>
  );
}

​
Best Practices

​
Security

  • Use environment variables for sensitive data
  • Implement proper error handling
  • Validate user sessions
  • Use HTTPS for all API calls
  • Secure OAuth callback endpoints

​
Performance

  • Use Server Components when possible
  • Implement proper caching
  • Optimize bundle size
  • Handle loading states
  • Use proper error boundaries

​
Development

  • Use TypeScript for type safety
  • Follow Next.js best practices
  • Write unit tests
  • Keep dependencies updated
  • Use proper error handling

​
Common Use Cases

​
Basic Integration

// app/integrations/page.tsx
import { IntegrationButton, IntegrationList } from '@suada/next';

export default function IntegrationsPage() {
  return (
    <div className="space-y-4">
      <h1 className="text-2xl font-bold">Integrations</h1>
      <IntegrationButton provider="notion" />
      <IntegrationList />
    </div>
  );
}

​
Advanced Integration

// app/integrations/[provider]/page.tsx
import { getIntegration, updateIntegration } from '@suada/next';

export default async function IntegrationPage({
  params,
}: {
  params: { provider: string };
}) {
  const integration = await getIntegration(params.provider);

  return (
    <div>
      <h1>{integration.name}</h1>
      <button
        onClick={async () => {
          await updateIntegration(params.provider, {
            settings: { /* ... */ },
          });
        }}
      >
        Update Settings
      </button>
    </div>
  );
}

​
FAQ

​
How do I handle OAuth callbacks in Next.js?

  1. Create an API route handler:
// app/api/auth/callback/route.ts
import { handleOAuthCallback } from '@suada/next';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const code = searchParams.get('code');

  if (!code) {
    return new Response('No code provided', { status: 400 });
  }

  try {
    await handleOAuthCallback(code);
    return Response.redirect(new URL('/success', request.url));
  } catch (error) {
    return new Response('Authentication failed', { status: 500 });
  }
}

​
How do I use the SDK with Server Components?

// app/integrations/page.tsx
import { getIntegrations } from '@suada/next';

export default async function IntegrationsPage() {
  const integrations = await getIntegrations();

  return (
    <div>
      {integrations.map((integration) => (
        <div key={integration.id}>{integration.name}</div>
      ))}
    </div>
  );
}

​
How do I customize the styling?

// app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .suada-integration-button {
    @apply px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600;
  }
}

​
How do I handle errors?

// app/integrations/page.tsx
import { ErrorBoundary } from '@suada/next';

export default function IntegrationsPage() {
  return (
    <ErrorBoundary fallback={<div>Something went wrong</div>}>
      <IntegrationList />
    </ErrorBoundary>
  );
}

​
Support & Resources

​
Documentation

​
Support

⌘I