< Return to Video

WEB CAP17 2025 VA02 NEXT.JS MANIPULACAO DE COMPONENTES

  • 0:08 - 0:11
    Quando criamos um projeto Next,
    ele já vem com o modelo padrão.
  • 0:11 - 0:13
    Precisamos personalizá-lo
    para o seu uso.
  • 0:13 - 0:17
    Eu criei um projeto em Next,
    agora vou executá-lo
  • 0:17 - 0:20
    e, em seguida,
    vamos limpar a estrutura.
  • 0:20 - 0:22
    Essa é estrutura que eu criei em Next,
  • 0:22 - 0:29
    vou executá-la com o seguinte
    comando: "npm run dev".
  • 0:29 - 0:32
    Ele vai buildar,
    vai gerar aqui dois links.
  • 0:32 - 0:35
    O primeiro é local,
    roda na sua máquina,
  • 0:35 - 0:36
    no seu navegador.
  • 0:36 - 0:37
    E o segundo,
  • 0:37 - 0:40
    caso você esteja trabalhando em rede,
    ele executa pela rede.
  • 0:40 - 0:44
    Vamos usar o primeiro.
  • 0:44 - 0:47
    E esse é um projeto Next rodando.
  • 0:47 - 0:52
    Observem que ele já vem estilizado,
    personalizado,
  • 0:52 - 0:53
    um padrão.
  • 0:53 - 0:58
    Precisamos limpar toda essa estrutura
    para começarmos o nosso projeto.
  • 0:58 - 1:01
    Vou minimizar e começar a limpeza.
  • 1:01 - 1:06
    Primeiro, vou limpar aqui
    os arquivos de imagem.
  • 1:06 - 1:09
    Vou selecionar todos e deletar.
  • 1:09 - 1:11
    Vamos deixar o navegador
    ao lado do código
  • 1:11 - 1:14
    para visualizar o que vai acontecendo
    ao limpar a estrutura.
  • 1:14 - 1:16
    Pronto.
  • 1:16 - 1:17
    Apaguei as imagens do "public",
  • 1:17 - 1:21
    dentro do "src" vou apagar esse ícone.
  • 1:21 - 1:25
    Vou apagar esse "global.css"
  • 1:25 - 1:30
    e vocês vão perceber que ele
    já causou alguns erros aqui.
  • 1:30 - 1:35
    Aqui em "layout",
    vou tirar o "import" do "globals.css",
  • 1:35 - 1:39
    afinal, acabei de apagar.
  • 1:39 - 1:43
    Ele volta e olha como vai ficando
    o nosso projeto.
  • 1:43 - 1:45
    Bem estranho.
  • 1:45 - 1:46
    No "page",
  • 1:46 - 1:49
    que é a página onde aparece aqui
    o "Get started", "save",
  • 1:49 - 1:51
    nós vamos limpar
    da seguinte maneira.
  • 1:51 - 1:55
    Eu vou apagar tudo
    o que está dentro dessa "div".
  • 1:59 - 2:03
    Vou apagar essa estilização,
  • 2:03 - 2:07
    deixando apenas a "div" de abertura
    e a "div" fechamento.
  • 2:07 - 2:10
    Vou apagar aqui em cima o "import"
  • 2:10 - 2:17
    e o seu projeto
    está totalmente vazio na page.
  • 2:17 - 2:21
    Continuando.
  • 2:21 - 2:26
    No layout eu também posso apagar
    os tipos de fonte.
  • 2:30 - 2:34
    Em título,
    dou o nome do projeto.
  • 2:34 - 2:38
    Observem que ao apagar a fonte,
    ele acusou um erro,
  • 2:38 - 2:42
    porque eu estou chamando as fontes
    que eu apaguei aqui.
  • 2:42 - 2:50
    Então você remove também as fontes
    que você utilizou,
  • 2:50 - 2:53
    deixando somente essa classe.
  • 2:53 - 3:00
    Apaga o "import"
    e o projeto continua vazio.
  • 3:00 - 3:03
    Restou apenas uma classe
    a ser removida
  • 3:03 - 3:04
    e, em seguida,
  • 3:04 - 3:07
    eu vou criar uma manipulação
    no arquivo page.
  • 3:07 - 3:15
    Apagando a classe do "body",
    e no page,
  • 3:15 - 3:21
    vamos criar aqui um "h1"
    e escrever "Fiap".
  • 3:21 - 3:25
    Observem que já apresentou "Fiap"
    sem a estilização,
  • 3:25 - 3:29
    porque eu removi
    toda a estrutura na limpeza
  • 3:29 - 3:32
    e ficou apenas o "Fiap" limpo
    aqui na tela.
  • 3:32 - 3:35
    Uma observação importante
    é sempre acompanhar
  • 3:35 - 3:38
    a documentação do Next,
    pois ela possui muitas atualizações.
  • 3:38 - 3:40
    Agora você está pronto
    para criar projetos em Next,
  • 3:40 - 3:43
    manipulando páginas
    e componentes importantes.
Title:
WEB CAP17 2025 VA02 NEXT.JS MANIPULACAO DE COMPONENTES
Video Language:
Portuguese, Brazilian
Duration:
03:46

Portuguese, Brazilian subtitles

Incomplete

Revisions Compare revisions