Next.js

Ar trebui să creezi o componentă Page folosind convențiile App Router ca punct principal de intrare în aplicația ta Next.js. Codul tău Next.js ar trebui să fie verificat folosind ESLint cu configurația recomandată pentru React și Next.js.

Fișierul de intrare

Acest șablon respectă structura App Router din Next.js. Fișierele soluției sunt:

• src/app/page.jsx — componenta de rută pe care o implementezi (Page).
• src/app/layout.jsx — layout-ul rădăcină (root layout) care îmbracă fiecare pagină (preîncărcat, doar pentru citire).
• next.config.js — configurația framework-ului (preîncărcat, doar pentru citire).

Un fișier src/app/globals.css este preîncărcat pentru stiluri.

Versiune

Rulează pe Node.js v20.0.0

Limbi suportate

Javascript

Framework de testare

Vitest

Memento-uri speciale și detalii de implementare

• Fișierele App Router sunt React Server Components în mod implicit. Acestea rulează pe server și nu au acces la API-urile browserului, stare sau efecte. Adaugă directiva 'use client' în partea de sus a fișierului pentru a transforma o componentă într-o Client Component atunci când ai nevoie de stare, efecte sau gestionari de evenimente (event handlers).
• Testul inițial importă componenta Page direct și o randează cu @testing-library/react — util pentru a face aserțiuni pe markup-ul randat fără a porni întregul runtime Next.js.
• Păstrează segmentele de rută sub src/app/ și denumește fișierele folosind convențiile Next.js (page.jsx, layout.jsx, loading.jsx, error.jsx, not-found.jsx).

Exemplu cu React Testing Library:

import { render, screen } from '@testing-library/react';
import Page from './src/app/page';

describe('Page', () => {
  test("renders 'Hello, World!'", () => {
    render(<Page />);
    expect(screen.getByText('Hello, World!')).toBeInTheDocument();
  });
});

Biblioteci incluse

• next
• react
• react-dom
• @testing-library/jest-dom
• @testing-library/react
• @testing-library/user-event
• @vitejs/plugin-react
• jsdom
• vitest

Cum să depanezi

Depanarea Next.js este similară cu depanarea React/JavaScript. Folosește console.log() în interiorul componentelor de tip Client Component sau în funcțiile utilitare pentru a inspecta valorile la rulare.

Pași pentru depanare folosind log-uri în consolă

1. Identifică zona cu probleme: Identifică exact componenta, hook-ul sau handler-ul de rută pe care îl suspectezi că nu funcționează corect.

2. Introdu instrucțiuni console.log(): Adaugă apeluri de logare înainte și după codul suspect. Reține că Server Components scriu log-uri în consola serverului — doar componentele Client Components ('use client' în partea de sus a fișierului) scriu în consola browserului.

3. Verifică rezultatele testelor tale (Results Output)

4. Folosește pictograma de debug din zona de previzualizare: Fă clic pe pictograma de debug din zona Preview pentru a verifica rezultatul consolei sau deschide consola DevTools a browserului tău.

5. Analizează rezultatul: Compară log-urile cu interfața grafică randată pentru a depista stări învechite (stale state), prop-uri incorecte sau re-randări neașteptate.

Iată un exemplu despre cum să folosești console.log() pentru depanare în Next.js:

'use client';

import { useState } from 'react';

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

  const handleClick = () => {
    console.log('Button clicked, current count:', count); // Log button click
    setCount(count + 1);
  };

  console.log('Current count:', count); // Log on every render

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}