netlify-integration

Netlify Integration

When to Use This Skill

Use this skill when you need to:

Deployment & Configuration:

• Deploy a Next.js application to Netlify
• Configure netlify.toml for build settings, functions, redirects, or headers
• Set up environment variables in Netlify Dashboard or CLI
• Configure continuous deployment from Git (GitHub, GitLab, Bitbucket)

Functions Development:

• Create Netlify serverless functions
• Handle webhooks (Twilio, Telnyx, Stripe, etc.)
• Debug function timeout issues (10s limit on free tier, 26s on Pro)
• Implement background processing for long-running tasks

Troubleshooting:

• Fix webhook timeout errors (especially for SMS/telephony apps)
• Debug "Function not found" (404) errors
• Resolve environment variable issues
• Fix build failures or deployment errors

SMS/Telephony Projects:

• Working on projects like Twilio-Aldea that handle SMS webhooks
• Implementing immediate webhook acknowledgment + background processing
• Validating webhook signatures (Twilio, Telnyx)

Quick Reference

1. Basic Netlify Function Handler

import type { Handler, HandlerEvent, HandlerContext } from "@netlify/functions";

export const handler: Handler = async (
  event: HandlerEvent,
  context: HandlerContext
) => {
  try {
    const body = JSON.parse(event.body || "{}");

    // Process request
    console.log("Request received:", body);

    return {
      statusCode: 200,
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ success: true }),
    };
  } catch (error) {
    console.error("Error:", error);
    return {
      statusCode: 500,
      body: JSON.stringify({ error: "Internal server error" }),
    };
  }
};

2. Webhook with Immediate Response (Critical Pattern)

Solves the 60% message loss problem - return 200 immediately, process async:

export const handler: Handler = async (event, context) => {
  // Validate webhook signature
  const isValid = validateWebhook(event);
  if (!isValid) {
    return { statusCode: 401, body: "Unauthorized" };
  }

  // IMMEDIATE: Return 200 OK (< 200ms)
  const response = {
    statusCode: 200,
    body: JSON.stringify({ received: true }),
  };

  // BACKGROUND: Process async (don't await)
  processWebhookAsync(event.body).catch(console.error);

  return response;
};