La cartella app
Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 2 di 47.
Apri l’elenco dei file. Un progetto Next.js ha una struttura, e questa ha un significato:
app/
layout.jsx the shell around every page
page.jsx the page at /
globals.css styles for the whole appDue nomi di file sono speciali e li userai continuamente:
page.jsx: trasforma una cartella in un URL visitabile.app/page.jsxè la home page,/.layout.jsx: racchiude le pagine che si trovano al suo interno. Il layout principale contiene<html>e<body>, quindi tutte le pagine lo condividono.
I nomi non sono una convenzione che puoi modificare. Next.js cerca questi nomi di file esatti. È così che una cartella di file diventa un'app con URL.
Il layout radice è bloccato in queste lezioni, quindi uno shell danneggiato non potrà mai mandare in crash la tua app. Lavorerai in app/page.jsx e nei file che aggiungerai tu.
Provalo tu
Questa lezione non include una sfida di codice.
Mettiti alla provaQuesta lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Nozioni essenziali di Next.js
4Server e Client
Due tipi di componentiLeggere l'erroreLa riga 'use client'Mantieni piccole le parti ClientServer dentro ClientRiepilogo: Server e Client7Navigazione lato client
Il link attivoRouting programmaticoFiltrare con l'URLGestori delle routeRiepilogo: navigazione2Routing e collegamenti
Le cartelle sono routeRoute annidateCollegare le pagineRoute dinamichePagine non trovateRiepilogo: routing5Dati sul server
Componenti asincroniIn attesa dei parametri della routeDue fetch contemporaneiStati di caricamentoGestione degli erroriRiepilogo: recupero dei dati8Progetto: Coddy Eats
Passaggio 1: La struttura
Passaggio 2: La griglia del menuPassaggio 3: Le pagine dei piattiPassaggio 4: Stato di caricamentoPassaggio 5: Titoli delle paginePassaggio 6: Aggiungi al carrelloPassaggio 7: Filtro per categoriaPassaggio 8: Lascia una recensionePassaggio 9: Ricerca in tempo reale