{"id":6050,"date":"2020-10-31T14:57:16","date_gmt":"2020-10-31T13:57:16","guid":{"rendered":"https:\/\/www.welaunch.io\/de\/?p=6050"},"modified":"2020-10-31T14:57:16","modified_gmt":"2020-10-31T13:57:16","slug":"nextjs-framework","status":"publish","type":"post","link":"https:\/\/www.welaunch.io\/de\/2020\/10\/nextjs-framework\/","title":{"rendered":"NextJS Framework Installieren (Part 2)"},"content":{"rendered":"<p>Wie wir in unserem ersten Teil gesehen haben, ist React eine JS library. Man k\u00f6nnte React mit PHP vergleichen. Und genauso wie bei PHP kommt man irgendwann an den Punkt wo man denkt: warum benutzt ich nicht einfach ein Framework?<\/p>\n<p>Frameworks sind beliebt, denn &#8230;<\/p>\n<ol>\n<li>Man muss das Rad nicht neu erfinden\u00a0<\/li>\n<li>H\u00e4ufige Coding Probleme sind mit Framworks schnell gel\u00f6st<\/li>\n<li>Frameworks folgen Best Coding Practices<\/li>\n<li>Die Entwicklungszeit verk\u00fcrzt sich drastisch<\/li>\n<\/ol>\n<p><strong>&#8220;Warum ein Framework&#8221; \u2013 an einem Beispiel von uns:<\/strong> nat\u00fcrlich haben auch wir mit plain React angefangen. Viel code geschrieben, dann irgendwann herausgefunden, dass man einen dom-router ben\u00f6tigt um in React mit URLs zu arbeiten. Ab dann wurde es immer komplexer. Wir haben viel recherchiert, wie wir am Besten Problem X l\u00f6sen und wenig sp\u00e4ter wieder von vorn. Und immer wieder trifft man auf die folgenden Worte:<\/p>\n<ul>\n<li>Create React App<\/li>\n<li>Gatsby<\/li>\n<li>Next.js<\/li>\n<\/ul>\n<p>Es gibt unz\u00e4hlig viele Artikel, \u00dcbersichten, Erkl\u00e4rungen zu den 3 Themen. Um es kurz zu machen: Alles 3 sind React Frameworks. Create React App (CRA) rendert alles clientseitig (performance &amp; SEO schlecht), Gatsby hat keinen built in Server (performance &amp; SEO schlecht) und next.js naja hat halt eben einen eingebauten Server, der statischen content ausgibt (+Performance \/ +SEO).\u00a0<\/p>\n<p>Wer mehr \u00fcber die verschiedenen typen lesen m\u00f6chte, kann hier mehr erfahren:<\/p>\n<ul>\n<li><a href=\"https:\/\/leerob.io\/blog\/nextjs-gatsby-create-react-app\" target=\"_blank\" rel=\"noopener noreferrer\">Next.js vs. Gatsby vs. Create React App<\/a><\/li>\n<li><a href=\"https:\/\/www.codemotion.com\/magazine\/dev-hub\/web-developer\/kickoff-a-react-project-cra-next-js-or-gatsby\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kickoff a React project: CRA, Next.js or Gatsby?<\/a><\/li>\n<\/ul>\n<div class=\"message-box relative dark\" style=\"padding-top:15px;padding-bottom:15px;\"><div class=\"message-box-bg-image bg-fill fill\" ><\/div><div class=\"message-box-bg-overlay bg-fill fill\" style=\"background-color:rgb(49, 113, 238);\"><\/div><div class=\"container relative\"><div class=\"inner last-reset\">\n<div class=\"row align-middle align-center\"  id=\"row-1044462347\">\n\n\t<div id=\"col-1794719598\" class=\"col small-12 large-12\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<p>Lesson 2: Benutzt next.js anstatt plain react \/ CRA oder Gatsby.<\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>\n<\/div><\/div><\/div>\n\t<div id=\"gap-145188977\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-145188977 {\n  padding-top: 30px;\n}\n<\/style>\n\t<\/div>\n\t\n<h2>next.js installieren<\/h2>\n<p>Um next.js zu installieren wechseln wir in unseren public folder. L\u00f6scht die alte CRA app, erstellt einen ordner frontend und installiert next.js mit folgendem Befehl:<\/p>\n<pre>cd \/sites\/subdomain.example.com\/public<br \/>rm * -R<br \/>mkdir frontend<br \/>cd frontend<br \/><br \/># App erstellen<br \/>npx create-next-app<br \/>mv my-app\/* .<br \/><span class=\"s1\">rm my-app\/ -R<br \/><br \/><\/span># Package json anpassen<br \/>nano package.json<br \/># hier den Namen \u00e4ndern + next version auf \"latest\" setzen<br \/><br \/># NextJS Server starten<br \/>npm run dev<\/pre>\n<p>Der next.js Server sollte nun gestartet sein und auf port 3000 laufen.\u00a0<\/p>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_346252356\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"407\" src=\"https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/nextjs-server-1024x409.jpg\" class=\"attachment-large size-large\" alt=\"nextjs server\" srcset=\"https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/nextjs-server-1024x409.jpg 1024w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/nextjs-server-300x120.jpg 300w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/nextjs-server-768x307.jpg 768w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/nextjs-server-1536x614.jpg 1536w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/nextjs-server-2048x819.jpg 2048w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/nextjs-server-500x200.jpg 500w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/09\/nextjs-server-1000x400.jpg 1000w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style>\n#image_346252356 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n<p>Wenn ihr eure Seite das erste Mal ladet denkt ihr bestimmt &#8220;So schnell ist die jetzt aber nicht&#8221;. Tja das liegt daran, dass der Server unter &#8220;dev&#8221; l\u00e4uft. Hier k\u00f6nnen wir programmieren und Live \u00c4nderungen sehen aber es ist weder Code kompiliert, noch optimiert.\u00a0<\/p>\n<p>Um die wahre Power von Next.js zu sehen, m\u00fcssen wie die App deployen:<\/p>\n<pre>npm run build<br \/>npm run start<\/pre>\n<p>Ruft nun eure URL auf. Ein unterschied wie Tag und Nacht oder?<\/p>\n<p>Neben der &#8220;my-app&#8221; bietet next.js eine ganze Reihe an Beispielen an, die ihr installieren, testen und analysieren k\u00f6nnt. Hier ein plus f\u00fcr die Dokumentation.<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/examples\" target=\"_blank\" rel=\"noopener noreferrer\">Next.js Beispiele<\/a><\/li>\n<li><a href=\"https:\/\/nextjs.org\/docs\/getting-started\" target=\"_blank\" rel=\"noopener noreferrer\">Next.js Dokumentation<\/a><\/li>\n<\/ul>\n<h2>React Next.js Ordernstruktur &amp; Komponenten<\/h2>\n<p>Innerhalb einer React Next.js Applikation gibt es verschiedene Ordner und Dateien:<\/p>\n<ul>\n<li>pages<br \/>Hier liegen die Seiten, ihr k\u00f6nnt hier auch Ordner erstellen z.B.\n<ul>\n<li>index.js (\/home)<\/li>\n<li>contact.js (\/contact)<\/li>\n<li>about (folder)\n<ul>\n<li>index.js (\/about)<\/li>\n<li>company (about\/company)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>components (wiederverwendbare Komponenten z.B. ein Button)<\/li>\n<li>public (Ordner f\u00fcr favicon, Bilder etc)<\/li>\n<li>styles (Order f\u00fcr CSS)<\/li>\n<\/ul>\n<h2>Next.JS Layout erstellen<\/h2>\n<p>Ok genug Theorie. Wir erstellen nun zuerst ein Layout \/ Grundger\u00fcst. Dies soll aus einem Logo + Men\u00fc und Footer bestehen. Folgendes design haben wir uns dazu \u00fcberlegt.<\/p>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_271654436\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"573\" src=\"https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/10\/nextjs-beispielseite-1024x575.png\" class=\"attachment-large size-large\" alt=\"nextjs beispielseite\" srcset=\"https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/10\/nextjs-beispielseite-1024x575.png 1024w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/10\/nextjs-beispielseite-300x168.png 300w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/10\/nextjs-beispielseite-768x431.png 768w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/10\/nextjs-beispielseite-1536x863.png 1536w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/10\/nextjs-beispielseite-2048x1150.png 2048w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/10\/nextjs-beispielseite-500x281.png 500w, https:\/\/www.welaunch.io\/de\/wp-content\/uploads\/sites\/11\/2020\/10\/nextjs-beispielseite-1000x562.png 1000w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style>\n#image_271654436 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n\t<div id=\"gap-660906334\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-660906334 {\n  padding-top: 30px;\n}\n<\/style>\n\t<\/div>\n\t\n<p>Das Layout bauen wir mit bootstrap und nat\u00fcrlich ben\u00f6tigen wir auch noch ein paar Icons. Gut dass es f\u00fcr NPM dazu passende packages gibt, die wir installieren:<\/p>\n<pre>npm install bootstrap react-bootstrap react-icons<\/pre>\n<p><a href=\"https:\/\/react-bootstrap.github.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">React Bootstrap<\/a> ist ein wrapper f\u00fcr alle Bootstrap CSS Elemente. <a href=\"https:\/\/react-icons.github.io\/react-icons\/\" target=\"_blank\" rel=\"noopener noreferrer\">React Icons<\/a> beinhaltet viele Icons von z.B. Font Awesome etc. die wir benutzen k\u00f6nnen. Mit react bootstrap seid ihr auf jeden Fall auf der sicheren Seite falls es bootstrap updated gibt.\u00a0<\/p>\n<p>Unser Layout erstellen wir im Ordner components\/layouts eine Datei names layout.js. Zu aller erst importieren wir einige ben\u00f6tige Klassen von next, bootsrap und nat\u00fcrlich die Icons die wir ben\u00f6tigen.<\/p>\n<pre>import Head from 'next\/head'<br \/>import Link from 'next\/link'<br \/>import Image from 'next\/image'<br \/><br \/>import Navbar from 'react-bootstrap\/Navbar'<br \/>import NavDropdown from 'react-bootstrap\/NavDropdown'<br \/>import Nav from 'react-bootstrap\/Nav'<br \/>import Container from 'react-bootstrap\/Container'<br \/>import Row from 'react-bootstrap\/Row'<br \/>import Col from 'react-bootstrap\/Col'<br \/><br \/>import { BsList, BsBag, BsPerson } from 'react-icons\/bs'<\/pre>\n<p>Nun k\u00f6nnen wir einige dieser Komponenten benutzen um unser Layout zu bauen.<\/p>\n<pre>\nexport default function Layout({\n  children,\n  title = 'This is the default title',\n}) {\n\treturn (\n\t&lt;div&gt;\n\t\t&lt;Head&gt;\n\t\t\t&lt;title&gt;{title}&lt;\/title&gt;\n\t\t\t&lt;meta charSet=&quot;utf-8&quot; \/&gt;\n\t\t\t&lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, width=device-width&quot; \/&gt;\n\n\t\t&lt;\/Head&gt;\n\n\t\t&lt;Navbar className=&quot;transparent-menu&quot; expand=&quot;lg&quot; sticky=&quot;top&quot;&gt;\n\t\t\t&lt;Container&gt;\n\n\t\t\t\t&lt;Link href=&quot;\/&quot;&gt;\n\t\t\t\t\t&lt;a className=&quot;navbar-brand&quot;&gt;\n\t\t\t\t\t\t&lt;Image src=&quot;\/img\/logo.png&quot; unsized=&quot;false&quot;\/&gt;\n\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t&lt;\/Link&gt;\n\n\t\t\t\t&lt;Navbar.Toggle aria-controls=&quot;basic-navbar-nav&quot;&gt;\n\t\t\t\t\t&lt;BsList \/&gt;\n\t\t\t\t&lt;\/Navbar.Toggle&gt;\n\n\t\t\t\t&lt;Navbar.Collapse id=&quot;basic-navbar-nav&quot;&gt;\n\n\t\t\t\t\t&lt;Nav id=&quot;navigation-main&quot; className=&quot;ml-auto&quot;&gt;\n\n\t\t\t\t\t  \t&lt;Link href=&quot;\/products&quot;&gt;\n\t\t\t\t          &lt;a className=&quot;nav-link&quot;&gt;Products&lt;\/a&gt;\n\t\t\t\t        &lt;\/Link&gt;\n\n\t\t\t\t\t  \t&lt;Link href=&quot;\/about&quot;&gt;\n\t\t\t\t          &lt;a className=&quot;nav-link&quot;&gt;About&lt;\/a&gt;\n\t\t\t\t        &lt;\/Link&gt;\n\n\t\t\t\t\t  \t&lt;Link href=&quot;\/support&quot;&gt;\n\t\t\t\t          &lt;a className=&quot;nav-link&quot;&gt;Support&lt;\/a&gt;\n\t\t\t\t        &lt;\/Link&gt;\n\n\t\t\t\t\t\t&lt;NavDropdown title=&quot;About&quot;&gt;\n\t\t\t\t\t\t\t&lt;NavDropdown.Item href=&quot;\/about#intro&quot;&gt;Intro&lt;\/NavDropdown.Item&gt;\n\t\t\t\t\t\t\t&lt;NavDropdown.Item href=&quot;\/about#team&quot;&gt;Team&lt;\/NavDropdown.Item&gt;\n\t\t\t\t\t\t\t&lt;NavDropdown.Item href=&quot;\/about#contact&quot;&gt;Contact&lt;\/NavDropdown.Item&gt;\n\t\t\t\t\t\t&lt;\/NavDropdown&gt;\n\t\t\t\t\t&lt;\/Nav&gt;\n\n\t\t\t\t\t&lt;Nav id=&quot;navigation-icons&quot; className=&quot;ml-auto&quot;&gt;\n\t\t\t\t\t\t&lt;Nav.Link href=&quot;#home&quot;&gt;\n\t\t\t\t\t\t\t&lt;BsPerson \/&gt;\n\t\t\t\t\t\t&lt;\/Nav.Link&gt;\n\t\t\t\t\t\t&lt;Nav.Link href=&quot;#link&quot;&gt;\n\t\t\t\t\t\t \t&lt;BsBag \/&gt;\n\t\t\t\t\t \t&lt;\/Nav.Link&gt;\n\t\t\t\t\t&lt;\/Nav&gt;\n\n\t\t\t\t&lt;\/Navbar.Collapse&gt;\n\t\t\t&lt;\/Container&gt;\n\t\t&lt;\/Navbar&gt;\n\t  \t\t\n  \t\t&lt;Container fluid className=&quot;transparent-container&quot;&gt;\n\t\t\t{children}\n\t\t&lt;\/Container&gt;\n\n\t  \t&lt;footer&gt;\n\t  \t\t&lt;Container&gt;\n\t\t  \t\t&lt;Row className=&quot;justify-content-md-center&quot;&gt;\n\t\t  \t\t\t&lt;Col md=&quot;2&quot;&gt;\n\t\t  \t\t\t\t&lt;Image src=&quot;\/img\/logo.png&quot; unsized=&quot;false&quot;\/&gt;\n\t\t  \t\t\t&lt;\/Col&gt;\n\t\t  \t\t&lt;\/Row&gt;\n\t\t  \t\t&lt;Row&gt;\n\t\t  \t\t\t&lt;Col&gt;\n\t\t  \t\t\t\n\t\t  \t\t\t&lt;\/Col&gt;\n\t\t  \t\t&lt;\/Row&gt;\n\t\t  \t\t&lt;Row className=&quot;footer-menu&quot;&gt;\n\t\t  \t\t\t&lt;Col&gt;\n\t\t  \t\t\t\t&lt;Link href=&quot;\/privacy&quot;&gt;Data Privacy&lt;\/Link&gt; |&nbsp;&lt;Link href=&quot;\/terms&quot;&gt;Terms of Use&lt;\/Link&gt; \n\t\t  \t\t\t&lt;\/Col&gt;\n\t\t  \t\t&lt;\/Row&gt;\n\t  \t\t&lt;\/Container&gt;\n\t  \t&lt;\/footer&gt;\n\t&lt;\/div&gt;\n  )\n}\n<\/pre>\n<p>Das obige layout k\u00f6nnen wir nun zum Beispiel jetzt in unserer Home Page verwenden. Dazu m\u00fcssen wir das Layout importieren und danach ausgeben. F\u00fcgt dazu einfach folgenden Code in eure pages\/index.js Datei:<\/p>\n<pre>import Layout from '..\/components\/Layouts\/Layout'\n\nexport default function Home() {\n  \treturn (\n  \t&lt;Layout title=\"Infinite - NextJS Theme\"&gt;\n      test\n\t&lt;\/Layout&gt;\n  )\n}\n<\/pre>\n<p>Super! Wir haben unser Layout Grundger\u00fcst fertig. Im n\u00e4chsten Schritt werden wir einige eigene Komponenten bauen wie pagehero, text left image right.\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wie wir in unserem ersten Teil gesehen haben, ist React eine JS library. Man k\u00f6nnte React mit PHP vergleichen. Und genauso wie bei PHP kommt man irgendwann an den Punkt wo man denkt: warum benutzt ich nicht einfach ein Framework? Frameworks sind beliebt, denn &#8230; Man muss das Rad nicht neu erfinden\u00a0 H\u00e4ufige Coding Probleme&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6048,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6050","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general"],"_links":{"self":[{"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/posts\/6050","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/comments?post=6050"}],"version-history":[{"count":10,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/posts\/6050\/revisions"}],"predecessor-version":[{"id":6091,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/posts\/6050\/revisions\/6091"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/media\/6048"}],"wp:attachment":[{"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/media?parent=6050"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/categories?post=6050"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/tags?post=6050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}