Upload de arquivos para o S3 com Next.js

Workshop

17 vídeos • 02:07:14

Seção 01 | Introdução

  1. 1.

    O que vamos construir

    01:35
  2. 2.

    Requisitos do projeto

    07:04

Seção 02 | Setup HTML e Estilos

  1. 3.

    Setup do projeto Next

    05:30
  2. 4.

    Iniciando a estrutura HTML e Estilização

    08:02
  3. 5.

    Estilizando a galeria de Fotos

    07:53

Seção 03 | Setup S3

  1. 6.

    Setup do S3 e permissões de leitura

    07:56
  2. 7.

    Setup de chaves API com AWS IAM

    05:36

Seção 04 | Exibindo e Subindo Imagens

  1. 8.

    Acessando os arquivos do S3 pelo nosso App

    11:43
  2. 9.

    Upload simples de imagem com Server Actions e S3

    19:04

Seção 05 | Ajustes e Validações

  1. 10.

    Ordenar arquivos por data de modificação

    02:22
  2. 11.

    Validação para arquivos vazios

    01:57
  3. 12.

    Mensagens de sucesso e erro ao enviar imagem

    07:35
  4. 13.

    Criando validações de tipo de arquivo, tamanho e total de imagens.

    06:39

Seção 06 | Apagando Imagens

  1. 14.

    Apagando Imagens

    08:42
  2. 15.

    Estilizando o botão de apagar imagem

    03:10

Seção 07 | Uppy

  1. 16.

    Implementando a biblioteca Uppy

    19:38

Seção 08 | Finalização

  1. 17.

    Recapitulando

    02:48
Login
Workshops>Upload de arquivos para o S3 com Next.js>Iniciando a estrutura HTML e Estilização

Iniciando a estrutura HTML e Estilização

Vamos criar o esqueleto de nossa página HTML e CSS baseado no design no Figma. Começamos pelo layout estático com header, footer, textos, e áreas para upload e galeria de fotos. Utilizamos Tailwind CSS para estilização e trocamos a fonte para Roboto com NextFont, ajustando headers, parágrafos e dimensões do layout.



Nesse primeiro passo do nosso projeto de upload de fotos com Next.js, vamos focar em criar a estrutura base da nossa aplicação, o esqueleto do nosso HTML e CSS. Para isso, usaremos o Figma como guia para o design e definiremos os elementos principais, estilizando-os com classes do Tailwind CSS.

1. Definindo a Estrutura HTML

Começamos criando os elementos principais da nossa página dentro do componente Home em pages/index.tsx:

export default function Home() {
  return (
    <main className="flex flex-1 max-w-[900px] mx-auto px-4 py-8 text-center">
      <header>
        <h1 className="text-3xl font-black text-slate-600 mb-2 font-bold text-slate-600 mb-4">Foto Upload</h1>
        <p className="text-gray-500 mb-8 font-light">Galeria de fotos com Next.js, upload de imagens e S3</p>
      </header>


      {/* Dropdown de arquivos */}


      {/* Galeria de Fotos */}
      <hr />
      <h2 className="text-2xl font-bold text-slate-600 mb-4 mt-4">Galeria de Fotos</h2>
      {/* Fotos */}


      <footer className="bg-slate-600 py-4 w-full">
      </footer>
    </main>
  )
}

Aqui, definimos as seguintes seções:

  • header: Contém o título principal "Foto Upload" e uma breve descrição do projeto.
  • {/* Dropdown de arquivos */}: Um espaço reservado para a funcionalidade de upload que implementaremos posteriormente.
  • {/* Galeria de Fotos */}: Contém o título "Galeria de Fotos" e um espaço reservado para exibir as fotos.
  • footer: Um rodapé simples com um background escuro.

2. Estilizando com Tailwind CSS

Utilizamos classes do Tailwind CSS para estilizar os elementos:

  • text-3xl, font-black, text-slate-600, mb-2, font-bold, mb-4, text-gray-500, mb-8, font-light, text-2xl, mt-4, bg-slate-600, py-4, w-full: Essas classes definem o tamanho da fonte, cor, peso, margens e padding dos elementos de texto e do rodapé.
  • flex, flex-1, max-w-[900px], mx-auto, px-4, py-8, text-center: Classes para definir o layout do componente main, centralizando-o na tela com uma largura máxima de 900 pixels e espaçamentos internos.

3. Configurando a Fonte Roboto

No arquivo layout.tsx, importamos a fonte Roboto do Google Fonts utilizando o pacote next/font/google:

import {Roboto} from 'next/font/google'


const roboto = Roboto({
  subsets: ['latin'],
  weight: ['100', '300', '400', '500', '700', '900'],
})


export const metadata: Metadata = {
  title: 'Foto Upload',
  description: 'Uma galeria de fotos no S3 da AWS',
}


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`${roboto.className} bg-blue-50 min-h-screen`}>{children}</body>
    </html>
  )
}

Adicionamos a classe roboto.className ao elemento body no layout para aplicar a fonte em toda a aplicação, garantindo uma experiência visual consistente.

Com esse esqueleto pronto, temos a base visual para a nossa aplicação. Nos próximos passos, implementaremos as funcionalidades de upload de fotos e exibição da galeria.

Comentários

(0)