Next.js – Erste Schritte-Tutorial

Einführung

Next.js ist ein leichtgewichtiges React-Anwendungsframework für serverseitiges Rendering.

Offizieller Website-Link: www.nextjs.cn/

Vorteil:

Automatische Kompilierung und Verpackung ohne Konfiguration. Von Anfang an für Produktionsumgebungen optimiert.

Hybridmodus: SSG und SSR
Unterstützt sowohl Build-Time Prerendering (SSG) als auch Request-Time Rendering (SSR) in einem Projekt

Die inkrementelle statische Generierung fügt nach einem Build inkrementell statische vorgerenderte Seiten hinzu und aktualisiert diese.

TypeScript-Unterstützung
TypeScript automatisch konfigurieren und kompilieren.

Schnelle Aktualisierung: Ein schnelles, zuverlässiges Bearbeitungserlebnis in Echtzeit, das sich in großem Umfang auf Apps der Facebook-Klasse bewährt hat.

Dateisystembasiertes Routing. Jede Komponente im Seitenverzeichnis ist eine Route.

API-Routen erstellen API-Endpunkte (optional), um Backend-Funktionalität bereitzustellen.

Integrierte Unterstützung für CSS
Verwenden Sie CSS-Module, um Stile auf Komponentenebene zu erstellen. Integrierte Unterstützung für Sass.

Beim Aufteilen und Bündeln von Code wird ein optimierter Bündelungs- und Aufteilungsalgorithmus verwendet, der vom Google Chrome-Team erstellt wurde.

Erstellen eines Next.js-Projekts

Manuelles Erstellen eines Next.js-Projekts

mkdir nextDemo //Projekt erstellen npm init //Projekt initialisieren npm i react react-dom next --save //Abhängigkeiten hinzufügen

Verknüpfungsbefehle in package.json hinzufügen

 "Skripte": {
    "test": "echo \"Fehler: kein Test angegeben\" && exit 1",
    "Entwickler": "Weiter",
    "build" : " nächster Build",
    "start" : "nächster Start"
  },

Seitenordner und -dateien erstellen

Erstellen Sie einen Seitenordner im Stammverzeichnis des Projekts und erstellen Sie eine index.js-Datei im Seitenordner.

Funktion Index(){
    zurückkehren (
        <div>Hallo Next.js</div>
    )
}
Standardindex exportieren

Ausführen des Projekts

npm-Ausführung dev

creact-next-app erstellt schnell ein Projekt

Mit create-next-app können Sie schnell ein Next.js-Projekt erstellen, es ist ein Gerüst.

npm install -g create-next-app //Globale Installation des Gerüsts create-next-app nextDemo //Erstellen Sie ein Projekt basierend auf dem Gerüst cd nextDemo
npm run dev //Führen Sie das Projekt aus

Einführung in die Verzeichnisstruktur:

• Komponentenordner: Hier legen Sie Ihre eigenen Komponenten ab. Die Komponenten hier umfassen keine Seiten, sondern verweisen auf öffentliche oder spezielle Komponenten.
• Ordner node_modules: Alle abhängigen Pakete des Next-Projekts befinden sich hier. Im Allgemeinen werden wir den Inhalt hier nicht ändern oder bearbeiten.
• Seitenordner: Hier werden Seiten abgelegt. Der Inhalt hier generiert automatisch Routen und wird serverseitig gerendert. Nach dem Rendern werden die Daten synchronisiert.
• statischer Ordner: Dies ist ein statischer Ordner. Hier können beispielsweise für das Projekt benötigte Bilder, Icons und statische Ressourcen abgelegt werden.
• .gitignore-Datei: Dies steuert hauptsächlich die Git-Übermittlung und den Upload von Dateien, was kurz gesagt bedeutet, dass Übermittlungen ignoriert werden.
• Datei package.json: Definiert die vom Projekt benötigten Dateien und Konfigurationsinformationen (Name, Version und Lizenz). Das Wichtigste ist, npm install zu verwenden, um alle vom Projekt benötigten Pakete herunterzuladen.

Seiten

In Next.js ist eine Seite eine React-Komponente, die aus einer .js-, jsx-, .ts- oder .tsx-Datei exportiert wird, die im Seitenverzeichnis gespeichert ist. Jede Seite verwendet ihren Dateinamen als Route.

Wenn Sie eine Datei mit dem Namen „pages/about.js“ erstellen und eine React-Komponente wie die folgende exportieren, können Sie über den Pfad „/about“ darauf zugreifen.

Routenplanung

Es gibt im Allgemeinen zwei Arten von Seitensprüngen. Die erste besteht darin, das Tag <Link> zu verwenden, und die zweite besteht darin, mithilfe der JS-Programmierung, d. h. mithilfe der Router-Komponente, zu springen.

Link

React von „react“ importieren
Link von „next/link“ importieren
const Home = () => (
  <>
    <div>Ich bin die Homepage</div>
    <div><Link href="/pageA" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><a>Gehe zu Seite A</a></Link></div>
    <div><Link href="/pageB" rel="external nofollow" ><a>Gehe zu Seite B</a></Link></div>

  </>
)

Standard-Startseite exportieren

Hinweis: Mit dem Tag <Link> ist es sehr einfach, zu springen, es gibt jedoch noch eine weitere kleine Falle, auf die Sie achten müssen. Es unterstützt nämlich nicht die Situation, in der Bruder-Tags nebeneinander platziert werden.

 //Falsche Schreibweise von <div>
  <Link href="/seiteA" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" >
    <span>Gehe zu Seite A</span>
    <span>Front-End-Blog</span>
  </Link>
</div>

//Richtiges Schreiben <Link href="/pageA" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <ein>
    <span>Gehe zu Seite A</span>
    <span>Front-End-Blog</span>
  </a>
</Link>

Router

Router von „next/router“ importieren

<button onClick={()=>{Router.push('/pageA')}}>Gehe zu Seite A</button>

Parameterübergabe und -empfang

In Next.js können Parameter nur über die Abfrage (?id=1) übergeben werden, nicht über (path:id).

Link von „next/link“ importieren

//Übergeben Sie <Link href="/blogDetail?bid=23" rel="external nofollow" ><a>{blog.title}</a></Link>

    
    
//blog.js
importiere { mit Router} von 'next/router'
Link von „next/link“ importieren

const BlogDetail = ({router})=>{
    zurückkehren (
        <>
            <div>Blog-ID: {router.query.name}</div>
            <Link href="/" rel="external nofollow" ><a>Zur Startseite zurückkehren</a></Link>
        </>
    )
}
//withRouter ist eine erweiterte Komponente des Next.js-Frameworks, die zum Verarbeiten des Routing-Exports verwendet wird. Standardmäßig withRouter (BlogDetail)


/********************************************************************************************/
Router von „next/router“ importieren

<button onClick={gotoBlogDetail} >Blogdetails</button>

Funktion gotoBlogDetail(){
    Router.push('/blogDetail?bid=23')
}

//Objektformularfunktion gotoBlogDetail(){
    Router.push({
        Pfadname:"/blogDetail",
        Abfrage:{
            Gebot:23
        }
    })
}

<Link href={{pathname:'/blogDetail',query:{bid:23}}><a>Blogdetails</a></Link>

Dynamisches Routing

Seiten/Beitrag/[pid].js
Route: /post/abc --> Abfrage: { "pid": "abc"}


Seiten/Beitrag/[PID]/[Kommentar].js
Route: /post/abc/a-comment --> Abfrage: { "pid": "abc", "comment": "a-comment"}

Hook-Ereignisse

Mit Hook-Ereignissen können Sie eine Menge Dinge tun, z. B. Animationen während Übergängen laden oder einige Ressourcenzähler auf der Seite deaktivieren …

//Wenn sich die Route ändert, Router.events.on('routeChangeStart',(...args)=>{
    console.log('1.routeChangeStart->Route beginnt sich zu ändern, Parameter sind:',...args)
})

//Wenn sich die Route ändert, Router.events.on('routeChangeComplete',(...args)=>{
    console.log('routeChangeComplete->Routenänderung abgeschlossen, Parameter:',...args)
})

//Browserverlauf vor dem Auslösen von Router.events.on('beforeHistoryChange',(...args)=>{
    console.log('3, beforeHistoryChange-> Ausgelöst vor dem Ändern des Browserverlaufs, Parameter:',...args)
})

//Wenn beim Routensprung ein Fehler auftritt, Router.events.on('routeChangeError',(...args)=>{
    console.log('4, routeChangeError-> Umleitungsfehler, Parameter:',...args)
})

/********************************Hash-Route************************************/

Router.events.on('hashChangeStart',(...args)=>{
    console.log('5, hashChangeStart->hash wird ausgeführt, wenn der Sprung beginnt, die Parameter sind:',...args)
})

Router.events.on('hashChangeComplete',(...args)=>{
    console.log('6, hashChangeComplete->Hash-Sprung abgeschlossen, die Parameter sind:',...args)
})

Daten abrufen

getStaticProps

Anfordern von Daten zur Build-Zeit

Während der Build-Phase wird die Seite in eine statische HTML-Datei eingebaut, sodass die HTML-Datei direkt und mit extrem hoher Performance online aufgerufen werden kann.

Verwenden Sie die Methode getStaticProps, um die von der Seite während der Build-Phase benötigten Daten zurückzugeben.
Wenn es sich um eine dynamisch geroutete Seite handelt, verwenden Sie die Methode getStaticPaths, um alle Routing-Parameter zurückzugeben und anzugeben, ob ein Fallback-Mechanismus erforderlich ist.

// Beiträge werden zur Build-Zeit durch getStaticProps() gefüllt
Funktion Blog({ Beiträge }) {
  zurückkehren (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// Diese Funktion wird zur Build-Zeit auf der Serverseite aufgerufen.
// Es wird nicht auf der Clientseite aufgerufen, Sie können also sogar
// direkte Datenbankabfragen. Siehe Abschnitt „Technische Details“.
exportiere asynchrone Funktion getStaticProps(Kontext) {
  // Rufen Sie einen externen API-Endpunkt auf, um Beiträge abzurufen.
  // Sie können jede beliebige Bibliothek zum Abrufen von Daten verwenden
  const res = warte auf Abruf('https://.../posts')
  const Beiträge = warte auf res.json()

  // Durch die Rückgabe von { props: { posts } }, der Blog-Komponente
  // erhält zur Build-Zeit `posts` als Prop
  zurückkehren {
    Requisiten: {
      Beiträge,
    },
  }
}

Standard-Blog exportieren

getServerSideProps

Bei jedem Besuch Daten anfordern

Exportieren Sie eine asynchrone getServerSideProps-Methode auf der Seite. Als Nächstes wird diese Methode bei jeder Anforderung auf dem Server aufgerufen.

• Die Methode wird nur auf der Serverseite ausgeführt und die Methode getServerSideProps wird bei jeder Anforderung ausgeführt.
• Wenn die Seite über die Link-Komponente auf der Browserseite aufgerufen wird, sendet Next eine Anforderung an den Server, führt die Methode getServerSideProps auf dem Server aus und gibt dann JSON an den Browser zurück.

Funktion Seite({ Daten }) {
  // Daten rendern...
}

// Dies wird bei jeder Anfrage aufgerufen
exportiere asynchrone Funktion getServerSideProps(Kontext) {
  // Daten von externer API abrufen
  const res = warte auf Abruf(`https://.../data`)
  const Daten = warte auf res.json()

  // Daten über Props an die Seite weitergeben
  returniere { Eigenschaften: { Daten } }
}

Standardseite exportieren

CSS-Unterstützung

Hinzufügen eines globalen Stylesheets

Um das Stylesheet zu Ihrer Anwendung hinzuzufügen, importieren Sie die CSS-Datei in die Datei pages/_app.js.
In der Produktion werden alle CSS-Dateien automatisch zu einer einzigen minimierten CSS-Datei zusammengeführt.
Sie sollten nur das Stylesheet in die Datei pages/_app.js importieren.
Ab Next.js 9.5.4 können Sie CSS-Dateien aus dem Verzeichnis node_modules überall in Ihrer Anwendung importieren.
Für den Import von Drittanbieterkomponenten ist CSS erforderlich. Dies können Sie in der Komponente tun.

Hinzufügen von CSS auf Komponentenebene

[Name].Modul.css
//login.module.css
.loginDiv{
    Farbe: rot;
}

//Drittanbieter-Stil ändern.loginDiv:global(.active){
    Farbe: RGB (30, 144, 255) !wichtig;
}

Stile aus „./login.module.css“ importieren
<div Klassenname = {styles.loginDiv}/>

Next.js ermöglicht Ihnen den Import von Sass-Dateien mit den Erweiterungen .scss und .sass. Sie können Komponenten und Sass über CSS-Module und die Erweiterungen .module.scss oder .module.sass verwenden.

npm ich sass --save

Wenn Sie den Sass-Compiler konfigurieren möchten, können Sie den Parameter sassOptions in der Datei next.config.js verwenden.

const Pfad = require('Pfad')

modul.exporte = {
  sassOptions: {
    includePfade: [Pfad.join(__dirname, 'Stile')],
  },
}

CSS-in-JS

Jede vorhandene CSS-in-JS-Lösung kann verwendet werden. Der einfachste ist der Inline-Stil:

<p style={{ color: 'red' }}>Hallo</p>

Komponenten, die styled-jsx verwenden, sehen so aus

Funktion HalloWelt() {
  zurückkehren (
    <div>
      Hallo Welt
      <p>Bereich festgelegt!</p>
      <Stil jsx>{`
        P {
          Farbe: blau;
        }
        div {
          Hintergrund: rot;
        }
        @media (maximale Breite: 600px) {
          div {
            Hintergrund: blau;
          }
        }
      `}</style>
      <Stil global jsx>{`
        Körper {
          Hintergrund: schwarz;
        }
      `}</style>
    </div>
  )
}

Standardmäßig exportieren Hallo Welt

Benutzerdefinierter Header

<Kopf>
    <title>Technisch dicke Leute sind die dicksten! </Titel>
    <meta charSet='utf-8' />
</Kopf>

Dies ist das Ende dieses Artikels über das Einführungstutorial zu Next.js. Weitere Einführungsinhalte zu Next.js finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!