Summary  
This chapter covers how to define a new route using file-system based routing by adding a page.tsx file and exporting a React component that composes imported UI components in its JSX.

General domain of usage  
User authentication in web applications

## De volta ao projeto
Vamos criar uma rota `/login` e colar o seguinte código nela:

O componente `LoginForm` desempenha o papel principal aqui. Vamos abordá-lo mais adiante.

Se você acessar a seguinte rota <a href="http://localhost:3000/login" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" ><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> http://localhost:3000/login</a>, você deverá visualizar uma tela semelhante.

Aprenda a construir aplicações web modernas e de alto desempenho utilizando Next.js. Configure projetos com layouts estruturados, estilização e roteamento para navegação fluida. Busque e exiba dados de forma eficiente, otimizando a renderização e o desempenho. Implemente recursos avançados como paginação, operações CRUD e busca global para aplicações web dinâmicas. Faça o deploy de seus projetos Next.js, conecte-os a bancos de dados e adicione autenticação para proteger os dados dos usuários.

Vamos discutir o que é necessário aprender antes de começar com o framework Next.js, o que esperar deste curso e o que será desenvolvido.

Vamos configurar o projeto, analisar formas de adicionar estilos ao nosso aplicativo e abordar aspectos visuais como imagens, fontes, páginas e layouts.

Aprenda a criar e gerenciar facilmente uma nova visualização para seu aplicativo e navegar por todas as páginas de forma fluida com um sistema de roteamento incorporado.

Implemente o aplicativo Next.js utilizando contas do GitHub e Vercel. Além disso, estabeleça um banco de dados para fornecer os dados necessários ao aplicativo.

Considere como obter e apresentar dados ao usuário de forma clara e eficiente.

Descubra como implementar recursos modernos da web, como paginação, operações CRUD, busca global, validação de formulários e mais.

Implementação de autenticação no Next.js.

Configurando a Rota de Login

De volta ao projeto

Na prática

Awesome!

Configurando a Rota de Login

De volta ao projeto

Na prática