Exploration de l’arborescence et des scripts

Découvre la structure des fichiers, les scripts de développement et la page d’accueil.

4 min read

Accéder gratuitement à cette formation

Renseigne ton email pour débloquer immédiatement cette formation gratuite.

Dans cette première étape, on va plonger dans la structure de ton projet movies-speaker généré par create-next-app en Next.js 15. L’objectif est de comprendre où se situent les principales briques (routes, styles, configurations, scripts) pour pouvoir rapidement naviguer et démarrer efficacement ton dev.

Arborescence générale

Voici le squelette minimal que tu retrouves juste après avoir lancé :

Terminal
1
npx create-next-app@latest movies-speaker
arborescence
1
movies-speaker/

2
├── next.config.js

3
├── package.json

4
└── app/

5
    ├── globals.css

6
    ├── layout.tsx

7
    └── page.tsx

La app/ est le point d’entrée de l’App Router (nouveau système de routing),
contrairement à l’ancien dossier pages/ de Next.js 13-.

Détail du dossier app/

arborescence app/
1
app/

2
├── components/      # tes UI React

3
├── history/         # route /history

4
├── login/           # route /login

5
├── register/        # route /register

6
├── server/          # logique serveur (RSC, Actions, DB, auth…)

7
├── globals.css      # styles globaux via Tailwind

8
├── layout.tsx       # wrapper HTML commun à toutes les pages

9
├── page.tsx         # route racine `/`

10
├── LoginForm.tsx    # Client Component du formulaire de login

11
└── RegisterForm.tsx # Client Component du formulaire d’inscription

Chaque dossier */page.tsx devient une route de ton appli.
Par exemple, app/login/page.tsx correspond à https://localhost:3000/login.

Scripts dans package.json

Avant tout dev, on jette un œil aux scripts prédéfinis :

package.json
1
{

2
  "name": "movies-speaker",

3
  "scripts": {

4
    "dev": "next dev",       // lance le serveur de dev

5
    "build": "next build",   // compile pour la prod

6
    "start": "next start"    // démarre le build en production

7
  },

8
  "dependencies": {

9
    "next": "^15.0.0",

10
    "react": "^18.0.0",

11
    "tailwindcss": "^3.0.0",

12
    "prisma": "^6.0.0"

13
  }

14
}
  • npm run dev ouvre ton appli en hot-reload sur http://localhost:3000.
  • build + start servent à tester la version compilée (SSR + RSC).

Configuration de Next.js

Le fichier next.config.js est généré vide par défaut.
Tu y ajouteras, par exemple, les domaines d’images autorisés ou des réécritures de route :

next.config.js
1
/** @type {import('next').NextConfig} */

2
const nextConfig = {

3
  images: {

4
    remotePatterns: [

5
      {

6
        protocol: 'https',

7
        hostname: 'image.tmdb.org',

8
      },

9
    ],

10
  },

11
};

12


13
export default nextConfig;

Ici, on autorise image.tmdb.org pour l’optimisation des posters via <Image />.

Le cœur de l’App : layout.tsx et page.tsx

layout.tsx

C’est le wrapper partagé sur toutes les routes :

app/layout.tsx
1
export default async function RootLayout({ children }) {

2
  const user = await getOptionalUser(); // RSC côté serveur

3
  return (

4
    <html lang="en">

5
      <body>

6
        <header>…navbar…</header>

7
        {children}

8
      </body>

9
    </html>

10
  );

11
}
  • Le layout est un React Server Component : tu peux y appeler directement des fonctions côté serveur (getOptionalUser).

page.tsx (home)

La route / qui affiche la liste de films et séries :

app/page.tsx
1
export default async function Home() {

2
  const [movies, series, user] = await Promise.all([

3
    getMovies(),

4
    getSeries(),

5
    getOptionalUser(),

6
  ]);

7


8
  return (

9
    <main>

10
      <h1>Movies</h1>

11
      <div>…boucle produits…</div>

12
      <h1>Series</h1>

13
      <div>…boucle séries…</div>

14
    </main>

15
  );

16
}
  • React Server Component par défaut dès que tu utilises async + await
  • Les appels getMovies(), getSeries() et getOptionalUser() s’effectuent
    côté serveur, sans exposer tes clés d’API ou la couche Prisma au client.

Le dossier server/

On isole toute la logique back-end (Prisma, auth, appels API externes) :

arborescence app/server/
1
app/server/

2
├── db.ts        # instanciation de PrismaClient

3
├── session.ts   # gestion du cookie de session

4
├── auth.ts      # Server Actions pour login/register

5
├── movies.ts    # wrappers TMDB + RSC pour fetch et cache

6
└── history.ts   # ajout / suppression / lecture historique

Chaque fonction exportée est précédée de use server ou use cache
pour indiquer à Next.js de ne pas la compiler pour le client.

Workflow de développement

  1. Install & configure :
    Terminal
    1
    npm install
  2. Lancer le dev :
    Terminal
    1
    npm run dev
  3. Ouvre http://localhost:3000 et vérifie que ton titre et tes routes
    s’affichent bien.
  4. Ajoute des dossiers et fichiers dans app/ pour créer de nouvelles routes.

Exercices rapides

  1. Explore la racine et note les scripts disponibles (dev, build, start).
    Lance npm run dev puis stoppe-le.
  2. Ouvre next.config.js et ajoute un domaine imaginaire (ex. example.com)
    sous images.remotePatterns. Redémarre le serveur et vérifie qu’aucune
    erreur n’apparaît.
  3. Crée dans app/ une nouvelle route about/page.tsx qui affiche
    <h1>À propos</h1>. Ouvre http://localhost:3000/about.
    • Bonus : teste avec un composant async qui retourne du contenu après
      un await new Promise(r => setTimeout(r, 500)).

Tu maîtrises maintenant l’ossature de ton projet Next.js 15, son routing,
la séparation front / back, et la configuration initiale. On passe
au chargement des données avec Prisma et TMDB dans la prochaine leçon !

Dans cette leçon