Next.js: Panduan Definitif untuk Rangka Kerja Reaksi Paling Popular-tutorial js-php.cn

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

Next.js telah menjadi rangka kerja React yang paling popular untuk membina aplikasi web moden. Dengan tumpuannya pada pemaparan sisi pelayan (SSR), penjanaan statik dan pengalaman pembangunan yang sangat baik, Next.js menawarkan semua yang anda perlukan untuk membina aplikasi web berprestasi tinggi dan berskala.

Mengapa Next.js?

Ciri-ciri Utama

Rendering Hibrid
- Rendering Sebelah Pelayan (SSR)
- Penjanaan Tapak Statik (SSG)
- Rendering Sebelah Pelanggan (CSR)
- Penjanaan Semula Statik Bertambah (ISR)
Pengoptimuman Automatik
- Pengoptimuman Imej
- Pengoptimuman fon
- Pengoptimuman skrip
- Konfigurasi sifar
Pengalaman Pembangun
- Muat Semula Cepat
- Sokongan TypeScript
- Penghalaan sistem fail
- Laluan API

Langkah Pertama

Mencipta Projek

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

Salin selepas log masuk

Struktur Projek

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

Salin selepas log masuk

Penghalaan dalam Next.js 14

Halaman Asas

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

Salin selepas log masuk

Laluan Dinamik

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

Salin selepas log masuk

Reka Letak Dikongsi

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

Salin selepas log masuk

Pengambilan Data

Komponen Pelayan

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

Salin selepas log masuk

Penjanaan Statik

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

Salin selepas log masuk

Laluan API

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

Salin selepas log masuk

Pengoptimuman

Imej

import Image from 'next/image';

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

Salin selepas log masuk

Fon

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

Salin selepas log masuk

Pengurusan Negeri

Komponen Pelanggan

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

Salin selepas log masuk

Penggayaan

Modul CSS

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

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

Salin selepas log masuk

CSS Tailwind

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

Salin selepas log masuk

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

Salin selepas log masuk

Menguji

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

Salin selepas log masuk

Kerahan

Konfigurasi Pengeluaran

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

Salin selepas log masuk

Amalan Terbaik

Organisasi Kod

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

Salin selepas log masuk

Ralat Pengendalian

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

Salin selepas log masuk

Memuatkan Negeri

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

Salin selepas log masuk

Kesimpulan

Tawaran Next.js 14:

Prestasi luar biasa
DX (Pengalaman Pembangun) Cemerlang
Skalabiliti
Fleksibiliti pemaparan
Penyatuan lancar dengan React

Ia adalah pilihan ideal untuk:

Aplikasi web perniagaan
Tapak e-dagang
Aplikasi SaaS
Tapak kandungan dinamik

Sumber Tambahan

Dokumentasi Rasmi
Contoh Next.js
Ketahui Seterusnya.js
Blog Vercel

Adakah anda menggunakan Next.js dalam projek anda? Apakah ciri yang anda rasa paling berguna? Kongsi pengalaman anda dalam komen! ?

nextjs #react #webdev #javascript

Atas ialah kandungan terperinci Next.js: Panduan Definitif untuk Rangka Kerja Reaksi Paling Popular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!