Maîtrisez Next.js, le framework React pour applications modernes : commandes CLI, SSR, SSG, App Router et déploiement sur Vercel pour la performance.
npx create-next-app@latest
Crée une nouvelle application Next.js
--ts--typescript--js--javascript--tailwind--eslint--app--src-dir--import-alias--use-npm--use-yarn--use-pnpm--use-bun--example-e--example-path--no-git--skip-install--empty--turbo
npm run dev
Lance le serveur de développement Next.js
---p--port-H--hostname--experimental-https--experimental-https-key--experimental-https-cert--experimental-https-ca--turbo--turbo-root⚠️--turbopack--experimental-test-proxy--disable-source-maps--inspect--max-old-space-size--enable-experimental-web-platform-features⚠️
next dev
Lance le serveur de développement (via npx)
-p--port-H--hostname--experimental-https--turbo--turbopack--disable-source-maps
npm run build
Compile l'application Next.js pour la production
----profile--debug--no-lint--no-mangling--experimental-build-mode--experimental-debug-memory-usage--experimental-worker-threads--max-old-space-size--generate-build-id
next build
Build l'application Next.js (via npx)
--profile--debug--no-lint--no-mangling--experimental-build-mode--experimental-debug-memory-usage--experimental-worker-threads--max-old-space-size
npm run start
Démarre le serveur de production Next.js
---p--port-H--hostname--keepAliveTimeout--max-old-space-size
next start
Démarre le serveur de production (via npx)
-p--port-H--hostname--keepAliveTimeout--max-old-space-size
npm run lint
Lance ESLint pour vérifier le code Next.js
----fix⚠️--dir--file⚠️--ext--config-c--ignore-path--no-ignore--quiet--max-warnings--format⚠️-f⚠️--output-file⚠️-o--cache--no-cache--cache-location--cache-strategy--rulesdir⚠️--resolve-plugins-relative-to⚠️
next lint
Lance ESLint Next.js (via npx)
--fix⚠️--dir--file⚠️--ext--quiet--max-warnings
npm run telemetry
Gère les paramètres de télémétrie Next.js
--statusenabledisable
next telemetry
Gère la télémétrie Next.js (via npx)
statusenabledisable
next info
Affiche les informations système et de version Next.js
--verbose
next experimental-compile
Compile expérimentalement le projet Next.js
--watch--force⚠️
next export
Exporte l'application en fichiers statiques HTML
-o--outdir--threads--concurrency--silent
next import
Importe un projet depuis un autre framework
npx next@latest upgrade
Met à niveau Next.js vers la dernière version
--force⚠️--no-frozen-lockfile⚠️
npx @next/codemod
Exécute des codemods pour migrer le code Next.js
--force⚠️--dry--print--verbose--ignore-config--parser--extensions-j--jobs
npx next-codemod
Alias pour les codemods Next.js
--force⚠️--dry--print--verbose
npx vercel
Déploie l'application Next.js sur Vercel
--prod--confirm--no-clipboard--token-t--scope-S--name--env--build-env--meta--regions⚠️--archive--prebuilt--with-cache--skip-domain--force⚠️--yes-y--public--no-wait--debug--version-v
npx vercel dev
Lance l'environnement de développement Vercel
--listen-l--port-p--confirm--debug
npx vercel env
Gère les variables d'environnement Vercel
lsaddrm⚠️pull
npx vercel link
Lie le projet local à un projet Vercel
--repo⚠️--project--scope--confirm
npx vercel pull
Télécharge les variables d'environnement Vercel
--environment-e--yes-y
npx vercel build
Build le projet avec les paramètres Vercel
--prod--cwd--yes-y
npx netlify deploy
Déploie l'application Next.js sur Netlify
--prod--open--message-m--site-s--auth-a--dir--functions⚠️--json--timeout--alias--branch
npx netlify dev
Lance l'environnement de développement Netlify
--port-p--command-c--target-port--no-open--live--dir--functions⚠️--offline--graph--country--geo--static-proxy--framework⚠️
npx netlify link
Lie le projet local à un site Netlify
--id--name
npx netlify env
Gère les variables d'environnement Netlify
getsetunsetlistimportclone--context--scope
npx prisma generate
Génère le client Prisma pour Next.js
--schema--data-proxy--watch--no-hints--sql
npx prisma db push
Pousse le schéma Prisma vers la base de données
--schema--skip-generate--accept-data-loss--force-reset⚠️--preview-feature⚠️
npx prisma migrate dev
Crée et applique les migrations Prisma
--name--create-only--skip-seed--skip-generate
npx prisma studio
Ouvre Prisma Studio pour visualiser les données
--port-p--browser--schema
npx drizzle-kit generate
Génère les migrations Drizzle ORM
--config--name--custom--breakpoints--out
npx drizzle-kit push
Pousse le schéma Drizzle vers la base de données
--config--force⚠️--verbose
npx drizzle-kit studio
Ouvre Drizzle Studio
--config--port--host
npx next-auth
Utilitaires NextAuth.js / Auth.js
secretgenerate
npx shadcn-ui init
Initialise shadcn/ui dans un projet Next.js
--defaults-d--force⚠️-f⚠️--yes-y--cwd--silent
npx shadcn-ui add
Ajoute des composants shadcn/ui
--overwrite-o--path-p--cwd--all-a--yes-y
npx shadcn-ui diff
Affiche les différences des composants shadcn/ui
--cwd
npx tailwindcss init
Initialise Tailwind CSS
-p--postcss--full⚠️-f⚠️--ts--esm--help
npx tailwindcss -i input.css -o output.css
Compile Tailwind CSS
--watch-w--minify-m--content--config-c--postcss
npx playwright test
Lance les tests E2E avec Playwright
--headed--debug--ui--project--grep-g--grep-invert--max-failures⚠️--workers-j--timeout--config-c--reporter⚠️--output--trace--video--screenshot--update-snapshots-u
npx playwright codegen
Génère du code de test Playwright
--target-b--browser--device--save-storage--load-storage--lang--viewport-size--output-o--test-id-attribute--ignore-https-errors
npx cypress open
Ouvre Cypress Test Runner
--config-c--env-e--browser-b--port-p--headed--project--global--component
npx cypress run
Exécute les tests Cypress
--spec-s--browser-b--headed--no-exit--port-p--config-c--env-e--record⚠️--parallel--group--tag--component
npm run jest
Lance les tests unitaires avec Jest
----watch--watchAll--coverage--verbose--runInBand⚠️--maxWorkers--testNamePattern-t--updateSnapshot-u--bail--silent--onlyChanged-o
npm run vitest
Lance les tests avec Vitest
----watch-w--run⚠️--coverage--ui--reporter⚠️--silent--dom--browser--environment--update-u--testNamePattern-t--dir--exclude--typecheck
npx storybook init
Initialise Storybook dans Next.js
--type--builder--use-npm--skip-install--yes-y--force⚠️-f⚠️--disable-telemetry
npm run storybook
Lance le serveur Storybook
---p--port-h--host--ci--https--ssl-ca--ssl-cert--ssl-key--smoke-test--quiet--no-open--disable-telemetry
npm run build-storybook
Build Storybook pour le déploiement
---o--output-dir--loglevel--quiet--webpack-stats-json--preview-url--force-build-preview⚠️--test--disable-telemetry
npx ladle serve
Lance Ladle (alternative à Storybook)
--port--base--out--config--viteConfig--storybook
npx ladle build
Build Ladle
--out--base--config--viteConfig--storybook
npx chromatic
Publie Storybook sur Chromatic
--project-token--app-code--branch-name--build-script-name--exit-zero-on-changes--auto-accept-changes--force-rebuild⚠️--skip--storybook-build-dir--storybook-base-dir--storybook-config-dir--storybook-log-level--storybook-port--storybook-https--storybook-cert--storybook-key--storybook-ca--only-changed--untraced--externals--debug--interactive--junit-report⚠️--preserve-missing--only-story-names--only-story-files⚠️--trace-changed--ui-tests--playwright--cypress
npx next-sitemap
Génère le sitemap.xml pour Next.js
--config-c--dry-run⚠️--no-index-sitemap--no-robots-txt⚠️--out-dir--ignore-node-modules
npx next-pwa
Configure PWA pour Next.js
npx @next/bundle-analyzer
Analyse la taille du bundle Next.js
--enabled
ANALYZE=true npm run build
Build avec analyse du bundle activée
npx size-limit
Vérifie la taille du bundle
--json--output--why--debug--limit--config--clean-dir--highlight-less--compare-with
npx depcheck
Vérifie les dépendances inutilisées dans Next.js
--ignore-bin-package--skip-missing--json--ignores--parsers--detectors--specials
npx npm-check-updates
Vérifie les mises à jour des dépendances
-u--interactive-i--filter⚠️-f⚠️--target-t--registry⚠️-r⚠️--doctor--enginesNode--packageManager--reject⚠️
npx tsc --noEmit
Vérifie les types TypeScript
--watch-w--project-p--pretty--skipLibCheck--strict--incremental--tsBuildInfoFile
npx eslint . --ext .ts,.tsx
Lance ESLint sur les fichiers TypeScript
--fix⚠️--quiet--format⚠️--max-warnings--cache--ignore-path--no-ignore
npx prettier --write .
Formate tout le projet avec Prettier
--check--config--ignore-path--parser--print-width--tab-width--single-quote--trailing-comma--bracket-spacing--arrow-parens--end-of-line--semi--use-tabs--prose-wrap
npx husky install
Installe les hooks Git Husky
--force⚠️-f⚠️
npx husky add
Ajoute un hook Git Husky
npx lint-staged
Lance les linters sur les fichiers stagés
--config-c--debug--relative⚠️--shell--quiet-q--concurrent--no-stash--diff--diff-filter⚠️
npx commitlint
Vérifie les messages de commit
--edit-e--config-g--cwd--from⚠️--to--verbose-V--quiet-q
npx semantic-release
Automatise les releases sémantiques
--branches-b--repository-url⚠️-r⚠️--tag-format⚠️-t--extends-e--debug-d--dry-run⚠️--no-ci--ci--verify-conditions--analyze-commits--verify-release⚠️--generate-notes--prepare--publish--success--fail⚠️
npx changeset
Gère les changements de version
initaddversionpublishstatuspretag
npx turbo dev
Lance le dev avec Turborepo
--filter⚠️-F⚠️--parallel--no-cache--force⚠️--continue--dry--dry-run⚠️--only--output-logs--log-order--concurrency--env-mode
npx turbo build
Build avec Turborepo
--filter⚠️-F⚠️--parallel--no-cache--force⚠️--continue--dry--dry-run⚠️--only--output-logs--log-order--concurrency--env-mode--remote-only⚠️
npx nx serve
Lance le serveur avec Nx
--configuration-c--prod--skip-nx-cache--parallel--maxParallel--only-failed⚠️--exclude--files⚠️--verbose--help
npx nx build
Build avec Nx
--configuration-c--prod--skip-nx-cache--parallel--maxParallel--with-deps--exclude--verbose
npx nx test
Lance les tests avec Nx
--configuration-c--watch--watchAll--coverage--verbose--testPathPattern-t--updateSnapshot-u
npx nx graph
Affiche le graphe des dépendances Nx
--open--file⚠️--focus⚠️--exclude--watch--help
npx lerna run build
Build avec Lerna (monorepo)
--scope--ignore--parallel--stream--no-bail--concurrency--sort--include-dependencies--no-private
npx pnpm --filter
Filtre les commandes PNPM dans monorepo
devbuildstarttestlint--parallel--stream--reporter⚠️
npx docker build -t next-app .
Build l'image Docker pour Next.js
--build-arg--file⚠️-f⚠️--tag-t--target--platform--no-cache--pull--progress--secret--ssh--output-o
npx docker run -p 3000:3000 next-app
Lance le conteneur Docker Next.js
--name--rm⚠️--detach-d--env-e--env-file⚠️--volume-v--publish-p--network--restart⚠️
npx docker-compose up
Lance Docker Compose pour Next.js
--build--detach-d--force-recreate⚠️--no-deps--remove-orphans⚠️--scale--timeout-t
npx next start --port 3000
Démarre Next.js sur un port spécifique
-p--port-H--hostname--keepAliveTimeout
NODE_OPTIONS='--inspect' next dev
Lance Next.js avec débogueur Node.js
--inspect-brk--inspect-port--max-old-space-size
npx next dev --turbo
Lance Next.js avec Turbopack activé
--port-p--hostname-H
npx next build --profile
Build avec profilage pour optimisation
--debug--no-lint--no-mangling
npx next build --experimental-build-mode compile
Build expérimental avec compilation
--profile--debug
npx open-next build
Build Next.js pour déploiement sur AWS Lambda
--minify--build-command--config
npx serverless deploy
Déploie Next.js sur AWS avec Serverless
--stage-s--region⚠️-r⚠️--aws-profile--verbose-v--function⚠️-f⚠️--config-c--force⚠️--noDeploy--conceal
npx next-image-optimizer
Optimise les images pour Next.js
--input-i--output-o--quality-q--width-w--height--format⚠️--fit⚠️
npx next-seo
Outils SEO pour Next.js
npx next-i18next
Utilitaires d'internationalisation
--config--locale--namespace
npx next-translate
Alternative i18n pour Next.js
npx next-intl
Internationalisation Next.js avec ICU
npx next-sanity
Intègre Sanity CMS avec Next.js
npx contentlayer build
Build Contentlayer pour Next.js
--config-c--watch-w--clearCache--verbose--tsconfig
npx contentlayer dev
Lance Contentlayer en mode watch
--config-c--verbose--tsconfig
npx next-mdx-remote
Utilitaires MDX pour Next.js
npx @next/mdx
Plugin MDX officiel Next.js
npx next-remote-watch
Recharge Next.js sur changement de fichiers distants
npx next-compose-plugins
Combine les plugins Next.js
npx next-transpile-modules
Transpile les modules node_modules
