前端全栈进阶 Nextjs打造跨框架SaaS应用（友克fx）

npx create-next-app my-image-saas
cd my-image-saas
npm install tailwindcss @tailwindcss/forms @tailwindcss/typography trpc @drizzle-team/drizzle-orm serverless
npx tailwindcss init -p

module.exports = {
  content: ['./components/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

service: my-image-saas

provider:
  name: aws
  runtime: nodejs14.x
  stage: dev
  region: us-east-1

functions:
  api:
    handler: handler.main
    events:
      - http:
          path: /api/{proxy+}
          method: any

// trpc/[trpc].ts
import { initTRPC } from '@trpc/server';
import { DrizzleHandler } from '@trpc/server/adapters/standalone';

export default initTRPC()
  .context(({ req }) => ({
    drizzle: DrizzleHandler.fromContext(req),
  }))
  .merge([
    // Define your TRPC routes here
  ]);

// db/index.js
const { Drizzle } = require('@drizzle-team/drizzle-orm');

const db = new Drizzle();

// Define your models here

module.exports = db;

// pages/api/index.js
import trpc from '../../trpc/[trpc]';
import { DrizzleHandler } from '@trpc/server/adapters/standalone';

export default DrizzleHandler.createNextApiHandler(trpc);

// components/ImageUpload.js
import { useState } from 'react';
import { Button, Input } from '@tailwindcss/forms';

function ImageUpload({ onUpload }) {
  const [image, setImage] = useState('');

  const handleChange = (e) => {
    setImage(e.target.files[0]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (image) {
      const formData = new FormData();
      formData.append('image', image);
      await onUpload(formData);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <Input
        type="file"
        accept="image/*"
        onChange={handleChange}
        className="mb-4"
      />
      <Button type="submit" className="bg-blue-500 text-white">
        Upload
      </Button>
    </form>
  );
}

export default ImageUpload;

// trpc/routes/image.ts
import { TRPCError } from '@trpc/server';
import { z } from 'zod';
import { db } from '../../db';

export const image = {
  create: async ({ input }) => {
    try {
      // Save the image to a storage service and store the reference in the database
      const imageRef = await saveImageToStorage(input.file);
      await db.image.create({ data: { ...input, imageRef } });
      return { success: true };
    } catch (error) {
      throw new TRPCError({ code: 'INTERNAL_SERVER_ERROR', message: error.message });
    }
  },
};

serverless deploy