As páginas Next.js são React Component. Você cria arquivos usando of js, .jsx, .ts, ou .tsxextension dentro das pastas da próxima página .
Por padrão, o nextjs fornece uma página index.js no seu próximo aplicativo e um aplicativo personalizado no nextjs.
Cada página em next.js abre com um caminho de roteador específico no navegador da web. Você acessa uma página com o nome do arquivo.
Se você criar uma página sobre no seu aplicativo nextjs, crie um arquivo na pasta de páginas nextjs com o nome sobre e sua extensão de arquivo será .js depois de acessar a página sobre com a ajuda do nome do arquivo.
Na página Sobre, você cria um componente funcional e garante que seu componente Função seja exportado com export default .
Agora você está pronto para acessar sua página Sobre em um navegador.
Rotas dinâmicas
Você cria rotas dinâmicas muito rapidamente no próximo js. Você cria um novo arquivo na pasta pages. Sempre crie rotas dinâmicas help de colchetes [ ]. Dentro do colchete de abertura e fechamento, você acessa qualquer valor help do hook useRouter().
Neste exemplo, eu crio uma rota dinâmica no meu aplicativo. na pasta pages. Você cria apenas uma rota dinâmica. Se você criar várias rotas, use a técnica de pasta aninhada no aplicativo.
Como acessar o ID dinâmico do roteador ou dados em componentes?
Você acessa o ID da rota usado para o gancho useRouter no próximo js. O gancho useRouter fornece dados dinâmicos ou ID em seus componentes.
importar { useRouter } de 'next/router'exportar função padrão post(props) {const roteador = useRouter()console.log(roteador, 'rotas')retornar ( <h2> postar {router.query.id} </h2> )}
Verificar saída
Pasta aninhada ou rota aninhada
A rota aninhada é uma estrutura de pasta em next.js. Você cria uma pasta aninhada na sua pasta pages.
Por padrão, o nextjs pesquisa o arquivo de índice na pasta aninhada.
Rota dinâmica aninhada
Nested Route também suporta roteamento dinâmico em nextjs. Em nested, você cria uma rota dinâmica usando colchetes [ ].
O Next.js cria automaticamente uma URL de caminho de arquivo no próximo js.
Neste exemplo, crio duas rotas dinâmicas no meu aplicativo. A primeira são as rotas dinâmicas pós-aninhadas e, em segundo lugar, crio a rota dinâmica aninhada do autor.
Primeira rota do blog
páginas/blogs/[id].jsRota dos segundos autores
páginas/autores/[id].jsimportar { useRouter } de 'next/router'exportar função padrão autores(props) {const roteador = useRouter()console.log(roteador, 'rotas')retornar ( <h2> autor único </h2> )}
Nenhum comentário:
Postar um comentário