Heim >Web-Frontend >js-Tutorial >Next.js: Der endgültige Leitfaden zum beliebtesten React Framework

Next.js: Der endgültige Leitfaden zum beliebtesten React Framework

Mary-Kate OlsenOriginal: 2024-12-07 08:27:14368Durchsuche

Next.js: La Guía Definitiva del Framework React más Popular

Next.js hat sich zum beliebtesten React-Framework für die Erstellung moderner Webanwendungen entwickelt. Mit seinem Fokus auf serverseitigem Rendering (SSR), statischer Generierung und einer hervorragenden Entwicklungserfahrung bietet Next.js alles, was Sie zum Erstellen leistungsstarker, skalierbarer Webanwendungen benötigen.

Warum Next.js?

Hauptmerkmale

Hybrid-Rendering
- Serverseitiges Rendering (SSR)
- Statische Site-Generierung (SSG)
- Clientseitiges Rendering (CSR)
- Inkrementelle statische Regeneration (ISR)
Automatische Optimierungen
- Bildoptimierung
- Schriftoptimierung
- Skriptoptimierung
- Keine Konfiguration
Entwicklererfahrung
- Schnelle Aktualisierung
- TypeScript-Unterstützung
- Dateisystem-Routing
- API-Routen

Erste Schritte

Ein Projekt erstellen

npx create-next-app@latest mi-proyecto
cd mi-proyecto
npm run dev

Projektstruktur

├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── public/
│   └── images/
├── components/
│   └── ui/
├── lib/
├── next.config.js
└── package.json

Routing in Next.js 14

Grundlegende Seiten

// app/page.tsx
export default function Home() {
  return (
    <main>
      <h1>Bienvenidos a Next.js</h1>
    </main>
  );
}

Dynamische Routen

// app/blog/[slug]/page.tsx
export default function BlogPost({ params }: { params: { slug: string } }) {
  return (
    <article>
      <h1>Post: {params.slug}</h1>
    </article>
  );
}

Gemeinsames Layout

// app/layout.tsx
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <nav>
          {/* Navegación común */}
        </nav>
        {children}
      </body>
    </html>
  );
}

Datenabruf

Serverkomponenten

// app/posts/page.tsx
async function getPosts() {
  const res = await fetch('https://api.ejemplo.com/posts', {
    next: { revalidate: 3600 } // Revalidar cada hora
  });
  return res.json();
}

export default async function Posts() {
  const posts = await getPosts();

  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

Statische Erzeugung

// app/posts/[id]/page.tsx
export async function generateStaticParams() {
  const posts = await getPosts();

  return posts.map((post) => ({
    id: post.id.toString(),
  }));
}

export default async function Post({ params }: { params: { id: string } }) {
  const post = await getPost(params.id);

  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

API-Routen

// app/api/posts/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  try {
    const posts = await getPosts();
    return NextResponse.json(posts);
  } catch (error) {
    return NextResponse.json(
      { error: 'Error al obtener posts' },
      { status: 500 }
    );
  }
}

export async function POST(request: Request) {
  try {
    const data = await request.json();
    const newPost = await createPost(data);
    return NextResponse.json(newPost, { status: 201 });
  } catch (error) {
    return NextResponse.json(
      { error: 'Error al crear post' },
      { status: 500 }
    );
  }
}

Optimierungen

Bilder

import Image from 'next/image';

export default function Profile() {
  return (
    <Image
      src="/perfil.jpg"
      alt="Foto de perfil"
      width={500}
      height={300}
      priority
    />
  );
}

Schriftarten

import { Roboto } from 'next/font/google';

const roboto = Roboto({
  weight: ['400', '700'],
  subsets: ['latin'],
  display: 'swap',
});

export default function Layout({ children }) {
  return (
    <div className={roboto.className}>
      {children}
    </div>
  );
}

Staatsverwaltung

Client-Komponenten

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Incrementar
      </button>
    </div>
  );
}

Stilisierung

CSS-Module

// components/Button.tsx
import styles from './Button.module.css';

export default function Button({ children }) {
  return (
    <button className={styles.button}>
      {children}
    </button>
  );
}

Rückenwind-CSS

export default function Card({ title, content }) {
  return (
    <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
      <div>
        <div className="text-xl font-medium text-black">{title}</div>
        <p className="text-gray-500">{content}</p>
      </div>
    </div>
  );
}

Middleware

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // Verificar autenticación
  const token = request.cookies.get('token');

  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: '/dashboard/:path*',
};

Testen

// __tests__/Home.test.tsx
import { render, screen } from '@testing-library/react';
import Home from '@/app/page';

describe('Home', () => {
  it('renders a heading', () => {
    render(<Home />);
    const heading = screen.getByRole('heading', { level: 1 });
    expect(heading).toBeInTheDocument();
  });
});

Einsatz

Produktionskonfiguration

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['tu-dominio.com'],
  },
  async redirects() {
    return [
      {
        source: '/old-page',
        destination: '/new-page',
        permanent: true,
      },
    ];
  },
};

module.exports = nextConfig;

Best Practices

Code-Organisation

   app/
   ├── (auth)/
   │   ├── login/
   │   └── register/
   ├── (dashboard)/
   │   ├── profile/
   │   └── settings/
   └── (marketing)/
       ├── about/
       └── contact/

Behandlungsfehler

   // app/error.tsx
   'use client';

   export default function Error({
     error,
     reset,
   }: {
     error: Error & { digest?: string };
     reset: () => void;
   }) {
     return (
       <div>
         <h2>¡Algo salió mal!</h2>
         <button onClick={() => reset()}>Intentar de nuevo</button>
       </div>
     );
   }

Ladezustände

   // app/loading.tsx
   export default function Loading() {
     return (
       <div className="flex items-center justify-center">
         <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900" />
       </div>
     );
   }

Abschluss

Next.js 14 bietet:

Außergewöhnliche Leistung
Ausgezeichnete DX (Entwicklererfahrung)
Skalierbarkeit
Rendering-Flexibilität
Nahtlose Integration mit React

Es ist die ideale Wahl für:

Business-Webanwendungen
E-Commerce-Websites
SaaS-Anwendungen
Websites mit dynamischem Inhalt

Zusätzliche Ressourcen

Offizielle Dokumentation
Next.js-Beispiele
Next.js lernen
Vercel-Blog

Verwenden Sie Next.js in Ihren Projekten? Welche Funktionen finden Sie am nützlichsten? Teilen Sie Ihre Erfahrungen in den Kommentaren! ?

nextjs #react #webdev #javascript

Das obige ist der detaillierte Inhalt vonNext.js: Der endgültige Leitfaden zum beliebtesten React Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript typescript css Static Error JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie kann ich erkennen, wenn ein Benutzer zum Ende eines Nicht-Fensterelements scrollt?Nächster Artikel：Wie kann ich erkennen, wenn ein Benutzer zum Ende eines Nicht-Fensterelements scrollt?

In Verbindung stehende Artikel

Mehr sehen