Internacionalização com Next.js 13.x (i18n) - Parte 01
ฝัง
- เผยแพร่เมื่อ 5 ก.ย. 2024
- Hoje estou abordando as configurações que faço ao definir as regras de internacionalização no Next.js, eu realizo essas definições com o projeto ainda no início e recomendo fortemente que faça o mesmo, principalmente quando ainda não sabemos ao certo a direção que o projeto vai tomar.
Parte 2: • Internacionalização co...
Repositório oficial: github.com/edi...
Ediano Silva Santos, desenvolvedor Full Stack, apaixonado por tecnologia e inovação. Visando a construção do futuro!
Muito obrigado irmão, testei diversos videos e documentações e a tua foi a unica que deu certo❤
Que bom que ajudou ❤
Bacana o conteúdo! Implementei em um projeto e funcionou perfeitamente.
Legal EdmilsonSoares! É sempre bom saber que o vídeo ajudou.
Uma dica amigo, nos próximos vídeos aumenta a fonte para ficar bacana a visualização em telas pequenas.
Obrigado pela dica!
Fantástico, justamente o que eu procurava.
Uma dúvida, consigo também separar imagens para n línguas?
Por exemplo: imagem A para pt-BR e imagem B para en-US?
Um forte abraços.
Olá @cogumm, bom que gostou!
Consegue sim, eu usaria a seguinte estrategia, usaria a pasta /public, detro dela eu deniniria as imagens com um padrão de seguinte forma pt-BR_minha_image.png e en-US_minha_image.png, dessa forma vc usaria o parâmetro para pegar as imagens de forma dinamica.
Opa, show de bola. Consegui aplicar no meu projeto. Porém agora preciso criar um botõo que troca manualmente o idioma. Consegue compartilhar uma solução?
É bom saber que você gostou!
Tenho um exemplo de um outro projeto com tailwindcss, fique á vontade para explorar este repositório: github.com/ediano/crypto.ediano.xyz/blob/main/src/components/Navbar/LocationOptions.tsx
Pode ser que uma lib ou outra seja preciso atualizar.
Olá Cristian, tudo bem?
Acabei de subir um vídeo, mostrando um exemplo de como pode ser criado um menu para alterar manualmente o idioma, amanhã a 11h de Brasília o vídeo vai esta disponivel no seguinte link - th-cam.com/video/e6HoH3vu47I/w-d-xo.html
Como eu faço para pegar o params.lang nos meus components? Eu teria q pegar da minha page e ir passando para kda componente que compoe a página?
Olá, tudo bem!
A forma mais simples de fazer isso, seria pegar a prop da página e repassar para o componente, porém isso depois de um tempo pode ficar complexo em manter atualizado.
Eu particularmente, estou usando bastante o zustand, para lidar com propriedades globais, ele funciona tanto em server side quanto em use client.
@@ediano Eu fiz isso com o Redux só que aí vou ter que mudar vários componentes para cliente side.
Esse é um dos problemas do Redux, neste caso, tente isolar apenas a lógica onde você recupera este valor, para não perder muito a funcionalidade de server side
Parabéns pelo vídeo. Depois que implementei tudo (e deu certo), meus testes unitários quebraram (somente dos componentes que são server components (que estão usando a getDictionaryServerOnly)). Como posso resolver isto ? Acho que tem que usar mock, mas não sei como. Abs
Olá, bom que o vídeo pode ajudar.
Em relação aos teste, vocẽ está certo, teria que fazer uso de moks, porém eu não tenho nenhum exemplo para ajudar, também não encontrei nenhum tutorial para auxiliar.
Agradeço mesmo assim. Estou há 2 dias tentando... daqui a pouco eu consigo.
A documentação oficial não ajudaria? nextjs.org/docs/pages/building-your-application/optimizing/testing
apliquei mas tive problemas com o uso do middleware, estou usando no next.config um output: 'export' para buildar componentes do cliente e do server, e recebo uma mensagem que o middleware nao pode ser usado com output: export
Olá! Seu arquivo next.config se parece com esse?
github.com/ediano/crypto.ediano.xyz/blob/new-nextjs-v13/next.config.js
can you share git with this project ?
Hello, yes - github.com/ediano/youtube-pitolo
Ainda não terminei o vídeo, mas acha que seria uma boa criar uma interface para todos os dicionarios seguirem o padrão?
Olá!
A ideia é justamente essa, depois de definir um padrão, os dicionarios passa a ser criados por páginas, invocando a instância dos dicionais padrões.