Was ist Next.js? Crashkurs in 20 Minuten!

Next.js ist das bekannteste und meistgenutzte React Framework. Es ist meinungsstark (opinionated), bringt viele Dinge von Haus aus mit und baut auf Node.js auf.
Zu den wichtigsten Funktionen gehört "Static Generation", "Server-side Rendering", "Incremental Static Regeneration", "Code-Splitting", "File-system Routing", "Route Prefetching", "API Routes", "Image Optimization" und vieles mehr.
In diesem Video erkläre ich dir, was Next.js ist und wie das React Framework funktioniert. Wir erstellen dabei gemeinsam eine Next.js Website und füge verschiedene Funktionen hinzu. Zum Schluss zeige ich dir dann noch, wie du deine Website über Vercel oder Firebase hosten kannst.
▸ Next.js Website: nextjs.org/
▸ Next.js Podcast: www.programmier.bar/podcast-e...
▸ Was ist React: • Was ist React? | Moder...
▸ React Grundlagen: • React.js Grundlagen
▬ Online-Kurs ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
▸ Responsive Webdesign mit HTML, CSS, Bootstrap und Tailwind: shop.heise-academy.de/respons...
▬ Timestamps ▬▬▬▬▬▬▬▬▬▬▬▬▬▬
00:00 Intro
00:27 Was ist Next.js
01:44 Beispiel Websites
02:11 React vs Next.js
03:40 Die Features
05:13 Next.js App erstellen
06:42 Routing und Links
10:38 API Routes
12:13 Static Generation
13:56 Server-side Rendering
14:50 Incremental Static Regeneration
17:05 Weitere Features
17:22 Build & Hosting
19:18 Docs & programmier.bar
19:36 Outro
▬ Social Media ▬▬▬▬▬▬▬▬▬▬▬▬▬▬
▸ Twitter: / fabianhiller
▸ LinkedIn: / fabianhiller
▸ GitHub: github.com/fabian-hiller
▸ Instagram: / fabian.hiller
▬ Weitere Links ▬▬▬▬▬▬▬▬▬▬▬▬▬▬
▸ Impressum: www.sifa-digital.de/impressum/

[@paularosler949]

Unglaublich gut deine Videos. So komplexe Themen so ruhig und simpel auf den Punkt gebracht... vielen Dank dafür!

[@daniel29009]

Echt top, danke, youtubeweit wohl das beste Video zum überblick. Danke!!! Vor allem mag ich deine ruhige aber sehr klare Art zu erklären... Habe dich aboniert...

[@FabianHiller]

Danke dir!

[@unbekannte]

Danke für das Video. Dein Sprechtempo und deine Aussprache ist sehr angenehm.

[@FabianHiller]

Vielen Dank!

[@kobi-kobsen]

Auch wenn ich über die "Wobbsite" schmunzeln muss, ist das was du machst wirklich cool, verständlich und schön unaufgeregt. Man kann echt gut folgen.

[@FabianHiller]

Vielen Dank für dein Feedback!

[@okid6330]

musste ausmachen, konnte beim 20. mal "Wobbsite" nichtmehr zuhören - Inhaltlich bestimmt toll und der Herr Hiller ist sicher kompetent. Sry

[@FabianHiller]

Danke für dein Feedback

[@christianhabermann6527]

Top Video, hat mir die Angst vor Frontend-Frameworks genommen, absolute saubere Arbeit das Tutorial! Und für alle die es 2023+ sehen: Next.js hat mittlerweile leicht geänderte Syntax für Links, da darf man den a-Tag nicht mehr setzen.

[@FabianHiller]

Vielen Dank!

[@EasyStretcher]

Stark!🙌🏼

[@FabianHiller]

Danke!

[@null4548]

Sehr gutes Video !

[@FabianHiller]

Danke!

[@hamidja1537]

Danke fürs Teilen

[@FabianHiller]

Gerne!

[@ed1849x]

Danke!

[@sandymarkoknauer5092]

Hallo Fabian, sehr gut erklärt. Ich erstelle seit einer Woche ein Next.JS Projekt und habe vieles erst richtig mit dein Video verstanden. Abo ist sicher. Hab auch eine Frage, evtl. hast du eine Antwort oder kannst ein Tutorial dafür machen ... für mein Next.JS Projekte habe ich das CSS Framework Tailwindcss installiert. In Rect gibt es auch Tailwind Elements. Auf Tailwind Elements Homepage gibt es nur Anleitungen von Ract, Vue aber NextJS fehlt leider komplett. Deswegen hab ich selbst experimentiert und sobald ich ein "import 'tw-element' einfüge, erhallte ich die Fehlermeldung "document not defined". Allerdings kannte ich die Methode mit _document.js noch nicht. Werde es mal hiermit versuchen. Aber falls du schon Tutorial hast oder evtl. eine Antwort oder was auch immer, würde ich mich freuen von dir zu hören. Werde mir deine Videos mal durchsehen, denke da gibt es viel zu lernen. Danke dir für das Teilen dieser Informationen, du machst einen guten Job. Gruß

[@FabianHiller]

Das "document" und "window" Objekt ist nur im Browser verfügbar. Next.js rendert jedoch auf deinem Rechner oder einem Server den initialen Zustand deiner Anwendung vor. Greift dabei der Code auf das "document" Objekt zu, wird ein Fehler geworfen. Da ich mit Tailwind Elements noch nicht gearbeitet habe, kann ich dir hierzu leider keinen konkreten Tipp geben.

[@sushifurhamburg8708]

danke

[@whoopsielol]

🔝

[@FabianHiller]

Danke! 🤓

[@Deluxe1231231]

Hallo Fabian , sei mir nicht böse :* ihr könnt das Video mit 1.25 anschauen :)

[@FabianHiller]

Haha, ich verstehe das 😁

[@blue_meets_blue]

Ich finde seine Geschwindigkeit genau richtig. Eigentlich das beste, was ich bisher gesehen/gehört habe. Klar; wenn's nur ums Verstehen geht, könnte er noch ein bischen Gas geben. Aber in diesem Video, konnte ich über Gesagtes nachdenken und wurde trotzdem nicht abgehängt. Da ich mir das Video angesehen habe, um zu entscheiden, ob ich es mal mit NextJS versuche, kommt es schon öfter mal vor, dass ich nicht nur Infos aufnehme, sondern mir auch überlege, wo und wie ich das einsetzen würde. Auch wenn ich mich jetzt gegen die Verwendung von NextJS entschieden habe, war ich doch mit dem Inhalt und der Präsentation sehr zufrieden. Also lieber Fabian, von meinem Standpunkt aus - weiter so. Und vielen Dank für das Video.

[@Deluxe1231231]

@@blue_meets_blue War ja auch keine Kritik :), sondern ein Hinweis für Ungeduldig und eigentlich eher als Spaß zu verstehen. Ich war genauso mit den Inhalt und die Darbietung zufrieden

[@blue_meets_blue]

@@Deluxe1231231 Sorry (und das meine ich vollkommen ernst) wenn ich dich mit meinem Kommentar angegriffen habe. Das war nicht meine Absicht. Schon beim Lesen der Kommentare, ist mir der nette Ton in diesen aufgefallen. Das möchte ich durch meinen Beitrag nicht ändern. Normalerweise sehe ich mir die Kommentare nur an und halte mich zurück. Ich habe dieses Mal aus dem Kontext heraus kommentiert. In den letzten Tagen habe ich mir einige Videos auf KZbin angesehen. Gerade bei den englischen Beiträgen, scheinen die Sprecher oft zu glauben, es handle sich um einen Schnellsprech-Wettbewerb. Das mag bei einem Pferderennen oder Fußballspiel cool sein, aber wenn ich vom Gesagten was lernen will oder mitdenken will, ist das sehr anstrengend. Bei einem Video hatte ich nach 5 Minuten zwar Kopfweh aber durch die vielen eingeworfenen Floskeln kaum was Brauchbares gehört. Wenn dann noch welche ständig "ehhm", "you know", "what we do now is we do ..." einbauen ist die Sache für mich erledigt. Und jetzt finde ich einen Beitrag, der genau so ist, wie ich mir das ideale Video vorstelle. Beim Inhalt fehlten mir noch ein zwei Dinge aber das ist normal, dass ein Mensch nicht an alles denken kann. Das meiste wurde dann in den Kommentaren auch angesprochen und beantwortet oder - mit einer Erklärung warum - nicht beantwortet. Ich habe etwas gemacht, dass ich noch nie auf KZbin gemacht habe: Ich habe den Kanal aboniert. Und dann finde ich ein, zwei Bemerkungen, die wohl im Scherz die Geschwindigkeit "kritisieren". Ich respektiere diese Ansicht, wollte aber auch meinen Standpunkt anbringen und Fabian mitteilen, dass ich glücklich wäre, wenn er die Art seines Vortragens nicht ändert (eine zweite Meinung, falls er sich über so was Gedanken macht). Und dann habe ich etwas gemacht was ich nur sehr selten mache und hier kommentiert. Aber bitte, bitte sieh das nicht als Kritik an deinem Kommentar. Der ist vollkommen angebracht und Fabian hat ja auch positive darauf reagiert. Und wäre der Kontext bei mir nicht gewesen, hätte ich ihn auch schmunzelnd gelesen und wäre zum nächsten gegangen.

[@melone2848]

🍕

[@FabianHiller]

😋

[@Seff2]

wOBBsite!

[@LoneCode]

Mit Wiedergabegeschwindigkeit auf 1.75 geht es.

[@sbehnisch]

Das Gegendere in dem Video wirkt lächerlich.🤣

[@FabianHiller]

Danke für dein Feedback

[@webappstore1959]

Ich kann NextJS echt nur wärmstens empfehlen, hatte selber noch nicht viel Erfahrung (nur im Studium etwas mit React und Angular rum gespielt), aber konnte mit NextJS tatsächlich eine WebApp Store bauen Im Vergleich zu React und Angular ist der Einstieg deutlich einfacher und durch Vercel kann man sein Projekt schnell deployen. Wer wissen möchte was ein WebApp Store ist, kann einfach mal www.webapp-store.de anschauen, dort wird alles anschaulich erklärt und man kann auch 3 WebApps kostenlos installierten. 😊 Über Feedback dazu freu ich mich immer.