Next.js Link e Navegação
Next.js é um framework de React que facilita a criação de aplicativos web rápidos e eficientes. Ele oferece suporte nativo a routing e navegação por meio do componente Link.
Link
O componente Link do Next.js é usado para criar links entre páginas do aplicativo. Ele pré-carrega páginas subsequentes, o que resulta em uma transição mais suave durante a navegação. Aqui está um exemplo de como usar o Link:
{`import Link from 'next/link';
function Navigation() {
return (
);
}
export default Navigation;`}
Navegação programática
Além de usar o componente Link, o Next.js também oferece suporte à navegação programática. Isso significa que você pode navegar entre páginas do aplicativo usando JavaScript. Aqui está um exemplo de como fazer isso:
{`import { useRouter } from 'next/router';
function handleClick() {
const router = useRouter();
router.push('/about');
}`}
Conclusão
O Next.js torna a navegação em um aplicativo web React simples e eficiente. Com o componente Link e a navegação programática, é fácil construir uma experiência de usuário fluida e responsiva. Experimente o Next.js em seu próximo projeto e aproveite seus recursos de navegação avançados!
Masterclass completa
https://youtube.com/playlist?list=PLR8OzKI52ppWoTRvAmB_FQPPlHS0otV7V
Aula incrível! Deu até para ouvir minhas sinapses aumentando!
Booommmmmm demaiiiissssss
Mais uma aula espetacular, rica em detalhes!!
sobre o comportamento estranho que eu percebi foi que quando você já clicou em um link fica escrito activo, mas quando você clicou em outro link não sumiu o activo do link anterior, acho que é isso, vou dar play no vídeo agora … 🙂
você poderia fazer um projeto de uma aplicação simples e com back end e front end com deploy, to precisando muito aprender isso pra destravar… pode ser só um formulário, mas o interessante seria ver como funciona o back end integrado ao front end e o deploy é super importante pq eu não sei fazer deploy de back end Node
Opa, salve, Brunãoo! Meu rei, no next estático o componente de link perde essa propriedade de pré fetching?
Isto tudo ssó funciona se tiver uma única pasta por funcionalidade, se tiver uma unica pasta e dentro dela tiver dois ou mais component, isto ai já não funciona, ai tem que fazer repetição de codigo já que terá duas ou mais pasta diferentes por unica funcionalidade, porr exemplo se eu tiver a pasta product, e dentro tiver três component ligados a produto ProductList, ProductDetais e ProductAdd, já não funcciona eu teria que ter três pasta eu realmente não gosto disso, eu quero organizar as coisas por funcinalidade, tudo relacionado a product esta em uma unica pasta product, já que eu terei outros preocupaçãoes com product e certamente terei outros pastas relacionado a product mas não relaccionada a funcionalidade, ter mais pasta para mim é muito ruim, eu já tenho por exemplo useProductData, para os feth de produte eu tenho product-store para controle de estado… a ainda ter que separar as funcionalidades em três pasta por que next me obriga a isto ai é muito ruim…
Eu to sofrendo com este next, tudo funciona quando você tem uma unica pasta para page ccom unico recursso…. Agora quando você tem uma passta exemplo Product, e dentro você tem dois component e precisa fazer o render conforme o Redirect, ai é uma bosta, porque o NEXT quer que você crie pasta diferentes exemplo Product -> ProductList e ProductAdd, para a mesma, começa a criar muita redundância de código eu quero ter o recurso centralizado dentro da pasta product…. Esstou tentando fazer o redirect, mass não conssigo e não quero criar uma passta exemplo ProductAdd, pelo next eu teria que ter duass passta ProductList e ProductAdd eu não quero issto… é muito ruim a convesão impossta pelo NEXT, você começa a ficar refém da plataforma isto é ruim….. Eu tenho um Arquivo chamado page.ts que faz apenass um único export default Produtct, já que o next espera um único component, mas com isso eu não cconsigo fazer o render conforme a url se tudo estiver dentro de uma unica pasta product…. é chato até para explicar….. Eu até agora não vi muita vantagem em usar NEXTJS, só estou tendo problema….. É asssim que eles querem ser uma plataforma de rapidez no desenvolvimento….. é um saco isto!
Simplesmente espetacular, explica com uma clareza, simplicidade e vontade de ensinar admirável, parabéns pelo ótimo trabalho, Bruno
fiz o teste do link e ele nao esta fazendo o prefetch , mesmo ativando o prefetch como true quando passa o mouse por cima dele , voce poderia ver se isso atualizou ?
reduxjs/toolkit react-redux com o Next 13 seria ótimo! a principio, parabéns pelo material
Fala Bruno, blz? Cara parei aq no meio dessa aula só pra agradecer esse conteúdo fantástico. Eu estou fazendo um projeto do meu TCC e mesmo sem nunca usar Next, nem React e saber o básico de JS eu decidi pegar a versão mais atualizada do Next.js para me desafiar. Seus vídeos me salvaram diversas vezes e agora estou com uns 70% pronto e decidi ver toda a masterclass para melhorá-lo. Valeu pelo conteúdo!!!
Bom, eu acho que o comportamento estranho é o fato do Home e do Dashboard ficarem ativos juntos, acredito que o motivo seja o fato do Layout manter o estado dos componentes mesmo após a navegação entre links, conforme explicou no vídeo anterior, pelo menos é o que me veio a cabeça num primeiro momento kkkkk
Fala Bruno, blz? O "prefetch" ta com um comportamento estranho, quando eu deixo ele true (padrão ou mesmo setando como true) ele faz o fetch ao carregar a página e não no hover do link. Pesquisei e vi várias pessoas com o mesmo problema, ainda sem solução! helpp
Muito bom o conteúdo do canal..
Acho que o problema, é que foi feito no Layout que mantém estado, onde poderia ser com template.
Achei que o router.push teria uma propriedade pra habilitar o prefetch. Mas aparentemente não tem, segundo a doc
Home e dashboard ficaram active. Não sei se o problema é rehidratação do estado ou se teria que usar outra função de verificação (regex ou ===)
Obs: assisti ao video anterior e vou reassistir porque fiquei na duvida
Edit de novo: depois que você falou do layout eu tenho mais convicção que o problema é a rehidratação. Pra resolver isso teria que usar o template?
Grande parceiro sou mais que escrito sou membro com orgulho obrigado pela dedicação ! tu e demais!
Que trabalho fantástico , sensacional, direto ao ponto!!!
Vamos incentivar de todas as maneiras possíveis, galera.🤗