Einführung in Next.js: Erstellen Ihrer ersten Anwendung

Next.js ist ein beliebtes React-Framework, das es Entwicklern ermöglicht, schnelle, servergerenderte Anwendungen zu erstellen. Es bietet sofort einsatzbereite leistungsstarke Funktionen wie statische Site-Generierung (SSG), serverseitiges Rendering (SSR) und API-Routen. In diesem Leitfaden führen wir Sie durch den Prozess der Erstellung Ihrer ersten Next.js-Anwendung und konzentrieren uns dabei auf Schlüsselkonzepte und praktische Beispiele.

1. Einrichten Ihres Next.js-Projekts

Um mit Next.js beginnen zu können, muss Node.js auf Ihrem Computer installiert sein. Sobald Sie Node.js eingerichtet haben, können Sie mit dem folgenden Befehl eine neue Next.js-Anwendung erstellen:

npx create-next-app my-next-app

Dieser Befehl erstellt ein neues Verzeichnis namens my-next-app mit allen notwendigen Dateien und Abhängigkeiten, um eine Next.js-Anwendung zu starten.

2. Navigieren in der Projektstruktur

Nachdem Sie Ihr Projekt erstellt haben, navigieren Sie zum Projektverzeichnis:

cd my-next-app

Im Verzeichnis „my-next-app“ finden Sie eine Struktur ähnlich dieser:

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

Im Seitenverzeichnis erstellen Sie die Seiten Ihrer Anwendung, während „public“ für statische Assets vorgesehen ist.

3. Erstellen Sie Ihre erste Seite

Next.js verwendet ein dateibasiertes Routingsystem. Um eine neue Seite zu erstellen, fügen Sie einfach eine neue JavaScript-Datei im Seitenverzeichnis hinzu. Erstellen Sie beispielsweise eine Datei mit dem Namen about.js:

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of my first Next.js application!</p>
      <Link href="/">Go back home</Link>
    </div>
  );
}

In diesem Beispiel haben wir eine einfache Info-Seite erstellt und die Link-Komponente verwendet, um zurück zur Startseite zu navigieren.

4. Ändern der Startseite

Öffnen Sie die Datei index.js im Seitenverzeichnis. Diese Datei stellt die Homepage Ihrer Anwendung dar. Sie können es wie folgt ändern:

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <p>
        This is my first application built with Next.js.{' '}
        <Link href="/about">Learn more about me</Link>
      </p>
    </div>
  );
}

Hier haben wir ein einfaches Styling und einen Link zur About-Seite hinzugefügt.

5. Hinzufügen von Stilen zu Ihrer Anwendung

Next.js unterstützt standardmäßig CSS-Module. Um Ihre Komponenten zu formatieren, können Sie im Styles-Verzeichnis ein CSS-Modul erstellen. Erstellen Sie beispielsweise eine Datei mit dem Namen Home.module.css:

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

Als nächstes importieren Sie dieses CSS-Modul in Ihre index.js-Seite, wie im vorherigen Abschnitt gezeigt.

6. Daten mit Next.js abrufen

Next.js erleichtert das Abrufen von Daten mit getStaticProps für die statische Site-Generierung oder getServerSideProps für serverseitiges Rendering. Um beispielsweise Daten auf der Startseite abzurufen, können Sie index.js wie folgt ändern:

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

In diesem Code rufen wir eine Liste von Beiträgen von einer öffentlichen API ab und zeigen sie auf der Startseite an.

7. API-Routen erstellen

Mit Next.js können Sie API-Routen im Verzeichnis „pages/api“ erstellen. Diese Routen können zum Aufbau Ihrer Backend-Funktionalität verwendet werden. Erstellen Sie beispielsweise eine Datei mit dem Namen hello.js im Verzeichnis „pages/api“:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

Sie können auf diese API-Route zugreifen, indem Sie zu http://localhost:3000/api/hello navigieren.

8. Bereitstellen Ihrer Next.js-Anwendung

Sobald Ihre Anwendung fertig ist, können Sie sie problemlos bereitstellen. Vercel ist die empfohlene Hosting-Plattform für Next.js-Anwendungen. Sie können Ihre App bereitstellen, indem Sie die folgenden Schritte ausführen:

1. Erstellen Sie ein Vercel-Konto, falls Sie noch keins haben.

2. Installieren Sie die Vercel-CLI global:
   

   npx create-next-app my-next-app
   

3. Führen Sie den folgenden Befehl in Ihrem Projektverzeichnis aus:
   

   cd my-next-app
   

4. Folgen Sie den Anweisungen, um Ihre Anwendung bereitzustellen.

9. Dynamisches Routing hinzufügen

Next.js unterstützt dynamisches Routing mit Klammern. Wenn Sie beispielsweise eine dynamische Blog-Beitragsseite erstellen möchten, können Sie eine Datei mit dem Namen [id].js im Verzeichnis „pages/posts“ erstellen:

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

Sie können jetzt auf einen bestimmten Beitrag zugreifen, indem Sie zu /posts/1, /posts/2 usw. navigieren.

10. Globale Stile implementieren

Wenn Sie globale Stile auf Ihre Anwendung anwenden möchten, können Sie dies tun, indem Sie eine Datei mit dem Namen _app.js im Seitenverzeichnis erstellen:

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of my first Next.js application!</p>
      <Link href="/">Go back home</Link>
    </div>
  );
}

Als nächstes erstellen Sie eine globals.css-Datei im Styles-Verzeichnis und fügen Ihre globalen Styles hinzu:

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <p>
        This is my first application built with Next.js.{' '}
        <Link href="/about">Learn more about me</Link>
      </p>
    </div>
  );
}

11. Umgebungsvariablen verwenden

Next.js unterstützt Umgebungsvariablen zum Speichern sensibler Informationen. Sie können eine .env.local-Datei im Stammverzeichnis Ihres Projekts erstellen und Ihre Variablen hinzufügen:

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

Sie können dann in Ihrer Anwendung mit „process.env“ auf diese Variable zugreifen:

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Herzlichen Glückwunsch zum Erstellen Ihrer ersten Next.js-Anwendung! Während dieser Reise haben Sie gelernt, wie Sie Ihr Projekt einrichten, dynamische Seiten erstellen, Daten nahtlos abrufen, robustes Routing implementieren und Ihre Anwendung problemlos bereitstellen.

Next.js ist mehr als nur ein Framework; Es ist ein leistungsstarkes Tool, das Ihr Webentwicklungserlebnis erheblich verbessern kann. Seine integrierten Funktionen, wie statische Site-Generierung (SSG) und serverseitiges Rendering (SSR), ermöglichen Ihnen die Erstellung schneller, benutzerfreundlicher Anwendungen, die für Leistung und SEO optimiert sind.

Nächste Schritte auf Ihrer Next.js-Reise

Nachdem Sie Ihre erste Next.js-Anwendung erfolgreich erstellt haben, ist es an der Zeit, Ihre Fähigkeiten auf die nächste Stufe zu bringen. In dieser kommenden Beitragsreihe werden wir uns eingehender mit einigen der erweiterten Funktionen von Next.js befassen, die Ihre Anwendungen verbessern und Ihren Entwicklungsprozess optimieren können.

Middleware ist eine leistungsstarke Funktion, mit der Sie die Funktionalität Ihrer Anwendung erweitern können, indem Sie benutzerdefinierte Logik hinzufügen, bevor eine Anfrage abgeschlossen ist. Dies bedeutet, dass Sie die Anforderungs- und Antwortobjekte bearbeiten, Benutzer authentifizieren und sogar Weiterleitungen nahtlos verwalten können.

Als nächstes beschäftigen wir uns mit Static Site Generation (SSG). Diese Technik rendert Seiten zum Zeitpunkt der Erstellung vorab und ermöglicht so schnelle Ladegeschwindigkeiten und eine verbesserte SEO-Leistung. Wenn Sie verstehen, wie Sie SSG nutzen, können Sie Anwendungen erstellen, die nicht nur dynamisch, sondern auch unglaublich effizient sind.

Abschließend befassen wir uns mit API-Routen, einer Funktion, mit der Sie serverlose Funktionen direkt in Ihrer Next.js-Anwendung erstellen können. Dies bedeutet, dass Sie Anfragen und Antworten bearbeiten können, ohne einen separaten Server zu benötigen, was die Entwicklung von Full-Stack-Anwendungen mit weniger Overhead erleichtert.

Folgen Sie mir auf unserer spannenden Reise in die erweiterten Funktionen von Next.js. Mit diesen Tools können Sie robuste, leistungsstarke Anwendungen erstellen, die sich wirklich von der Masse abheben. Seien Sie gespannt auf unseren nächsten Beitrag!

Sie können diesen Beitrag auch lesen auf:

Einführung in Next.js: Erstellen Ihrer ersten Anwendung

Next.js ist ein beliebtes React-Framework, mit dem Entwickler schnelle, vom Server gerenderte Anwendungen erstellen können. Es bietet leistungsstarke Funktionen sofort einsatzbereit!

salmaniyad.hashnode.dev

Finden Sie mich auf:

SalmanIyad · GitHub

Computersystemingenieur | Webentwickler. SalmanIyad verfügt über 31 Repositories. Folgen Sie ihrem Code auf GitHub.

github.com

Das obige ist der detaillierte Inhalt vonEinführung in Next.js: Erstellen Ihrer ersten Anwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!