Atualizações importantes da biblioteca de animações no Next.Js!
Agora é possível usar rotas dinâmicas
Imagine que você queira chamar alguma rota dinânimica, adicionar query strigs e ainda chamar uma rota em uma nova tab/janela. Agora é possível!
Recentemente, fiz uma postagem falando da biblíoteca que eu estava desenvolvendo para lidar com as rotas do Next.Js, de maneira que pudesse haver animções.
Biblioteca: nextjs-progressloader
Ao criar um <ContainerLInk />
, é possível registrar rotas dinâmicas, conforme o exemplo a baixo:
import {
changeRoute,
ContainerLink,
ContainerLinkProps,
} from 'nextjs-progressloader';
const links: ContainerLinkProps['links'] = [
{
href: '/posts/{slug}',
nickname: 'posts.details',
}
];
export function ComponentIWantToRender() {
// calling route with dynamic values
function callWithDynamicRoute() {
// calling the nickname
changeRoute('posts.details', {
dynamicRoute: [{ key: 'slug', value: 'post-title' }],
});
// /posts/post-title
}
return (
<>
<ContainerLink links={links} />;
...rest of code
</>
);
}
O href, e o nickname precisa serguir algumas regras, confira as regras
Com essa feature, você pode adicioanr rotas dinamicas de maneria muito facilitada!
Usando todo o poder de changeRoute()
:
function usingAllTheResources() {
// calling the nickname
changeRoute('posts.details', {
open: 'newTab',
dynamicRoute: [{ key: 'slug', value: 'post-title' }],
queryStrings: [{ key: 'page', value: '1' }],
});
// /posts/post-title?page=1 IN (A NEW TAB)
}
Espero que gostem das novas features!