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.
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.