diff --git a/www/src/config.ts b/www/src/config.ts index bf7b5b1a7e..03297789ab 100644 --- a/www/src/config.ts +++ b/www/src/config.ts @@ -29,6 +29,7 @@ export const KNOWN_LANGUAGES = { // sv: "Svenska", ar: "العربية", en: "English", + fr: "Français", pt: "Português", ru: "Русский", no: "Norsk", @@ -125,6 +126,35 @@ export const SIDEBAR: Sidebar = { { text: "Docker", link: "en/deployment/docker" }, ], }, + fr: { + "Create T3 App": [ + { text: "Introduction", link: "fr/introduction" }, + { text: "Pourquoi CT3A?", link: "fr/why" }, + { text: "Installation", link: "fr/installation" }, + { text: "Structure des dossiers", link: "fr/folder-structure" }, + { text: "FAQ", link: "fr/faq" }, + { text: "Collection T3", link: "fr/t3-collection" }, + { text: "Autres recommandations", link: "fr/other-recs" }, + ], + Usage: [ + { text: "Premiers pas", link: "fr/usage/first-steps" }, + { text: "Next.js", link: "fr/usage/next-js" }, + { text: "TypeScript", link: "fr/usage/typescript" }, + { text: "tRPC", link: "fr/usage/trpc" }, + { text: "Prisma", link: "fr/usage/prisma" }, + { text: "NextAuth.js", link: "fr/usage/next-auth" }, + { + text: "Variables d'environnement", + link: "fr/usage/env-variables", + }, + { text: "Tailwind CSS", link: "fr/usage/tailwind" }, + ], + Deployment: [ + { text: "Vercel", link: "fr/deployment/vercel" }, + { text: "Netlify", link: "fr/deployment/netlify" }, + { text: "Docker", link: "fr/deployment/docker" }, + ], + }, pt: { "Create T3 App": [ { text: "Introdução", link: "pt/introduction" }, @@ -226,6 +256,11 @@ export const SIDEBAR_HEADER_MAP: Record< Usage: "كيفية الإستخدام؟", Deployment: "نَشر تطبيقك", }, + fr: { + "Create T3 App": "Create T3 App", + Usage: "Utilisation", + Deployment: "Déploiement", + }, pt: { "Create T3 App": "Create T3 App", Usage: "Uso", diff --git a/www/src/pages/fr/deployment/docker.md b/www/src/pages/fr/deployment/docker.md new file mode 100644 index 0000000000..d54da20cf6 --- /dev/null +++ b/www/src/pages/fr/deployment/docker.md @@ -0,0 +1,213 @@ +--- +title: Docker +description: Déploiement avec Docker +layout: ../../../layouts/docs.astro +lang: fr +--- + +Vous pouvez containeriser cette stack et la déployer en tant que conteneur unique à l'aide de Docker, ou en tant que partie d'un ensemble de conteneurs en utilisant docker-compose. Voir [`ajcwebdev/ct3a-docker`](https://github.com/ajcwebdev/ct3a-docker) pour un exemple basé sur cette documentation. + +## Configuration du projet sous Docker + +Veuillez noter que Next.js nécessite des variables d’environnements qui sont différentes entre le processus de génération (celles-ci vont être disponible seulement côté navigateur, et sont préfixées par `NEXT_PUBLIC`) et dans l’environnement d’exécution, qui est côté serveur seulement. Dans cette démo nous utilisons deux variables. Prêtez attention à leurs positions dans les fichiers `Dockerfile`, `docker-compose.yml` et dans la ligne de commande. + +- `DATABASE_URL` (utiliser par le serveur) +- `NEXT_PUBLIC_CLIENTVAR` (utiliser par le client) + +### 1. Configuration de Next + +Dans votre fichier [`next.config.mjs`](https://github.com/t3-oss/create-t3-app/blob/main/cli/template/base/next.config.mjs), ajouter l'entrée `output` avec comme valeur `standalone` [réduit la taille de l'image Docker en se basant sur la sortie du processus de génération](https://nextjs.org/docs/advanced-features/output-file-tracing): + +```diff +export default defineNextConfig({ + reactStrictMode: true, + swcMinify: true, ++ output: "standalone", +}); +``` + +### 2. Créer un fichier dockerignore + +
+ + Cliquez ici et incluez le contenue dans votre .dockerignore: + +
+ +``` +.env +Dockerfile +.dockerignore +node_modules +npm-debug.log +README.md +.next +.git +``` + +
+ +
+ +### 3. Créer un fichier Dockerfile + +> Étant donné que nous ne récupérons pas les variables d'environnement du serveur dans notre conteneur, la [validation du schéma d'environnement](/fr/usage/env-variables) échouera. Pour éviter cela, nous devons ajouter l'argument `SKIP_ENV_VALIDATION=1` à la commande de génération afin que les schémas d'environnement ne soient pas validé à ce moment là. + +
+ + Cliquez ici et incluez le contenue dans votre Dockerfile: + +
+ +```docker +##### DEPENDENCIES + +FROM --platform=linux/amd64 node:16-alpine AS deps +RUN apk add --no-cache libc6-compat openssl1.1-compat +WORKDIR /app + +# Install Prisma Client - remove if not using Prisma + +COPY prisma ./ + +# Install dependencies based on the preferred package manager + +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 + +##### BUILDER + +FROM --platform=linux/amd64 node:16-alpine AS builder +ARG DATABASE_URL +ARG NEXT_PUBLIC_CLIENTVAR +WORKDIR /app +COPY --from=deps /app/node_modules ./node_modules +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 + +##### RUNNER + +FROM --platform=linux/amd64 node:16-alpine 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.mjs ./ +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 + +USER nextjs +EXPOSE 3000 +ENV PORT 3000 + +CMD ["node", "server.js"] + +``` + +> **_Notes_** +> +> - _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._ + +
+
+ +## Génération et exécution de l'image localement + +Générer et exécuter l'image localement avec les commandes suivantes: + +```bash +docker build -t ct3a-docker --build-arg NEXT_PUBLIC_CLIENTVAR=clientvar . +docker run -p 3000:3000 -e DATABASE_URL="database_url_goes_here" ct3a-docker +``` + +Ouvrez [localhost:3000](http://localhost:3000/) pour voir votre application s'exécuter. + +## Docker Compose + +Vous pouvez également utiliser Docker Compose pour générer l'image et exécuter le conteneur. + +
+ + Suivez les étapes 1 à 4 ci-dessus, cliquez ici et incluez le contenue dans votre docker-compose.yml: + +
+ +```yaml +version: "3.9" +services: + app: + platform: "linux/amd64" + build: + context: . + dockerfile: Dockerfile + args: + NEXT_PUBLIC_CLIENTVAR: "clientvar" + working_dir: /app + ports: + - "3000:3000" + image: t3-app + environment: + - DATABASE_URL=database_url_goes_here +``` + +Exécutez ceci à l'aide de la commande `docker compose up` : + +```bash +docker compose up +``` + +Ouvrez [localhost:3000](http://localhost:3000/) pour voir votre application en cours d'exécution. + +
+
+ +## Déployer sur Railway + +Vous pouvez utiliser un service de type PaaS comme [Railway's](https://railway.app) pour automatiser le déploiement de votre application [Voir Dockerfile sur railway](https://docs.railway.app/deploy/dockerfiles). Si vous avez [Railway CLI d'installer](https://docs.railway.app/develop/cli#install) vous pouvez déployer votre application en suivant les commandes suivantes: + +```bash +railway login +railway init +railway link +railway up +railway open +``` + +Allez dans "Variables" et rajoutez votre `DATABASE_URL`. Ensuite, allez dans "Settings" et sélectionnez "Generate Domain.". Pour voir un exemple qui fonctionne sur Railway, visitez [ct3a-docker.up.railway.app](https://ct3a-docker.up.railway.app/). + +## Ressources utiles + +| Ressources | Liens | +| ------------------------------------------------ | -------------------------------------------------------------------- | +| Dockerfile référence | https://docs.docker.com/engine/reference/builder/ | +| Compose file version 3 référence | https://docs.docker.com/compose/compose-file/compose-file-v3/ | +| Docker CLI référence | https://docs.docker.com/engine/reference/commandline/docker/ | +| Docker Compose CLI référence | https://docs.docker.com/compose/reference/ | +| Next.js déploiement avec une image Docker | https://nextjs.org/docs/deployment#docker-image | +| Next.js dans Docker | https://benmarte.com/blog/nextjs-in-docker/ | +| Next.js exemple avec Docker | https://github.com/vercel/next.js/tree/canary/examples/with-docker | +| Créer une image Docker d'une application Next.js | https://blog.tericcabrel.com/create-docker-image-nextjs-application/ | diff --git a/www/src/pages/fr/deployment/index.astro b/www/src/pages/fr/deployment/index.astro new file mode 100644 index 0000000000..70e5180f75 --- /dev/null +++ b/www/src/pages/fr/deployment/index.astro @@ -0,0 +1,23 @@ +--- +import Layout from "../../../layouts/docs.astro"; +import IndexPage from "../../../components/docs/indexPage.astro"; +import { Frontmatter, SIDEBAR } from "../../../config"; +import { getLanguageFromURL } from "../../../languages"; + +const frontmatter: Frontmatter = { + title: "Déploiement", + layout: "docs", + description: "Apprenez comment déployer votre app T3 en production.", +}; +const lang = getLanguageFromURL(Astro.url.pathname); +const sidebarEntries = SIDEBAR[lang]["Deployment"]!; +const files = await Astro.glob("./*.{md,mdx,astro}"); +--- + + + + diff --git a/www/src/pages/fr/deployment/netlify.md b/www/src/pages/fr/deployment/netlify.md new file mode 100644 index 0000000000..1194833abb --- /dev/null +++ b/www/src/pages/fr/deployment/netlify.md @@ -0,0 +1,86 @@ +--- +title: Netlify +description: Déploiement sur Netlify +layout: ../../../layouts/docs.astro +lang: fr +--- + +Netlify est un fournisseur de déploiement alternatif dans la même veine que Vercel. Voir [`ajcwebdev/ct3a-netlify`](https://github.com/ajcwebdev/ct3a-netlify) pour un exemple de dépôt basé sur ce document. + +## Pourquoi héberger sur Netlify + +La sagesse conventionnelle dit que Vercel a un support Next.js supérieur parce que Vercel développe Next.js. Ils ont tout intérêt à s'assurer que la plate-forme est réglée pour des performances optimales et DX avec Next.js. Pour la majorité des cas d'utilisation, cela sera vrai et cela n'aura aucun sens de s'écarter du chemin standard. + +Il existe également un sentiment commun selon lequel de nombreuses fonctionnalités de Next.js ne sont prises en charge que sur Vercel. S'il est vrai que les nouvelles fonctionnalités Next.js seront testées et prises en charge sur Vercel au moment de leurs publications, il est également vrai que d'autres fournisseurs comme Netlify [implémenteront et publieront rapidement leur prise en charge](https://www.netlify.com/blog/deploy-nextjs-13/) pour les [fonctionnalités stables de Next.js](https://docs.netlify.com/integrations/frameworks/next-js/overview/). + +Il existe des avantages et des inconvénients relatifs pour chaque fournisseurs de déploiement, car aucun hébergeur ne peut avoir le meilleur support pour tous les cas d'utilisation. Par exemple, Netlify a construit son propre [environnement d'exécution Next.js personnalisé](https://github.com/netlify/next-runtime) pour les fonctions Edge de Netlify (qui s'exécutent sur Deno Deploy) et [maintient un middleware unique pour accéder et modifier les réponses HTTP](https://github.com/netlify/next-runtime#nextjs-middleware-on-netlify). + +> _REMARQUE : Pour suivre l'état des fonctionnalités instables de Next 13, consultez [Utilisation du répertoire "app" de Next 13 sur Netlify](https://github.com/netlify/next-runtime/discussions/1724)._ + +## Configurer le projet + +Il existe de nombreuses façons de configurer vos instructions de build, y compris directement via la CLI Netlify ou le tableau de bord Netlify. Bien que cela ne soit pas obligatoire, il est conseillé de créer et d'inclure un fichier [`netlify.toml`](https://docs.netlify.com/configure-builds/file-based-configuration/). Cela garantit que les versions dérivées et clonées du projet seront plus faciles à déployer et de manière reproductible. + +```toml +[build] + command = "next build" + publish = ".next" +``` + +## Utilisation du tableau de bord Netlify + +1. Transférez votre code vers un dépôt GitHub et inscrivez-vous à [Netlify](https://app.netlify.com/signup). Après avoir créé un compte, cliquez sur **Ajouter un nouveau site** puis sur **Importer un projet existant**. + +![Nouveau projet sur Netlify](/images/netlify-01-new-project.webp) + +2. Connectez votre fournisseur de dépôt. + +![Importation de votre dépôt](/images/netlify-02-connect-to-git-provider.webp) + +3. Sélectionnez le dépôt de votre projet. + +![Sélectionnez le dépôt de votre projet.](/images/netlify-03-pick-a-repository-from-github.webp) + +4. Netlify détectera si vous avez un fichier `netlify.toml` et configurera automatiquement votre commande de build et votre répertoire de publication. + +![Paramètres de build de Nextjs](/images/netlify-04-configure-build-settings.webp) + +5. Cliquez sur **Afficher les paramètres avancés**, puis sur **Nouvelle variable** pour ajouter vos variables d'environnement. + +![Ajouter des variables d'environnement](/images/netlify-05-env-vars.webp) + +1. Cliquez sur **Déployer le site**, attendez la fin de la compilation, puis, affichez votre nouveau site. + +## Utilisation de la CLI Netlify + +Pour déployer à partir de la ligne de commande, vous devez d'abord pousser votre projet vers un dépôt GitHub et [installer la CLI Netlify](https://docs.netlify.com/cli/get-started/). Vous pouvez installer `netlify-cli` en tant que dépendance de projet ou l'installer globalement sur votre machine avec la commande suivante : + +```bash +npm i -g netlify-cli +``` + +Pour tester votre projet localement, exécutez la commande [`ntl dev`](https://docs.netlify.com/cli/get-started/#run-a-local-development-environment) et ouvrez [`localhost:8888 `](http://localhost:8888/) pour afficher votre application Netlify exécutée localement : + +```bash +ntl dev +``` + +Exécutez la commande [`ntl init`](https://docs.netlify.com/cli/get-started/#continuous-deployment) pour configurer votre projet : + +```bash +ntl init +``` + +Importez les variables d'environnement de votre projet à partir de votre fichier `.env` avec [`ntl env:import`](https://cli.netlify.com/commands/env#envimport) : + +```bash +ntl env:import .env +``` + +Déployez votre projet avec [`ntl deploy`](https://docs.netlify.com/cli/get-started/#manual-deploys). Vous devrez passer l'indicateur `--build` pour exécuter la commande build avant le déploiement et l'indicateur `--prod` pour déployer sur l'URL principale de votre site : + +```bash +ntl deploy --prod --build +``` + +Pour afficher un exemple d'exécution sur Netlify, visitez [ct3a.netlify.app](https://ct3a.netlify.app/). diff --git a/www/src/pages/fr/deployment/vercel.md b/www/src/pages/fr/deployment/vercel.md new file mode 100644 index 0000000000..7ab1ae9cad --- /dev/null +++ b/www/src/pages/fr/deployment/vercel.md @@ -0,0 +1,63 @@ +--- +title: Vercel +description: Déploiement sur Vercel +layout: ../../../layouts/docs.astro +lang: fr +--- + +Nous vous recommandons de déployer votre application sur [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss). Ce service facilite le déploiement d'application Next.js. + +## Configuration du projet + +Vercel va certainement configurer les commandes de génération et publier le répertoire automatiquement. Cependant, vous pouvez également spécifier ces informations manuellement avec vos propres configurations en créant un fichier appelé [`vercel.json`](https://vercel.com/docs/project-configuration) et en incluant les informations suivantes. **La plus part des projets ne le requiert pas.** + +```json +{ + "buildCommand": "npm run build", + "outputDirectory": "dist", + "devCommand": "npm run dev", + "installCommand": "npm install" +} +``` + +## Utilisation du tableau de bord Vercel + +1. Après avoir envoyer votre code sur GitHub, Inscrivez-vous sur [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss) avec GitHub et cliquez ensuite sur **Add New Project**. + +![Nouveau projet sur Vercel](/images/vercel-new-project.webp) + +2. Importez votre projet GitHub. + +![Importation de votre projet](/images/vercel-import-project.webp) + +3. Ajoutez vos variables d'environnement. + +![Ajoutez vos variables d'environnement](/images/vercel-env-vars.webp) + +4. Cliquez sur **Deploy**. À partir de maintenant, à chaque fois que vous pousserez une modification, Vercel redéploiera automatiquement votre application ! + +## Utilisation de Vercel CLI + +Pour déployer à partir de la ligne de commande, vous devez d'abord [installer la CLI Vercel globalement](https://vercel.com/docs/cli#installing-vercel-cli). + +```bash +npm i -g vercel +``` + +Exécutez la commande [`vercel`](https://vercel.com/docs/cli/deploying-from-cli) pour déployer votre projet. + +```bash +vercel +``` + +Ajoutez l'argument `--env DATABASE_URL=YOUR_DATABASE_URL_HERE` pour ajouter une variable d'environnement comme la chaîne de connexion à la base de données. Utilisez `--yes` si vous souhaitez ignorer les questions lors des déploiements et donner une réponse par défaut. + +```bash +vercel --env DATABASE_URL=YOUR_DATABASE_URL_HERE --yes +``` + +Après le premier déploiement, cette commande déploiera sur une branche de prévisualisation. Vous deverez ajouter l'argument `--prod` pour pousser votre changement directement sur la production. + +```bash +vercel --prod +``` diff --git a/www/src/pages/fr/faq.md b/www/src/pages/fr/faq.md new file mode 100644 index 0000000000..7d8518da6a --- /dev/null +++ b/www/src/pages/fr/faq.md @@ -0,0 +1,61 @@ +--- +title: FAQ +description: Foire aux questions sur Create T3 App +layout: ../../layouts/docs.astro +lang: fr +--- + +Voici quelques questions fréquemment posées sur `create-t3-app`. + +## Et après? Comment faire une application avec ça ? + +Nous essayons de garder ce projet aussi simple que possible, afin que vous puissiez commencer uniquement avec la configuration que nous avons fait pour vous, et ajouter des éléments supplémentaires plus tard, lorsqu'ils deviennent nécessaires. + +Si vous n'êtes pas familier avec les différentes technologies utilisées dans ce projet, veuillez vous référer aux docs respectives. Si vous êtes toujours dans le brouillard, veuillez rejoindre notre [Discord](https://t3.gg/discord) et demander de l'aide. + +- [Next.js](https://nextjs.org/) +- [NextAuth.js](https://next-auth.js.org) +- [Prisma](https://prisma.io) +- [Tailwind CSS](https://tailwindcss.com) +- [tRPC](https://trpc.io) + +## Quelles ressources d'apprentissage sont actuellement disponibles? + +Bien que les ressources répertoriées ci-dessous soient parmi les meilleures qui existent pour la stack T3, la communauté (et [Theo](https://youtu.be/rzwaaWH0ksk?t=1436)) vous recommandent de commencer à utiliser la stack et d'apprendre en cours de route en codant avec elle. + +Si vous envisagez `create-t3-app`, il y a de fortes chances que vous ayez déjà utilisé certaines parties de la stack. Alors pourquoi ne pas simplement plonger la tête la première et apprendre les autres parties pendant que vous créez quelque chose ? + +Maintenant, nous comprenons que cette voie ne fonctionne pas pour tout le monde. Donc, si vous avez l'impression d'avoir suivi les recommandations et que vous êtes toujours en manque de ressources, ou si vous n'êtes tout simplement pas sûr de le faire vous-même et/ou si vous vous sentez dépassé par la stack, consultez ces tutoriels géniaux sur `create-t3-app ` : + +### 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) + +## Pourquoi y a-t-il des fichiers `.js` dans le projet ? + +Conformément à [T3-Axiom #3](/fr/introduction#la-sécurité-de-typage-nest-pas-facultative), nous considérons la sécurité de typage comme un citoyen de première classe. Malheureusement, tous les frameworks et plugins ne prennent pas en charge TypeScript, ce qui signifie que certains des fichiers de configuration doivent être des fichiers `.js`. + +Nous essayons de souligner que ces fichiers sont JavaScript pour une raison, en déclarant explicitement le type de chaque fichier (`cjs` ou `mjs`) en fonction de ce qui est pris en charge par la librairie par laquelle il est utilisé. De plus, tous les fichiers `js` de ce projet sont vérifiés systématiquement à l'aide d'un commentaire `@ts-check` en début de fichier. + +## J'ai du mal à ajouter i18n à mon application. Y a-t-il une référence que je peux utiliser? + +Nous avons décidé de ne pas inclure i18n par défaut dans `create-t3-app` car c'est un sujet très opiniâtre et il existe de nombreuses façons de l'implémenter. + +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 ? + +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. + +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-et-fonctionnalités-prévues). diff --git a/www/src/pages/fr/folder-structure.mdx b/www/src/pages/fr/folder-structure.mdx new file mode 100644 index 0000000000..b899bc0cda --- /dev/null +++ b/www/src/pages/fr/folder-structure.mdx @@ -0,0 +1,233 @@ +--- +title: Structure des dossiers +description: Structure des dossiers d'une application T3 nouvellement créée +layout: ../../layouts/docs.astro +lang: fr +--- + +import Form from "../../components/docs/folderStructureForm.astro"; +import Diagram from "../../components/docs/folderStructureDiagram.astro"; + +Veuillez sélectionner vos packages pour voir la structure des dossiers d'une application nouvellement créée avec ces sélections. Plus bas, vous trouverez une description de chaque entrée. + +
+ + + +
+ +### `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'emplacement où stocker les fichiers de migration et/ou les scripts de départ, s'ils sont utilisés. Voir [Utilisation de Prisma](/fr/usage/prisma) pour plus d'informations. + +
+
+ +### `public` + +Le dossier "public" contient des fichiers statiques qui sont servis 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](usage/env-variables). + +
+
+ +### `src/pages` + +Le dossier `pages` contient toutes les pages de l'application Next.js. Le fichier `index.tsx` dans le répertoire racine de `/pages` est la page d'accueil de l'application. Le fichier `_app.tsx` est utilisé pour envelopper l'application avec des fournisseurs. Voir [Documentation Next.js](https://nextjs.org/docs/basic-features/pages) pour plus d'informations. + +
+
+ +#### `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/). + +
+
+ +#### `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. + +
+
+ +#### `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. + +
+
+ +### `src/server` + +Le dossier `server` est utilisé pour séparer clairement le code côté serveur du code côté client. + +
+
+ +### `src/server/common` + +Le dossier "common" contient du code côté serveur couramment réutilisé. + +
+
+ +#### `src/server/common/get-server-auth-session.ts` + +Le fichier `get-server-auth-session.ts` est utilisé pour obtenir la session NextAuth.js côté serveur. Voir [utilisation de NextAuth.js](usage/next-auth#utilisation-avec-trpc) pour plus d'informations. + +
+
+ +#### `src/server/db/client.ts` + +Le fichier `client.ts` est utilisé pour instancier le client Prisma au niveau global. Voir [Utilisation de Prisma](usage/prisma#prisma-client) pour plus d'informations. + +
+
+ +### `src/server/trpc` + +Le dossier `trpc` contient le code côté serveur de tRPC. + +
+
+ +#### `src/server/trpc/context.ts` + +Le fichier `context.ts` est utilisé pour créer le contexte utilisé dans les requêtes tRPC. Voir [utilisation de tRPC](usage/trpc#-servertrpccontextts) pour plus d'informations. + +
+
+ +#### `src/server/trpc/trpc.ts` + +Le fichier `trpc.ts` est utilisé pour exporter les assistants de procédure. Voir [utilisation de tRPC](usage/trpc#-servertrpctrpcts) pour plus d'informations. + +
+
+ +### `src/server/trpc/router` + +Le dossier `router` contient les routeurs tRPC. + +
+
+ +#### `src/server/trpc/router/_app.ts` + +Le fichier `_app.ts` est utilisé pour fusionner les routeurs tRPC et les exporter en tant que routeur unique, ainsi que les définitions de type. Voir [utilisation de tRPC](usage/trpc#-servertrpcrouterts) pour plus d'informations. + +
+
+ +#### `src/server/trpc/router/auth.ts` + +Le fichier `auth.ts` est un exemple de routeur tRPC utilisant l'assistant `protectedProcedure` pour montrer comment protéger une route tRPC avec NextAuth.js. + +
+
+ +#### `src/server/trpc/router/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. + +
+
+ +### `src/styles` + +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. + +
+
+ +### `src/utils` + +Le dossier `utils` est utilisé pour stocker les fonctions utilitaires couramment réutilisées. + +
+
+ +#### `src/utils/trpc.ts` + +Le fichier `trpc.ts` est le point d'entrée frontal de tRPC. Voir [utilisation de tRPC](usage/trpc#-utilstrpcts) 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. + +
+
+ +### `.env.example` + +Le fichier `.env.example` montre des exemples de variables d'environnement basées sur les librairies choisies. Ce fichier doit être commité dans l'historique de git. + +
+
+ +### `.eslintrc.json` + +Le fichier `.eslintrc.json` est utilisé pour configurer ESLint. Voir la [documentation de ESLint](https://eslint.org/docs/latest/user-guide/configuring/configuration-files) pour plus d'informations. + +
+
+ +### `next-env.d.ts` + +Le fichier `next-env.d.ts` garantit que les types Next.js sont récupérés par le compilateur TypeScript. **Vous ne devez pas le supprimer ou le modifier car il peut changer à tout moment.** Voir la [documentation de Next.js](https://nextjs.org/docs/basic-features/typescript#existing-projects) pour plus informations. + +
+
+ +### `next.config.mjs` + +Le fichier `next.config.mjs` est utilisé pour configurer Next.js. Voir la [documentation de Next.js](https://nextjs.org/docs/api-reference/next.config.js/introduction) pour plus d'informations. Remarque : L'extension .mjs est utilisée pour autoriser les importations ESM. + +
+
+ +### `postcss.config.cjs` + +Le fichier `postcss.config.cjs` est utilisé pour l'utilisation de Tailwind PostCSS. Voir la [documentation de Tailwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss) pour plus d'informations. + +
+
+ +### `prettier.config.cjs` + +Le fichier `prettier.config.cjs` 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. + +
+
+ +### `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. + +
diff --git a/www/src/pages/fr/installation.md b/www/src/pages/fr/installation.md new file mode 100644 index 0000000000..b92c8266d5 --- /dev/null +++ b/www/src/pages/fr/installation.md @@ -0,0 +1,61 @@ +--- +title: Installation +description: Instructions d'installation pour Create T3 App +layout: ../../layouts/docs.astro +lang: fr +--- + +Pour configurer une application à l'aide de `create-t3-app`, exécutez l'une des trois commandes suivantes et répondez aux questions de l'invite de commande : + +### npm + +```bash +npm create t3-app@latest +``` + +### yarn + +```bash +yarn create t3-app +``` + +### pnpm + +```bash +pnpm create t3-app@latest +``` + +Une fois votre application configurée, consultez les [premières étapes](/fr/usage/first-steps) pour démarrer sur votre nouvelle application. + +## Utilisation avancée + +| Option | Description | +| ----------------- | ----------------------------------------------------------------------------------------------- | +| `[dir]` | Inclure un argument de répertoire avec un nom pour le projet | +| `--noGit` | Dites explicitement à la CLI de ne pas initialiser un nouveau dépôt git dans le projet | +| `-y`, `--default` | Contourner la CLI et démarrer une nouvelle application t3 avec toutes les options sélectionnées | +| `--noInstall` | Générer un projet sans installer de dépendances | + +## Utilisation expérimentale + +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 | + +**Remarque : 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`. + +### Exemple + +Ce qui suit configurera une application T3 avec tRPC et Tailwind CSS. + +```bash +pnpm dlx create-t3-app@latest --CI --trpc --tailwind +``` diff --git a/www/src/pages/fr/introduction.md b/www/src/pages/fr/introduction.md new file mode 100644 index 0000000000..03330a82d3 --- /dev/null +++ b/www/src/pages/fr/introduction.md @@ -0,0 +1,42 @@ +--- +title: Introduction +description: Introduction à la stack T3 +layout: ../../layouts/docs.astro +lang: fr +--- + +
+ +
+ +## 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. + +Les éléments principaux sont [**Next.js**](https://nextjs.org/) et [**TypeScript**](https://typescriptlang.org/). [**Tailwind CSS**](https://tailwindcss.com/) est presque toujours inclus. Si vous faites quelque chose qui ressemble a du backend, [**tRPC**](https://trpc.io/), [**Prisma**](https://prisma.io/) et [**NextAuth .js**](https://next-auth.js.org/) sont également d'excellents ajouts. + +Vous avez peut-être remarqué qu'il y a beaucoup… beaucoup de pièces. C'est par conception. Échangez les pièces selon vos besoins - cette stack est modulaire à la base :) + +## Alors... qu'est-ce que create-t3-app ? Un modèle? + +`create-t3-app` est une CLI conçue par des développeurs chevronnés de T3 Stack pour rationaliser la configuration d'une application modulaire T3 Stack. Cela signifie que chaque pièce est facultative et que le "modèle" est généré en fonction de vos besoins spécifiques. + +Après d'innombrables projets et de nombreuses années sur cette technologie, nous avons beaucoup d'opinions et d'idées. Nous avons fait de notre mieux pour les encoder dans cette CLI. + +Ce n'est **PAS** un modèle tout compris. Nous **attendons** que vous apportiez vos propres librairies qui répondent aux besoins de **VOTRE** application. Bien que nous ne souhaitions pas prescrire de solutions à des problèmes plus spécifiques tels que la gestion de l'état et le déploiement, nous [avons quelques recommandations répertoriées ici](/fr/other-recs). + +## T3 Axioms + +Nous allons être francs - c'est un _projet opiniâtre_. Nous partageons une poignée de croyances fondamentales autour de la création et nous les traitons comme la base de nos décisions. + +### Résoudre des problèmes + +Il est facile de tomber dans le piège de "tout ajouter" - nous ne voulons explicitement pas le faire. Tout ce qui est ajouté à "create-t3-app" devrait résoudre un problème spécifique qui existe dans les technologies de base incluses. Cela signifie que nous n'ajouterons pas des choses comme des librairies d'état (`zustand`, `redux`) mais nous ajouterons des choses comme NextAuth.js et intégrerons Prisma et tRPC pour vous. + +### Être responsable + +Nous aimons notre technologie de pointe. La vitesse et honnêtement le fun qu'apportent de nouvelles choses est vraiment cool. Nous pensons qu'il est important d'être responsable, en utilisant des technologies plus risquées dans les parties les moins risquées. Cela signifie que nous ne parierions pas ⛔️ sur une nouvelle technologie de base de données risquée (SQL est génial !). Mais nous parions volontiers ✅ sur tRPC car ce ne sont que des fonctions triviales à déplacer. + +### La sécurité de typage n'est pas facultative + +L'objectif déclaré de `create-t3-app` est de fournir le moyen le plus rapide de démarrer une nouvelle application Web **typesafe** complète. Nous prenons la sécurité des caractères au sérieux dans ces parties, car elle améliore notre productivité et nous aide à expédier moins de bogues. Toute décision qui compromet la nature typesafe de `create-t3-app` est une décision qui doit être prise dans un projet différent. diff --git a/www/src/pages/fr/other-recs.md b/www/src/pages/fr/other-recs.md new file mode 100644 index 0000000000..21ccf4632a --- /dev/null +++ b/www/src/pages/fr/other-recs.md @@ -0,0 +1,161 @@ +--- +title: Autres recommandations +description: Librairies et services que nous recommandons pour de nombreux projets +layout: ../../layouts/docs.astro +lang: fr +--- + +Nous reconnaissons que les librairies incluses dans `create-t3-app` ne résolvent pas tous les problèmes. Bien que nous vous encourageons à commencer votre projet avec les éléments que nous fournissons, il viendra un moment où vous devrez ajouter d'autres librairies. Vous seul pouvez savoir ce dont votre projet a besoin, mais voici certaines choses que nous recommandons fréquemment. + +Ce sont des recommandations de contributeurs individuels de create-t3-app et ne doivent pas être considérées comme des approbations "officielles" par l'équipe de create-t3-app ou T3-OSS. _**Veuillez faire vos propres recherches, surtout avant de vous engager dans des services payants**_. + +## State Management + +_**Note de l'éditeur**_: Les librairies de state management peuvent être excellentes, mais ne sont pas souvent nécessaires. Les hooks de React Query-tRPC devraient pouvoir prendre en charge le state de votre serveur. Pour le state du client, commencez par `useState` de React et utilisez l'une de ces options lorsque vous en avez besoin de plus. + +### Zustand + +**Pour ne plus jamais utiliser Redux** + +Le "Redux moderne et simple" dont vous ne saviez pas avoir besoin. On peut toujours faire confiance à [Poimandres](https://github.com/pmndrs). Vous pouvez tout créer, des applications d'appel vidéo aux jeux en passant par les serveurs avec cette petite librairie. + +- [Page d'accueil Zustand](https://zustand-demo.pmnd.rs/) +- [Zustand GitHub](https://github.com/pmndrs/zustand) + +### Jotai + +**Pour ne plus jamais utiliser Context** + +Pour une approche plus atomique, Jotai est difficile à battre. Toujours par [Poimandres](https://github.com/pmndrs), Jotai vous permet de définir des singletons qui ressemblent à un useState global. Une excellente option pour les comportements avec état qui n'ont pas encore besoin d'une machine d'état. + +- [Page d'accueil Jotai](https://jotai.org/) +- [Jotai GitHub](https://github.com/pmndrs/jotai) + +## Librairies de composants + +La plupart des applications ont besoin de la même poignée de composants - boutons, menus déroulants, modaux, etc. Ces librairies fournissent d'excellents composants accessibles que vous pouvez utiliser et personnaliser à votre guise. + +### Librairies de composants sans style + +Aussi connues sous le nom de librairies headless, elles fournissent d'excellents composants sans style et accessibles que vous pouvez personnaliser à votre guise. Voici quelques recommandations. + +- [Radix UI](https://www.radix-ui.com/) vous offre un ensemble puissant de primitives pratiques et accessibles que vous pouvez styliser avec du CSS vanilla ou Tailwind. + +- [Headless UI](https://headlessui.com/) créé par l'équipe Tailwind CSS fournit également des composants accessibles sans style qui s'intègrent de manière transparente avec Tailwind CSS. + +- [React Aria](https://react-spectrum.adobe.com/react-aria/) fournit des primitives d'interface utilisateur accessibles pour votre design. Leur composant Date Picker est de premier plan. + +### Librairies de composants stylisés + +**Pour quand vous voulez juste que votre application ait l'air OK** + +Parfois, vous créez un projet où vous voulez juste que l'interface utilisateur ait l'air décente. Pour les tableaux de bord d'administration et d'autres projets similaires, n'importe laquelle de ces librairies de composants fera le travail. + +- [Chakra UI](https://chakra-ui.com) +- [Mantine](https://mantine.dev) + +### Class Variance Authority + +**Pour créer des librairies d'interface utilisateur** + +Créez de manière déclarative une librairie d'interface utilisateur avec différentes variantes de couleur, de taille, etc. Lorsque votre projet atteint une échelle où vous souhaitez un ensemble normé de composants d'interface utilisateur avec plusieurs variantes utilisant Tailwind CSS, CVA est un excellent outil. + +- [Class Variance Authority GitHub](https://github.com/joe-bell/cva) + +## Animations + +Lorsque vous avez besoin d'animations dans votre application, voici nos recommandations. + +### AutoAnimate + +**Pour les animations avec une seule ligne de code** + +La plupart des librairies d'animation essaient de satisfaire tous les cas d'utilisation possibles et deviennent lourdes. AutoAnimate est un outil sans configuration qui vous apportera une amélioration significative de l'expérience utilisateur sans effort supplémentaire du développeur. + +- [Page d'accueil AutoAnimate](https://auto-animate.formkit.com/) +- [AutoAnimate GitHub](https://github.com/formkit/auto-animate) +- [Extrait de composant AutoAnimate](https://gist.github.com/hwkr/3fdea5d7f609b98c162e5325637cf3cb) + +### Framer Motion + +**Pour les animations complexes avec du code déclaratif** + +Framer Motion fournit une syntaxe déclarative simple et vous permet d'écrire moins de code pour tout créer, des animations complexes aux gestes uniformes. + +- [Page d'accueil Framer Motion](https://framer.com/motion) +- [Documentation Framer Motion](https://www.framer.com/docs/) + +## Déploiements, Infrastructure, Bases de données et CI + +### Vercel + +**Pour héberger votre application** + +Vercel a pris l'enfer des déploiements Web et en a fait une intégration GitHub prête à l'emploi. Nous sommes passés à des centaines de milliers d'utilisateurs sans problème. Alimenté par AWS, juste une meilleure interface :) + +- [Page d'accueil Vercel](https://vercel.com/) +- [Guide de déploiement de Create T3 App sur Vercel](/fr/deployment/vercel) + +### PlanetScale + +**Pour des bases de données sans souci** + +PlanetScale est de loin la meilleure "plate-forme de base de données serverless" que nous ayons utilisée. À une échelle folle, excellente expérience de développeur et prix fantastiques. Si vous utilisez SQL (et, espérons-le, Prisma), c'est difficile à battre. + +- [Page d'accueil PlanetScale](https://planetscale.com/) + +### Railway + +**Pour héberger votre infrastructure** + +"Heroku moderne". Le moyen le plus simple de faire fonctionner un vrai serveur. Si Vercel et PlanetScale ne suffisent pas, Railway le sera probablement. Faites le pointer sur un dépôt GitHub et c'est parti. + +- [Page d'accueil Railway](https://railway.app/) + +### Upstash + +**Pour du Redis serverless** + +Nous aimons Prisma et PlanetScale, mais certains projets nécessitent une solution plus performante. Upstash vous permet d'obtenir les performances en mémoire de Redis dans votre projet serverless, sans avoir à gérer l'infrastructure et à faire évoluer vous-même. + +- [Page d'accueil Upstash](https://upstash.com/) + +### Pusher + +**Pour les WebSockets serverless** + +Si WebSockets est l'objectif principal de votre projet, vous pouvez envisager un backend plus traditionnel tel que [Fastify](https://www.fastify.io/) (qui [fonctionne également avec tRPC !](https:// trpc.io/docs/v10/fastify)). Mais pour ajouter rapidement des WebSockets à une application T3, Pusher est un excellent choix. + +- [Page d'accueil Pusher](https://pusher.com/) + +### Soketi + +Soketi est une alternative à Pusher, auto-hébergée, simple et rapide. Il est entièrement compatible avec le SDK de Pusher que vous pouvez utiliser pour vous connecter au serveur. Soketi serverless est également en version bêta. + +- [Page d'accueil Soketi](https://soketi.app) +- [Soketi GitHub](https://github.com/soketi/soketi) + +## Analytics + +Les données utilisateur sont très précieuses lorsque vous créez une application. Voici quelques fournisseurs d'analyse que nous recommandons. + +### Plausible + +Besoin d'analyses ? Plausible est l'un des moyens les plus rapides de les obtenir. Super minime. Il a même un [plugin, simple, pour Next.js](https://plausible.io/docs/proxy/guides/nextjs). + +- [Page d'accueil Plausible](https://plausible.io/) + +### Umami + +Umami est une alternative open source à Google Analytics, auto-hébergée, simple, rapide et axée sur la confidentialité. Vous pouvez le déployer très facilement sur Vercel, Railway, etc. Avec PlanetScale comme base de données. + +- [Page d'accueil Umami](https://umami.is/) +- [Umami GitHub](https://github.com/umami-software/umami) + +## Autre + +### Next Bundle Analyzer + +Il peut parfois être difficile de déterminer ce qui sera inclus dans la sortie de votre application générée. Next Bundle Analyzer est un moyen simple de visualiser et d'analyser les bundles JavaScript générés. + +- [@next/bundle-analyzer sur npm](https://www.npmjs.com/package/@next/bundle-analyzer) diff --git a/www/src/pages/fr/t3-collection.md b/www/src/pages/fr/t3-collection.md new file mode 100644 index 0000000000..f7929cf7b2 --- /dev/null +++ b/www/src/pages/fr/t3-collection.md @@ -0,0 +1,39 @@ +--- +title: Collection T3 +description: Projets open source sympas et d'entreprises utilisant la stack T3 +layout: ../../layouts/docs.astro +lang: fr +--- + +Vous avez réalisé un projet à l'aide de la stack T3 et souhaitez le partager ? Ajoutez-le à la liste ! + +## Applications Open Source créées à l'aide de la stack T3 + +| Description | Repo | Lien | +| ---------------------------------------------------------------------------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | +| Create T3 Turbo - Stack T3 utilisant Turborepo | [create-t3-turbo](https://github.com/t3-oss/create-t3-turbo) | [create-t3-turbo.vercel.app](https://create-t3-turbo.vercel.app/) | +| Zapdos - une application de questions-réponses pour les streamers | [pingdotgg/zapdos](https://github.com/pingdotgg/zapdos) | [ask.ping.gg](https://ask.ping.gg) | +| Shoutify - Gestion des médias sociaux gratuite, open source et auto-hébergée | [techsquidtv/shoutify](https://github.com/TechSquidTV/Shoutify) | [shoutify.app](https://github.com/TechSquidTV/Shoutify) (coming soon) | +| Me3 - Décrivez-vous en 3 choses et partagez avec vos amis. | [hnqg/me3](https://github.com/hnqg/me3) | [me3.hnqg.io](https://me3.hnqg.io) | +| Le site personnel de Josh | [joshhyde9/portfolio](https://github.com/JoshHyde9/portfolio) | [joshhyde.me](https://joshhyde.me) | +| Cal.com - Infrastructure de planification pour absolument tout le monde. | [calcom/cal.com](https://github.com/calcom/cal.com) | [cal.com](https://cal.com) | +| My FAQ Page - Un générateur de page FAQ | [ronanru/myfaq.page](https://github.com/ronanru/myfaq.page) | [MyFAQ.page](https://myfaq.page) | +| Tincy Pics - Un hébergeur d'images minuscule | [mozzius/tincypics](https://github.com/mozzius/tincypics) | [tincy.pics](https://tincy.pics) | +| Ayanava's Livre d'or | [AyanavaKarmakar/Guestbook](https://github.com/AyanavaKarmakar/Guestbook) | [guestbook.ayanavakarmakar.software](https://guestbook.ayanavakarmakar.software/) | +| Slug - Raccourcisseur d'URL | [pheralb/slug](https://github.com/pheralb/slug) | [slug.vercel.app](https://slug.vercel.app) | +| AI TTS Donations - Service de synthèse vocale FOSS AI pour les streamers. | [mmattDonk/AI-TTS-Donations](https://github.com/mmattDonk/AI-TTS-Donations) | [staging.solrock.mmattDonk.com](https://staging.solrock.mmattDonk.com) | +| The Doom | [moltivie/slug](https://github.com/Moltivie/the-t3-stack) | [the-t3-stack.vercel.app](https://the-t3-stack.vercel.app) | +| Railtrack | [noahflk/railtrack](https://github.com/noahflk/railtrack) | [railtrack.flk.li](https://railtrack.flk.li) | +| Boutique KARA - Site e-commerce | [mehrabmp/kara-shop](https://github.com/mehrabmp/kara-shop) | [karashop.vercel.app](https://karashop.vercel.app/) | + +## Entreprises utilisant la stack T3 + +Nous aimerions connaître les entreprises qui utilisent la stack T3 pour leurs applications. Votre entreprise utilise la stack T3 et souhaite la partager ? Ajoutez-le à la liste ! + +| Company | Link | +| ------- | ---------------------------------- | +| Ping.gg | [ping.gg](https://ping.gg) | +| Nexiona | [nexiona.com](https://nexiona.com) | +| Layer3 | [layer3.xyz](https://layer3.xyz) | + +_Vous avez un projet sympa utilisant la stack T3 ? Faites une [pull request](https://github.com/t3-oss/create-t3-app/tree/next/www/src/pages/fr/t3-collection.md) et ajoutez-la ici !_ diff --git a/www/src/pages/fr/usage/env-variables.md b/www/src/pages/fr/usage/env-variables.md new file mode 100644 index 0000000000..edbcdc13a0 --- /dev/null +++ b/www/src/pages/fr/usage/env-variables.md @@ -0,0 +1,128 @@ +--- +title: Variables d'environnement +description: Débuter avec create-t3-app +layout: ../../../layouts/docs.astro +lang: fr +--- + +Create-T3-App utilise [Zod](https://github.com/colinhacks/zod) pour valider votre variables d'environnement a l'exécution _et_ a la génération de l'application en fournissant des fichiers supplémentaires dans le répertoire `env`: + +📁 src/env + +┣ 📄 client.mjs + +┣ 📄 schema.mjs + +┣ 📄 server.mjs + +Le contenu de ses fichiers peut sembler terrifiant de prime abord, mais ne vous inquiétez pas, ce n'est pas aussi compliqué qu'il y paraît. +Examinons-les un par un et parcourons le processus d'ajout de variables d'environnement. + +_TLDR; Si vous désirez ajouter une nouvelle variable d’environnement, vous devez l’ajouter autant dans votre fichier `.env` et la définir dans le validateur: `env/schema.mjs`._ + +## schema.mjs + +C'est le fichier que vous allez modifier. Il contient deux schémas, l'un est pour les variables d'environnement côté serveur et le second est pour le côté client connu sous l'objet `clientEnv`. + +```ts:env/schema.mjs +export const serverSchema = z.object({ + // DATABASE_URL: z.string().url(), +}); + +export const clientSchema = z.object({ + // NEXT_PUBLIC_WS_KEY: z.string(), +}); + +export const clientEnv = { + // NEXT_PUBLIC_WS_KEY: process.env.NEXT_PUBLIC_WS_KEY, +}; +``` + +### Schéma Serveur + +Définissez votre schéma de variables d'environnement du côté serveur ici. + +Faites attention à ne pas préfixer vos clefs avec `NEXT_PUBLIC`. La validation échouera si vous le faites, afin de vous aider à détecter une configuration non valide. + +### Schéma Client + +Définissez votre schéma de variables d'environnement du côté client ici. + +Pour les exposer au client, vous devez les préfixer avec `NEXT_PUBLIC`. La validation échouera si vous ne le faites pas, afin de vous aider à détecter une configuration non valide. + +### Objet clientEnv + +Déstructurez `process.env` ici. + +Nous avons besoin d'un objet JavaScript avec lequel nous pouvons analyser nos schémas Zod et en raison de la façon dont Next.js gère les variables d'environnement, vous ne pouvez pas déstructurez `process.env` comme un objet régulier. Du coup nous devons le faire manuellement. + +TypeScript vous aidera à vous assurer que vous avez entré les clés dans `clientEnv` ainsi que `clientSchema`. + +```ts +// ❌ Cela ne fonctionne pas, nous devons le déstructurer manuellement +const schema = z.object({ + NEXT_PUBLIC_WS_KEY: z.string(), +}); + +const validated = schema.parse(process.env); +``` + +## server.mjs & client.mjs + +C'est ici que la validation se fait et l'export des objets valider. Vous ne devriez pas avoir besoin de modifier ces fichiers. + +## Utilisation de variables d'environnement + +Lorsque vous souhaitez utiliser vos variables d'environnement, vous pouvez les importer depuis `env/client.mjs` ou `env/server.mjs` selon l'endroit où vous souhaitez les utiliser : + +```ts:pages/api/hello.ts +import { env } from "../../env/server.mjs"; + +// `env` est totalement typesafe et fournit une autocomplétion +const dbUrl = env.DATABASE_URL; +``` + +## .env.example + +Vu que par défaut le fichier `.env` n’est pas commiter dans votre dépôt de version, nous avons inclus le fichier `.env.example`, dans lequel vous pouvez ajouter une copie du contenu de votre `.env` avec les informations secrètes retirées. Ce n’est pas obligatoire, mais nous recommandons de garder le fichier example a jour, et ce, afin de rendre le démarrage des contributeurs à votre projet, facile. + +Certains frameworks et outils de conception, comme Next.js, suggère que vous gardez vos secret dans un fichier `.env.local` et de commiter votre fichier `.env` dans votre projet. Ce n’est pas recommandé, car vous pourriez accidentellement commiter les secret de votre projet. A la place, nous recommandons que vous gardiez vos secret dans le fichier `.env`, et surtout d’etre sur que le fichier `.env` se retrouve dans votre `.gitignore` et de seulement commiter le `.env.example` de votre projet. + +## Ajout des variables d’environnement + +Pour être sur que la génération de l’application ne puisse jamais finir sans les variables d’environnements nécessaire à votre projet, vous devez les ajouter dans **deux** fichiers : + +📄 `.env`: Entrez votre variable d'environnement comme vous le feriez normalement dans un fichier `.env`, c'est-à-dire `CLEF=VALEUR` + +📄 `schema.mjs`Ajoutez la logique de validation appropriée pour la variable d'environnement en définissant un schéma Zod, par ex. `CLEF: z.string()` + +Facultativement, vous pouvez également garder `.env.example` à jour : + +📄 `.env.example`: Entrez votre variable d'environnement,assurez-vous de ne pas inclure la valeur si elle est secrète, par ex. `CLEF=VALEUR` ou `CLEF=` + +### Exemple + +_Je veux ajouter le jeton de l’API Twitter en tant que variable d’environnement côté serveur_ + +1. Ajouter la variable d'environnement dans `.env`: + +``` +TWITTER_API_TOKEN=1234567890 +``` + +2. Ajouter la variable d'environnement dans `schema.mjs`: + +```ts +export const serverSchema = z.object({ + // ... + TWITTER_API_TOKEN: z.string(), +}); +``` + +_**NOTE:** Une chaîne vide est toujours une chaîne, donc `z.string()` acceptera une chaîne vide comme valeur valide. Si vous voulez vous assurer que la variable d'environnement n'est pas vide, vous pouvez utiliser `z.string().min(1)`._ + +3. facultatif : ajoutez la variable d'environnement à `.env.example`, mais n'incluez pas le jeton + +``` +TWITTER_API_TOKEN= +``` diff --git a/www/src/pages/fr/usage/first-steps.md b/www/src/pages/fr/usage/first-steps.md new file mode 100644 index 0000000000..d73b473e6d --- /dev/null +++ b/www/src/pages/fr/usage/first-steps.md @@ -0,0 +1,37 @@ +--- +title: Premiers pas +description: Premiers pas avec votre nouvelle application T3 +layout: ../../../layouts/docs.astro +lang: fr +--- + +Vous venez de créer une nouvelle application T3 et vous êtes prêt à démarrer. Voici le strict minimum pour que votre application puisse fonctionner. + +## 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. + +## Authentification + +Si votre application inclut NextAuth.js, nous vous aidons à démarrer avec le `DiscordProvider`. C'est l'un des fournisseurs les plus simples proposés par NextAuth.js, mais il nécessite encore un peu de configuration initiale de votre part. + +Bien sûr, si vous préférez utiliser un autre fournisseur d'authentification, vous pouvez également utiliser l'un des [nombreux fournisseurs](https://next-auth.js.org/providers/) proposés par NextAuth.js. + +1. Vous aurez besoin d'un compte Discord, créez-en un si vous ne l'avez pas déjà fait. +2. Accédez à https://discord.com/developers/applications et cliquez sur "New Application" dans le coin supérieur droit. Nommez votre application et acceptez les conditions d'utilisation. +3. Une fois votre application créée, accédez à "Settings → OAuth2 → General". +4. Copiez le "Client ID" et ajoutez-le à votre `.env` en tant que `DISCORD_CLIENT_ID`. +5. Cliquez sur "Reset Secret", copiez le nouveau secret et ajoutez-le à votre `.env` en tant que `DISCORD CLIENT_SECRET`. +6. Cliquez sur "Add Redirect" et saisissez `http://localhost:3000/api/auth/callback/discord`. + - Pour le déploiement en production, suivez les étapes précédentes pour créer une autre application Discord, mais cette fois remplacez `http://localhost:3000` par l'URL vers laquelle vous déployez. +7. Sauvegarder les modifications. +8. Définissez `NEXTAUTH_SECRET` dans `.env`. En développement, n'importe quelle chaîne fonctionnera, pour la production, voir la note dans `.env` sur la génération d'un secret sécurisé. + +Vous devriez maintenant pouvoir vous connecter. + +## Prochaines étapes + +- Si votre application inclut tRPC, consultez `src/pages/index.tsx` et `src/server/trpc/router/example.ts` pour voir comment fonctionnent les requêtes tRPC. +- Consultez la documentation `create-t3-app`, ainsi que la documentation des packages inclus dans votre application. +- Rejoignez notre [Discord](https://t3.gg/discord) et donnez-nous une étoile sur [GitHub](https://github.com/t3-oss/create-t3-app) ! :) diff --git a/www/src/pages/fr/usage/index.astro b/www/src/pages/fr/usage/index.astro new file mode 100644 index 0000000000..1c5c39b134 --- /dev/null +++ b/www/src/pages/fr/usage/index.astro @@ -0,0 +1,25 @@ +--- +import Layout from "../../../layouts/docs.astro"; +import IndexPage from "../../../components/docs/indexPage.astro"; +import { Frontmatter, SIDEBAR } from "../../../config"; +import { getLanguageFromURL } from "../../../languages"; + +const frontmatter: Frontmatter = { + title: "Utilisation", + layout: "docs", + description: + "Apprenez comment utiliser les différentes technologies de la stack T3.", +}; + +const lang = getLanguageFromURL(Astro.url.pathname); +const sidebarEntries = SIDEBAR[lang]["Usage"]!; +const files = await Astro.glob("./*.{md,mdx,astro}"); +--- + + + + diff --git a/www/src/pages/fr/usage/next-auth.md b/www/src/pages/fr/usage/next-auth.md new file mode 100644 index 0000000000..bf6e40aa85 --- /dev/null +++ b/www/src/pages/fr/usage/next-auth.md @@ -0,0 +1,175 @@ +--- +title: NextAuth.js +description: Utilisation de NextAuth.js +layout: ../../../layouts/docs.astro +lang: fr +--- + +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. + +## 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}!

; +}; +``` + +## 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 [`unstable_getServerSession`](https://next-auth.js.org/configuration/nextjs#unstable_getserversession). Ne vous inquiétez pas, cette fonction est sûre à utiliser - le nom inclut "unstable" uniquement parce que l'implémentation de l'API peut changer à l'avenir. L'avantage d'utiliser `unstable_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/common/get-server-auth-session.ts +export const getServerAuthSession = async (ctx: { + req: GetServerSidePropsContext["req"]; + res: GetServerSidePropsContext["res"]; +}) => { + return await unstable_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/trpc/context.ts +import { getServerAuthSession } from "../common/get-server-auth-session"; + +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/trpc/trpc.ts +const isAuthed = t.middleware(({ ctx, next }) => { + if (!ctx.session || !ctx.session.user) { + throw new TRPCError({ code: "UNAUTHORIZED" }); + } + return next({ + ctx: { + // infers the `session` as non-nullable + session: { ...ctx.session, user: ctx.session.user }, + }, + }); +}); + +export const protectedProcedure = t.procedure.use(isAuthed); +``` + +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/trpc/router/user.ts +const userRouter = router({ + me: protectedProcedure.query(({ 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://next-auth.js.org/adapters/models/). `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. + +## 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 `DISCORD_CLIENT_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/next-js.md b/www/src/pages/fr/usage/next-js.md new file mode 100644 index 0000000000..72c420e5c6 --- /dev/null +++ b/www/src/pages/fr/usage/next-js.md @@ -0,0 +1,35 @@ +--- +title: Next.js +description: Utilisation de Next.js +layout: ../../../layouts/docs.astro +lang: fr +--- + +Next.js est un framework backend pour vos applications React. + +
+ +
+ +Découvrez [Theo's Next.js Conf talk](https://www.youtube.com/watch?v=W4UhNo3HAMw) pour mieux comprendre ce qu'est Next.js et son fonctionnement.

+ +## Pourquoi devrais-je l'utiliser ? + +Nous aimons React. Il a rendu le développement des interfaces utilisateur accessible d'une manière que nous n'aurions jamais imaginée auparavant. Cela peut également conduire les développeurs sur des chemins difficiles. Next.js offre une approche légèrement opiniâtre et fortement optimisée pour créer des applications à l'aide de React. Du routage aux définitions d'API en passant par le rendu d'image, nous faisons confiance à Next.js pour guider les développeurs vers de bonnes décisions. + +L'association de Next.js avec [Vercel](https://vercel.com/) facilite plus que jamais le développement et le déploiement d'applications Web. Leur offre gratuite est extrêmement généreuse et leurs interfaces sont super intuitives, fournissant une solution pointer-cliquer pour déployer votre site (Nous ❤️ Vercel) + +## Get Static/Server Props + +Une des caractéristique clé de Next.js sont ses capacités de récupération de données. Nous vous recommandons vivement de lire la [documentation officielle](https://nextjs.org/docs/basic-features/data-fetching) pour comprendre comment utiliser chaque méthode et en quoi elles diffèrent. `getServerSideProps` est généralement déconseillé à moins qu'il n'y ait une bonne raison, car il s'agit d'un appel bloquant qui ralentira votre site. [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration) est une excellente alternative à `getServerSideProps` lorsque les données sont dynamiques et peuvent être récupérées de manière incrémentielle. + +## Ressources utiles + +| Ressource | Lien | +| ------------------------------ | ---------------------------------- | +| Next.js Documentation | https://nextjs.org/docs | +| Next.js GitHub | https://github.com/vercel/next.js | +| Next.js Blog | https://nextjs.org/blog | +| Next.js Discord | https://nextjs.org/discord | +| Next.js Twitter | https://twitter.com/nextjs | +| Vercel/Next.js YouTube Channel | https://www.youtube.com/c/VercelHQ | diff --git a/www/src/pages/fr/usage/prisma.md b/www/src/pages/fr/usage/prisma.md new file mode 100644 index 0000000000..81c5d73ff8 --- /dev/null +++ b/www/src/pages/fr/usage/prisma.md @@ -0,0 +1,77 @@ +--- +title: Prisma +description: Utilisation de Prisma +layout: ../../../layouts/docs.astro +lang: fr +--- + +Prisma est un ORM pour TypeScript, qui vous permet de définir votre schéma et vos modèles de base de données dans un fichier `schema.prisma`, puis de générer un client de type sécurisé qui peut être utilisé pour interagir avec votre base de données à partir de votre backend. + +## Prisma Client + +Situé dans `/server/db/client.ts`, le client Prisma est instancié en tant que variable globale (cette façon est recommandé comme [meilleure pratique](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices#problem) par l'équipe de Prisma) et exporté pour être utilisé dans vos routes API. Nous incluons le client Prisma dans [Context](/fr/usage/trpc#-servertrpccontextts) par défaut et recommandons de l'utiliser au lieu de l'importer séparément dans chaque fichier. + +## Schéma + +Vous trouverez le fichier de schéma Prisma dans `/prisma/schema.prisma`. Ce fichier est l'endroit où vous définissez votre schéma et vos modèles de base de données, et est utilisé lors de la génération du client Prisma. + +### Avec NextAuth.js + +Lorsque vous sélectionnez NextAuth.js en combinaison avec Prisma, 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 de NextAuth .js](https://next-auth.js.org/adapters/prisma). + +## Base de données par défaut + +La base de données par défaut est une base de données SQLite, idéale pour le développement et la mise en place rapide d'une preuve de concept, mais n'est pas recommandée pour la production. Vous pouvez changer de type de base de données à utiliser en changeant le `provider` dans le bloc `datasource` en `postgresql` ou `mysql`, puis en mettant à jour la chaîne de connexion dans les variables d'environnement pour pointer vers votre base de données. + +## Amorçage de votre base de données + +[L'amorçage de votre base de données](https://www.prisma.io/docs/guides/database/seed-database) est un excellent moyen de remplir rapidement votre base de données avec des données de test pour vous aider à démarrer. Afin de configurer l'amorçage, vous devrez créer un fichier `seed.ts` dans le répertoire `/prisma`, puis ajouter un script `seed` à votre fichier `package.json`. Vous aurez également besoin d'un exécuteur TypeScript capable d'exécuter le script de départ. Nous recommandons [tsx](https://github.com/esbuild-kit/tsx), qui est un exécuteur TypeScript très performant qui utilise esbuild et ne nécessite aucune configuration ESM, mais `ts-node` ou d'autres exécuteurs le feront fonctionner aussi parfaitement. + +```jsonc:package.json +{ + "scripts": { + "db-seed": "NODE_ENV=development prisma db seed" + }, + "prisma": { + "seed": "tsx prisma/seed.ts" + } +} +``` + +```ts:prisma/seed.ts +import { prisma } from "../src/server/db/client"; + +async function main() { + const id = "cl9ebqhxk00003b600tymydho"; + await prisma.example.upsert({ + where: { + id, + }, + create: { + id, + }, + update: {}, + }); +} + +main() + .then(async () => { + await prisma.$disconnect(); + }) + .catch(async (e) => { + console.error(e); + await prisma.$disconnect(); + process.exit(1); + }); +``` + +Ensuite, exécutez simplement `pnpm db-seed` (ou `npm`/`yarn`) pour amorcer votre base de données. + +## Ressources utiles + +| Ressource | Lien | +| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | +| Documentation Prisma | https://www.prisma.io/docs/ | +| Prisma GitHub | https://github.com/prisma/prisma | +| 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 new file mode 100644 index 0000000000..635ea4a3c9 --- /dev/null +++ b/www/src/pages/fr/usage/tailwind.md @@ -0,0 +1,94 @@ +--- +title: Tailwind CSS +description: Utilisation de Tailwind CSS +layout: ../../../layouts/docs.astro +lang: fr +--- + +## Qu'est-ce que Tailwind CSS ? + +Tailwind CSS est une toute petite librairie CSS, [utilitaire d'abord](https://tailwindcss.com/docs/utility-first), permettant de créer des designs personnalisées, sans le changement de contexte requis par le CSS classique. Il s'agit purement d'une librairie CSS et ne fournit aucun composant ou logique prédéfini, elle offre [un ensemble d'avantages très différent](https://www.youtube.com/watch?v=CQuTF-bkOgc) par rapport à une librairie de composants comme Material UI. + +Cela rend le CSS incroyablement facile et rapide à écrire, comme le montre l'exemple suivant : + +Ancien CSS : + +1. Écrire du CSS, souvent dans un fichier séparé + +```css +.my-class { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #fff; + border: 1px solid #e2e8f0; + border-radius: 0.25rem; + padding: 1rem; +} +``` + +2. Importer le CSS dans votre composant + +```jsx +import "./my-class.css"; +``` + +3. Ajouter la classe à votre code HTML + +```jsx +
...
+``` + +Équivalent dans Tailwind : + +1. Écrivez simplement des classes dans votre HTML + +```jsx +
+ ... +
+``` + +Lorsqu'elle est utilisé avec des composantes React, cela permet de créer des interfaces utilisateur de façon extrêmement puissant et rapidement. + +Tailwind CSS dispose d'un magnifique système de conception intégré, qui sort de l'oeuf avec une palette de couleurs soigneusement choisie, des modèles de dimensionnement pour des styles tels que la width/height et le padding/margin pour une conception uniforme, ainsi que des points d'arrêt (breaking points) pour créer des mises en page. Ce système de conception peut être personnalisé et étendu pour créer la boîte à outils exacte de styles dont votre projet a besoin. + +
+ +
+ +Tru Narla mieux connu sous le nom de [mewtru](https://twitter.com/trunarla) a donné une conférence étonnante sur [la construction d'un système de conception à l'aide de Tailwind CSS](https://www.youtube.com/watch?v=T-Zv73yZ_QI). + +## Utilisation + +Assurez-vous d'avoir installé des plugins pour Tailwind dans votre éditeur de code afin d'améliorer votre expérience d'écriture avec Tailwind. + +### Extensions et plugins + +- [Extension VSCode](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) +- [Integration avec JetBrains](https://www.jetbrains.com/help/webstorm/tailwind-css.html#ws_css_tailwind_install) +- [Neovim LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#tailwindcss) + +### Formatage + +Les classes CSS Tailwind peuvent facilement devenir un peu désordonnées, donc un formateur pour les classes est indispensable. [Tailwind CSS Prettier Plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) trie les classes dans [l'ordre recommandé](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted) afin que les classes correspondent au bundle CSS généré. Lorsque vous sélectionnez Tailwind dans la ligne de commande, nous l'installons et le configurons pour vous. + +### Appliquez les classes de façon conditionnelle + +L'ajout conditionnel de classes à l'aide de ternaires peut devenir très compliqué et difficile à lire. Ces packages vous aident à organiser vos classes lorsque vous utilisez une logique conditionnelle. + +- [clsx](https://github.com/lukeed/clsx) +- [classnames](https://github.com/JedWatson/classnames) + +## Ressources utiles + +| Ressource | Lien | +| ------------------------------- | -------------------------------------------------------- | +| Documentation Tailwind | https://tailwindcss.com/docs/editor-setup/ | +| Feuille de triche pour Tailwind | https://nerdcave.com/tailwind-cheat-sheet/ | +| awesome-tailwindcss | https://github.com/aniftyco/awesome-tailwindcss/ | +| Communauté Tailwind | https://github.com/tailwindlabs/tailwindcss/discussions/ | +| Tailwind Discord Server | https://tailwindcss.com/discord/ | +| TailwindLabs Youtube Channel | https://www.youtube.com/tailwindlabs/ | +| Tailwind Playground | https://play.tailwindcss.com/ | diff --git a/www/src/pages/fr/usage/trpc.md b/www/src/pages/fr/usage/trpc.md new file mode 100644 index 0000000000..8205ad11ce --- /dev/null +++ b/www/src/pages/fr/usage/trpc.md @@ -0,0 +1,324 @@ +--- +title: tRPC +description: utilisation de tRPC +layout: ../../../layouts/docs.astro +lang: fr +--- + +tRPC nous permet d'écrire des API fortement typées de bout en bout sans aucune génération de code ni surcharge d'exécution. Il utilise l'inférence de TypeScript pour déduire les définitions de type de votre routeur d'API et vous permet d'appeler vos procédures d'API à partir de votre client avec une sécurité de type complète et une saisie semi-automatique dans votre éditeur de code. Lorsque vous utilisez tRPC, vous sentirez votre frontend et votre backend plus proches que jamais, ce qui permet une expérience de développement exceptionnelle. + +
+
+

+ J'ai écrit tRPC pour permettre aux gens de coder plus rapidement en supprimant le besoin d'une couche API traditionnelle, tout en ayant la certitude que nos applications ne se briseront pas lorsque nous itérerons rapidement. +

+
+ + Avatar of @alexdotjs +
+ Alex - créateur de tRPC + + @alexdotjs + +
+ +
+ +## Fichiers + +tRPC nécessite beaucoup de configuration que `create-t3-app` fait pour vous. Passons en revue les fichiers générés : + +### 📄 `pages/api/trpc/[trpc].ts` + +Il s'agit du point d'entrée de votre API et expose le routeur tRPC. Normalement, vous ne toucherez pas beaucoup à ce fichier, mais si vous devez, par exemple, activer le middleware CORS ou similaire, il est utile de savoir que le `createNextApiHandler` exporté est un [gestionnaire d'API Next.js](https://nextjs.org/docs/api-routes/introduction) qui prend une [requête](https://developer.mozilla.org/en-US/docs/Web/API/Request) et [réponse](https://developer.mozilla.org/en-US/docs/Web/API/Response). Cela signifie que vous pouvez envelopper le `createNextApiHandler` dans n'importe quel middleware de votre choix. Voir ci-dessous pour un [exemple] (#enabling-cors) d'ajout de CORS. + +### 📄 `server/trpc/context.ts` + +Ce fichier est l'endroit où vous définissez le contexte qui est transmis à vos procédures tRPC. Le contexte est une donnée à laquelle 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. + +- `createContextInner`: 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. + +- `createContext`: C'est ici que vous définissez le contexte qui dépend de la requête, par ex. la session de l'utilisateur. Vous récupérez la session à l'aide de l'objet `opts.req`, puis transmettez la session à la fonction `createContextInner` pour créer le contexte final. + +### 📄 `server/trpc/trpc.ts` + +C'est ici que vous initialisez tRPC et définissez 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 créer des procédures et des middlewares réutilisables et 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. + +### 📄 `server/trpc/router/*.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, puis les [fusionnez](https://trpc.io/docs/v10/merging-routers) tous entre eux dans un seul routeur d'application via `server/trpc/router/_app.ts`. + +### 📄 `utils/trpc.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. + +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. + +## Comment utiliser tRPC ? + +
+ +
+ +Le contributeur de tRPC [trashh_dev](https://twitter.com/trashh_dev) a fait [une présentation de malade à la Next.js Conf](https://www.youtube.com/watch?v=2LYM8gf184U) à propos de tRPC. Nous vous recommandons fortement de la regarder si vous ne l'avez pas déjà fait. + +Avec tRPC, vous écrivez des fonctions TypeScript sur votre backend, puis vous les appelez depuis votre frontend. Une procédure tRPC simple pourrait ressembler à ceci : + +```ts:server/trpc/router/user.ts +const userRouter = t.router({ + getById: t.procedure.input(z.string()).query(({ ctx, input }) => { + return ctx.prisma.user.findFirst({ + where: { + id: input, + }, + }); + }), +}); +``` + +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. + +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é : + +```ts:server/trpc/router/_app.ts +const appRouter = t.router({ + users: userRouter, + posts: postRouter, + messages: messageRouter, +}); + +export type AppRouter = typeof appRouter; +``` + +Notez que nous n'avons besoin d'exporter que les définitions de type de notre routeur, ce qui signifie que nous n'importons jamais de code serveur sur notre client. + +Maintenant appelons la procédure sur notre frontend. tRPC fournit un wrapper pour `@tanstack/react-query` qui vous permet d'utiliser toute la puissance des hooks qu'il fournit, avec l'avantage supplémentaire d'avoir vos appels d'API typés. Nous pouvons appeler nos procédures depuis notre frontend comme ceci : + +```tsx:pages/users/[id].tsx +import { useRouter } from "next/router"; + +const UserPage = () => { + const { query } = useRouter(); + const userQuery = trpc.users.getById.useQuery(query.id); + + return ( +
+

{userQuery.data?.name}

+
+ ); +}; +``` + +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. + +## Comment puis-je appeler mon API en externe ? + +Avec les API classiques, vous pouvez appeler vos points de terminaison à l'aide de n'importe quel client HTTP tel que `curl`, `Postman`, `fetch` ou directement depuis votre navigateur. Avec tRPC, c'est un peu différent. Si vous souhaitez appeler vos procédures sans le client tRPC, il existe deux méthodes recommandées : + +### 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. + +```ts:pages/api/users/[id].ts +import type { NextApiRequest, NextApiResponse } from "next"; +import { appRouter } from "../../../server/trpc/router/_app"; +import { createContext } from "../../../server/trpc/context"; + +const userByIdHandler = async (req: NextApiRequest, res: NextApiResponse) => { + // Create context and caller + const ctx = await createContext({ req, res }); + const caller = appRouter.createCaller(ctx); + try { + const { id } = req.query; + const user = await caller.user.getById(id); + res.status(200).json(user); + } catch (cause) { + if (cause instanceof TRPCError) { + // An error from tRPC occured + const httpCode = getHTTPStatusCodeFromError(cause); + return res.status(httpCode).json(cause); + } + // Another error occured + console.error(cause); + res.status(500).json({ message: "Internal server error" }); + } +}; + +export default userByIdHandler; +``` + +### Exposer chaque procédure en tant que point de terminaison REST + +Si vous souhaitez exposer chaque procédure vers l'extérieur, consultez le plugin créer par la communauté [trpc-openapi](https://github.com/jlalmes/trpc-openapi/tree/master). En fournissant des métadonnées supplémentaires à vos procédures, vous pouvez générer une API REST compatible OpenAPI à partir de votre routeur tRPC. + +### 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. + +## Comparaison avec un endpoint d'API Next.js + +Comparons un endpoint d'API Next.js à une procédure tRPC. Disons que nous voulons récupérer un objet utilisateur de notre base de données et le renvoyer au frontend. Nous pourrions écrire un endpoint d'API Next.js comme ceci : + +```ts:pages/api/users/[id].ts +import type { NextApiRequest, NextApiResponse } from "next"; +import { prisma } from "../../../server/db/client"; + +const userByIdHandler = async (req: NextApiRequest, res: NextApiResponse) => { + if (req.method !== "GET") { + return res.status(405).end(); + } + + const { id } = req.query; + + if (!id || typeof id !== "string") { + return res.status(400).json({ error: "Invalid id" }); + } + + const examples = await prisma.example.findFirst({ + where: { + id, + }, + }); + + res.status(200).json(examples); +}; + +export default userByIdHandler; +``` + +```ts:pages/users/[id].tsx +import { useState, useEffect } from "react"; +import { useRouter } from "next/router"; + +const UserPage = () => { + const router = useRouter(); + const { id } = router.query; + + const [user, setUser] = useState(null); + useEffect(() => { + fetch(`/api/user/${id}`) + .then((res) => res.json()) + .then((data) => setUser(data)); + }, [id]); +}; +``` + +Comparez cela à l'exemple tRPC ci-dessus et vous pouvez voir certains des avantages de tRPC : + +- Au lieu de spécifier une url pour chaque route, ce qui peut devenir fastidieux à déboguer si vous déplacez quelque chose, votre routeur entier est un objet avec saisie semi-automatique. +- Vous n'avez pas besoin de valider la méthode HTTP utilisée. +- Vous n'avez pas besoin de valider que la requête ou le corps de la requête contient les données correctes dans la procédure, car Zod s'en charge. +- Au lieu de créer une réponse, vous pouvez générer des erreurs et renvoyer une valeur ou un objet comme vous le feriez dans n'importe quelle autre fonction TypeScript. +- L'appel de la procédure sur le frontend fournit l'auto-complétion et la sécurité de typage. + +## Extraits de code utiles + +Voici quelques extraits de code qui pourraient être utiles. + +### Activation de CORS + +Si vous avez besoin de consommer votre API à partir d'un domaine différent, par exemple dans un monorepo qui inclut une application React Native, vous devrez peut-être activer CORS : + +```ts:pages/api/trpc/[trpc].ts +import type { NextApiRequest, NextApiResponse } from "next"; +import { createNextApiHandler } from "@trpc/server/adapters/next"; +import { appRouter } from "~/server/trpc/router/_app"; +import { createContext } from "~/server/trpc/context"; +import cors from "nextjs-cors"; + +const handler = async (req: NextApiRequest, res: NextApiResponse) => { + // Enable cors + await cors(req, res); + + // Create and call the tRPC handler + return createNextApiHandler({ + router: appRouter, + createContext, + })(req, res); +}; + +export default handler; +``` + +### Mises à jour optimistes + +Les mises à jour optimistes se produisent lorsque nous mettons à jour l'interface utilisateur avant la fin de l'appel d'API. Cela donne à l'utilisateur une meilleure expérience car il n'a pas à attendre la fin de l'appel d'API pour que l'interface utilisateur reflète le résultat de son action. Cependant, les applications qui accordent une grande importance à l'exactitude des données doivent éviter les mises à jour optimistes car elles ne sont pas une "véritable" représentation de l'état du backend. Vous pouvez en savoir plus sur la [documentation de React Query](https://tanstack.com/query/v4/docs/guides/optimistic-updates). + +```tsx +const MyComponent = () => { + const listPostQuery = trpc.post.list.useQuery(); + + const utils = trpc.useContext(); + const postCreate = trpc.post.create.useMutation({ + async onMutate(newPost) { + // Cancel outgoing fetches (so they don't overwrite our optimistic update) + await utils.post.list.cancel(); + + // Get the data from the queryCache + const prevData = utils.post.list.getData(); + + // Optimistically update the data with our new post + utils.post.list.setData(undefined, (old) => [...old, newPost]); + + // Return the previous data so we can revert if something goes wrong + return { prevData }; + }, + onError(err, newPost, ctx) { + // If the mutation fails, use the context-value from onMutate + utils.post.list.setData(undefined, ctx.prevData); + }, + onSettled() { + // Sync with server once mutation has settled + utils.post.list.invalidate(); + }, + }); +}; +``` + +### Exemple de test d'intégration + +Voici un exemple de test d'intégration qui utilise [Vitest](https://vitest.dev) pour vérifier que votre routeur tRPC fonctionne comme prévu, que l'analyseur d'entrée déduit le type correct et que les données renvoyées correspondent à la sortie attendue. + +```ts +import { type inferProcedureInput } from "@trpc/server"; +import { createContextInner } from "~/server/router/context"; +import { appRouter, type AppRouter } from "~/server/router/_app"; +import { expect, test } from "vitest"; + +test("example router", async () => { + const ctx = await createContextInner({ session: null }); + const caller = appRouter.createCaller(ctx); + + type Input = inferProcedureInput; + const input: Input = { + text: "test", + }; + + const example = await caller.example.hello(input); + + expect(example).toMatchObject({ greeting: "Hello test" }); +}); +``` + +## Ressources utiles + +| Ressource | Lien | +| ------------------------- | ------------------------------------------------------- | +| Documentation tRPC | https://www.trpc.io | +| Un tas d'exemples de tRPC | https://github.com/trpc/trpc/tree/next/examples | +| Documentation React Query | https://tanstack.com/query/v4/docs/adapters/react-query | diff --git a/www/src/pages/fr/usage/typescript.md b/www/src/pages/fr/usage/typescript.md new file mode 100644 index 0000000000..f6712e13d0 --- /dev/null +++ b/www/src/pages/fr/usage/typescript.md @@ -0,0 +1,67 @@ +--- +title: TypeScript +description: Utilisation de TypeScript +layout: ../../../layouts/docs.astro +lang: fr +--- + +
+
+

+ Construisez des filets de sécurité, pas des garde-fous +

+
+ + Avatar of @t3dotgg +
+ Theo - auteur de la T3 Stack + + @t3dotgg + +
+ +
+ +Que vous soyez un développeur débutant ou chevronné, nous pensons que TypeScript est indispensable. Cela peut sembler intimidant au début, mais tout comme beaucoup d'outils, c'est quelque chose dont beaucoup ne garderont de mauvais souvenirs après avoir commencé à l'utiliser. + +Il fournit des commentaires en direct lorsque vous écrivez votre code en définissant les types de données attendus, et fournit soit une saisie semi-automatique dans votre éditeur de code, soit vous crie dessus avec des lignes ondulées rouges si vous essayez d'accéder à une propriété qui n'existe pas ou essayez de passez une valeur du mauvais type, que vous auriez sinon à déboguer plus tard, en ligne. + +C'est peut-être l'outil qui offre le plus de productivité aux développeurs. Il fournit la documentation de votre code lorsque vous l'écrivez ou le consommez dans votre éditeur en vous donnant une information directe car vous pouvez faire des erreurs et ceci est absolument inestimable. + +## Inférence de type + +Alors que de nombreux nouveaux développeurs TypeScript sont concernés par _écrire_ du TypeScript, bon nombre de ses avantages ne vous obligent pas à modifier votre code, en particulier l'inférence. L'inférence signifie que si quelque chose est typé, ce type le suivra tout au long du flux de l'application sans avoir à être redéclaré à d'autres endroits. Cela signifie que, par exemple, une fois que vous avez défini les types d'arguments qu'une fonction prend, le reste de la fonction sera généralement typesafe sans nécessiter d'autre code spécifique à TypeScript. Les développeurs de librairies consacrent une tonne de travail à la maintenance des types de celles-ci, ce qui signifie que nous, en tant que développeurs d'applications, pouvons bénéficier à la fois de l'inférence et de la documentation intégrée dans notre éditeur de code grâce aux types que fournissent ces librairies. + +
+ +
+ +Regardez la vidéo de Theo sur la façon dont [vous utilisez peut-être mal TypeScript](https://www.youtube.com/watch?v=RmGHnYUqQ4k). + +## Utilisations puissantes de l'inférence de type + +### Zod + +[Zod](https://github.com/colinhacks/zod) est une librairie de validation de schéma construite avec TypeScript. Écrivez un schéma qui représente une source unique de vérité pour vos données, et Zod s'assurera que vos données sont valides dans toute votre application, même au-delà des limites du réseau et des API externes. + +### Tanstack Query + +[Tanstack Query](https://tanstack.com/query/v4/) vous propose des requêtes et des mutations déclaratives, toujours à jour et autogérées, qui améliorent directement votre expériences de développeur et d'utilisateur. + +## Ressources utiles + +| Ressource | Lien | +| --------------------------------------------------------- | ----------------------------------------------------------------- | +| Manuel TypeScript | https://www.typescriptlang.org/docs/handbook/ | +| Tutoriel TypeScript pour débutants | https://github.com/total-typescript/beginners-typescript-tutorial | +| Défis de Type | https://github.com/type-challenges/type-challenges | +| Rodney Mullen of TypeScript (Matt Pocock) Youtube Channel | https://www.youtube.com/c/MattPocockUk/videos | diff --git a/www/src/pages/fr/why.md b/www/src/pages/fr/why.md new file mode 100644 index 0000000000..6910d12279 --- /dev/null +++ b/www/src/pages/fr/why.md @@ -0,0 +1,50 @@ +--- +title: Pourquoi CT3A? +description: Pourquoi devriez-vous choisir Create T3 App pour votre prochain projet +layout: ../../layouts/docs.astro +lang: fr +--- + +Nous avons lancé create-t3-app parce que [Theo](https://twitter.com/t3dotgg) a refusé de créer un modèle de ses technologies préférées. Inspirée par create-next-app, [Astro's CLI](https://astro.build) avec un amour pour la sécurité des types, l'équipe create-t3-app a travaillé dur pour créer le meilleur point de départ possible pour les nouveaux projets T3 Stack. + +Si vous souhaitez utiliser Next.js de manière sécurisée, c'est ici qu'il faut commencer. Si vous êtes curieux de connaître l'un des choix technologiques spécifiques que nous avons faits, lisez la suite :) + +## Pourquoi TypeScript ? + +JavaScript est difficile. Pourquoi ajouter plus de règles ? + +Nous croyons fermement que l'expérience fournie par TypeScript vous aidera à devenir un meilleur développeur. Il fournit des commentaires en direct lorsque vous écrivez votre code en définissant les types de données attendus, et fournit soit une saisie semi-automatique utile dans votre éditeur, soit vous crie dessus avec des lignes ondulées rouges si vous essayez d'accéder à une propriété qui n'existe pas ou essayez de passer une valeur du mauvais type, que vous auriez sinon à déboguer plus loin. Que vous soyez nouveau dans le développement Web ou un professionnel chevronné, la "strictité" de TypeScript fournira une expérience moins frustrante et plus cohérente que Vanilla JS. + +La sécurité de type vous rend plus rapide. Si vous n'êtes pas convaincu, vous [utilisez peut-être mal TypeScript...](https://www.youtube.com/watch?v=RmGHnYUqQ4k) + +## Pourquoi Next.js ? + +Nous aimons React. Il a rendu le développement d'interface utilisateur accessible d'une manière que nous n'avions jamais imaginé auparavant. Cela peut également conduire les développeurs sur des chemins difficiles. + +Next.js offre une approche légèrement opiniâtre et fortement optimisée pour créer des applications à l'aide de React. Du routage aux définitions d'API en passant par le rendu d'image, nous faisons confiance à Next.js pour guider les développeurs vers de bonnes décisions. + +## Pourquoi tRPC/Prisma/Tailwind/etc? + +Bien que nous croyions qu'il faut garder les choses aussi simples que possible, nous constatons que ces éléments sont utilisés dans chaque "application" comme projet que nous créons. `create-t3-app` fait un excellent travail en vous permettant d'adopter les éléments dont vous avez besoin. + +### tRPC + +tRPC tient la promesse de GraphQL d'un développement client transparent par rapport à un serveur typesafe sans tout le passe-partout. C'est un abus intelligent de TypeScript qui offre une expérience de développement incroyable. + +### Prisma + +Prisma est à SQL ce que TypeScript est à JS. Il a créé une expérience de développement qui n'existait pas auparavant. En générant des types à partir d'un schéma défini par l'utilisateur compatible avec [plusieurs bases de données](https://www.prisma.io/docs/concepts/database-connectors), Prisma garantit la sécurité des types de bout en bout, de votre base de données à votre application. + +Prisma fournit toute une [suite d'outils](https://www.prisma.io/docs/concepts/overview/should-you-use-prisma#-you-want-a-tool-that-holistically-covers-your-database-workflows) facilitant les interactions quotidiennes avec votre base de données. Notamment, Prisma Client est chargé d'interroger et de rendre SQL si simple que vous remarquerez à peine que vous l'utilisez, et Prisma Studio est une interface graphique pratique pour votre base de données qui vous permet de lire et de manipuler vos données rapidement sans avoir à écrire de code. + +### Tailwind CSS + +Tailwind ressemble à un "CSS en mode zen". + +En fournissant des blocs de construction sous la forme de bonnes couleurs par défaut, d'un espacement et d'autres primitives, Tailwind facilite la création d'une belle application. Et contrairement aux librairies de composants, cela ne vous retient pas lorsque vous souhaitez faire passer votre application au niveau supérieur et créer quelque chose de beau et d'unique. + +De plus, avec son approche en ligne, Tailwind vous encourage à styliser sans vous soucier de nommer les classes, d'organiser les fichiers ou de tout autre problème non directement lié au problème que vous essayez de résoudre. + +### NextAuth.js + +Lorsque vous souhaitez un système d'authentification dans votre application NextJS, NextAuth.js est une excellente solution pour apporter la complexité de la sécurité sans avoir à le coder vous-même. Il est livré avec une longue liste de fournisseurs pour ajouter rapidement l'authentification OAuth et fournit des adaptateurs pour de nombreuses bases de données et ORM.