Next.js: Panduan Definitif untuk Rangka Kerja Reaksi Paling 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

1. Rendering Hibrid

   • Rendering Sebelah Pelayan (SSR)
   • Penjanaan Tapak Statik (SSG)
   • Rendering Sebelah Pelanggan (CSR)
   • Penjanaan Semula Statik Bertambah (ISR)

2. Pengoptimuman Automatik

   • Pengoptimuman Imej
   • Pengoptimuman fon
   • Pengoptimuman skrip
   • Konfigurasi sifar

3. 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 id="Bienvenidos-a-Next-js">Bienvenidos a Next.js</h1>
    </main>
  );
}

Laluan Dinamik

// app/blog/[slug]/page.tsx
export default function BlogPost({ params }: { params: { slug: string } }) {
  return (
    <article>
      <h1 id="Post-params-slug">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 (
    
      
        <nav>
          {/* Navegación común */}
        </nav>
        {children}
      
    
  );
}

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 id="post-title">{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 id="post-title">{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></image>
  );
}

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

1. Organisasi Kod

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

1. Ralat Pengendalian

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

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

1. 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>
       </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!