diff --git a/www/src/config.ts b/www/src/config.ts index 2b697735b7..333a7dd1ec 100644 --- a/www/src/config.ts +++ b/www/src/config.ts @@ -269,6 +269,10 @@ export const SIDEBAR: Sidebar = { text: "Structure des dossiers (Pages)", link: "fr/folder-structure-pages", }, + { + text: "Structure des dossiers (App)", + link: "fr/folder-structure-app", + }, { text: "FAQ", link: "fr/faq" }, { text: "Collection T3", link: "fr/t3-collection" }, { text: "Exemples", link: "fr/examples" }, @@ -279,6 +283,7 @@ export const SIDEBAR: Sidebar = { { text: "Next.js", link: "fr/usage/next-js" }, { text: "TypeScript", link: "fr/usage/typescript" }, { text: "tRPC", link: "fr/usage/trpc" }, + { text: "Drizzle", link: "fr/usage/drizzle" }, { text: "Prisma", link: "fr/usage/prisma" }, { text: "NextAuth.js", link: "fr/usage/next-auth" }, { diff --git a/www/src/pages/fr/deployment/docker.md b/www/src/pages/fr/deployment/docker.md index 2e369a1e41..9d5373b0e3 100644 --- a/www/src/pages/fr/deployment/docker.md +++ b/www/src/pages/fr/deployment/docker.md @@ -62,8 +62,8 @@ README.md ```docker ##### DEPENDENCIES -FROM --platform=linux/amd64 node:16-apline3.17 AS deps -RUN apk add --no-cache libc6-compat openssl1.1-compat +FROM --platform=linux/amd64 node:20-alpine AS deps +RUN apk add --no-cache libc6-compat openssl WORKDIR /app # Install Prisma Client - remove if not using Prisma @@ -75,15 +75,15 @@ COPY prisma ./ COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml\* ./ RUN \ - if [ -f yarn.lock ]; then yarn --frozen-lockfile; \ - elif [ -f package-lock.json ]; then npm ci; \ - elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \ - else echo "Lockfile not found." && exit 1; \ - fi + if [ -f yarn.lock ]; then yarn --frozen-lockfile; \ + elif [ -f package-lock.json ]; then npm ci; \ + elif [ -f pnpm-lock.yaml ]; then npm install -g pnpm && pnpm i; \ + else echo "Lockfile not found." && exit 1; \ + fi ##### BUILDER -FROM --platform=linux/amd64 node:16-apline3.17 AS builder +FROM --platform=linux/amd64 node:20-alpine AS builder ARG DATABASE_URL ARG NEXT_PUBLIC_CLIENTVAR WORKDIR /app @@ -93,36 +93,32 @@ COPY . . # ENV NEXT_TELEMETRY_DISABLED 1 RUN \ - if [ -f yarn.lock ]; then SKIP_ENV_VALIDATION=1 yarn build; \ - elif [ -f package-lock.json ]; then SKIP_ENV_VALIDATION=1 npm run build; \ - elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && SKIP_ENV_VALIDATION=1 pnpm run build; \ - else echo "Lockfile not found." && exit 1; \ - fi + if [ -f yarn.lock ]; then SKIP_ENV_VALIDATION=1 yarn build; \ + elif [ -f package-lock.json ]; then SKIP_ENV_VALIDATION=1 npm run build; \ + elif [ -f pnpm-lock.yaml ]; then npm install -g pnpm && SKIP_ENV_VALIDATION=1 pnpm run build; \ + else echo "Lockfile not found." && exit 1; \ + fi ##### RUNNER -FROM --platform=linux/amd64 node:16-apline3.17 AS runner +FROM --platform=linux/amd64 gcr.io/distroless/nodejs20-debian12 AS runner WORKDIR /app ENV NODE_ENV production # ENV NEXT_TELEMETRY_DISABLED 1 -RUN addgroup --system --gid 1001 nodejs -RUN adduser --system --uid 1001 nextjs - COPY --from=builder /app/next.config.js ./ COPY --from=builder /app/public ./public COPY --from=builder /app/package.json ./package.json -COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ -COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static +COPY --from=builder /app/.next/standalone ./ +COPY --from=builder /app/.next/static ./.next/static -USER nextjs EXPOSE 3000 ENV PORT 3000 -CMD ["node", "server.js"] +CMD ["server.js"] ``` @@ -130,7 +126,8 @@ CMD ["node", "server.js"] > > - _L'émulation de `--platform=linux/amd64` n'est pas nécessaire à partir de Node 18._ > - _Voir [`node:alpine`](https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine) pour comprendre pourquoi `libc6-compat` pourrait être nécessaire._ -> - _Next.js receuille [des données de télémétrie sur l'utilisation générale de façon anonyme](https://nextjs.org/telemetry). Décommentez la première occurrence de `ENV NEXT_TELEMETRY_DISABLED 1` pour désactiver la télémétrie durant le processus de génération. Décommentez la seconde occurence pour désactiver la télémétrie durant l'exécution._ +> - _L'utilisation d'images basées sur Alpine 3.17 [peut causer des problèmes avec Prisma](https://github.com/t3-oss/create-t3-app/issues/975). Définir `engineType = "binary"` résout le problème dans Alpine 3.17, [mais a un coût de performance associé](https://www.prisma.io/docs/concepts/components/prisma-engines/query-engine#the-query-engine-at-runtime)._ +> - _Next.js collecte des [données de télémétrie anonymes sur l'utilisation générale](https://nextjs.org/telemetry). Décommentez la première occurrence de `ENV NEXT_TELEMETRY_DISABLED 1` pour désactiver la télémétrie pendant la construction. Décommentez la deuxième occurrence pour désactiver la télémétrie pendant l'exécution._ @@ -152,7 +149,7 @@ Vous pouvez également utiliser Docker Compose pour générer l'image et exécut
- Suivez les étapes 1 à 4 ci-dessus, cliquez ici et incluez le contenue dans votre docker-compose.yml: + Suivez les étapes 1 à 3 ci-dessus, cliquez ici et incluez le contenue dans votre docker-compose.yml:
diff --git a/www/src/pages/fr/deployment/vercel.md b/www/src/pages/fr/deployment/vercel.md index 7ab1ae9cad..2b723e6b45 100644 --- a/www/src/pages/fr/deployment/vercel.md +++ b/www/src/pages/fr/deployment/vercel.md @@ -14,7 +14,6 @@ Vercel va certainement configurer les commandes de génération et publier le r ```json { "buildCommand": "npm run build", - "outputDirectory": "dist", "devCommand": "npm run dev", "installCommand": "npm install" } diff --git a/www/src/pages/fr/faq.mdx b/www/src/pages/fr/faq.mdx index d3c328548a..372472a2b6 100644 --- a/www/src/pages/fr/faq.mdx +++ b/www/src/pages/fr/faq.mdx @@ -21,6 +21,11 @@ Si vous n'êtes pas familier avec les différentes technologies utilisées dans - [Prisma](https://prisma.io) - [Tailwind CSS](https://tailwindcss.com) - [tRPC](https://trpc.io) +- [Drizzle](https://orm.drizzle.team/docs/overview) + +## Comment faire pour que mon application reste à jour ? + +Create T3 App est un outil pour démarrer un projet, pas une structure logicielle complète. Une fois votre application créée, elle vous appartient. Il n'y a pas d'outil automatique pour vous aider à la maintenir à jour comme après l'installation. Si vous voulez suivre les améliorations que nous apportons au modèle de base, vous pouvez [activer les notifications pour les nouvelles versions](https://docs.github.com/en/account-and-profile/managing-subscriptions-and-notifications-on-github/setting-up-notifications/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository) de notre dépôt. Cela dit, il n'est pas vraiment nécessaire d'appliquer chaque changement que nous faisons au modèle dans votre application. ## Quelles ressources d'apprentissage sont actuellement disponibles? @@ -32,18 +37,19 @@ Maintenant, nous comprenons que cette voie ne fonctionne pas pour tout le monde. ### Articles -- [Créez une application complète avec Create T3 App](https://www.nexxel.dev/blog/ct3a-guestbook) - [Un premier aperçu de Create T3 App](https://dev.to/ajcwebdev/a-first-look-at-create-t3-app-1i8f) - [Migrer votre application T3 vers un Turborepo](https://www.jumr.dev/blog/t3-turbo) - [Intégrer Stripe dans votre application T3](https://blog.nickramkissoon.com/posts/integrate-stripe-t3) ### Vidéos -- [Créez un clone Twitter avec la stack T3 - tRPC, Next.js, Prisma, Tailwind et Zod](https://www.youtube.com/watch?v=nzJsYJPCc80) -- [Créez un blog avec la stack T3 - tRPC, TypeScript, Next.js, Prisma et Zod](https://www.youtube.com/watch?v=syEWlxVFUrY) -- [Créer une application de chat en direct avec la stack T3 - TypeScript, Tailwind, tRPC](https://www.youtube.com/watch?v=dXRRY37MPuk) -- [La stack T3 - Comment nous l'avons créez](https://www.youtube.com/watch?v=H-FXwnEjSsI) -- [Un aperçu de Create T3 App (Next, Typescript, Tailwind, tRPC, Next-Auth)](https://www.youtube.com/watch?v=VJH8dsPtbeU) +- [From 0 to Production - The Modern React Tutorial (RSCs, Next.js, Shadui, Drizzle, TS and more)](https://www.youtube.com/watch?v=d5x0JCZbAJs) **(recommended)** (updated 2024)\* +- [Jack Herrington - Build a Note Taking app with the T3 Stack](https://www.youtube.com/watch?v=J1gzN1SAhyM) +- [Build a Twitter Clone with the T3 Stack - tRPC, Next.js, Prisma, Tailwind & Zod](https://www.youtube.com/watch?v=nzJsYJPCc80) +- [Build a Blog With the T3 Stack - tRPC, TypeScript, Next.js, Prisma & Zod](https://www.youtube.com/watch?v=syEWlxVFUrY) +- [Build a Live Chat Application with the T3 Stack - TypeScript, Tailwind, tRPC](https://www.youtube.com/watch?v=dXRRY37MPuk) +- [The T3 Stack - How We Built It](https://www.youtube.com/watch?v=H-FXwnEjSsI) +- [An overview of the Create T3 App (Next, Typescript, Tailwind, tRPC, Next-Auth)](https://www.youtube.com/watch?v=VJH8dsPtbeU) ## Pourquoi y a-t-il des fichiers `.js` dans le projet ? @@ -57,10 +63,15 @@ Nous avons décidé de ne pas inclure i18n par défaut dans `create-t3-app` car Cependant, si vous avez du mal à l'implémenter et que vous souhaitez voir un projet de référence, nous avons un [repo de référence](https://github.com/juliusmarminge/t3-i18n) qui montre comment vous pouvez ajouter i18n à une application T3 en utilisant [next-i18next](https://github.com/i18next/next-i18next). -## Pourquoi utilisons-nous `/pages` et non `/app` de Next.js 13 ? +## Devrais-je utiliser le dossier `/app` de Next.js 13 ou l'approche plus éprouvée du dossier `/pages` ? + +Lorsque vous créez une application avec Create T3 App, vous avez la possibilité de choisir la structure de dossiers `/app`. Au moment où j'écris ces lignes, cette fonctionnalité est généralement considérée comme suffisamment stable pour être utilisée en production par la communauté T3. Pour comprendre pourquoi il nous a fallu si longtemps pour l'inclure, vous pouvez regarder [cette vidéo](https://www.youtube.com/watch?v=PmBfq-SpzCU). -Selon [T3-Axiom #2](/fr/introduction#etre-responsable), nous aimons les trucs à la pointe de la technologie, mais nous apprécions la stabilité, l'entièreté de votre routeur est difficile à porter, [pas le meilleur lieu pour les technologies de pointes](https://youtu.be/mnwUbtieOuI?t=1662). Bien que `/app` soit [un aperçu du futur](https://youtu.be/rnsC-12PVlM?t=818), il n'est pas prêt pour la production ; L'API est en version bêta et devrait subir des modifications avec changements majeurs pouvant casser le code. +Cependant, si vous préférez fortement utiliser l'ancienne approche du dossier `/pages`, cela reste une option. Transférer votre système de routage existant peut demander un effort considérable, alors ne vous sentez pas obligé de le faire inutilement. - Pour obtenir une liste des fonctionnalités prises en charge, planifiées et en cours de développement dans le répertoire `/app`, consultez la [documentation de la beta de Next.js](https://beta.nextjs.org/docs/app-directory-roadmap#supported-and-planned-features). + Pour obtenir une liste des fonctionnalités prises en charge, planifiées et en + cours de développement dans le répertoire `/app`, consultez la [documentation + de la beta de + Next.js](https://beta.nextjs.org/docs/app-directory-roadmap#supported-and-planned-features). diff --git a/www/src/pages/fr/folder-structure-app.mdx b/www/src/pages/fr/folder-structure-app.mdx new file mode 100644 index 0000000000..a92e42f2ba --- /dev/null +++ b/www/src/pages/fr/folder-structure-app.mdx @@ -0,0 +1,254 @@ +--- +title: Structure des dossiers (App) +description: Structure des dossiers d'une application T3 nouvellement créée avec le système de routage "App Router". +layout: ../../layouts/docs.astro +lang: fr +isMdx: true +--- + +import Diagram from "../../components/docs/folderStructureDiagramApp.astro"; +import Form from "../../components/docs/folderStructureForm.astro"; + +Veuillez sélectionner vos paquets pour voir la structure des dossiers d'une application nouvellement créée avec ces sélections. Plus bas, vous trouverez une description de chaque élément. + +
+ + + +
+ +### `prisma` + +Le dossier `prisma` contient le fichier `schema.prisma` qui est utilisé pour configurer la connexion à la base de données et le schéma de la base de données. C'est également l'endroit où stocker les fichiers de migration et/ou les scripts de seed, si utilisés. Consultez la section [Utilisation de Prisma](/fr/usage/prisma) pour plus d'informations. + +
+
+ +### `public` + +Le dossier `public` contient les ressources statiques qui sont servies par le serveur web. Le fichier `favicon.ico` en est un exemple. + +
+
+ +### `src/env` + +Utilisé pour la validation des variables d'environnement et les définitions de types - voir [Variables d'environnement](/fr/usage/env-variables). + +
+
+ +### `src/app` + +Le dossier `app` contient toutes les routes de l'application Next.js. Le fichier `page.tsx` à la racine de `/app` est la page d'accueil de l'application. Le fichier `layout.tsx` est utilisé pour envelopper l'application avec des fournisseurs (providers). Consultez la [documentation Next.js](https://nextjs.org/docs/basic-features/pages) pour plus d'informations. + +
+
+ +#### `src/app/_components/post.tsx` + +Le fichier `post.tsx` est un exemple de composant client qui appelle une mutation tRPC. + +
+
+ +#### `src/app/api/auth/[...nextauth]/route.ts` + +Le fichier `[...nextauth]/route.ts` est la route "slug" d'authentification de NextAuth.js. Il est utilisé pour gérer les requêtes d'authentification. Consultez la section [Utilisation de NextAuth.js](/fr/usage/next-auth) pour plus d'informations sur NextAuth.js, et la [Documentation des Routes Dynamiques Next.js](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes) pour des informations sur les routes "catch-all" (tout-en-un) ou "slug". + +
+
+ +#### `src/app/api/trpc/[trpc]/route.ts` + +Le fichier `[trpc].ts` est le point d'entrée de l'API tRPC. Il est utilisé pour gérer les requêtes tRPC. Consultez la section [Utilisation de tRPC](/fr/usage/trpc#-pagesapitrpctrpcts) pour plus d'informations sur ce fichier, et la [Documentation des Routes Dynamiques Next.js](https://nextjs.org/docs/app/routing/dynamic-routes) pour des informations sur les routes "catch-all" (tout-en-un) ou "slug". + +
+
+ +### `src/server` + +Le dossier `server` est utilisé pour séparer clairement le code qui est uniquement utilisé sur le serveur. + +
+
+ +#### `src/server/auth.ts` + +Le point d'entrée principal pour la logique d'authentification côté serveur. Ici, nous configurons les [options de configuration](/fr/usage/next-auth) de NextAuth.js, effectuons une [augmentation de module](/fr/usage/next-auth#inclusion-of-userid-on-the-session) et fournissons également des utilitaires DX pour l'authentification, tels que la récupération de la session de l'utilisateur côté serveur. Consultez la section [Utilisation de NextAuth.js](/fr/usage/next-auth#usage-with-trpc) pour plus d'informations. + +
+
+ +#### `src/server/db.ts` + +Le fichier `db.ts` est utilisé pour instancier le client Prisma au niveau global. Consultez la section [Utilisation de Prisma](/fr/usage/prisma#prisma-client) et les [bonnes pratiques pour l'utilisation de Prisma avec Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) pour plus d'informations. + +
+
+ +### `src/server/db` + +Le dossier `db` contient le client Drizzle et le schéma. Notez que Drizzle requiert également le fichier `drizzle.config.ts` (voir ci-dessous). + +
+
+ +#### `src/server/db/index.ts` + +Le fichier `index.ts` est utilisé pour instancier le client Drizzle au niveau global. Consultez la section [utilisation de Drizzle](/fr/usage/drizzle#drizzle-client) pour plus d'informations. + +
+
+ +#### `src/server/db/schema.ts` + +Le fichier `schema.ts` est utilisé pour définir le schéma de la base de données. Consultez la section [utilisation de Drizzle](/fr/usage/drizzle#drizzle-client) et la [Drizzle schema docs](https://orm.drizzle.team/docs/sql-schema-declaration) pour plus d'informations. + +
+
+ +### `src/server/api` + +Le dossier `api` contient le code tRPC côté serveur. + +
+
+ +#### `src/server/api/routers` + +Le dossier `routers` contient tous vos sous-routeurs tRPC. + +
+
+ +#### `src/server/api/routers/example.ts` + +Le fichier `example.ts` est un exemple de routeur tRPC utilisant l'assistant `publicProcedure` pour montrer comment créer une route tRPC publique. + +Selon les paquets que vous avez choisis, ce routeur contient plus ou moins de routes afin de mieux illustrer l'utilisation selon vos besoins. + +
+
+ +#### `src/server/api/trpc.ts` + +Le fichier `trpc.ts` est le fichier de configuration principal pour votre backend tRPC. Ici, nous : + +1. Définissons le contexte utilisé dans les requêtes tRPC. Consultez la section [utilisation de tRPC](/fr/usage/trpc#-serverapitrpcts) pour plus d'informations. +2. Exportons les assistants de procédure. Consultez la section [utilisation de tRPC](/fr/usage/trpc#-serverapitrpcts) pour plus d'informations. + +
+ +
+ +#### `src/server/api/root.ts` + +Le fichier `root.ts` est utilisé pour fusionner les routeurs tRPC et les exporter en tant que routeur unique, ainsi que la définition de type du routeur. Consultez la section [utilisation de tRPC](/fr/usage/trpc#-serverapirootts) pour plus d'informations. + +
+
+ +### `src/trpc` + +Le dossier trpc contient la configuration pour vous permettre d'appeler des procédures tRPC depuis des composants serveur et des composants client. + +
+
+ +#### `src/trpc/query-client.ts` + +Le fichier query-client.ts crée le Query Client que tRPC utilise pour mettre en cache et dédupliquer les données dans les composants client. + +
+
+ +#### `src/trpc/react.tsx` + +Le fichier `react.tsx` est le point d'entrée frontend de tRPC. Il contient également des types utilitaires pour les entrées et sorties du routeur. Consultez la section [utilisation de tRPC](/fr/usage/trpc#-utilsapits) pour plus d'informations. + +
+
+ +#### `src/trpc/server.ts` + +Le fichier `server.ts` est le point d'entrée pour utiliser tRPC dans les Composants Serveur. + +
+
+ +### `.env` + +Le fichier `.env` est utilisé pour stocker les variables d'environnement. Consultez la section [Variables d'environnement](/fr/usage/env-variables) pour plus d'informations. Ce fichier ne doit **pas** être commité dans l'historique git. + +
+
+ +### `.env.example` + +Le fichier `.env.example` montre des exemples de variables d'environnement basés sur les librairies choisies. Ce fichier doit être commité dans l'historique git. + +
+
+ +### `.eslintrc.cjs` + +Le fichier `.eslintrc.cjs` est utilisé pour configurer ESLint. Consultez la [Documentation ESLint](https://eslint.org/docs/latest/user-guide/configuring/configuration-files) pour plus d'informations. + +
+
+ +### `db.sqlite (SQLite uniquement)` + +Le fichier `db.sqlite` contient votre base de données de développement. Ce fichier est créé uniquement après l'exécution de la commande `db:push` et est ignoré par git. + +
+
+ +### `drizzle.config.ts` + +Le fichier `drizzle.config.ts` est utilisé pour configurer Drizzle Kit. Consultez [la documentation](https://orm.drizzle.team/kit-docs/config-reference) pour plus d'informations. + +
+
+ +### `next-env.d.ts` + +Le fichier `next-env.d.ts` s'assure que les types Next.js sont pris en compte par le compilateur TypeScript. **Vous ne devez pas le supprimer ni le modifier car il peut changer à tout moment.** Consultez la [Documentation Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript) pour plus d'informations. + +
+
+ +### `next.config.mjs` + +Le fichier `next.config.mjs` est utilisé pour configurer Next.js. Consultez la [Documentation Next.js](https://nextjs.org/docs/api-reference/next.config.js/introduction) pour plus d'informations. Note : L'extension .mjs est utilisée pour permettre les imports ESM. + +
+
+ +### `postcss.config.js` + +Le fichier `postcss.config.js` est utilisé pour la configuration de Tailwind PostCSS. Consultez la [Documentation Tailwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss) pour plus d'informations. + +
+
+ +### `prettier.config.mjs` + +Le fichier `prettier.config.mjs` est utilisé pour configurer Prettier afin d'inclure le plugin `prettier-plugin-tailwindcss` pour le formatage des classes Tailwind CSS. Consultez l'[article du blog de Tailwind CSS](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) pour plus d'informations. + +
+
+ +### `start-database.sh (MySQL ou PostgreSQL uniquement)` + +Le fichier `start-database.sh` est utilisé pour démarrer la base de données. Veuillez consulter les commentaires à l'intérieur du fichier pour obtenir des informations sur la manière de démarrer la base de données avec votre système d'exploitation. + +
+
+ +### `tsconfig.json` + +Le fichier `tsconfig.json` est utilisé pour configurer TypeScript. Certaines options non définies par défaut, telles que le `mode strict`, ont été activées pour garantir la meilleure utilisation de TypeScript pour Create T3 App et ses librairies. Consultez la [Documentation TypeScript](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) ou la section [Utilisation de TypeScript](/fr/usage/typescript) pour plus d'informations. + +
diff --git a/www/src/pages/fr/folder-structure-pages.mdx b/www/src/pages/fr/folder-structure-pages.mdx index bf54572dd2..ceb9726361 100644 --- a/www/src/pages/fr/folder-structure-pages.mdx +++ b/www/src/pages/fr/folder-structure-pages.mdx @@ -1,6 +1,6 @@ --- title: Structure des dossiers (Pages) -description: Structure des dossiers d'une application T3 nouvellement créée +description: Structure des dossiers d'une application T3 nouvellement créée avec le système de routage "Pages Router". layout: ../../layouts/docs.astro lang: fr isMdx: true @@ -33,7 +33,7 @@ Le dossier "public" contient des fichiers statiques qui sont servis par le serve ### `src/env` -Utilisé pour la validation des variables d'environnement et les définitions de types - voir [Variables d'environnement](usage/env-variables). +Utilisé pour la validation des variables d'environnement et les définitions de types - voir [Variables d'environnement](/fr/usage/env-variables).
@@ -47,24 +47,24 @@ Le dossier `pages` contient toutes les pages de l'application Next.js. Le fichie #### `src/pages/api` -Le dossier `api` contient toutes les routes API de l'application Next.js. Le fichier `examples.ts` (avec Prisma) contient un exemple de route qui utilise la fonctionnalité [Next.js API route](https://nextjs.org/docs/api-routes/introduction) avec Prisma. Le fichier `restricted.ts` (avec Next-Auth) contient un exemple de route qui utilise la fonctionnalité [Next.js API route](https://nextjs.org/docs/api-routes/introduction) et est protégé par [NextAuth.js](https://next-auth.js.org/). +Le dossier api contient toutes les routes API de l'application Next.js. Consultez la [Documentation Next.js Api Routes](https://nextjs.org/docs/api-routes/introduction) pour plus d'information sur les routes API.
#### `src/pages/api/auth/[...nextauth].ts` -Le fichier `[...nextauth].ts` est la route d'authentification NextAuth.js. Il est utilisé pour gérer les demandes d'authentification. Voir [utilisation de NextAuth.js](usage/next-auth) pour plus d'informations sur NextAuth.js, et la [documentation Next.js sur les routes dynamiques](https://nextjs.org/docs/routing/dynamic-routes) pour plus d'informations sur les routes fourre-tout / slug. +Le fichier `[...nextauth].ts` est la route d'authentification NextAuth.js. Il est utilisé pour gérer les demandes d'authentification. Voir [utilisation de NextAuth.js](/fr/usage/next-auth) pour plus d'informations sur NextAuth.js, et la [documentation Next.js sur les routes dynamiques](https://nextjs.org/docs/routing/dynamic-routes) pour plus d'informations sur les routes fourre-tout / slug.
#### `src/pages/api/trpc/[trpc].ts` -Le fichier `[trpc].ts` est le point d'entrée de l'API tRPC. Il est utilisé pour gérer les requêtes tRPC. Voir [utilisation de tRPC](usage/trpc#-pagesapitrpctrpcts) pour plus d'informations sur ce fichier, et la [documentation Next.js sur les routes dynamiques](https://nextjs.org/docs/routing/dynamic-routes) pour plus d'informations sur les routes fourre-tout / slug. +Le fichier `[trpc].ts` est le point d'entrée de l'API tRPC. Il est utilisé pour gérer les requêtes tRPC. Voir [utilisation de tRPC](/fr/usage/trpc#-pagesapitrpctrpcts) pour plus d'informations sur ce fichier, et la [documentation Next.js sur les routes dynamiques](https://nextjs.org/docs/routing/dynamic-routes) pour plus d'informations sur les routes fourre-tout / slug.
-
+
### `src/server` @@ -75,14 +75,35 @@ Le dossier `server` est utilisé pour séparer clairement le code côté serveur ### `src/server/auth.ts` -Contient des utilitaires d'authentification tels que la récupération de la session de l'utilisateur côté serveur. Voir [utilisation de NextAuth.js](usage/next-auth#utilisation-avec-trpc) pour plus d'informations. +Contient des utilitaires d'authentification tels que la récupération de la session de l'utilisateur côté serveur. Voir [utilisation de NextAuth.js](/fr/usage/next-auth#utilisation-avec-trpc) pour plus d'informations.
#### `src/server/db.ts` -Le fichier `db.ts` est utilisé pour instancier le client Prisma au niveau global. Voir [Utilisation de Prisma](usage/prisma#prisma-client) et [meilleures pratiques pour utiliser Prisma avec Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) pour plus d'informations. +Le fichier `db.ts` est utilisé pour instancier le client Prisma au niveau global. Voir [Utilisation de Prisma](/fr/usage/prisma#prisma-client) et [meilleures pratiques pour utiliser Prisma avec Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) pour plus d'informations. + +
+
+ +### `src/server/db` + +Le dossier `db` contient le client Drizzle et le schéma. Notez que Drizzle requiert également le fichier `drizzle.config.ts` (voir ci-dessous). + +
+
+ +#### `src/server/db/index.ts` + +Le fichier index.ts est utilisé pour instancier le client Drizzle au niveau global. Consultez la section [Utilisation de Drizzle](/fr/usage/drizzle#client-drizzle) pour plus d'informations. + +
+
+ +#### `src/server/db/schema.ts` + +Le fichier schema.ts est utilisé pour définir le schéma de la base de données. Consultez la section [Utilisation de Drizzle](/fr/usage/drizzle#client-drizzle) et la [Documentation du schéma Drizzle](https://orm.drizzle.team/docs/sql-schema-declaration) pour plus d'informations.
@@ -114,15 +135,15 @@ En fonction des packages choisis, ce routeur contient plus ou moins de routes po Le fichier `trpc.ts` est le fichier de configuration principal de votre back-end tRPC. Ici, vous trouverez: -1. La définissons du contexte utilisé dans les requêtes tRPC. Voir [utilisation de tRPC](usage/trpc#-serverapitrpcts) pour plus d'informations. -2. Le helper de procédure d'exportation. Voir [utilisation de tRPC](usage/trpc#-serverapitrpcts) pour plus d'informations. +1. La définissons du contexte utilisé dans les requêtes tRPC. Voir [utilisation de tRPC](/fr/usage/trpc#-serverapitrpcts) pour plus d'informations. +2. Le helper de procédure d'exportation. Voir [utilisation de tRPC](/fr/usage/trpc#-serverapitrpcts) pour plus d'informations.
#### `src/server/api/root.ts` -Le fichier `root.ts` est utilisé pour fusionner les routeurs tRPC et les exporter en tant que routeur unique, ainsi que la définition du type de routeur. Voir [utilisation du tRPC](usage/trpc#-serverapirootts) pour plus d'informations. +Le fichier `root.ts` est utilisé pour fusionner les routeurs tRPC et les exporter en tant que routeur unique, ainsi que la définition du type de routeur. Voir [utilisation du tRPC](/fr/usage/trpc#-serverapirootts) pour plus d'informations.
@@ -131,20 +152,6 @@ Le fichier `root.ts` est utilisé pour fusionner les routeurs tRPC et les export Le dossier `styles` contient les styles globaux de l'application. -
-
- -### `src/types` - -Le dossier `types` est utilisé pour stocker les types réutilisés ou les déclarations de type. - -
-
- -#### `src/types/next-auth.d.ts` - -Le fichier `next-auth.d.ts` est utilisé pour étendre le type de session par défaut NextAuth afin d'inclure l'ID utilisateur. Voir [utilisation de NextAuth.js](usage/next-auth#inclusion-de-userid-dans-la-session) pour plus d'informations. -
@@ -157,14 +164,14 @@ Le dossier `utils` est utilisé pour stocker les fonctions utilitaires courammen #### `src/utils/api.ts` -Le fichier `api.ts` est le point d'entrée frontal de tRPC. Voir [utilisation de tRPC](usage/trpc#-utilsapits) pour plus d'informations. +Le fichier `api.ts` est le point d'entrée frontal de tRPC. Voir [utilisation de tRPC](/fr/usage/trpc#-utilsapits) pour plus d'informations.
### `.env` -Le fichier `.env` est utilisé pour stocker les variables d'environnement. Voir [Variables d'environnement](usage/env-variables) pour plus d'informations. Ce fichier ne doit **pas** être commité dans l'historique de git. +Le fichier `.env` est utilisé pour stocker les variables d'environnement. Voir [Variables d'environnement](/fr/usage/env-variables) pour plus d'informations. Ce fichier ne doit **pas** être commité dans l'historique de git.
@@ -180,6 +187,21 @@ Le fichier `.env.example` montre des exemples de variables d'environnement basé Le fichier `.eslintrc.cjs` est utilisé pour configurer ESLint. Voir la [documentation de ESLint](https://eslint.org/docs/latest/user-guide/configuring/configuration-files) pour plus d'informations. +
+ +
+ +### `db.sqlite (sqlite only)` + +Le fichier `db.sqlite` contient votre base de données de développement. Ce fichier est créé uniquement après l'exécution de la commande `db:push` et est ignoré par git. + +
+
+ +### `drizzle.config.ts` + +Le fichier `drizzle.config.ts` est utilisé pour configurer Drizzle Kit. Consultez [la documentation](https://orm.drizzle.team/kit-docs/config-reference) pour plus d'informations. +
@@ -208,11 +230,19 @@ Le fichier `postcss.config.js` est utilisé pour l'utilisation de Tailwind PostC Le fichier `prettier.config.mjs` est utilisé pour configurer Prettier afin d'inclure le prettier-plugin-tailwindcss pour le formatage des classes CSS Tailwind. Consultez l'[article de blog Tailwind CSS](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) pour plus d'informations. +
+ +
+ +### `start-database.sh (MySQL ou PostgreSQL uniquement)` + +Le fichier `start-database.sh` est utilisé pour démarrer la base de données. Veuillez consulter les commentaires à l'intérieur du fichier pour obtenir des informations sur la manière de démarrer la base de données avec votre système d'exploitation. +
### `tsconfig.json` -Le fichier `tsconfig.json` est utilisé pour configurer TypeScript. Certaines valeurs autres que celles par défaut, telles que le `strict mode`, ont été activées pour garantir la meilleure utilisation de TypeScript pour Create T3 App et ses librairies. Voir la [documentation de TypeScript](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) ou [Utilisation de TypeScript](usage/typescript) pour plus d'informations. +Le fichier `tsconfig.json` est utilisé pour configurer TypeScript. Certaines valeurs autres que celles par défaut, telles que le `strict mode`, ont été activées pour garantir la meilleure utilisation de TypeScript pour Create T3 App et ses librairies. Voir la [documentation de TypeScript](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) ou [Utilisation de TypeScript](/fr/usage/typescript) pour plus d'informations.
diff --git a/www/src/pages/fr/installation.mdx b/www/src/pages/fr/installation.mdx index 953a69f357..ce1bc66faf 100644 --- a/www/src/pages/fr/installation.mdx +++ b/www/src/pages/fr/installation.mdx @@ -49,21 +49,25 @@ Une fois votre application configurée, consultez les [premières étapes](/fr/u Pour notre CI, nous avons des options expérimentales qui vous permettent de configurer n'importe quelle application sans aucun invite. Si ce cas d'utilisation s'applique à vous, vous pouvez utiliser ces options. Veuillez noter que ces options sont expérimentales et peuvent changer à l'avenir sans suivre la version de Semver. -| Flag | Description | -| ------------ | ----------------------------------------------- | -| `--CI` | Faites savoir à la CLI que vous êtes en mode CI | -| `--trpc` | Inclure tRPC dans le projet | -| `--prisma` | Inclure Prisma dans le projet | -| `--nextAuth` | Inclure NextAuth.js dans le projet | -| `--tailwind` | Inclure Tailwind CSS dans le projet | +| Flag | Description | +| ------------------------- | ----------------------------------------------- | +| `--CI` | Faites savoir à la CLI que vous êtes en mode CI | +| `--trpc` | Inclure tRPC dans le projet | +| `--prisma` | Inclure Prisma dans le projet | +| `--drizzle` | Inclure Drizzle dans le projet | +| `--nextAuth` | Inclure NextAuth.js dans le projet | +| `--tailwind` | Inclure Tailwind CSS dans le projet | +| `--dbProvider [provider]` | Inclure une base de données dans le projet | +| `--appRouter` | Utiliser l'App Router de Next.js dans le projet | Si vous ne fournissez pas l'option "CI", le reste de ces options n'a aucun effet. -Vous n'avez pas besoin de vous désinscrire explicitement des packages que vous ne -voulez pas.Cependant, si vous préférez être explicite, vous pouvez passer `false`, -par exemple `--nextAuth false`. + +Vous n'avez pas besoin de vous désinscrire explicitement des packages que vous +ne voulez pas. Cependant, si vous préférez être explicite, vous pouvez passer +`false`, par exemple `--nextAuth false`. ### Exemple @@ -72,3 +76,9 @@ Ce qui suit configurera une application T3 avec tRPC et Tailwind CSS. ```bash pnpm dlx create-t3-app@latest --CI --trpc --tailwind ``` + +Ce qui suit configurera une application T3 avec NextAuth.js, Tailwind CSS, Drizzle et PostgreSQL. + +```bash +pnpm dlx create-t3-app@latest --CI --nextAuth --tailwind --drizzle --dbProvider postgres +``` diff --git a/www/src/pages/fr/introduction.md b/www/src/pages/fr/introduction.mdx similarity index 91% rename from www/src/pages/fr/introduction.md rename to www/src/pages/fr/introduction.mdx index 8bbed8eaa4..ec3c42f12c 100644 --- a/www/src/pages/fr/introduction.md +++ b/www/src/pages/fr/introduction.mdx @@ -5,10 +5,9 @@ layout: ../../layouts/docs.astro lang: fr --- -
- -
+import { IntroductionTab } from "../../components/docs/introductionTab"; + ## La stack T3 La _"T3 Stack"_ est une stack de développement Web créée par [Theo](https://twitter.com/t3dotgg) axée sur la simplicité, la modularité et la sécurité de typage complète. diff --git a/www/src/pages/fr/other-recs.md b/www/src/pages/fr/other-recs.md index 25b9e4f420..c1e1e7d22b 100644 --- a/www/src/pages/fr/other-recs.md +++ b/www/src/pages/fr/other-recs.md @@ -53,6 +53,7 @@ Parfois, vous créez un projet où vous voulez juste que l'interface utilisateur - [Chakra UI](https://chakra-ui.com) - [Mantine](https://mantine.dev) +- [@shadcn/ui](https://ui.shadcn.com/) ### Class Variance Authority @@ -151,6 +152,7 @@ Umami est une alternative open source à Google Analytics, auto-hébergée, simp - [Page d'accueil Umami](https://umami.is/) - [Umami GitHub](https://github.com/umami-software/umami) +- [Umami Cloud](https://cloud.umami.is/) ## Autre diff --git a/www/src/pages/fr/usage/_next-auth-app-router.mdx b/www/src/pages/fr/usage/_next-auth-app-router.mdx new file mode 100644 index 0000000000..4b9c3d223d --- /dev/null +++ b/www/src/pages/fr/usage/_next-auth-app-router.mdx @@ -0,0 +1,215 @@ +import Callout from "../../../components/docs/callout.tsx"; +import Tabs from "../../../components/docs/tabs.astro"; + + + La toute dernière version de NextAuth a migré vers + [Auth.js](https://authjs.dev/). + + +## Récupération de la session côté serveur. + +Parfois, vous voudrez peut-être demander la session sur le serveur. Pour ce faire, utilisez la fonction d'assistance `auth` fournie par `create-t3-app`. + +```tsx:app/page.tsx +import { auth } from "~/server/auth"; + +export default async function Home() { + const session = await auth(); + ... +} +``` + +## Inclusion de l'`id` de l'utilisateur dans la session. + +Create T3 App est configuré pour utiliser la [fonction de rappel de session](https://authjs.dev/guides/extending-the-session) dans la configuration NextAuth.js afin d'inclure l'ID de l'utilisateur dans l'objet `session`. + +```ts:server/auth/config.ts +callbacks: { + session: ({ session, user }) => ({ + ...session, + user: { + ...session.user, + id: user.id, + }, + }), + }, +``` + +Ceci est associé à un fichier de déclaration de type pour s'assurer que l'`id` de l'utilisateur est typé lorsqu'il est accédé sur l'objet `session`. En savoir plus sur l'[`Augmentation de Module`](https://authjs.dev/getting-started/typescript#resources*module-augmentation) dans la documentation de NextAuth.js. + +```ts:server/auth/config.ts +import { DefaultSession } from "next-auth"; + +declare module "next-auth" { + interface Session extends DefaultSession { + user: { + id: string; + } & DefaultSession["user"]; + } +``` + +Le même modèle peut être utilisé pour ajouter d'autres données à l'objet `session`, comme un champ `role`, mais **ne doit pas être mal utilisé pour stocker des données sensibles** côté client. + +## Utilisation avec tRPC. + +Lorsque vous utilisez NextAuth.js avec tRPC, vous pouvez créer des procédures protégées et réutilisables à l'aide de [middleware](https://trpc.io/docs/v11/middlewares). Cela vous permet de créer des procédures accessibles uniquement aux utilisateurs authentifiés. `create-t3-app` configure tout cela pour vous, vous permettant d'accéder facilement à l'objet de session dans les procédures authentifiées. + +Ceci se fait en deux étapes : + +1. Passer la session d'authentification dans le contexte tRPC : + +```ts:server/api/trpc.ts +import { auth } from "~/server/auth"; +import { db } from "~/server/db"; + +export const createTRPCContext = async (opts: { headers: Headers }) => { + const session = await auth(); + + return { + db, + session, + ...opts, + }; +}; +``` + +2. Créer un middleware tRPC qui vérifie si l'utilisateur est authentifié. Nous utilisons ensuite ce middleware dans une `protectedProcedure`. Tout appelant à ces procédures doit être authentifié, sinon une erreur sera lancée et pourra être gérée de manière appropriée par le client. + +```ts:server/api/trpc.ts +export const protectedProcedure = t.procedure + .use(({ ctx, next }) => { + if (!ctx.session?.user) { + throw new TRPCError({ code: "UNAUTHORIZED" }); + } + return next({ + ctx: { + session: { ...ctx.session, user: ctx.session.user }, + }, + }); + }); +``` + +L'objet de session est une représentation légère et minimale de l'utilisateur et ne contient que quelques champs. Lorsque vous utilisez les `protectedProcedures`, vous avez accès à l'ID de l'utilisateur, qui peut être utilisé pour récupérer davantage de données depuis la base de données. + +```ts:server/api/routers/user.ts +const userRouter = router({ + me: protectedProcedure.query(async ({ ctx }) => { + const user = await prisma.user.findUnique({ + where: { + id: ctx.session.user.id, + }, + }); + return user; + }), +}); +``` + +## Utilisation avec un fournisseur de base de données. + + +
+ Pour faire fonctionner NextAuth.js avec Prisma, il faut beaucoup de + [configuration initiale](https://authjs.dev/reference/adapter/prisma/). + `create-t3-app` gère tout cela pour vous, et si vous sélectionnez à la fois + Prisma et NextAuth.js, vous obtiendrez un système d'authentification + entièrement fonctionnel avec tous les modèles requis préconfigurés. Nous + fournissons votre application de base avec un fournisseur Discord OAuth + préconfiguré, que nous avons choisi car il est l'un des plus faciles à + utiliser pour commencer - il suffit de fournir vos jetons dans le `.env` et + vous êtes prêt. Cependant, vous pouvez facilement ajouter d'autres + fournisseurs en suivant la [documentation + Auth.js](https://authjs.dev/getting-started/authentication/oauth). Notez que + certains fournisseurs nécessitent l'ajout de champs supplémentaires à + certains modèles. Nous vous recommandons de lire la documentation du + fournisseur que vous souhaitez utiliser pour vous assurer d'avoir tous les + champs requis. +
+
+ Pour faire fonctionner NextAuth.js avec Drizzle, il faut beaucoup de + [configuration + initiale](https://authjs.dev/getting-started/adapters/drizzle). + `create-t3-app` gère tout cela pour vous, et si vous sélectionnez à la fois + Drizzle et NextAuth.js, vous obtiendrez un système d'authentification + entièrement fonctionnel avec tous les modèles requis préconfigurés. Nous + fournissons votre application de base avec un fournisseur Discord OAuth + préconfiguré, que nous avons choisi car il est l'un des plus faciles à + utiliser pour commencer - il suffit de fournir vos jetons dans le `.env` et + vous êtes prêt. Cependant, vous pouvez facilement ajouter d'autres + fournisseurs en suivant la [documentation + Auth.js](https://authjs.dev/getting-started/authentication/oauth). Notez que + certains fournisseurs nécessitent l'ajout de champs supplémentaires à + certains modèles. Nous vous recommandons de lire la documentation du + fournisseur que vous souhaitez utiliser pour vous assurer d'avoir tous les + champs requis. +
+ + +### Ajouter de nouveaux champs à vos modèles. + +Lorsque vous ajoutez de nouveaux champs à l'un des modèles `User`, `Account`, `Session` ou `VerificationToken` (le plus souvent, vous n'aurez besoin de modifier que le modèle `User`), vous devez garder à l'esprit que l'[adaptateur Prisma](https://authjs.dev/reference/adapter/prisma/) crée automatiquement des champs sur ces modèles lorsque de nouveaux utilisateurs s'inscrivent et se connectent. Par conséquent, lorsque vous ajoutez de nouveaux champs à ces modèles, vous devez leur fournir des valeurs par défaut, car l'adaptateur n'est pas au courant de ces champs. + +Si, par exemple, vous souhaitez ajouter un `role` au modèle `User`, vous devrez fournir une valeur par défaut au champ `role`. Cela se fait en ajoutant une valeur `@default` au champ `role` dans le modèle `User` : + +```diff:prisma/schema.prisma ++ enum Role { ++ USER ++ ADMIN ++ } + + model User { + ... ++ role Role @default(USER) + } +``` + +## Utilisation avec le middleware Next.js. + +Avec Next.js 12+, la manière la plus simple de protéger un ensemble de pages est d'utiliser le [fichier middleware](https://authjs.dev/getting-started/session-management/protecting?framework=express#nextjs-middleware). Vous pouvez créer un fichier `middleware.ts` dans le répertoire racine de vos pages avec le contenu suivant. + +```middleware.ts +export { auth as middleware } from "@/auth" +``` + +Ensuite, définissez le callback `authorized` dans votre fichier `auth.ts`. Pour plus de détails, consultez la [documentation de référence](https://authjs.dev/reference/nextjs#authorized). + +```app/auth.ts +async authorized({ request, auth }) { + const url = request.nextUrl + + if(request.method === "POST") { + const { authToken } = (await request.json()) ?? {} + // If the request has a valid auth token, it is authorized + const valid = await validateAuthToken(authToken) + if(valid) return true + return NextResponse.json("Invalid auth token", { status: 401 }) + } + + // Logged in users are authenticated, otherwise redirect to login page + return !!auth.user +} +``` + + + Vous ne devriez pas vous fier exclusivement au middleware pour l'autorisation. + Assurez-vous toujours que la session est vérifiée au plus près de la + récupération de vos données. + + +## Configuration du DiscordProvider par défaut + +1. Rendez-vous dans [la section Applications du portail des développeurs Discord](https://discord.com/developers/applications), et cliquez sur "New Application" +1. Dans le menu des paramètres, allez dans "OAuth2 => General" + +- Copiez l'ID client et collez-le dans `AUTH_DISCORD_ID` dans `.env`. +- Sous Client Secret, cliquez sur "Reset Secret" et copiez cette chaîne de caractères dans `DISCORD CLIENT_SECRET` dans `.env`. Soyez prudent car vous ne pourrez plus voir ce secret et le réinitialiser entraînera l'expiration du secret existant. +- Cliquez sur "Add Redirect" et collez `/api/auth/callback/discord` (exemple pour le développement local : http://localhost:3000/api/auth/rappel/discord) +- Enregistrez vos modifications +- Il est possible, mais non recommandé, d'utiliser la même application Discord pour le développement et la production. Vous pouvez également envisager de [mock le fournisseur](https://github.com/trpc/trpc/blob/main/examples/next-prisma-websockets-starter/src/pages/api/auth/%5B...nextauth%5D.ts) pendant le développement. + +## Ressources utiles + +| Resource | Link | +| --------------------------------- | --------------------------------------- | +| Documentation de NextAuth.js | https://authjs.dev/ | +| NextAuth.js GitHub | https://github.com/nextauthjs/next-auth | +| tRPC Kitchen Sink - with NextAuth | https://kitchen-sink.trpc.io/next-auth | diff --git a/www/src/pages/fr/usage/_next-auth-pages.mdx b/www/src/pages/fr/usage/_next-auth-pages.mdx new file mode 100644 index 0000000000..99bab648b7 --- /dev/null +++ b/www/src/pages/fr/usage/_next-auth-pages.mdx @@ -0,0 +1,217 @@ +import Callout from "../../../components/docs/callout.tsx"; + +## Context Provider + +Dans le point d'entrée de votre application, vous verrez que votre application est encapsulée dans un [SessionProvider](https://next-auth.js.org/getting-started/client#sessionprovider) : + +```tsx:pages/_app.tsx + + + +``` + +Ce fournisseur de contexte permet à votre application d'accéder aux données de session de n'importe où dans votre application, sans avoir à les transmettre en tant que props : + +```tsx:pages/users/[id].tsx +import { useSession } from "next-auth/react"; + +const User = () => { + const { data: session } = useSession(); + + if (!session) { + // Handle unauthenticated state, e.g. render a SignIn component + return ; + } + + return

Welcome {session.user.name}!

; +}; +``` + +## Récupérer la session côté serveur + +Parfois, vous souhaiterez récupérer les informations de session côté serveur. Pour se faire, prérécupérez la session à l'aide du helper `getServerAuthSession` fournie par `create-t3-app` et transmettez-le au client à l'aide de `getServerSideProps` : + +```tsx:pages/users/[id].tsx +import { getServerAuthSession } from "../server/auth"; +import { type GetServerSideProps } from "next"; + +export const getServerSideProps: GetServerSideProps = async (ctx) => { + const session = await getServerAuthSession(ctx); + return { + props: { session }, + }; +}; + +const User = () => { + const { data: session } = useSession(); + // NOTE: `session` wont have a loading state since it's already prefetched on the server + + ... +} +``` + +## Inclusion de `user.id` dans la Session + +Create T3 App est configuré pour utiliser le [session callback](https://next-auth.js.org/configuration/callbacks#session-callback) dans la configuration NextAuth.js pour inclure l'ID de l'utilisateur dans le objet "session". + +```ts:pages/api/auth/[...nextauth].ts +callbacks: { + session({ session, user }) { + if (session.user) { + session.user.id = user.id; + } + return session; + }, + }, +``` + +Ceci est couplé avec un fichier de déclaration de type pour s'assurer que `user.id` est typé lors de l'accès à l'objet `session`. En savoir plus sur [`Module Augmentation`](https://next-auth.js.org/getting-started/typescript#module-augmentation) sur la documentation de NextAuth.js. + +```ts:types/next-auth.d.ts +import { DefaultSession } from "next-auth"; + +declare module "next-auth" { + interface Session { + user?: { + id: string; + } & DefaultSession["user"]; + } +} +``` + +Le même modèle peut être utilisé pour ajouter toute autre donnée à l'objet `session`, comme un champ `role`, mais **ne doit pas être utilisé à mauvais escient pour stocker des données sensibles** sur le client. + +## Utilisation avec tRPC + +Lorsque vous utilisez NextAuth.js avec tRPC, vous pouvez créer des procédures réutilisables et protégées à l'aide de [middleware](https://trpc.io/docs/v10/middlewares). Cela vous permet de créer des procédures accessibles uniquement aux utilisateurs authentifiés. `create-t3-app` configure tout cela pour vous, vous permettant d'accéder facilement à l'objet de session dans des procédures authentifiées. + +Cela se fait en deux étapes : + +1. Récupérez la session à partir des en-têtes de requête à l'aide de la fonction [`getServerSession`](https://next-auth.js.org/configuration/nextjs#getServerSession). L'avantage d'utiliser `getServerSession` au lieu de `getSession` est qu'il s'agit d'une fonction côté serveur uniquement et qu'elle ne déclenche pas d'appels de récupération inutiles. `create-t3-app` crée une fonction d'assistance qui résume cette API particulière. + +```ts:server/auth.ts +export const getServerAuthSession = async (ctx: { + req: GetServerSidePropsContext["req"]; + res: GetServerSidePropsContext["res"]; +}) => { + return await getServerSession(ctx.req, ctx.res, nextAuthOptions); +}; +``` + +En utilisant cette fonction d'assistance, nous pouvons récupérer la session et la transmettre au contexte tRPC : + +```ts:server/api/trpc.ts +import { getServerAuthSession } from "../auth"; + +export const createContext = async (opts: CreateNextContextOptions) => { + const { req, res } = opts; + const session = await getServerAuthSession({ req, res }); + return await createContextInner({ + session, + }); +}; +``` + +2. Créez un middleware tRPC qui vérifie si l'utilisateur est authentifié. Nous utilisons ensuite le middleware dans une `protectedProcedure`. Tout appelant à ces procédures doit être authentifié, sinon une erreur sera générée qui pourra être gérée de manière appropriée par le client. + +```ts:server/api/trpc.ts +export const protectedProcedure = t.procedure.use(({ ctx, next }) => { + if (!ctx.session?.user) { + throw new TRPCError({ code: "UNAUTHORIZED" }); + } + return next({ + ctx: { + // infers the `session` as non-nullable + session: { ...ctx.session, user: ctx.session.user }, + }, + }); +}) +``` + +L'objet de session est une représentation légère et minimale de l'utilisateur et ne contient que quelques champs. Lorsque vous utilisez les `protectedProcedures`, vous avez accès à l'identifiant de l'utilisateur qui peut être utilisé pour extraire plus de données de la base de données. + +```ts:server/api/routers/user.ts +const userRouter = router({ + me: protectedProcedure.query(async ({ ctx }) => { + const user = await prisma.user.findUnique({ + where: { + id: ctx.session.user.id, + }, + }); + return user; + }), +}); +``` + +## Utilisation avec Prisma + +Faire fonctionner NextAuth.js avec Prisma nécessite beaucoup de [configuration initiale](https://authjs.dev/reference/adapter/prisma/). `create-t3-app` gère tout cela pour vous, et si vous sélectionnez à la fois Prisma et NextAuth.js, vous obtiendrez un système d'authentification entièrement fonctionnel avec tous les modèles requis préconfigurés. Nous démarrons votre application avec un fournisseur Discord OAuth préconfiguré, que nous avons choisi car c'est l'un des plus faciles à démarrer - fournissez simplement vos jetons dans le `.env` et vous êtes prêt à partir. Cependant, vous pouvez facilement ajouter d'autres fournisseurs en suivant la [documentation NextAuth.js](https://next-auth.js.org/providers/). Notez que certains fournisseurs exigent que des champs supplémentaires soient ajoutés à certains modèles. Nous vous recommandons de lire la documentation du fournisseur que vous souhaitez utiliser pour vous assurer que vous disposez de tous les champs obligatoires. + +### Ajout de nouveaux champs à vos modèles + +Lors de l'ajout de nouveaux champs à l'un des modèles `User`, `Account`, `Session` ou `VerificationToken` (il vous suffira très probablement de modifier le modèle `User` seulement), vous devez garder à l'esprit que l'[Adaptateur Prisma](https://next-auth.js.org/adapters/prisma) crée automatiquement des champs sur ces modèles lorsque de nouveaux utilisateurs s'inscrivent et se connectent. Par conséquent, lors de l'ajout de nouveaux champs à ces modèles, vous devez leur fournir des valeurs par défaut, car l'adaptateur n'a pas connaissance de ces champs. + +Si, par exemple, vous souhaitez ajouter un `role` au modèle `User`, vous devrez fournir une valeur par défaut au champ `role`. Cela se fait en ajoutant une valeur `@default` au champ `role` dans le modèle `User` : + +```diff:prisma/schema.prisma ++ enum Role { ++ USER ++ ADMIN ++ } + + model User { + ... ++ role Role @default(USER) + } +``` + +## Utilisation avec le middleware Next.js + +Utilisation de NextAuth.js avec le middleware Next.js [nécessite l'utilisation de la stratégie de session JWT](https://next-auth.js.org/configuration/nextjs#caveats) pour l'authentification. En effet, le middleware ne peut accéder au cookie de session que s'il s'agit d'un JWT. Par défaut, Create T3 App est configuré pour utiliser la stratégie de base de données **default**, en combinaison avec Prisma comme adaptateur de base de données. + + + L'utilisation de sessions en base de données est l'approche recommandée et + vous devriez vous informer sur les JWT (JSON Web Token) avant de passer à la + stratégie de session JWT, et ce, afin d'éviter tout problème de sécurité. + + +Après avoir basculé vers la stratégie de session JWT, assurez-vous de mettre à jour le callback `session` dans `src/server/auth.ts`. L'objet `user` sera `undefined`. À la place, récupérez l'identifiant de l'utilisateur à partir de l'objet `token`. +Ex.: + +```diff:server/auth.ts + export const authOptions: NextAuthOptions = { ++ session: { ++ strategy: "jwt", ++ }, + callbacks: { +- session: ({ session, user }) => ({ ++ session: ({ session, token }) => ({ + ...session, + user: { + ...session.user, +- id: user.id, ++ id: token.sub, + }, + }), + }, + } +``` + +## Configuration du DiscordProvider par défaut + +1. Rendez-vous dans [la section Applications du portail des développeurs Discord](https://discord.com/developers/applications), et cliquez sur "New Application" +1. Dans le menu des paramètres, allez dans "OAuth2 => General" + +- Copiez l'ID client et collez-le dans `AUTH_DISCORD_ID` dans `.env`. +- Sous Client Secret, cliquez sur "Reset Secret" et copiez cette chaîne de caractères dans `DISCORD CLIENT_SECRET` dans `.env`. Soyez prudent car vous ne pourrez plus voir ce secret et le réinitialiser entraînera l'expiration du secret existant. +- Cliquez sur "Add Redirect" et collez `/api/auth/callback/discord` (exemple pour le développement local : http://localhost:3000/api/auth/rappel/discord) +- Enregistrez vos modifications +- Il est possible, mais non recommandé, d'utiliser la même application Discord pour le développement et la production. Vous pouvez également envisager [moquer le fournisseur](https://github.com/trpc/trpc/blob/main/examples/next-prisma-websockets-starter/src/pages/api/auth/%5B...nextauth%5D.ts) pendant le développement. + +## Ressources utiles + +| Ressource | Lien | +| --------------------------------- | --------------------------------------- | +| Documentation NextAuth.js | https://next-auth.js.org/ | +| NextAuth.js GitHub | https://github.com/nextauthjs/next-auth | +| tRPC Kitchen Sink - with NextAuth | https://kitchen-sink.trpc.io/next-auth | diff --git a/www/src/pages/fr/usage/drizzle.mdx b/www/src/pages/fr/usage/drizzle.mdx new file mode 100644 index 0000000000..6d66fd0dc8 --- /dev/null +++ b/www/src/pages/fr/usage/drizzle.mdx @@ -0,0 +1,84 @@ +--- +title: Drizzle +description: Utilisation de Drizzle. +layout: ../../../layouts/docs.astro +lang: fr +isMdx: true +--- + +Drizzle est un ORM TypeScript sans interface graphique avec des API de requête [relationnelle](https://orm.drizzle.team/docs/rqb) et de type [SQL](https://orm.drizzle.team/docs/select). Il peut gérer les migrations et les schémas de base de données, et fournit un client de base de données avec sécurité de type. Il est également livré avec [Drizzle-Kit](https://orm.drizzle.team/drizzle-studio/overview), un ensemble d'outils complémentaires qui aident à interroger votre base de données. + +## Client Drizzle + +Le client Drizzle se trouve dans `src/server/db/index.ts`. Dans ce fichier, vous pouvez définir l'URL de connexion à votre base de données et connecter votre schéma à l'objet de base de données. + +```ts:src/server/db/index.ts +import { env } from "~/env"; +import * as schema from "./schema"; +import postgres from "postgres"; + + +const conn = postgres(env.DATABASE_URL) + +export const db = drizzle(conn, { schema }); +``` + +Nous recommandons d'inclure le client de base de données dans votre contexte tRPC : + +```ts:src/server/api/trpc.ts +import { db } from "~/server/db"; + +export const createTRPCContext = async (opts: { headers: Headers }) => { + const session = await auth(); + + return { + db, + session, + ...opts, + }; +}; +``` + +## Schéma + +Le fichier de schéma Drizzle se trouve dans `src/server/db/schema.ts`. C'est dans ce fichier que vous pouvez définir le schéma et les modèles de votre base de données, et qu'il se connecte au client Drizzle. + +Lorsque vous sélectionnez NextAuth.js en combinaison avec Drizzle, le fichier de schéma est généré et configuré pour vous avec les valeurs recommandées pour les modèles `User`, `Session`, `Account` et `VerificationToken`, conformément à la [documentation Auth.js](https://authjs.dev/getting-started/adapters/drizzle). + +## Drizzle Kit + +Drizzle Kit est une collection d'outils en ligne de commande conçus pour vous aider à gérer votre base de données. T3 Stack inclut automatiquement Drizzle Kit lorsque vous sélectionnez Drizzle comme ORM. + +```json:package.json +"scripts": { + ... + "db:generate": "drizzle-kit generate", + "db:migrate": "drizzle-kit migrate", + "db:push": "drizzle-kit push", + "db:studio": "drizzle-kit studio", + ... + }, +``` + +### Explications des scripts. + +`db:generate` +Génère les types et les modèles TypeScript à partir de votre schéma de base de données, assurant la sécurité des types et une intégration facile avec l'ORM Drizzle. + +`db:migrate` +Applique les migrations en attente à votre base de données, maintenant ainsi votre schéma synchronisé avec les changements et les mises à jour de votre projet. + +`db:push` +Applique directement les modifications du schéma local à la base de données sans nécessiter de fichiers de migration explicites. Ceci peut être utile pour une synchronisation rapide en développement. + +`db:studio` +Ouvre une interface visuelle pour gérer et inspecter vos tables de base de données, vos données et vos relations. + +## Ressources utiles. + +| Ressource | Liens | +| --------------------------- | --------------------------------------------------- | +| Documentation Drizzle | https://orm.drizzle.team/docs/overview | +| Drizzle GitHub | https://github.com/drizzle-team/drizzle-orm | +| Auth.JS Drizzle Adapter | https://authjs.dev/getting-started/adapters/drizzle | +| Drizzle Kit Migration Guide | https://orm.drizzle.team/docs/kit-overview | diff --git a/www/src/pages/fr/usage/env-variables.mdx b/www/src/pages/fr/usage/env-variables.mdx index 7ca113e65a..629b3e0c04 100644 --- a/www/src/pages/fr/usage/env-variables.mdx +++ b/www/src/pages/fr/usage/env-variables.mdx @@ -118,3 +118,33 @@ export const env = createEnv({ ``` TWITTER_API_TOKEN= ``` + +## Coercition de type + +Toutes les variables que vous ajoutez à `.env` seront importées en tant que chaînes de caractères, même si leur valeur est destinée à représenter un type différent. Si vous souhaitez utiliser vos variables d'environnement comme un type différent au moment de l'exécution, vous pouvez utiliser la fonction `coerce` de Zod pour convertir la chaîne vers le type souhaité. Une erreur sera lancée si la conversion échoue. + +Ajoutez les variables à votre fichier `.env` : + +``` +SOME_NUMBER=123 +SOME_BOOLEAN=true +``` + +Ensuite, validez-les dans `env.js` : + +```ts +import { createEnv } from "@t3-oss/env-nextjs"; +import { z } from "zod"; + +export const env = createEnv({ + server: { + SOME_NUMBER: z.coerce.number(), + SOME_BOOLEAN: z.coerce.boolean(), + }, + // ... + runtimeEnv: { + SOME_NUMBER: process.env.SOME_NUMBER, + SOME_BOOLEAN: process.env.SOME_BOOLEAN, + }, +}); +``` diff --git a/www/src/pages/fr/usage/first-steps.md b/www/src/pages/fr/usage/first-steps.md index 34202c35af..fa1af7d20e 100644 --- a/www/src/pages/fr/usage/first-steps.md +++ b/www/src/pages/fr/usage/first-steps.md @@ -9,8 +9,17 @@ Vous venez de créer une nouvelle application T3 et vous êtes prêt à démarre ## Base de données -Si votre application inclut Prisma, assurez vous de lancer la commande `npx prisma db push` depuis la racine de votre application -Cette commande va synchroniser votre schéma Prisma avec votre base de données et va générer les types TypeScript sur lequel se base le client Prisma. Notez que vous devez redémarrer le serveur TypeScript afin qu'il puisse détecter les nouveaux types générés. +### MySQL, PostgreSQL + +Si vous avez choisi MySQL ou PostgreSQL comme base de données, votre application T3 sera livrée avec un script bash `start-database.sh` qui peut créer un conteneur Docker avec une base de données pour le développement local. Si vous avez déjà une base de données, n'hésitez pas à supprimer ce fichier et à mettre vos informations d'identification de base de données dans `.env`. Sur macOS, vous pouvez également utiliser [DBngin](https://dbngin.com/) si vous ne souhaitez pas utiliser Docker. + +### Prisma + +Si votre application inclut Prisma, assurez-vous d'exécuter `npx prisma db push` depuis le répertoire racine de votre application. Cette commande synchronisera votre schéma Prisma avec votre base de données et générera les types TypeScript pour le client Prisma en fonction de votre schéma. Notez que vous devez [redémarrer le serveur TypeScript](https://tinytip.co/tips/vscode-restart-ts/) après cela afin qu'il puisse détecter les types générés. + +### Drizzle + +Si votre application inclut Drizzle, consultez le fichier `.env` pour savoir comment construire votre variable d'environnement `DATABASE_URL`. Une fois votre fichier `.env` prêt, exécutez `pnpm db:push` (ou l'équivalent pour d'autres gestionnaires de paquets) pour appliquer votre schéma à la base de données. ## Authentification @@ -29,6 +38,14 @@ Bien sûr, si vous préférez utiliser un autre fournisseur d'authentification, Vous devriez maintenant pouvoir vous connecter. +## Configuration de l'éditeur de code. + +Les extensions suivantes sont recommandées pour une expérience de développement optimale. Les liens ci-dessous fournissent une prise en charge des plugins spécifiques à l'éditeur. + +- [Prisma Extension](https://www.prisma.io/docs/guides/development-environment/editor-setup) +- [Tailwind CSS IntelliSense Extension](https://tailwindcss.com/docs/editor-setup) +- [Prettier Extension](https://prettier.io/docs/en/editors.html) + ## Prochaines étapes - Si votre application inclut tRPC, consultez `src/pages/index.tsx` et `src/server/api/routers/post.ts` pour voir comment fonctionnent les requêtes tRPC. diff --git a/www/src/pages/fr/usage/next-auth.mdx b/www/src/pages/fr/usage/next-auth.mdx index 6978124152..89a88a19c3 100644 --- a/www/src/pages/fr/usage/next-auth.mdx +++ b/www/src/pages/fr/usage/next-auth.mdx @@ -6,222 +6,13 @@ lang: fr isMdx: true --- -import Callout from "../../../components/docs/callout.tsx"; +import Tabs from "../../../components/docs/tabs.astro"; +import AppRouter from "./_next-auth-app-router.mdx"; +import Pages from "./_next-auth-pages.mdx"; -Lorsque vous souhaitez un système d'authentification dans votre application Next.js, NextAuth.js est une excellente solution pour apporter la sécurité sans avoir à le construire vous-même. Il vient avec une longue liste de fournisseurs pour ajouter rapidement de l'authentification OAuth et fournit des adaptateurs pour de nombreuses bases de données et ORM. +Lorsque vous souhaitez un système d'authentification dans votre application Next.js, NextAuth.js est une excellente solution pour intégrer la complexité de la sécurité sans avoir à la construire vous-même. Il est livré avec une longue liste de fournisseurs pour ajouter rapidement l'authentification OAuth et propose des adaptateurs pour de nombreuses bases de données et ORM. -## Context Provider - -Dans le point d'entrée de votre application, vous verrez que votre application est encapsulée dans un [SessionProvider](https://next-auth.js.org/getting-started/client#sessionprovider) : - -```tsx:pages/_app.tsx - - - -``` - -Ce fournisseur de contexte permet à votre application d'accéder aux données de session de n'importe où dans votre application, sans avoir à les transmettre en tant que props : - -```tsx:pages/users/[id].tsx -import { useSession } from "next-auth/react"; - -const User = () => { - const { data: session } = useSession(); - - if (!session) { - // Handle unauthenticated state, e.g. render a SignIn component - return ; - } - - return

Welcome {session.user.name}!

; -}; -``` - -## Récupérer la session côté serveur - -Parfois, vous souhaiterez demander la session côté serveur. Pour ce faire, prérécupérez la session à l'aide du helper `getServerAuthSession` fournie par `create-t3-app` et transmettez-le au client à l'aide de `getServerSideProps` : - -```tsx:pages/users/[id].tsx -import { getServerAuthSession } from "../server/auth"; -import { type GetServerSideProps } from "next"; - -export const getServerSideProps: GetServerSideProps = async (ctx) => { - const session = await getServerAuthSession(ctx); - return { - props: { session }, - }; -}; - -const User = () => { - const { data: session } = useSession(); - // NOTE: `session` wont have a loading state since it's already prefetched on the server - - ... -} -``` - -## Inclusion de `user.id` dans la Session - -Create T3 App est configuré pour utiliser le [session callback](https://next-auth.js.org/configuration/callbacks#session-callback) dans la configuration NextAuth.js pour inclure l'ID de l'utilisateur dans le objet "session". - -```ts:pages/api/auth/[...nextauth].ts -callbacks: { - session({ session, user }) { - if (session.user) { - session.user.id = user.id; - } - return session; - }, - }, -``` - -Ceci est couplé avec un fichier de déclaration de type pour s'assurer que `user.id` est typé lors de l'accès à l'objet `session`. En savoir plus sur [`Module Augmentation`](https://next-auth.js.org/getting-started/typescript#module-augmentation) sur la documentation de NextAuth.js. - -```ts:types/next-auth.d.ts -import { DefaultSession } from "next-auth"; - -declare module "next-auth" { - interface Session { - user?: { - id: string; - } & DefaultSession["user"]; - } -} -``` - -Le même modèle peut être utilisé pour ajouter toute autre donnée à l'objet `session`, comme un champ `role`, mais **ne doit pas être utilisé à mauvais escient pour stocker des données sensibles** sur le client. - -## Utilisation avec tRPC - -Lorsque vous utilisez NextAuth.js avec tRPC, vous pouvez créer des procédures réutilisables et protégées à l'aide de [middleware](https://trpc.io/docs/v10/middlewares). Cela vous permet de créer des procédures accessibles uniquement aux utilisateurs authentifiés. `create-t3-app` configure tout cela pour vous, vous permettant d'accéder facilement à l'objet de session dans des procédures authentifiées. - -Cela se fait en deux étapes : - -1. Récupérez la session à partir des en-têtes de requête à l'aide de la fonction [`getServerSession`](https://next-auth.js.org/configuration/nextjs#getServerSession). L'avantage d'utiliser `getServerSession` au lieu de `getSession` est qu'il s'agit d'une fonction côté serveur uniquement et qu'elle ne déclenche pas d'appels de récupération inutiles. `create-t3-app` crée une fonction d'assistance qui résume cette API particulière. - -```ts:server/auth.ts -export const getServerAuthSession = async (ctx: { - req: GetServerSidePropsContext["req"]; - res: GetServerSidePropsContext["res"]; -}) => { - return await getServerSession(ctx.req, ctx.res, nextAuthOptions); -}; -``` - -En utilisant cette fonction d'assistance, nous pouvons récupérer la session et la transmettre au contexte tRPC : - -```ts:server/api/trpc.ts -import { getServerAuthSession } from "../auth"; - -export const createContext = async (opts: CreateNextContextOptions) => { - const { req, res } = opts; - const session = await getServerAuthSession({ req, res }); - return await createContextInner({ - session, - }); -}; -``` - -2. Créez un middleware tRPC qui vérifie si l'utilisateur est authentifié. Nous utilisons ensuite le middleware dans une `protectedProcedure`. Tout appelant à ces procédures doit être authentifié, sinon une erreur sera générée qui pourra être gérée de manière appropriée par le client. - -```ts:server/api/trpc.ts -export const protectedProcedure = t.procedure.use(({ ctx, next }) => { - if (!ctx.session?.user) { - throw new TRPCError({ code: "UNAUTHORIZED" }); - } - return next({ - ctx: { - // infers the `session` as non-nullable - session: { ...ctx.session, user: ctx.session.user }, - }, - }); -}) -``` - -L'objet de session est une représentation légère et minimale de l'utilisateur et ne contient que quelques champs. Lorsque vous utilisez les `protectedProcedures`, vous avez accès à l'identifiant de l'utilisateur qui peut être utilisé pour extraire plus de données de la base de données. - -```ts:server/api/routers/user.ts -const userRouter = router({ - me: protectedProcedure.query(async ({ ctx }) => { - const user = await prisma.user.findUnique({ - where: { - id: ctx.session.user.id, - }, - }); - return user; - }), -}); -``` - -## Utilisation avec Prisma - -Faire fonctionner NextAuth.js avec Prisma nécessite beaucoup de [configuration initiale](https://authjs.dev/reference/adapter/prisma/). `create-t3-app` gère tout cela pour vous, et si vous sélectionnez à la fois Prisma et NextAuth.js, vous obtiendrez un système d'authentification entièrement fonctionnel avec tous les modèles requis préconfigurés. Nous démarrons votre application avec un fournisseur Discord OAuth préconfiguré, que nous avons choisi car c'est l'un des plus faciles à démarrer - fournissez simplement vos jetons dans le `.env` et vous êtes prêt à partir. Cependant, vous pouvez facilement ajouter d'autres fournisseurs en suivant la [documentation NextAuth.js](https://next-auth.js.org/providers/). Notez que certains fournisseurs exigent que des champs supplémentaires soient ajoutés à certains modèles. Nous vous recommandons de lire la documentation du fournisseur que vous souhaitez utiliser pour vous assurer que vous disposez de tous les champs obligatoires. - -### Ajout de nouveaux champs à vos modèles - -Lors de l'ajout de nouveaux champs à l'un des modèles `User`, `Account`, `Session` ou `VerificationToken` (il vous suffira très probablement de modifier le modèle `User` seulement), vous devez garder à l'esprit que l'[Adaptateur Prisma](https://next-auth.js.org/adapters/prisma) crée automatiquement des champs sur ces modèles lorsque de nouveaux utilisateurs s'inscrivent et se connectent. Par conséquent, lors de l'ajout de nouveaux champs à ces modèles, vous devez leur fournir des valeurs par défaut, car l'adaptateur n'a pas connaissance de ces champs. - -Si, par exemple, vous souhaitez ajouter un `role` au modèle `User`, vous devrez fournir une valeur par défaut au champ `role`. Cela se fait en ajoutant une valeur `@default` au champ `role` dans le modèle `User` : - -```diff:prisma/schema.prisma -+ enum Role { -+ USER -+ ADMIN -+ } - - model User { - ... -+ role Role @default(USER) - } -``` - -## Utilisation avec le middleware Next.js - -Utilisation de NextAuth.js avec le middleware Next.js [nécessite l'utilisation de la stratégie de session JWT](https://next-auth.js.org/configuration/nextjs#caveats) pour l'authentification. En effet, le middleware ne peut accéder au cookie de session que s'il s'agit d'un JWT. Par défaut, Create T3 App est configuré pour utiliser la stratégie de base de données **default**, en combinaison avec Prisma comme adaptateur de base de données. - - - L'utilisation de sessions en base de données est l'approche recommandée et - vous devriez vous informer sur les JWT (JSON Web Token) avant de passer à la - stratégie de session JWT, et ce, afin d'éviter tout problème de sécurité. - - -Après avoir basculé vers la stratégie de session JWT, assurez-vous de mettre à jour le callback `session` dans `src/server/auth.ts`. L'objet `user` sera `undefined`. À la place, récupérez l'identifiant de l'utilisateur à partir de l'objet `token`. -Ex.: - -```diff:server/auth.ts - export const authOptions: NextAuthOptions = { -+ session: { -+ strategy: "jwt", -+ }, - callbacks: { -- session({ session, user }) { -+ session({ session, token }) { -- if (session.user) { -+ if (session.user && token.sub) { -- session.user.id = user.id; -+ session.user.id = token.sub; - } - return session; - } - }, - }; -``` - -## Configuration du DiscordProvider par défaut - -1. Rendez-vous dans [la section Applications du portail des développeurs Discord](https://discord.com/developers/applications), et cliquez sur "New Application" -1. Dans le menu des paramètres, allez dans "OAuth2 => General" - -- Copiez l'ID client et collez-le dans `AUTH_DISCORD_ID` dans `.env`. -- Sous Client Secret, cliquez sur "Reset Secret" et copiez cette chaîne de caractères dans `DISCORD CLIENT_SECRET` dans `.env`. Soyez prudent car vous ne pourrez plus voir ce secret et le réinitialiser entraînera l'expiration du secret existant. -- Cliquez sur "Add Redirect" et collez `/api/auth/callback/discord` (exemple pour le développement local : http://localhost:3000/api/auth/rappel/discord) -- Enregistrez vos modifications -- Il est possible, mais non recommandé, d'utiliser la même application Discord pour le développement et la production. Vous pouvez également envisager [moquer le fournisseur](https://github.com/trpc/trpc/blob/main/examples/next-prisma-websockets-starter/src/pages/api/auth/%5B...nextauth%5D.ts) pendant le développement. - -## Ressources utiles - -| Ressource | Lien | -| --------------------------------- | --------------------------------------- | -| Documentation NextAuth.js | https://next-auth.js.org/ | -| NextAuth.js GitHub | https://github.com/nextauthjs/next-auth | -| tRPC Kitchen Sink - with NextAuth | https://kitchen-sink.trpc.io/next-auth | + + + + diff --git a/www/src/pages/fr/usage/prisma.md b/www/src/pages/fr/usage/prisma.md index 3b602791c9..8f56730f6b 100644 --- a/www/src/pages/fr/usage/prisma.md +++ b/www/src/pages/fr/usage/prisma.md @@ -73,5 +73,6 @@ Ensuite, exécutez simplement `pnpm db-seed` (ou `npm`/`yarn`) pour amorcer votr | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | Documentation Prisma | https://www.prisma.io/docs/ | | Prisma GitHub | https://github.com/prisma/prisma | +| Prisma Migrate Playground | https://playground.prisma.io/guides | | Adaptateur Prisma pour NextAuth.JS | https://next-auth.js.org/adapters/prisma | | Guide de connexion à PlanetScale | https://www.prisma.io/docs/getting-started/setup-prisma/add-to-existing-project/relational-databases/connect-your-database-typescript-planetscale | diff --git a/www/src/pages/fr/usage/tailwind.md b/www/src/pages/fr/usage/tailwind.md index 635ea4a3c9..d2c8d87b74 100644 --- a/www/src/pages/fr/usage/tailwind.md +++ b/www/src/pages/fr/usage/tailwind.md @@ -36,7 +36,7 @@ import "./my-class.css"; 3. Ajouter la classe à votre code HTML -```jsx +```html
...
``` diff --git a/www/src/pages/fr/usage/trpc.md b/www/src/pages/fr/usage/trpc.md index 9694fe736d..ebb4917438 100644 --- a/www/src/pages/fr/usage/trpc.md +++ b/www/src/pages/fr/usage/trpc.md @@ -57,7 +57,7 @@ const userRouter = createTRPCRouter({ Il s'agit d'une procédure tRPC (équivalente à un gestionnaire de route dans un backend traditionnel) qui valide d'abord l'entrée à l'aide de Zod (qui est la même bibliothèque de validation que nous utilisons pour les [variables d'environnement] (./env-variables)) - dans ce cas , il s'assure que l'entrée est une chaîne de caractères. Si l'entrée n'en est pas une, elle renverra une erreur informative à la place. -Après l'entrée, nous enchaînons une fonction de résolveur qui peut être soit une [query](https://trpc.io/docs/v10/react-queries), [mutation](https://trpc.io/docs/v10/react-mutations), ou une [subscription](https://trpc.io/docs/v10/subscriptions). Dans notre exemple, le résolveur appelle notre base de données à l'aide de notre client [prisma](./prisma) et renvoie l'utilisateur dont l'`id` correspond à celui que nous avons transmis. +Après l'entrée, nous enchaînons une fonction de résolveur qui peut être soit une [query](https://trpc.io/docs/v11/react-queries), [mutation](https://trpc.io/docs/v11/react-mutations), ou une [subscription](https://trpc.io/docs/v11/subscriptions). Dans notre exemple, le résolveur appelle notre base de données à l'aide de notre client [prisma](./prisma) et renvoie l'utilisateur dont l'`id` correspond à celui que nous avons transmis. Vous définissez vos procédures dans des "routeurs" qui représentent une collection de procédures liées avec un espace de noms partagé. Vous pouvez avoir un routeur pour les `utilisateurs`, un pour les `posts` et un autre pour les `messages`. Ces routeurs peuvent ensuite être fusionnés en un seul `appRouter` centralisé : @@ -91,7 +91,37 @@ const UserPage = () => { }; ``` -Vous remarquerez immédiatement à quel point la saisie semi-automatique et la sécurité de typage sont bonnes. Dès que vous écrivez `trpc.`, vos routeurs s'affichent en saisie semi-automatique et lorsque vous sélectionnez un routeur, ses procédures s'affichent également. Vous obtiendrez également une erreur TypeScript si votre entrée ne correspond pas au validateur que vous avez défini du côté backend. +Vous remarquerez immédiatement à quel point la saisie semi-automatique et la sécurité de typage sont bonnes. Dès que vous écrivez `api.`, vos routeurs s'affichent en saisie semi-automatique et lorsque vous sélectionnez un routeur, ses procédures s'affichent également. Vous obtiendrez également une erreur TypeScript si votre entrée ne correspond pas au validateur que vous avez défini du côté backend. + +## Inférence d'erreurs + +Par défaut, `create-t3-app` configure un [outil de formatage des erreurs](https://trpc.io/docs/v11/server/error-formatting) qui vous permet de deviner vos erreurs Zod si vous avez des problèmes de validation côté serveur. + +Exemple d'utilisation : + +```tsx +function MyComponent() { + const { mutate, error } = api.post.create.useMutation(); + + return ( + { + e.preventDefault(); + const formData = new FormData(e.currentTarget); + mutate({ title: formData.get('title') }); + }}> + + {error?.data?.zodError?.fieldErrors.title && ( + {/** La fonction `mutate` a renvoyé une erreur concernant le `titre`. */} + + {error.data.zodError.fieldErrors.title} + + )} + + ... + + ); +} +``` ## Fichiers @@ -107,29 +137,29 @@ Ce fichier est divisé en deux parties, la création du contexte et l'initialisa 1. Nous définissons le contexte qui est passé à vos procédures tRPC. Le contexte sont des données auxquelles toutes vos procédures tRPC auront accès, et c'est un endroit idéal pour mettre des choses comme les connexions à la base de données, les informations d'authentification, etc. Dans create-t3-app, nous utilisons deux fonctions, pour activer l'utilisation d'un sous-ensemble du contexte lorsque nous n'avons pas accès à l'objet de requête. -- `createInnerTRPCContext` : c'est ici que vous définissez le contexte qui ne dépend pas de la requête, par ex. votre connexion à la base de données. Vous pouvez utiliser cette fonction pour les [tests d'intégration](#exemple-de-test-dintégration) ou [ssg-helpers](https://trpc.io/docs/v10/ssg-helpers) où vous n'avez pas d'objet de requête . +- `createInnerTRPCContext` : c'est ici que vous définissez le contexte qui ne dépend pas de la requête, par ex. votre connexion à la base de données. Vous pouvez utiliser cette fonction pour les [tests d'intégration](#exemple-de-test-dintégration) ou [ssg-helpers](https://trpc.io/docs/v11/ssg-helpers) où vous n'avez pas d'objet de requête . - `createTRPCContext` : c'est ici que vous définissez le contexte qui dépend de la requête, par ex. la session de l'utilisateur. Vous demandez la session à l'aide de l'objet `opts.req`, puis transmettez la session à la fonction `createInnerTRPCContext` pour créer le contexte final. -1. Nous initialisons tRPC et définissons des [procédures](https://trpc.io/docs/v10/procedures) et des [middlewares](https://trpc.io/docs/v10/middlewares) réutilisables. Par convention, vous ne devriez pas exporter l'intégralité de l'objet `t`, mais plutôt de créer des procédures et des middlewares réutilisables et de les exporter. +1. Nous initialisons tRPC et définissons des [procédures](https://trpc.io/docs/v11/procedures) et des [middlewares](https://trpc.io/docs/v11/middlewares) réutilisables. Par convention, vous ne devriez pas exporter l'intégralité de l'objet `t`, mais plutôt de créer des procédures et des middlewares réutilisables et de les exporter. -Vous remarquerez que nous utilisons `superjson` comme [transformateur de données](https://trpc.io/docs/v10/data-transformers). Cela fait en sorte que vos types de données sont préservés lorsqu'ils atteignent le client, donc si vous envoyez par exemple un objet `Date`, le client renverra une `Date` et non une chaîne, ce qui est le cas pour la plupart des API. +Vous remarquerez que nous utilisons `superjson` comme [transformateur de données](https://trpc.io/docs/v11/data-transformers). Cela fait en sorte que vos types de données sont préservés lorsqu'ils atteignent le client, donc si vous envoyez par exemple un objet `Date`, le client renverra une `Date` et non une chaîne, ce qui est le cas pour la plupart des API. ### 📄 `server/api/routers/*.ts` -C'est ici que vous définissez les routes et les procédures de votre API. Par convention, vous [créez des routeurs séparés](https://trpc.io/docs/v10/router) pour les procédures associées. +C'est ici que vous définissez les routes et les procédures de votre API. Par convention, vous [créez des routeurs séparés](https://trpc.io/docs/v11/router) pour les procédures associées. ### 📄 `server/api/root.ts` -Ici, nous [fusionnons](https://trpc.io/docs/v10/merging-routers) tous les sous-routeurs définis dans `routers/**` en un seul routeur d'application. +Ici, nous [fusionnons](https://trpc.io/docs/v11/merging-routers) tous les sous-routeurs définis dans `routers/**` en un seul routeur d'application. ### 📄 `utils/api.ts` Il s'agit du point d'entrée frontend pour tRPC. C'est ici que vous allez importer la **définition de type** du routeur et créer votre client tRPC avec les hooks de react-query. Depuis que nous avons activé `superjson` comme transformateur de données sur le backend, nous devons également l'activer sur le frontend. En effet, les données sérialisées du backend sont désérialisées sur le frontend. -Vous définirez ici vos [liens](https://trpc.io/docs/v10/links) tRPC, qui détermine le flux de requêtes du client vers le serveur. Nous utilisons le [`httpBatchLink`](https://trpc.io/docs/v10/links/httpBatchLink) "par défaut" qui active [le traitement par lot des requêtes](https://cloud.google.com/compute/docs/api/how-tos/batch), ainsi qu'un [`loggerLink`](https://trpc.io/docs/v10/links/loggerLink) qui génère des journaux de requêtes utiles pendant le développement. +Vous définirez ici vos [liens](https://trpc.io/docs/v11/links) tRPC, qui détermine le flux de requêtes du client vers le serveur. Nous utilisons le [`httpBatchLink`](https://trpc.io/docs/v11/links/httpBatchLink) "par défaut" qui active [le traitement par lot des requêtes](https://cloud.google.com/compute/docs/api/how-tos/batch), ainsi qu'un [`loggerLink`](https://trpc.io/docs/v11/links/loggerLink) qui génère des journaux de requêtes utiles pendant le développement. -Enfin, nous exportons un [helper de type](https://trpc.io/docs/v10/infer-types#additional-dx-helper-type) que vous pouvez utiliser pour déduire vos types sur le frontend. +Enfin, nous exportons un [helper de type](https://trpc.io/docs/v11/infer-types#additional-dx-helper-type) que vous pouvez utiliser pour déduire vos types sur le frontend.
@@ -143,7 +173,7 @@ Avec les API classiques, vous pouvez appeler vos points de terminaison à l'aide ### Exposez une seule procédure vers l'extérieur -Si vous souhaitez exposer une seule procédure vers l'extérieur, vous cherchez des [appels côté serveur](https://trpc.io/docs/v10/server-side-calls). Cela vous permettrait de créer un point de terminaison API Next.js normal, et de réutiliser la partie résolveur de votre procédure tRPC. +Si vous souhaitez exposer une seule procédure vers l'extérieur, vous cherchez des [appels côté serveur](https://trpc.io/docs/v11/server-side-calls). Cela vous permettrait de créer un point de terminaison API Next.js normal, et de réutiliser la partie résolveur de votre procédure tRPC. ```ts:pages/api/users/[id].ts import { type NextApiRequest, type NextApiResponse } from "next"; @@ -179,7 +209,7 @@ Si vous souhaitez exposer chaque procédure vers l'extérieur, consultez le plug ### Ce ne sont que des requêtes HTTP -tRPC communique via HTTP, il est donc également possible d'appeler vos procédures tRPC à l'aide de requêtes HTTP "régulières". Cependant, la syntaxe peut être fastidieuse en raison du [protocole RPC](https://trpc.io/docs/v10/rpc) utilisé par tRPC. Si vous êtes curieux, vous pouvez regarder à quoi ressemblent les demandes et les réponses tRPC dans l'onglet réseau de votre navigateur, mais nous vous suggérons de le faire uniquement à titre d'exercice pédagogique et de vous en tenir à l'une des solutions décrites ci-dessus. +tRPC communique via HTTP, il est donc également possible d'appeler vos procédures tRPC à l'aide de requêtes HTTP "régulières". Cependant, la syntaxe peut être fastidieuse en raison du [protocole RPC](https://trpc.io/docs/v11/rpc) utilisé par tRPC. Si vous êtes curieux, vous pouvez regarder à quoi ressemblent les demandes et les réponses tRPC dans l'onglet réseau de votre navigateur, mais nous vous suggérons de le faire uniquement à titre d'exercice pédagogique et de vous en tenir à l'une des solutions décrites ci-dessus. ## Comparaison avec un endpoint d'API Next.js