Começando com NextJS

Oferecemos um sdk para facilitar a integração entre o TucanoCloud e sua aplicação NextJS.

Instalação

Instale os pacotes via npm, yarn ou qualquer gerenciador de pacotes de sua preferência.

$ npm install tucano-cloud-next

Router

O router é um objeto que define os endpoints da sua aplicação, cada endpoint é um objeto com as seguintes propriedades:

  • allowedTypes: Array de strings com os tipos de arquivos permitidos.
  • middleware: Função opcional que é executada antes do upload do arquivo, pode ser usada para autenticar o usuário.
  • onUploadComplete: Função opcional que é executada após o upload do arquivo.

@/lib/tcloud/router.ts

1import { type TCRouter } from "tucano-cloud-next"
2

3const auth = async (req: NextRequest) => ({ userId: "123" }); // Example auth function
4

5export const router = {
6  "profileImage": {
7    allowedTypes: ["image/jpeg", "image/png"],
8    middleware: async (req: NextRequest, res: NextResponse) => {
9      const { userId } = await auth(req);
10      if (!userId) throw new Error("Unauthorized");
11

12      return { userId }; // This data will be passed to onUploadComplete
13    },
14    onUploadComplete: (data: any) => {
15      
16    }
17  }
18} satisfies TCRouter;
19

20export type MyRouter = typeof router;

Criando uma instância do TucanoCloud

Função que cria uma instância do TucanoCloud para ser usada em sua aplicação NextJs.

@/lib/tcloud/core.ts

1import TucanoCloud from "tucano-cloud-next";
2import { MyRouter } from "@/lib/tcloud/router";
3

4const tucanoCloud = new TucanoCloud({
5  project_id: process.env.TUCANO_CLOUD_PROJECT_ID,
6  secret_key: process.env.TUCANO_CLOUD_SECRET
7});
8

9tucanoCloud.setRouter(router);
10

11export default tucanoCloud;

Configurando o endpoint

O endpoint é necessário para que o TucanoCloud possa se comunicar com sua aplicação NextJS.

@/app/api/tcloud/route.ts

1import { NextRequest, NextResponse } from "next/server";
2import tucanoCloud from "@/lib/tcloud/core";
3

4const routeHandler = tucanoCloud.createRouterHandler();
5

6export const GET = routeHandler;
7export const POST = routeHandler;

Configurando o botão de upload

O botão de upload é um componente que facilita o upload de arquivos para o TucanoCloud. Ele é configurado com o endpoint que você criou anteriormente.

@/lib/tcloud/upload-componets.tsx

1import { generateUploadButton, generateUploadDropzone } from "tucano-cloud-next"
2import { MyRouter } from "@/lib/tcloud/router";
3

4const UploadButton = generateUploadButton<MyRouter>();
5const UploadDropzone = generateUploadDropzone<MyRouter>();
6

7export { UploadButton, UploadDropzone }

Agora você pode usar o componente UploadButton em sua aplicação NextJS da seguinte forma:

@/app/page.tsx

1import { UploadButton } from "@/lib/tcloud/upload-components";
2import router from "@/lib/tcloud/router";
3

4export default function MyPage() {
5  return (
6    <div>
7      <UploadButton 
8        route="profileImage" 
9        router={router} 
10        className='bg-blue-600 rounded-md p-3 font-medium' // Here you can style the button with your own classes
11        onUploadComplete={data => {
12          console.log('Completed:', data)
13        }}
14        onUploadError={error => {
15          console.log('Error:', error)
16        }}
17      >
18        Upload
19      </UploadButton>
20    </div>
21  );
22}

Obrigado por usar o TucanoCloud! Se você tiver alguma dúvida, entre em contato conosco.