  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`: ```html export default function Home() { return (

Foto Upload

Galeria de fotos com Next.js, upload de imagens e S3

{/* Dropdown de arquivos */} {/* Galeria de Fotos */}

Galeria de Fotos

{/* Fotos */}

) } ``` 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`: ```javascript 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 ( {children} ) } ``` 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.

Projeto Upload de imagens com S3 e Next.js

Código completo

Acesso exclusivo para membros PRO

Junte-se a outras 28 pessoas que estão fazendo esse mini projeto.