[Ajuda] API Mock NextJS 14 / Desabafo

Eu estou criando um site para gestão financeira usando um design que achei na comunidade do Figma, e meu objetivo com ele é aprender mais sobre front-end, ter pelo menos um projeto no portifolio que ainda pretendo criar e ter certeza que eu posso entrar no mercado(Esse final é mais sobre medo de fazer algo errado).

Back-end com Express Front-End com Next@14

Estou tentando fazer um Mock do server, mas até o momento não achei nenhum tutorial sobre NextJS 13/14 usando App Routes, não tenho preciso adicionar isso, mas acho que seria legal adicionar algo novo e ainda por cima não ter que depender do backend para saber o que é necessario mudar na aplicação. Caso alguem tenha uma ideia do que posso fazer seria muito útil.

A duvida acaba acima o resto é desabafo

Caso alguém repare nos commits, eu tenho muitas duvidas sobre como estruturar aplicação seja nas pastas, nomes ou então como vou fazer o roteamento, que se tivesse mais commits daria pra ver que praticamente mudei a aplicação umas três vezes tanto front-end como back-end. Eu não tenho muita afinidade com o front-end, mais gosto de desenvolver.

Programmer404 há 12 meses

O melhor tutorial é sempre a documentação, fato. Eu não sei se entendi muito bem a sua dúvida, mas você está com dificuldades em utilizar roteamento com a pasta app do Next.js? Se for esse o caso, posso te ajudar, mas vai ser o suficiente para funcionar, apenas. Para explicar tudo demandaria muito tempo, então no final eu recomendo a documentação.

Como usar a pasta APP?

Não tem mistério nenhum. O roteamento dentro da basta app, tranforma toda pasta em rotas. Por exemplo, se você criar um pasta dentro de app, automaticamente você criou um segmento de rota que pode ser acessada.

Mas como se faz pra acessar esses segmentos? Importe o componente link do next e passe o atributo href com o endereço da pasta. Exemplo prático:

    import Link from "next/link" 
    
    export const Home() = () => {
        return (
            <>
                <Link href={"/nomeDaPasta"}>Para ir para a próxima rota</Link>
            </>
        )
    }

Existem outros conceitos sobre rotas como: Rotas paralelas, grupo de rotas, gerando rotas estáticas dentre outras coisas. Se você fizer como eu expliquei a cima, você vai conseguir criar um roteamente simples do simples...

Uma outra coisa: Quando você criar uma rota (criar uma pasta), coloque um arquivo com o nome page dentro, pois esse arquivo permite exibir a rota e seu JSX. Tem que ser com o nome page, pois faz parte da converção do Next.

Não sei se deu pra entender muito bem, pois n sou a melhor pessoa para explicar, mas qualquer dúvida basta jogar aqui que eu respondo quando eu ver.

brunoh5 há 12 meses

Na verdade não é o roteamento e sim o uso de uma biblioteca para fazer o o mock do backend usando a App routes já que não tem o _app.tsx ou _document.tsx. Bibliotecas como Miragejs ou MSW, eu queria usar o Mirage mas não acho nada sobre.

Programmer404 há 12 meses

Então perdão pelo o meu engano meu nobre. Infelizmente não vou conseguir te ajudar com este problema pois não estou familiarizado. Tente pesquisar na IA Phind, que ela pode te dar uma solução para seu caso. Essa IA não tem limitações de conhecimento e sempre coloca os artigos que usou como fonte.

brunoh5 há 11 meses

Cara, esse IA é muito boa, obrigado pela indicação. Eu fiz uns dois teste pra ver como funcionava e ela me retornou muito conteúdo, vai me ajudar bastante

santosesantos há 12 meses

Perai... Então você quer fazer uma aplicação Front-end que não tem um Back-end, basicamente? É isso?

Confesso que não sei como Mockar um Back-end com alguma lib ou algo do tipo. A única vez que escutei e fiz algo parecido foi quando estava testando aplicações com Jest e Testing Librarykkkkkkk.

Agora (pelo que eu conheço de Next), se você quer simular uma API, talvez alguma dessas duas opções te ajude:

Criar um JSON na pasta public para usá-lo em uma página;
Criar um arquivo route.ts em uma pasta dentro da pasta app (/app/api/route.ts). Dessa forma, essa rota se comporta como uma chamada a API (se liga nessa documentação) - inclusive, usei isso uma vez pra criar um Back-end pro meu projeto Aztek Converter. Se quiser eu posso tornar público o repositório do Back-end e compartilhar aqui também.

brunoh5 há 12 meses

Vai ter um backend, que por sinal está na metade pronto, só que pra termina-lo preciso do front na metade também, para eu saber o que fazer, só que eu não quero ter que iniciar o back toda vez que for usar o front. Principalmente por que eu estou desenvolvendo em casa e no trabalho. A minha ideia era alguma lib igual o MirageJS, que apenas intercepta a requisição caso esteja em desenvolvimento, mas não achei nada sobre ainda.

guusfelix2015 há 26 dias

Eu tentei implementar aqui no next14, porém só funciona o mock com requisições client side, quando você precisa fazer server side não funciona bem, eu achei alguns lugares e forum e dizem que realmente ainda não é possivel, apenas se você usar um vire da vida vai funcionar bem.