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

## Terug naar het project
Maak een route `/login` aan en plak daar de volgende code:

Het `LoginForm`-component speelt hier de hoofdrol. Hier komen we later op terug.

Als je de volgende route bezoekt <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>, zou je een vergelijkbare weergave moeten zien.

Leer hoe je moderne, high-performance webapplicaties bouwt met Next.js. Zet projecten op met gestructureerde layouts, styling en routing voor naadloze navigatie. Haal efficiënt data op en toon deze, terwijl je rendering en prestaties optimaliseert. Implementeer geavanceerde functies zoals paginering, CRUD-operaties en globale zoekfunctionaliteit voor dynamische webapps. Zet je Next.js-projecten live, verbind ze met databases en voeg authenticatie toe om gebruikersdata te beschermen.

We bespreken welke voorkennis vereist is voordat u begint met het Next.js-framework, wat u van deze cursus kunt verwachten en welke projecten u zult bouwen.

We zetten het project op, onderzoeken methoden om styling aan onze app toe te voegen en behandelen visuele aspecten zoals afbeeldingen, lettertypen, pagina's en lay-outs.

Leer hoe u eenvoudig een nieuw overzicht voor uw app kunt creëren en beheren en naadloos door alle pagina's kunt navigeren met een geïntegreerd routingsysteem.

Implementeer de Next.js-app met behulp van GitHub- en Vercel-accounts. Stel daarnaast een database in om de app van de benodigde gegevens te voorzien.

Overweeg hoe gegevens duidelijk en efficiënt aan de gebruiker kunnen worden verkregen en getoond.

Ontdek hoe u moderne webfuncties implementeert, zoals paginering, CRUD-bewerkingen, globale zoekfunctie, formulier validatie en meer.

Het Instellen van de Loginroute

Terug naar het project

In de praktijk