Next.js: Der endgültige Leitfaden zum beliebtesten React Framework-js-Tutorial-php.cn

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

Nach dem Login kopieren

Projektstruktur

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

Nach dem Login kopieren

Routing in Next.js 14

Grundlegende Seiten

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

Nach dem Login kopieren

Dynamische Routen

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

Nach dem Login kopieren

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>
  );
}

Nach dem Login kopieren

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>
  );
}

Nach dem Login kopieren

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>
  );
}

Nach dem Login kopieren

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 }
    );
  }
}

Nach dem Login kopieren

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
    />
  );
}

Nach dem Login kopieren

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>
  );
}

Nach dem Login kopieren

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>
  );
}

Nach dem Login kopieren

Stilisierung

CSS-Module

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

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

Nach dem Login kopieren

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>
  );
}

Nach dem Login kopieren

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*',
};

Nach dem Login kopieren

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();
  });
});

Nach dem Login kopieren

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;

Nach dem Login kopieren

Best Practices

Code-Organisation

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

Nach dem Login kopieren

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>
     );
   }

Nach dem Login kopieren

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>
     );
   }

Nach dem Login kopieren

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!