نشر تطبيق Next.js على AWS باستخدام SST Ion: دليل شامل للحوسبة السحابية بدون خوادم

npx create-next-app@latest sst-nextjs-app
cd sst-nextjs-app

npx sst@latest init

/// <reference path="./.sst/platform/config.d.ts" />
export default $config({
  app(input) {
    return {
      name: "sst-nextjs-app",
      removal: input?.stage === "production" ? "retain" : "remove",
      protect: ["production"].includes(input?.stage),
      home: "aws",
    };
  },
  async run() {
    new sst.aws.Nextjs("MyWeb");
  },
});

echo ".sst" >> .gitignore

npx sst deploy --stage dev

/// <reference path="./.sst/platform/config.d.ts" />
export default $config({
  app(input) {
    return {
      name: "sst-nextjs-app",
      removal: input?.stage === "production" ? "retain" : "remove",
      protect: ["production"].includes(input?.stage),
      home: "aws",
    };
  },
  async run() {
    const bucket = new sst.aws.Bucket("Uploads", {
      access: "public",
    });
 
    new sst.aws.Nextjs("MyWeb", {
      link: [bucket],
    });
 
    return {
      bucket: bucket.name,
    };
  },
});

npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner sst

// src/app/api/upload/route.ts
import { Resource } from "sst";
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { NextResponse } from "next/server";
 
const s3 = new S3Client({});
 
export async function POST(request: Request) {
  const { filename, contentType } = await request.json();
 
  const key = `uploads/${Date.now()}-${filename}`;
 
  const command = new PutObjectCommand({
    Bucket: Resource.Uploads.name,
    Key: key,
    ContentType: contentType,
  });
 
  const presignedUrl = await getSignedUrl(s3, command, {
    expiresIn: 3600,
  });
 
  return NextResponse.json({
    presignedUrl,
    key,
    publicUrl: `https://${Resource.Uploads.name}.s3.amazonaws.com/${key}`,
  });
}

// src/app/upload/page.tsx
"use client";
 
import { useState } from "react";
 
export default function UploadPage() {
  const [file, setFile] = useState<File | null>(null);
  const [uploading, setUploading] = useState(false);
  const [uploadedUrl, setUploadedUrl] = useState<string | null>(null);
 
  async function handleUpload() {
    if (!file) return;
    setUploading(true);
 
    try {
      const res = await fetch("/api/upload", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          filename: file.name,
          contentType: file.type,
        }),
      });
      const { presignedUrl, publicUrl } = await res.json();
 
      await fetch(presignedUrl, {
        method: "PUT",
        headers: { "Content-Type": file.type },
        body: file,
      });
 
      setUploadedUrl(publicUrl);
    } catch (error) {
      console.error("فشل الرفع:", error);
    } finally {
      setUploading(false);
    }
  }
 
  return (
    <div className="max-w-md mx-auto p-8">
      <h1 className="text-2xl font-bold mb-4">رفع الملفات</h1>
      <input
        type="file"
        onChange={(e) => setFile(e.target.files?.[0] || null)}
        className="mb-4 block w-full"
      />
      <button
        onClick={handleUpload}
        disabled={!file || uploading}
        className="bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-50"
      >
        {uploading ? "جارٍ الرفع..." : "رفع إلى S3"}
      </button>
 
      {uploadedUrl && (
        <div className="mt-4 p-4 bg-green-50 rounded">
          <p className="text-sm text-green-800">تم الرفع بنجاح!</p>
          <a
            href={uploadedUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="text-blue-600 underline text-sm break-all"
          >
            {uploadedUrl}
          </a>
        </div>
      )}
    </div>
  );
}

/// <reference path="./.sst/platform/config.d.ts" />
export default $config({
  app(input) {
    return {
      name: "sst-nextjs-app",
      removal: input?.stage === "production" ? "retain" : "remove",
      protect: ["production"].includes(input?.stage),
      home: "aws",
    };
  },
  async run() {
    const bucket = new sst.aws.Bucket("Uploads", {
      access: "public",
    });
 
    const table = new sst.aws.Dynamo("Notes", {
      fields: {
        userId: "string",
        noteId: "string",
      },
      primaryIndex: { hashKey: "userId", rangeKey: "noteId" },
    });
 
    new sst.aws.Nextjs("MyWeb", {
      link: [bucket, table],
    });
 
    return {
      bucket: bucket.name,
      table: table.name,
    };
  },
});

npm install @aws-sdk/client-dynamodb @aws-sdk/lib-dynamodb

// src/app/api/notes/route.ts
import { Resource } from "sst";
import { DynamoDBClient } from "@aws-sdk/client-dynamodb";
import {
  DynamoDBDocumentClient,
  PutCommand,
  QueryCommand,
} from "@aws-sdk/lib-dynamodb";
import { NextResponse } from "next/server";
 
const client = DynamoDBDocumentClient.from(new DynamoDBClient({}));
 
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const userId = searchParams.get("userId") || "anonymous";
 
  const result = await client.send(
    new QueryCommand({
      TableName: Resource.Notes.name,
      KeyConditionExpression: "userId = :userId",
      ExpressionAttributeValues: { ":userId": userId },
    })
  );
 
  return NextResponse.json({ notes: result.Items || [] });
}
 
export async function POST(request: Request) {
  const { userId = "anonymous", title, content } = await request.json();
 
  const note = {
    userId,
    noteId: `note_${Date.now()}`,
    title,
    content,
    createdAt: new Date().toISOString(),
  };
 
  await client.send(
    new PutCommand({
      TableName: Resource.Notes.name,
      Item: note,
    })
  );
 
  return NextResponse.json({ note });
}

// src/app/notes/page.tsx
"use client";
 
import { useEffect, useState } from "react";
 
interface Note {
  noteId: string;
  title: string;
  content: string;
  createdAt: string;
}
 
export default function NotesPage() {
  const [notes, setNotes] = useState<Note[]>([]);
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
 
  async function loadNotes() {
    const res = await fetch("/api/notes?userId=anonymous");
    const data = await res.json();
    setNotes(data.notes);
  }
 
  async function createNote() {
    if (!title || !content) return;
 
    await fetch("/api/notes", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title, content }),
    });
 
    setTitle("");
    setContent("");
    loadNotes();
  }
 
  useEffect(() => {
    loadNotes();
  }, []);
 
  return (
    <div className="max-w-2xl mx-auto p-8">
      <h1 className="text-2xl font-bold mb-6">ملاحظات بدون خوادم</h1>
 
      <div className="mb-8 space-y-3">
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="عنوان الملاحظة"
          className="w-full border rounded px-3 py-2"
        />
        <textarea
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="محتوى الملاحظة"
          className="w-full border rounded px-3 py-2 h-24"
        />
        <button
          onClick={createNote}
          className="bg-blue-600 text-white px-4 py-2 rounded"
        >
          إضافة ملاحظة
        </button>
      </div>
 
      <div className="space-y-4">
        {notes.map((note) => (
          <div key={note.noteId} className="border rounded p-4">
            <h2 className="font-semibold">{note.title}</h2>
            <p className="text-gray-600 mt-1">{note.content}</p>
            <p className="text-xs text-gray-400 mt-2">{note.createdAt}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

npx sst dev

new sst.aws.Nextjs("MyWeb", {
  link: [bucket, table],
  domain: {
    name: "app.yourdomain.com",
    dns: sst.aws.dns(),
  },
});

new sst.aws.Nextjs("MyWeb", {
  link: [bucket, table],
  domain: {
    name: "app.yourdomain.com",
    dns: sst.cloudflare.dns(),
  },
});

new sst.aws.Nextjs("MyWeb", {
  link: [bucket, table],
  domain: {
    name: "app.yourdomain.com",
    dns: false,
  },
});

async run() {
  const isProd = $app.stage === "production";
 
  const bucket = new sst.aws.Bucket("Uploads", {
    access: "public",
  });
 
  const table = new sst.aws.Dynamo("Notes", {
    fields: {
      userId: "string",
      noteId: "string",
    },
    primaryIndex: { hashKey: "userId", rangeKey: "noteId" },
    pointInTimeRecovery: isProd,
  });
 
  new sst.aws.Nextjs("MyWeb", {
    link: [bucket, table],
    domain: isProd
      ? { name: "app.yourdomain.com", dns: sst.aws.dns() }
      : undefined,
    server: {
      memory: isProd ? "1024 MB" : "512 MB",
    },
  });
}

# التطوير
npx sst deploy --stage dev
 
# الاختبار
npx sst deploy --stage staging
 
# الإنتاج
npx sst deploy --stage production

// أضف إلى sst.config.ts داخل async run()
new sst.aws.Cron("CleanupOldUploads", {
  schedule: "rate(1 day)",
  job: {
    handler: "src/functions/cleanup.handler",
    link: [bucket],
  },
});

// src/functions/cleanup.ts
import { Resource } from "sst";
import {
  S3Client,
  ListObjectsV2Command,
  DeleteObjectsCommand,
} from "@aws-sdk/client-s3";
 
const s3 = new S3Client({});
const DAYS_TO_KEEP = 30;
 
export async function handler() {
  const cutoff = new Date();
  cutoff.setDate(cutoff.getDate() - DAYS_TO_KEEP);
 
  const objects = await s3.send(
    new ListObjectsV2Command({
      Bucket: Resource.Uploads.name,
      Prefix: "uploads/",
    })
  );
 
  const toDelete = (objects.Contents || [])
    .filter((obj) => obj.LastModified && obj.LastModified < cutoff)
    .map((obj) => ({ Key: obj.Key! }));
 
  if (toDelete.length > 0) {
    await s3.send(
      new DeleteObjectsCommand({
        Bucket: Resource.Uploads.name,
        Delete: { Objects: toDelete },
      })
    );
    console.log(`تم حذف ${toDelete.length} ملفات قديمة`);
  }
 
  return { deleted: toDelete.length };
}

/// <reference path="./.sst/platform/config.d.ts" />
export default $config({
  app(input) {
    return {
      name: "sst-nextjs-app",
      removal: input?.stage === "production" ? "retain" : "remove",
      protect: ["production"].includes(input?.stage),
      home: "aws",
    };
  },
  async run() {
    const isProd = $app.stage === "production";
 
    const bucket = new sst.aws.Bucket("Uploads", {
      access: "public",
    });
 
    const table = new sst.aws.Dynamo("Notes", {
      fields: {
        userId: "string",
        noteId: "string",
      },
      primaryIndex: { hashKey: "userId", rangeKey: "noteId" },
      pointInTimeRecovery: isProd,
    });
 
    new sst.aws.Nextjs("MyWeb", {
      link: [bucket, table],
      domain: isProd
        ? { name: "app.yourdomain.com", dns: sst.aws.dns() }
        : undefined,
      server: {
        memory: isProd ? "1024 MB" : "512 MB",
        architecture: "arm64",
      },
    });
 
    new sst.aws.Cron("CleanupOldUploads", {
      schedule: "rate(1 day)",
      job: {
        handler: "src/functions/cleanup.handler",
        link: [bucket],
      },
    });
 
    return {
      bucket: bucket.name,
      table: table.name,
    };
  },
});

npx sst deploy --stage production

npx sst remove --stage dev

npm install sst