Rumah >hujung hadapan web >tutorial js >Next.js: Panduan Definitif untuk Rangka Kerja Reaksi Paling Popular

Next.js: Panduan Definitif untuk Rangka Kerja Reaksi Paling Popular

Mary-Kate Olsenasal: 2024-12-07 08:27:14368semak imbas

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

Struktur Projek

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

Penghalaan dalam Next.js 14

Halaman Asas

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

Laluan Dinamik

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

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

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

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

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

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

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

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

Penggayaan

Modul CSS

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

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

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

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

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

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;

Amalan Terbaik

Organisasi Kod

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

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

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

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!

JavaScript typescript css Static Error JS

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Mengesan Apabila Pengguna Menatal ke Bahagian Bawah Elemen Bukan Tetingkap?Artikel seterusnya：Bagaimanakah Saya Boleh Mengesan Apabila Pengguna Menatal ke Bahagian Bawah Elemen Bukan Tetingkap?

Artikel berkaitan

Lihat lagi