Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Duvida sobre Next js

Referente ao curso Next.js: explorando o framework, no capítulo Conhecendo Next.js e atividade Componente Link do Next.js

por Iago Rafael Rodrigues de Macedo
| 127.6k xp | 20 posts

Oi boa noite estou fazendo meu portfolio usando o Next em sua versao mais atual utilizando TypeScript, estou usando o Link para a navegação de paginas potem nao estou conseguindo....poderia me ajudar,

import Image from "next/image" import Logo from '@/assets/devMaster.svg' import Main from '@/assets/main.svg' import Link from "next/link" import About from '@/components/about'

export function Header() { const pages = ['Home', 'About', 'Habilidades', 'Projetos'];

return (
    <header className=" bg-primary-blue">
        <nav className="flex justify-center me-12">
            <div>
            <Image src={Logo} alt="Imagem Logo" className="w-14  sm:w-24" />
            </div>
            <ul className="flex items-center space-x-4 text-gray-phone">
                {pages.map((page) => (
                    <li key={page} className="cursor-pointer transition duration-300 ease-in-out transform hover:scale-110 text-xs sm:text-lg">
                        <Link href={`/${page}`}>{page}</Link>
                    </li>
                ))}
            </ul>
             
        </nav>
        <div className="flex justify-center ">
        <Image src={Main} alt="Imagem Main" className="w-9/12 " />  
        </div>
    </header>

)

}

1 resposta
solução!
por Lorena Garcia
| 8308k xp | 12158 posts
Alura Scuba Team Suporte Educacional

Oi Iago, tudo bem?

Pelo que entendi esse código é pessoal certo? Vou tentar te ajudar com base nas informações dadas.

Aparentemente, o problema está na maneira como você está utilizando o componente Link do Next.js. No seu código, você está tentando navegar para as páginas através do nome delas (Home, About, Habilidades, Projetos), mas esses nomes precisam corresponder exatamente ao nome do arquivo da página na pasta pages.

Por exemplo, se você tem um arquivo chamado about.tsx na pasta pages, você precisa utilizar o Link da seguinte maneira:

<Link href="/about">About</Link>

No seu código, você está tentando fazer a navegação da seguinte maneira:

<Link href={`/${page}`}>{page}</Link>

Neste caso, page é uma string que pode ser 'Home', 'About', 'Habilidades' ou 'Projetos'. Então, você está tentando navegar para /Home, /About, /Habilidades e /Projetos.

Se os nomes dos seus arquivos na pasta pages estão todos em minúsculo (como é o padrão), você não conseguirá navegar para as páginas corretamente, pois o Next.js é sensível a maiúsculas e minúsculas.

Uma possível solução seria transformar o nome da página em minúsculas antes de usá-lo no href:

<Link href={`/${page.toLowerCase()}`}>{page}</Link>

Lembre-se de que os nomes dos arquivos na pasta pages devem corresponder exatamente ao href que você está usando no Link. Portanto, se você tem uma página chamada about.tsx, você deve usar <Link href="/about">.

Essa é apenas uma dica de como você pode corrigir esse problema, já que é um código que só você conhece, talvez seja preciso fazer vários testes para chegar no que você deseja. Mas o mundo da programação é assim mesmo!

Um abraço e bons estudos.