Grundlagen und Konzepte des React-Frameworks Next.js - Seminar / Kurs von GFU Cyrus AG

Einführung in Next.js und Vorteile

• Was ist Next.js?
• Warum Next.js für Webanwendungen verwenden?
• Vergleich zu anderen React-Frameworks und klassischem React

Vorbereitung der Entwicklungsumgebung

• Installation von Node.js und npm
• Erstellen eines neuen Next.js-Projekts
• Projektstruktur und Dateiorganisation

Grundlagen von React

• Komponenten und ihre Verwendung
• JSX-Syntax und Komponenten-Rendering
• Zustand und Props in React-Komponenten

Seiten und Routen in Next.js

• Erstellen einer einfachen Next.js-Seite
• Routen und Navigation zwischen Seiten
• Dynamische Routen mit Parametern

Datenabfrage und API-Integration

• Verwenden von Server-Side Rendering (SSR) für Datenabfrage
• Integration von API-Daten in Next.js-Komponenten
• Verwendung von getServerSideProps und getStaticProps

Zustandsverwaltung mit React-Hooks

• Einführung in React-Hooks
• Verwenden von useState und useEffect
• Globale Zustandsverwaltung mit useContext und useReducer

Styling in Next.js

• Verwenden von CSS-Modulen für lokales Styling
• CSS-in-JS mit Styled Components oder Emotion
• Integration von externen CSS-Bibliotheken

Layout-Komponenten und Code-Splitting

• Erstellen von Layout-Komponenten für einheitliches Styling
• Dynamisches Code-Splitting für eine optimierte Ladezeit
• Verwendung von Lazy Loading und Suspense

Serverless Functions und API-Routing

• Erstellen von Serverless Functions in Next.js
• API-Routing mit Next.js
• Authentifizierung und Autorisierung in den APIs

SEO-Optimierung und Metadaten

• Verbesserung der Suchmaschinenoptimierung (SEO) in Next.js
• Hinzufügen von Metadaten und Beschreibungen für Seiten
• Verwendung von Head-Komponenten für dynamische Metadaten

Deployment von Next.js-Anwendungen

• Vorbereitung der Anwendung für die Produktion
• Hosting-Optionen für Next.js-Anwendungen
• Veröffentlichen der Anwendung auf einem Server oder einem Cloud-Service

Performance-Optimierung in Next.js

• Verwendung von Next.js-Built-in-Features wie Automatic Static Optimization
• Bildoptimierung und Lazy Loading von Bildern
• Code-Analyse und Reduzierung der Bundle-Größe

Praktische Übungen und Projekte

• Umsetzung eines eigenen Projekts mit Next.js
• Integration von Datenquellen und APIs
• Styling und Layout-Gestaltung

Das Seminar hat das Ziel, den Unternehmen einen Einblick in Next.js als  leistungsstarkes React-Framework für die Entwicklung von Webanwendungen  zu vermitteln. Die Unternehmen sollen nach dem Seminar in der Lage sein,  die Vorteile von Next.js für ihre Projekte zu verstehen und  einzusetzen. Das Unternehmen soll erkennen, wie Next.js die Entwicklung  von Webanwendungen beschleunigt, die SEO-Performance verbessert, eine  hervorragende Benutzererfahrung ermöglicht und die Skalierbarkeit der  Anwendungen erhöht. Das Seminar soll dazu beitragen, dass die  Unternehmen Next.js als effektive Lösung für ihre  Webentwicklungsprojekte in Betracht ziehen und die Mitarbeiter  entsprechend schulen und einsetzen können.

Das Seminar richtet sich an Webentwickler, Frontend-Entwickler,  Unternehmen, Startups, Softwareentwicklungs-Teams, Webdesigner,  UX-Experten und technische Entscheidungsträger, die Next.js als  leistungsstarkes React-Framework für die Entwicklung von Webanwendungen  kennenlernen möchten. Grundkenntnisse in JavaScript und React sind von  Vorteil.