Executando verificação de segurança...
1

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!

Carregando publicação patrocinada...