Next.js (TypeScript)

Ar trebui să creezi o componentă Page folosind convențiile App Router ca punct principal de intrare al aplicației tale Next.js. Codul tău Next.js ar trebui să fie verificat (linted) folosind ESLint cu configurația recomandată pentru React, Next.js și TypeScript.

Fișier de intrare

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

• src/app/page.tsx — componenta de rută pe care o implementezi (Page).
• src/app/layout.tsx — structura de bază (root layout) care îmbracă fiecare pagină (preîncărcată, read-only).
• next.config.js — configurația framework-ului (preîncărcată, read-only).

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

Versiune

Rulează pe Node.js v20.0.0

Limbi suportate

TypeScript

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 (state) sau efecte (effects). 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ă direct Page ș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.
• Tipizează explicit proprietățile (props) componentei. Layout-ul rădăcină folosește { children: React.ReactNode }; fă același lucru pentru orice layout sau pagină care acceptă copii (children).

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
• typescript
• vitest

Cum să depanezi

Depanarea Next.js cu TypeScript este similară cu depanarea React/TypeScript. Folosește console.log() în interiorul Client Components sau al funcțiilor utilitare pentru a inspecta valorile la rulare și bazează-te pe verificatorul de tipuri (type checker) pentru a prinde multe probleme înainte de a ajunge la rulare.

Pași pentru depanare folosind logurile din 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. Inserează instrucțiuni console.log(): Adaugă apeluri de logare înainte și după codul suspect. Reține că Server Components înregistrează logurile în consola serverului — doar Client Components ('use client' în partea de sus a fișierului) înregistrează logurile în consola browserului.

3. Verifică rezultatul (Output) testelor tale

4. Folosește pictograma de depanare (Debug) din zona de previzualizare: Fă clic pe pictograma de depanare din zona Preview pentru a verifica ieșirea din consolă sau deschide consola DevTools a browserului tău.

5. Analizează rezultatul: Compară logurile cu interfața grafică randată pentru a depista stări învechite, proprietăți (props) incorecte sau re-randări neașteptate.

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

'use client';

import { useState, type FC } from 'react';

const Counter: FC = () => {
  const [count, setCount] = useState<number>(0);

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

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

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

export default Counter;