Topics

Next.js, ein beliebtes Framework für die Webentwicklung, hat in Version 13 den neuen App Router als Standard-Routingsystem eingeführt.

Ich bin sicher, dass es einige Leute gibt, die an Projekten beteiligt sind, die sowohl Pages Router als auch App Router verwenden, und sich nicht sicher sind, wie sie es schreiben sollen. Das bin ich!!

Insbesondere gibt es erhebliche Unterschiede zwischen dem Pages Router und dem App Router in Bereichen, die den Kern der Anwendungsentwicklung betreffen, z. B. wie Routen basierend auf der Dateistruktur definiert werden, wie dynamische Teile von URLs verarbeitet werden, wie das Rendering funktioniert und wie Daten von APIs abgerufen werden.

Ich konzentriere mich auf die „häufig verwechselten“ Punkte und liste zur Erinnerung kurz die Hauptunterschiede zwischen Pages Router und App Router auf!

Unterschiede beim Dateirouting

Pages Router: Die einfache Konvertierung von Dateinamen in Pfade

Unter dem Seitenverzeichnis platziert.js, .jsx, .ts, .tsxEs ist so einfach, dass der Dateiname zum URL-Pfad wird.

Beispiel:src/page/about.tsx⇒ Routing ist/aboutEs wird sein.

App Router: Organisieren nach Ordner und bestimmten Dateinamen

App Routersrc/appSie können routen, indem Sie Ordner und Dateien darunter platzieren.

Wenn Sie jedoch dem für das Routing verwendeten Dateinamen einen bestimmten Dateinamen namens „Seite“ hinzufügen, wird dieser als Inhalt der Seite behandelt, die diesem Pfad entspricht.

Beispiel:src/app/about/page.tsx⇒ Routing ist/aboutEs wird sein.

Spezielle Dateien, die App Router charakterisieren

Neben page.tsx gibt es im App Router noch weitere sinnvolle Dateien.

app/
├── page.tsx --> Seiteninhalt. Diese Datei werden Sie am häufigsten verwenden.
├── route.tsx --> API-Definition (kann nicht mit page.js koexistieren).
├── layout.tsx --> Allgemeines Erscheinungsbild.
├── loading.tsx --> Ladebildschirm.
├── error.tsx --> Fehlerbildschirm.
├── global-error.tsx --> Globaler Fehlerbildschirm.
├── template.tsx --> Allgemeines Erscheinungsbild (Layout zurücksetzen).
├── default.tsx --> Standardbildschirm.
└── not-found.tsx --> Bildschirm, der angezeigt wird, wenn die Funktion „notFound“ ausgelöst wird.

Was mich persönlich überrascht hat, war not-found.tsx. Allein durch die Vorbereitung dieser Seite wird sie automatisch angezeigt, wenn man auf eine nicht existierende URL zugreift. Ich war beeindruckt, wie einfach die Implementierung war.

Rendering-Unterschiede

Komponenten im Pages Router sind grundsätzlich so konzipiert, dass sie auf der Clientseite interaktiv sind, und das Rendering auf der Serverseite dient hauptsächlich der Beschleunigung der Erstanzeige und SEO-Zwecken.useState oder useEffectSie können React Hooks wie diese frei in Ihrer Seitenkomponente und deren untergeordneten Komponenten verwenden.

Auf der anderen Seite, App Routerapp/Die Komponenten inSofern nicht ausdrücklich anders angegeben, wird es standardmäßig als Serverkomponente behandelt..DaheruseState oder useEffect wie zum BeispielReact-Hooks sind nicht verfügbarClientseitige Aktionen, wie etwa onClickEventhandler sind ebenfalls nicht verfügbar.

Um also einen CSR mit App Router zu erstellen,use clientSchreiben:

use client

Serverkomponente und ClientkomponenteGrenzen festlegenIst.use clientWenn Sie es deklarieren, werden nicht nur diese Komponente, sondern alle ihre Importe als Clientkomponenten betrachtet.

Dynamisches Routing [○○]

Next.js bietet einen Mechanismus zur Handhabung „dynamischer URLs“, bei denen sich ein Teil der URL je nach Benutzer oder Inhalt ändert, beispielsweise Detailseiten von Blogs oder Nachrichtenartikeln.Dynamisches RoutingIst.

Angenommen, es gibt einen Link, der Sie zu Artikel A und Artikel B führt.

import Link from "next/link";
const linkStyle=`ext-lg font-bold border-b border-primary px-1`

export default function page() {
  return (
    <div>
      <div className="flex gap-6">
        <Link href="/post/A" className={linkStyle}>記事Aへのリンク</Link>
        <Link href="/post/B" className={linkStyle}>記事Bへのリンク</Link>
      </div>
    </div>
  );
}

Linkziele

Wenn Sie dynamisches Routing verwenden möchten,[slug]Wenn Sie eine Datei mit dem Namenpost/AAberpost/BSie können jedoch dieselbe Vorlage verwenden.
*Die Nennung in [ ] ist optional.slugEs muss nicht sein

App Router

/app/post/[slug]/page.tsx

export default aysinc function PostPage({ params }: { params: Promise<{ slug: string }>) {
  const {slug}= await params;
  return (
    <div>
      <h1>記事: {slug}</h1>
    </div>
  );
}

paramsWir verwenden.params.slugzur URL[slug]Das Teil wird mitgeliefert.

※ paramsBisher musste die Parametererfassung nicht asynchron erfolgen, ab Next.js 15 wurde sie jedoch auf asynchron geändert.propsEs scheint, dass Sie es als Promise-Typ definieren müssen.

Für Seiten Rouer

/pages/post/[slug].tsx

import { useRouter } from 'next/router';

export default function PostPage() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>記事: {slug}</h1>
    </div>
  );
}

useRouterWir verwenden.router.query.slugzur URL[slug]Der Wert des Teils wird eingetragen.

So erhalten Sie API-Daten

microCMS, das in dieser Liberogic-Kolumne eine wichtige Rolle spielt, funktioniert gut mit Frameworks wie Next.js.

App Router

Halte es einfachfetchoderaysnc awaitSie können

Jedoch,use clientDie Datei, die dies deklariert, wird zu einer CSR.aysnc awaitnicht mehr verwendbar!

async function getPost() {
  const res = await fetch(`https://.../api/data/`);

  // エラーハンドリング例
  if (!res.ok) {
     throw new Error(`Failed to fetch post: ${res.status}`);
  }

  return res.json();
}

Angerufener

export default function Example() {
   const data = await getPost()
   // ... data を使って表示 ...
}

Für Pages Router

getStaticPropsDie Daten, die mitpropszur Seitenkomponente.

export async function getServerSideProps(context) {
  // context.req, context.res などにアクセス可能
  const res = await fetch(`https://.../api/data/`, {
     headers: { Cookie: context.req.headers.cookie } // 例: Cookieを渡す
  });
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

Angerufener

export default function Example({ data }) {
  // ... data を使って表示 ...
}

Verstehen Sie die beiden Router und beherrschen Sie Next.js!

In meinem Fall war das erste Projekt, für das ich Next.js verwendet habe, App Router.

Später, als ich an einem anderen Projekt arbeitete und Pages Router verwendete, fragte ich mich: „Sollte der Dateiname beim Erstellen einer neuen Seite index.tsx oder page.tsx lauten?“

Dieser Artikel deckt nur einen kleinen Teil von Next.js ab, aber durch die Betrachtung der Unterschiede zwischen App Router und Pages Router konnte ich mir ein klareres Bild davon machen.

Mir persönlich gefällt, wie einfach es ist, App Router zu schreiben, aber ich möchte auch Pages Router-Projekte handhaben können.

Ideal wäre es, ein tieferes Verständnis von Next.js zu erlangen und je nach Projekt oder Arbeit unterschiedliche Router verwenden zu können!