Next.js - Kurzanleitung

Die Next.js ist ein reaktionsbasiertes Framework mit serverseitiger Renderfunktion. Es ist sehr schnell und SEO-freundlich.

Mit Next.js können Sie ganz einfach eine robuste reaktionsbasierte Anwendung erstellen und testen. Im Folgenden sind die wichtigsten Funktionen von Next.js aufgeführt.

  • Hot Code Reload - Der Server von Next.js erkennt geänderte Dateien und lädt sie automatisch neu.

  • Automatic Routing- Sie müssen keine URL für das Routing konfigurieren. Dateien sind im Seitenordner abzulegen. Alle URLs werden dem Dateisystem zugeordnet. Anpassung kann vorgenommen werden.

  • Component specific styles - styled-jsx bietet Unterstützung für globale und komponentenspezifische Stile.

  • Server side rendering - Reaktionskomponenten werden auf dem Server vorgerendert und werden daher auf dem Client schneller geladen.

  • Node Ecosystem - Next.js reagieren reaktionsbasierte Gele gut mit dem Node-Ökosystem.

  • Automatic code split- Next.js rendert Seiten mit den benötigten Bibliotheken. Anstatt eine einzelne große Javascript-Datei zu erstellen, erstellt Next.js mehrere Ressourcen. Wenn eine Seite geladen wird, wird nur die erforderliche Javascript-Seite damit geladen.

  • Prefetch - Next.js bietet eine Link-Komponente, mit der mehrere Komponenten verknüpft werden. Sie unterstützt eine Prefetch-Eigenschaft zum Vorabrufen von Seitenressourcen im Hintergrund.

  • Dynamic Components - Next.js ermöglicht den dynamischen Import von JavaScript-Modulen und React Components.

  • Export Static Site - Mit Next.js können Sie eine vollständige statische Site aus Ihrer Webanwendung exportieren.

  • Built-in Typescript Support - Next.js ist in Typescripts geschrieben und bietet hervorragende Typescript-Unterstützung.

Da Next.js ein reaktionsbasiertes Framework ist, verwenden wir die Node-Umgebung. Stellen Sie jetzt sicher, dass Sie habenNode.js und npmauf Ihrem System installiert. Mit dem folgenden Befehl können Sie Next.js installieren:

npm install next react react-dom

Sie können die folgende Ausgabe beobachten, sobald Next.js erfolgreich installiert wurde -

+ [email protected]
+ [email protected]
+ [email protected]
added 831 packages from 323 contributors and audited 834 packages in 172.989s

Jetzt erstellen wir einen Knoten package.json -

npm init

Wählen Sie beim Erstellen einer package.json Standardwerte aus -

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nextjs)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to \Node\nextjs\package.json:
{
   "name": "nextjs",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "next": "^9.4.4",
      "react": "^16.13.1",
      "react-dom": "^16.13.1"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
}
Is this OK? (yes)

Aktualisieren Sie nun den Skriptabschnitt von package.json, um Next.js-Befehle einzuschließen.

{
   "name": "nextjs",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "next": "^9.4.4",
      "react": "^16.13.1",
      "react-dom": "^16.13.1"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "next",
      "build": "next build",
      "start": "next start"
   },
   "author": "",
   "license": "ISC"
}

Seitenverzeichnis erstellen.

Erstellen Sie einen Seitenordner im Ordner nextjs und erstellen Sie eine Datei index.js mit folgendem Inhalt.

function HomePage() {
   return <div>Welcome to Next.js!</div>
}

export default HomePage

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 in einem Browser und Sie sehen die folgende Ausgabe.

In Next.js können wir Seiten erstellen und mithilfe der Dateisystem-Routing-Funktion zwischen ihnen navigieren. Wir werden verwendenLink Komponente für eine clientseitige Navigation zwischen Seiten.

In Next.js ist eine Seite eine Reaktionskomponente und wird aus dem Seitenverzeichnis exportiert. Jede Seite ist anhand ihres Dateinamens einer Route zugeordnet. Zum Beispiel

  • pages/index.js ist mit der Route '/' verbunden.

  • pages/posts/first.js ist mit der Route '/ posts / first' usw. verknüpft.

Lassen Sie uns das nextjs-Projekt aktualisieren, das im Kapitel Umgebungs-Setup erstellt wurde .

Erstellen Sie das Post-Verzeichnis und die darin enthaltenen first.js mit den folgenden Inhalten.

export default function FirstPost() {
   return <h1>My First Post</h1>
}

Fügen Sie Link Support hinzu, um zur Startseite zurückzukehren. Aktualisieren Sie first.js wie folgt:

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
      </>	  
   )
}

Fügen Sie der Startseite Link-Unterstützung hinzu, um zur ersten Seite zu navigieren. Aktualisieren Sie index.js wie folgt:

import Link from 'next/link'

function HomePage() {
   return (
      <>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
      </>	    
   )
}

export default HomePage

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 in einem Browser und Sie sehen die folgende Ausgabe.

Klicken Sie auf Erster Link und Sie sehen die folgende Ausgabe.

In Next.js können wir statische Seiten wie Bilder sehr einfach bereitstellen, indem wir sie einfügen public, ein Verzeichnis der obersten Ebene. Wir können diese Dateien auf ähnliche Weise wie Seiten in verweisenpages Verzeichnis.

In Next.js ist eine Seite eine Reaktionskomponente und wird aus dem Seitenverzeichnis exportiert. Jede Seite ist anhand ihres Dateinamens einer Route zugeordnet.

Lassen Sie uns das im Kapitel " Seiten " verwendete nextjs-Projekt aktualisieren .

Erstellen Sie ein öffentliches Verzeichnis und platzieren Sie alle Bilder darin. Wir haben logo.png, TutorialsPoint Logo Bild genommen.

Aktualisieren Sie first.js wie folgt:

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
         <br/">
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	  
   )
}

Hier haben wir einen Verweis auf logo.png in der Datei index.js hinzugefügt.

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 in einem Browser und Sie sehen die folgende Ausgabe.

Das öffentliche Verzeichnis ist auch für SEO-Zwecke nützlich. Es kann für robot.txt, die Überprüfung der Google Site oder andere statische Elemente in der Webanwendung verwendet werden.

In Next.js können wir den Kopfbereich jeder Reaktionsseite sehr einfach mit Hilfe von ändern <Head> Reaktionskomponente, die eingebaut ist.

Lassen Sie uns das im Kapitel " Seiten " verwendete nextjs-Projekt aktualisieren .

Aktualisieren Sie index.js wie folgt: 

import Link from 'next/link'
import Head from 'next/head'

function HomePage() {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export default HomePage

Aktualisieren Sie first.js wie folgt:

import Link from 'next/link'
import Head from 'next/head'

export default function FirstPost() {
   return (
      <>
      <Head>
         <title>My First Post</title>
      </Head>
      <h1>My First Post</h1>
      <h2>
         <Link href="/">
            <a>Home</a>
         </Link>
      </h2>
      </>	  
   )
}

Hier haben wir einen Verweis auf logo.png in der Datei index.js hinzugefügt.

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 in einem Browser und Sie sehen die folgende Ausgabe.

Klicken Sie auf den Link Erste Seite und überprüfen Sie, ob der Titel auch auf der Seite Erster Beitrag geändert wurde.

In Next.js können wir die eingebaute css-in-js-Bibliothek mit dem Namen styled-jsx verwenden. Es ermöglicht das Schreiben von CSS innerhalb einer Reaktionskomponente, und diese Stile gelten für die Komponente.

In diesem Beispiel erstellen wir ein Container-Objekt, mit dem andere Komponenten formatiert werden, indem sie enthalten werden.

Lassen Sie uns Update die nextjs Projekt in verwendete Meta Data Kapitel.

Erstellen Sie zunächst ein Komponentenverzeichnis auf Stammebene und fügen Sie eine Datei container.module.css wie folgt hinzu:

.container {
   max-width: 36rem;
   padding: 0 1rem;
   margin: 3rem auto 6rem;
   border: 1px solid red;  
}

Erstellen Sie die Datei container.js im Komponentenverzeichnis

import styles from './container.module.css'

function Container({ children }) {
   return <div className={styles.container}>{children}</div>
}

export default Container

Verwenden Sie nun die Containerkomponente in first.js.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost() {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
            </h2>
         </Container>
      </>	  
   )
}

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 in einem Browser und gehen Sie zum ersten Beitrag. Sie sehen die folgende Ausgabe.

In Next.js erstellen wir globale Stile, die auf alle Seiten angewendet werden.

In diesem Beispiel erstellen wir eine styles.css, die mit der Komponente _app.js für alle Komponenten verwendet wird.

Lassen Sie uns das im Kapitel CSS-Support verwendete nextjs-Projekt aktualisieren .

Erstellen Sie zunächst ein Styles-Verzeichnis auf Stammebene und fügen Sie eine Datei styles.css wie folgt hinzu:

html,
body {
   padding: 0;
   margin: 0;
   line-height: 1.6;
   font-size: 18px;
   background-color: lime;
}

* {
   box-sizing: border-box;
}

a {
   color: #0070f3;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

img {
   max-width: 100%;
   display: block;
}

Erstellen Sie die Datei _app.js im Seitenverzeichnis

import '../styles/styles.css'

export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />
}

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 in einem Browser und Sie sehen die folgende Ausgabe.

Klicken Sie auf den Link Erster Beitrag.

In Next.js wird HTML für eine Seite generiert, die als Pre-Rendering bezeichnet wird. Next.JS unterstützt zwei Arten des Pre-Renderings.

  • Static Generation- Diese Methode generiert die HTML-Seite beim Erstellen. Dieser vorgerenderte HTML-Code wird bei jeder Anforderung gesendet. Diese Methode ist nützlich für das Marketing von Websites, Blogs, E-Commerce-Produkten, die Wesites, Hilfen und Dokumentationswebsites auflisten.

  • Server Side Generation- Diese Methode generiert die HTML-Seite bei jeder Anforderung. Diese Methode eignet sich, wenn der Inhalt einer HTML-Seite bei jeder Anforderung variieren kann.

Pro Seite Pre-Rendering

Mit Next.JS können Sie die Vor-Rendering-Methode für jede Seite festlegen, bei der die meisten Seiten der statischen Generierung folgen und andere Seiten serverseitiges Rendering verwenden.

Statische Erzeugung ohne Daten

Die statische Generierung kann ohne Daten erfolgen. In diesem Fall sind HTML-Seiten bereit, ohne dass die Daten vorab abgerufen und anschließend gerendert werden müssen. Daten können später oder auf Anfrage abgerufen werden. Diese Technik hilft dabei, dem Benutzer eine Benutzeroberfläche ohne Daten anzuzeigen, falls die Daten einige Zeit in Anspruch nehmen.

Statische Erzeugung mit Daten

Die statische Generierung kann mit Daten erfolgen. In diesem Fall sind HTML-Seiten erst bereit, wenn Daten abgerufen wurden, da HTML möglicherweise von Daten abhängig ist. Jede Komponente hat eine spezielle MethodegetStaticProps Dies kann verwendet werden, um Daten abzurufen und Daten als Requisiten der Seite zu übergeben, so dass die Seite Übereinstimmungen mit übergebenen Requisiten rendern kann.

Die Funktion getStaticProps () wird zur Erstellungszeit in der Produktion ausgeführt und für jede Anforderung im Entwicklungsmodus ausgeführt.

Lassen Sie uns ein Beispiel erstellen, um dasselbe zu demonstrieren.

In diesem Beispiel erstellen wir eine Aktualisierungsseite für index.js und first.js, damit ein Server den Datenabruf abruft.

Lassen Sie uns das nextjs-Projekt aktualisieren, das im Kapitel Global CSS Support verwendet wird .

Aktualisieren Sie die Datei index.js im Seitenverzeichnis, um die Methode getServerSideProps () zu verwenden. Diese Methode wird pro Anfrage aufgerufen.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Aktualisieren Sie die Datei first.js im Seitenverzeichnis, um die Methode getStaticProps () zu verwenden. Diese Methode wird einmal aufgerufen.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
               <Link href="/">
                  <a>Home</a>
               </Link>
               <div>Next stars: {props.stars}</div>
            </h2>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 in einem Browser und Sie sehen die folgende Ausgabe.

Klicken Sie auf den Link Erster Beitrag.

Next.js verwendet einen dateisystembasierten Router. Wann immer wir eine Seite hinzufügenpagesVerzeichnis ist es automatisch über URL verfügbar. Es folgen die Regeln dieses Routers.

  • Index Routes- Eine in einem Ordner vorhandene Datei index.js wird dem Stammverzeichnis des Verzeichnisses zugeordnet. Zum Beispiel -

    • pages / index.js ist '/' zugeordnet.

    • pages / posts / index.js ist '/ posts' zugeordnet.

  • Nested Routes- Jede verschachtelte Ordnerstruktur im Seitenverzeichnis, da die Router-URL automatisch. Zum Beispiel -

    • pages / settings / dashboard / about.js ist '/ settings / dashboard / about' zugeordnet.

    • pages / posts / first.js ist '/ posts / first' zugeordnet.

  • Dynamic Routes- Wir können auch benannte Parameter verwenden, um die URL abzugleichen. Verwenden Sie dafür Klammern. Zum Beispiel -

    • pages / posts / [id] .js ist '/ posts /: id' zugeordnet, wo wir URLs wie '/ posts / 1' verwenden können.

    • pages / [user] /settings.js ist '/ posts /: user / settings' zugeordnet, wo wir URLs wie '/ abc / settings' verwenden können.

    • pages / posts / [... all] .js ist '/ posts / *' zugeordnet, wo wir eine beliebige URL wie '/ posts / 2020 / jun /' verwenden können.

Seitenverknüpfung

Next.JS ermöglicht das Verknüpfen von Seiten auf der Clientseite mithilfe der Link-React-Komponente. Es hat folgende Eigenschaften -

  • href- Name der Seite im Seitenverzeichnis. Zum Beispiel/posts/first Dies bezieht sich auf first.js im Verzeichnis pages / posts.

Lassen Sie uns ein Beispiel erstellen, um dasselbe zu demonstrieren.

In diesem Beispiel aktualisieren wir die Seiten index.js und first.js, um einen Servertreffer zum Abrufen von Daten zu erzielen.

Lassen Sie uns das nextjs-Projekt aktualisieren, das im Kapitel Global CSS Support verwendet wird .

Aktualisieren Sie die Datei index.js im Seitenverzeichnis wie folgt.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first">> <a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 in einem Browser und Sie sehen die folgende Ausgabe.

Klicken Sie auf den Link Erster Beitrag.

In Next.js können wir Routen dynamisch erstellen. In diesem Beispiel erstellen wir Seiten im laufenden Betrieb und deren Weiterleitung.

  • Step 1. Define [id].js file- [id] .js repräsentiert die dynamische Seite, auf der id der relative Pfad ist. Definieren Sie diese Datei im Verzeichnis pages / post.

  • Step 2. Define lib/posts.js- posts.js repräsentiert die IDs und Inhalte. Das lib-Verzeichnis soll im Stammverzeichnis erstellt werden.

[id] .js

Aktualisieren Sie die Datei [id] .js mit der Methode getStaticPaths (), mit der die Pfade und die Methode getStaticProps () festgelegt werden, um den Inhalt basierend auf der ID abzurufen.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

import { getAllPostIds, getPostData } from '../../lib/posts'

export default function Post({ postData }) {
   return (
      <Container>
         {postData.id}
         <br />
         {postData.title}
         <br />
         {postData.date}
      </Container>
   )
}
export async function getStaticPaths() {
   const paths = getAllPostIds()
   return {
      paths,
      fallback: false
   }
}

export async function getStaticProps({ params }) {
   const postData = getPostData(params.id)
      return {
      props: {
         postData
      }
   }
}

posts.js

posts.js enthält getAllPostIds (), um die IDs abzurufen, und getPostData (), um den entsprechenden Inhalt abzurufen.

export function getPostData(id) {
   const postOne = {
      title: 'One',
      id: 1,
      date: '7/12/2020'
   }

   const postTwo = {
      title: 'Two',
      id: 2,
      date: '7/12/2020'
   }
   if(id == 'one'){
      return postOne;
   }else if(id == 'two'){
      return postTwo;
   }  
}

export function getAllPostIds() {
   return [{
      params: {
         id: 'one'
      }
   },
   {
      params: {
         id: 'two'
      }
   }
];
}

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 / posts / one in einem Browser und Sie sehen die folgende Ausgabe.

Öffnen Sie localhost: 3000 / posts / two in einem Browser und Sie sehen die folgende Ausgabe.

In Next.js verwenden wir bisher die Link-React-Komponente, um von einer Seite zur anderen zu navigieren. Es gibt auch eine programmatische Möglichkeit, dasselbe mithilfe der Router-Komponente zu erreichen. Im Allgemeinen wird die Routerkomponente mit HTML-Tags verwendet.

Aktualisieren Sie die Datei index.js im Seitenverzeichnis wie folgt.

import Router from 'next/router'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <span onClick={() => Router.push('/posts/one')}>First Post</span>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 in einem Browser und Sie sehen die folgende Ausgabe.

Klicken Sie auf Erster Beitrag, der kein Link ist, aber anklickbar ist.

In Next.js bezieht sich flaches Routing auf das Navigieren zu derselben Seite, jedoch nicht auf Aufrufe der Methoden getServerSideProps, getStaticProps und getInitialProps.

Für flaches Routing verwenden wir Router mit flachem Flag als true. Siehe das folgende Beispiel.

Aktualisieren Sie die Datei index.js im Seitenverzeichnis wie folgt.

import Router from 'next/router'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <span onClick={() => Router.push('/?counter=1', undefined, { shallow: true })}>Reload</span>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 in einem Browser und klicken Sie dann auf den Link Neu laden. Die folgende Ausgabe wird angezeigt.

Mit API-Routen können Sie mithilfe von Next.js eine Rest-API erstellen. Next.js ordnet alle in vorhandenen Dateien zu/pages/apiOrdner und wird als API-Endpunkt behandelt. Ein Beispiel für eine API-Funktion -

export default (req, res) => {
   ...
}

Im Folgenden sind einige wichtige Punkte zu beachten.

  • req - req ist eine Instanz von http.IncomingMessage und wird verwendet, um Daten von einer Anfrage abzurufen.

  • res - res ist eine Instanz von http.ServerResponse und wird zum Senden von Daten als Antwort verwendet.

Lassen Sie uns ein Beispiel erstellen, um dasselbe zu demonstrieren.

In diesem Beispiel erstellen wir eine user.js in pages/api Verzeichnis.

Lassen Sie uns das nextjs-Projekt aktualisieren, das im Kapitel Global CSS Support verwendet wird .

Erstellen Sie die Datei user.js im Verzeichnis pages / api wie folgt.

export default (req, res) => {
   res.statusCode = 200
   res.setHeader('Content-Type', 'application/json')
   res.end(JSON.stringify({ name: 'Robert' }))
}

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 / api / user in einem Browser und Sie sehen die folgende Ausgabe.

{"name":"Robert"}

API-Routen in Next.JS verfügen über integrierte Middlewares, mit denen die eingehende Anforderung analysiert werden kann.

Es folgen die Middlewares

  • req.cookies- Das Cookies-Objekt enthält die von der Anfrage gesendeten Cookies. Der Standardwert ist {}.

  • req.query- Das Abfrageobjekt enthält die Abfragezeichenfolge. Der Standardwert ist {}.

  • req.body- Das Abfrageobjekt enthält den Anforderungshauptteil, der mit 'Inhaltstyp' analysiert wurde. Der Standardwert ist null.

Lassen Sie uns ein Beispiel erstellen, um dasselbe zu demonstrieren.

In diesem Beispiel aktualisieren wir eine user.js in pages/api Verzeichnis.

Lassen Sie uns das nextjs-Projekt aktualisieren, das im Kapitel API-Routen verwendet wird .

Erstellen Sie die Datei user.js im Verzeichnis pages / api wie folgt.

export default (req, res) => {
   res.statusCode = 200
   res.setHeader('Content-Type', 'application/json')
   res.end(JSON.stringify({ query: req.query }))
}

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie http: // localhost: 3000 / api / user? Counter = 1 in einem Browser und Sie sehen die folgende Ausgabe.

{"query":{"counter":"1"}}

res Objekt haben express.js wie Hilfsmethoden, um die Entwicklung zum Erstellen von Diensten zu vereinfachen.

Im Folgenden sind die Antworthilfemethoden aufgeführt

  • res.status(code)- Diese Methode legt den Status der Antwort fest. Der übergebene Code muss einen gültigen HTTP-Status haben.

  • req.json(json)- Diese Methode gibt eine JSON-Antwort zurück. json übergeben muss ein gültiges JSON-Objekt sein.

  • req.send(body)- Diese Methode sendet eine HTTP-Antwort. Die Antwort kann eine Zeichenfolge, ein Objekt oder ein Puffer sein.

Lassen Sie uns ein Beispiel erstellen, um dasselbe zu demonstrieren.

In diesem Beispiel aktualisieren wir eine user.js in pages/api Verzeichnis.

Lassen Sie uns das nextjs-Projekt aktualisieren, das im Kapitel API-Routen verwendet wird .

Erstellen Sie die Datei user.js im Verzeichnis pages / api wie folgt.

export default (req, res) => {
   res.status(200).json({ name: 'Robert' });
}

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
event - build page: /api/user
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie http: // localhost: 3000 / api / user in einem Browser und Sie sehen die folgende Ausgabe.

{ name: 'Robert' }

Next.js bietet hervorragende Unterstützung für Typoskript. Im Folgenden finden Sie einige Schritte zum Aktivieren von Typoskript im Projekt.

Erstellen Sie tsconfig.json

Erstellen Sie tsconfig.json im Stammverzeichnis. Wir halten es zunächst leer. Starten Sie nun den Server.

Next.JS erkennt tsconfig.json und zeigt die folgende Meldung auf der Konsole an.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install typescript, @types/react, and @types/node by running:

        npm install --save-dev typescript @types/react @types/node

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files).
...

Installieren Sie Typoskript

Führen Sie den Befehl npm install aus, um Typoskript und zugehörige Bibliotheken zu installieren.

npm install --save-dev typescript @types/react @types/node
...

+ @types/[email protected]
+ @types/[email protected]
+ [email protected]
added 5 packages from 72 contributors and audited 839 packages in 27.538s
...

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
We detected TypeScript in your project and created a tsconfig.json file for you.


Your tsconfig.json has been populated with default values.

event - compiled successfully
wait  - compiling...
event - compiled successfully

Öffnen Sie tsconfig.json

Der NextJS-Server hat die Datei tsconfig.json geändert.

{
   "compilerOptions": {
      "target": "es5",
      "lib": [
         "dom",
         "dom.iterable",
         "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "strict": false,
      "forceConsistentCasingInFileNames": true,
      "noEmit": true,
      "esModuleInterop": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "jsx": "preserve"
   },
   "exclude": [
      "node_modules"
   ],
   "include": [
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx"
   ]
}

Erstellen Sie hallo.ts

Erstellen Sie hello.ts im Verzeichnis pages / api, das für uns als Rest-Service fungiert.

import { NextApiRequest, NextApiResponse } from 'next'

export default (_: NextApiRequest, res: NextApiResponse) => {
   res.status(200).json({ text: 'Welcome to TutorialsPoint' })
}

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 / api / hello in einem Browser und Sie sehen die folgende Ausgabe.

{"text":"Welcome to TutorialsPoint"}

Next.js unterstützt das Veröffentlichen von Umgebungsvariablen im Knoten, die wir zum Herstellen einer Verbindung mit Server, Datenbank usw. verwenden können. Dazu müssen wir die Datei .env.local im Stammverzeichnis erstellen. Wir können auch .env.production erstellen.

Erstellen Sie .env.local

Erstellen Sie .env.local im Stammverzeichnis mit den folgenden Inhalten.

DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs

Erstellen Sie env.js

Erstellen Sie eine Seite mit dem Namen env.js mit den folgenden Inhalten im Verzeichnis pages / posts, auf der wir die Umgebungsvariablen mit process.env verwenden.

import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>Environment Variables</title>
            </Head>
            <h1>Database Credentials</h1>
               <p>Host: {props.host}</p>
               <p>Username: {props.username}</p>
               <p>Password: {props.password}</p>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   // Connect to Database using DB properties
   return {
      props: { 
         host: process.env.DB_HOST,
         username: process.env.DB_USER,
         password: process.env.DB_PASS
      }
   }
}

Starten Sie nun den Server.

Next.JS erkennt .env.local und zeigt die folgende Meldung auf der Konsole an.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
wait  - compiling...
event - compiled successfully
event - build page: /posts/env
wait  - compiling...
event - compiled successfully

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 / posts / env in einem Browser und Sie sehen die folgende Ausgabe.

Bisher haben wir die Beispielanwendung NEXT.JS im Entwicklungsmodus entwickelt und ausgeführt. Jetzt führen wir die produktionsbereite Bereitstellung lokal mit den folgenden Schritten durch.

  • npm run build - Erstellen Sie den produktionsfertigen, hochoptimierten Build.

  • npm run start - Starten Sie den Server.

Dem produktionsfertigen Build fehlen im Vergleich zum Dev-Modus Quell-Maps und das Neuladen von Hot-Code, da diese Funktionen hauptsächlich beim Debuggen verwendet werden.

Build vorbereiten

Führen Sie den folgenden Befehl aus, um den produktionsfertigen Build vorzubereiten.

npm run build

> [email protected] build \Node\nextjs
> next build

info  - Loaded env from \Node\nextjs\.env.local
Creating an optimized production build

Compiled successfully.

Automatically optimizing pages

Page                                                           Size     First Load JS
+ ? /                                                          2.25 kB        60.3 kB
+   /_app                                                      288 B          58.1 kB
+        /404                                                       3.25 kB   61.3 kB
+ ? /api/user
+ ? /posts/[id]                                                312 B          61.6 kB
+   + /posts/one
+   + /posts/two
+ ? /posts/env                                                 2.71 kB        60.8 kB
+ ? /posts/first                                               374 B          61.7 kB
+ First Load JS shared by all                                  58.1 kB
  + static/pages/_app.js                                       288 B
  + chunks/3458401054237127135bcd3ee8eb2a19d67af299.a1a019.js  10.5 kB
  + chunks/framework.c6faae.js                                 40 kB
  + runtime/main.60464f.js                                     6.54 kB
  + runtime/webpack.c21266.js                                  746 B
  + css/9706b5b8ed8e82c0fba0.css                               175 B

?  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
          (Static)  automatically rendered as static HTML (uses no initial props)
?  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

Starten Sie den Server

Führen Sie den folgenden Befehl aus, um den Produktionsserver zu starten.

npm run start

> [email protected] start \Node\nextjs
> next start

info  - Loaded env from \Node\nextjs\.env.local
ready - started server on http://localhost:3000

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 / api / user in einem Browser und Sie sehen die folgende Ausgabe.

{"name":"Robert"}

NEXT.JS bietet eine CLI zum Starten, Erstellen und Exportieren von Anwendungen. Es kann mit npx ab npm 5.2 aufgerufen werden.

CLI-Hilfe

Geben Sie den folgenden Befehl ein, um eine Liste der CLI-Befehle und deren Hilfe abzurufen.

npx next -h
   Usage
      $ next <command>

   Available commands
      build, start, export, dev, telemetry

   Options
      --version, -v   Version number
      --help, -h      Displays this message

   For more information run a command with the --help flag
      $ next build --help

Produktionsfertige Build erstellen

Geben Sie den folgenden Befehl ein.

npx next build
info  - Loaded env from D:\Node\nextjs\.env.local
Creating an optimized production build

Compiled successfully.

Automatically optimizing pages

Page                                                           Size     First Load JS
+ ? /                                                          2.25 kB        60.3 kB
+   /_app                                                      288 B          58.1 kB
+        /404                                                       3.25 kB   61.3 kB
+ ? /api/user
+ ? /posts/[id]                                                312 B          61.6 kB
+   + /posts/one
+   + /posts/two
+ ? /posts/env                                                 2.71 kB        60.8 kB
+ ? /posts/first                                               374 B          61.7 kB
+ First Load JS shared by all                                  58.1 kB
  + static/pages/_app.js                                       288 B
  + chunks/ab55cb957ceed242a750c37a082143fb9d2f0cdf.a1a019.js  10.5 kB
  + chunks/framework.c6faae.js                                 40 kB
  + runtime/main.60464f.js                                     6.54 kB
  + runtime/webpack.c21266.js                                  746 B
  + css/9706b5b8ed8e82c0fba0.css                               175 B

?  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
          (Static)  automatically rendered as static HTML (uses no initial props)
?  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

Entwicklungsserver erstellen und starten

Geben Sie den folgenden Befehl ein.

npx next dev

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully

Starten Sie den Produktionsserver

Geben Sie den folgenden Befehl ein.

npx next start

info  - Loaded env from \Node\nextjs\.env.local
ready - started server on http://localhost:3000
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved