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
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
- 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?
- 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
