Summary  
This chapter covers configuring a version-controlled code repository and linking it to an automated deployment platform to trigger deployments upon code commits.

General domain of usage  
Web application deployment

Für einen unkomplizierten und klaren Bereitstellungsprozess werden ein **GitHub**- und ein **Vercel**-Konto benötigt.

## Github
1. Zunächst ein GitHub-Konto über folgenden Link erstellen: <a href="https://github.com/signup" 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> https://github.com/signup</a>;
2. Anschließend das lokal entwickelte Projekt auf GitHub hochladen. Für Neueinsteiger in die Repository-Einrichtung empfiehlt sich der GitHub-Leitfaden: <a href="https://docs.github.com/en/repositories/creating-and-managing-repositories/quickstart-for-repositories" 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> Quickstart for repositories</a>.


## Vercel
Registrierung für den kostenlosen Vercel-"Hobby"-Plan unter <a href="https://vercel.com/signup" 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> https://vercel.com/signup</a>. GitHub-Konto durch Auswahl von "Continue with GitHub" verknüpfen.

Erlernen Sie den Aufbau moderner, leistungsstarker Webanwendungen mit Next.js. Richten Sie Projekte mit strukturierten Layouts, Styling und Routing für eine nahtlose Navigation ein. Effizientes Abrufen und Anzeigen von Daten bei gleichzeitiger Optimierung von Rendering und Performance. Implementieren Sie fortgeschrittene Funktionen wie Paginierung, CRUD-Operationen und globale Suche für dynamische Webanwendungen. Stellen Sie Ihre Next.js-Projekte bereit, verbinden Sie diese mit Datenbanken und fügen Sie Authentifizierung zum Schutz von Benutzerdaten hinzu.

Wir besprechen die erforderlichen Vorkenntnisse für die Arbeit mit dem Next.js-Framework, die Kursinhalte sowie die zu entwickelnden Projekte.

Wir richten das Projekt ein, untersuchen Möglichkeiten zur Einbindung von Styling in unsere Anwendung und behandeln visuelle Aspekte wie Bilder, Schriftarten, Seiten und Layouts.

Erfahren Sie, wie Sie mühelos eine neue Ansicht für Ihre Anwendung erstellen und verwalten sowie mit einem integrierten Routingsystem nahtlos durch alle Seiten navigieren.

Bereitstellung der Next.js-App mit GitHub- und Vercel-Konten. Zusätzlich Einrichtung einer Datenbank zur Bereitstellung der erforderlichen Daten für die App.

Überlegungen zum klaren und effizienten Abrufen sowie zur Darstellung von Daten für den Benutzer.

Erfahren Sie, wie moderne Webfunktionen wie Paginierung, CRUD-Operationen, globale Suche, Formularvalidierung und weitere implementiert werden.

Implementierung der Authentifizierung in Next.js.

Einrichten von GitHub- und Vercel-Konten

Github

Vercel

Awesome!

Einrichten von GitHub- und Vercel-Konten

Github

Vercel