Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: upgrade french docs with #934, #1032 and #1044 #1050

Merged
merged 6 commits into from
Jan 7, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion www/src/pages/en/usage/prisma.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ The default database is an SQLite database, which is great for development and q
```

```ts:prisma/seed.ts
import { prisma } from "../src/server/db/client";
import { prisma } from "../src/server/db";

async function main() {
const id = "cl9ebqhxk00003b600tymydho";
Expand Down
10 changes: 5 additions & 5 deletions www/src/pages/fr/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ layout: ../../layouts/docs.astro
lang: fr
---

Voici quelques questions fréquemment posées sur `create-t3-app`.
Voici quelques questions fréquemment posées sur Create T3 App.

## Et après? Comment faire une application avec ça ?

Expand All @@ -23,14 +23,14 @@ Si vous n'êtes pas familier avec les différentes technologies utilisées dans

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 ?
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 ` :
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)
- [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)

Expand Down
58 changes: 21 additions & 37 deletions www/src/pages/fr/folder-structure.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ Le fichier `[...nextauth].ts` est la route d'authentification NextAuth.js. Il es
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.

</div>
<div data-components="trpc prisma">
<div data-components="trpc prisma nextauth">

### `src/server`

Expand All @@ -72,72 +72,56 @@ Le dossier `server` est utilisé pour séparer clairement le code côté serveur
</div>
<div data-components="nextauth+trpc">

### `src/server/common`
### `src/server/auth.ts`

Le dossier "common" contient du code côté serveur couramment réutilisé.

</div>
<div data-components="nextauth+trpc">

#### `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.
Contient des utilitaires d'authentification tels que la récupération de la session de l'utilisateur côté serveur. Voir [utilisation de NextAuth.js](usage/next-auth#utilisation-avec-trpc) pour plus d'informations.

</div>
<div data-components="prisma">

#### `src/server/db/client.ts`
#### `src/server/db.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.
Le fichier `db.ts` est utilisé pour instancier le client Prisma au niveau global. Voir [Utilisation de Prisma](usage/prisma#prisma-client) et [meilleures pratiques pour utiliser Prisma avec Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) pour plus d'informations.

</div>
<div data-components="trpc">

### `src/server/trpc`
### `src/server/api`

Le dossier `trpc` contient le code côté serveur de tRPC.
Le dossier `api` contient le code côté serveur de tRPC.

</div>
<div data-components="trpc">

#### `src/server/trpc/context.ts`
#### `src/server/api/routers`

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.
Le dossier `routers` contient tous vos sous-routeurs tRPC.

</div>
<div data-components="trpc">

#### `src/server/trpc/trpc.ts`
#### `src/server/api/routers/example.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.
Le fichier `example.ts` est un exemple de routeur tRPC utilisant le helper `publicProcedure` pour montrer comment créer une route tRPC publique.

</div>
<div data-components="trpc">

### `src/server/trpc/router`

Le dossier `router` contient les routeurs tRPC.
En fonction des packages choisis, ce routeur contient plus ou moins de routes pour démontrer au mieux l'utilisation à vos besoins.

</div>
<div data-components="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.

</div>
<div data-components="nextauth+trpc">
#### `src/server/api/trpc.ts`

#### `src/server/trpc/router/auth.ts`
Le fichier `trpc.ts` est le fichier de configuration principal de votre back-end tRPC. Ici, vous trouverez:

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.
1. La définissons du contexte utilisé dans les requêtes tRPC. Voir [utilisation de tRPC](usage/trpc#-servertrpccontextts) pour plus d'informations.
2. Le helper de procédure d'exportation. Voir [utilisation de tRPC](usage/trpc#-servertrpctrpcts) pour plus d'informations.

</div>
<div data-components="trpc">

#### `src/server/trpc/router/example.ts`
#### `src/server/api/root.ts`

Le fichier `example.ts` est un exemple de routeur tRPC utilisant l'assistant `publicProcedure` pour montrer comment créer une route tRPC publique.
Le fichier `root.ts` est utilisé pour fusionner les routeurs tRPC et les exporter en tant que routeur unique, ainsi que la définition du type de routeur. Voir [utilisation du tRPC](usage/trpc#-servertrpcrourts) pour plus d'informations.

</div>
<div>
Expand Down Expand Up @@ -170,9 +154,9 @@ Le dossier `utils` est utilisé pour stocker les fonctions utilitaires courammen
</div>
<div data-components="trpc">

#### `src/utils/trpc.ts`
#### `src/utils/api.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.
Le fichier `api.ts` est le point d'entrée frontal de tRPC. Voir [utilisation de tRPC](usage/trpc#-utilstrpcts) pour plus d'informations.

</div>
<div>
Expand Down Expand Up @@ -228,6 +212,6 @@ Le fichier `prettier.config.cjs` est utilisé pour configurer Prettier afin d'in

### `tsconfig.json`

Le fichier `tsconfig.json` est utilisé pour configurer TypeScript. Certaines valeurs autres que celles par défaut, telles que le `strict mode`, ont été activées pour garantir la meilleure utilisation de TypeScript pour create-t3-app et ses librairies. Voir la [documentation de TypeScript](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) ou [Utilisation de TypeScript](usage/typescript) pour plus d'informations.
Le fichier `tsconfig.json` est utilisé pour configurer TypeScript. Certaines valeurs autres que celles par défaut, telles que le `strict mode`, ont été activées pour garantir la meilleure utilisation de TypeScript pour Create T3 App et ses librairies. Voir la [documentation de TypeScript](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) ou [Utilisation de TypeScript](usage/typescript) pour plus d'informations.

</div>
2 changes: 1 addition & 1 deletion www/src/pages/fr/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,4 +39,4 @@ Nous aimons notre technologie de pointe. La vitesse et honnêtement le fun qu'ap

### 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.
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.
2 changes: 1 addition & 1 deletion www/src/pages/fr/other-recs.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ 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**_.
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

Expand Down
3 changes: 3 additions & 0 deletions www/src/pages/fr/t3-collection.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ Vous avez réalisé un projet à l'aide de la stack T3 et souhaitez le partager
| 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/) |
| Tauri T3 App - Application Tauri qui utilise la T3 Stack | [tauri-t3-app](https://github.com/AyanavaKarmakar/tauri-t3-app) | [tauri-t3-app.docs](https://github.com/AyanavaKarmakar/tauri-t3-app#readme) |
| Azon - Site e-commerce | [andrewsolonets/Azon-Shop](https://github.com/andrewsolonets/Azon-Shop) | [azon-shop.vercel.app](https://azon-shop.vercel.app/) |
| Analyzemyrepo.com - Informations utiles pour **tout** GitHub repo | [CrowdDotDev/analyzemyrepo](https://github.com/CrowdDotDev/analyzemyrepo) | [analyzemyrepo.com](https://analyzemyrepo.com) |

## Entreprises utilisant la stack T3

Expand Down
4 changes: 2 additions & 2 deletions www/src/pages/fr/usage/env-variables.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
title: Variables d'environnement
description: Débuter avec create-t3-app
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`:
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

Expand Down
4 changes: 2 additions & 2 deletions www/src/pages/fr/usage/first-steps.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,6 @@ 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.
- Si votre application inclut tRPC, consultez `src/pages/index.tsx` et `src/server/api/routers/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) ! :)
37 changes: 30 additions & 7 deletions www/src/pages/fr/usage/next-auth.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,32 @@ const User = () => {
};
```

## Récupérer la session côté serveur

Parfois, vous souhaiterez demander la session côté serveur. Pour ce faire, prérécupérez la session à l'aide du helper `getServerAuthSession` fournie par `create-t3-app` et transmettez-le au client à l'aide de `getServerSideProps` :

```tsx:pages/users/[id].tsx
import { getServerAuthSession } from "../server/auth";
import type { GetServerSideProps } from "next";

export const getServerSideProps: GetServerSideProps = async (ctx) => {
const session = await getServerAuthSession(ctx);
return {
props: { session },
};
};

const User = () => {
const { data: session } = useSession();
// NOTE: `session` wont have a loading state since it's already prefetched on the server

...
}
```

## Inclusion de `user.id` dans la Session

`create-t3-app` est configuré pour utiliser le [session callback](https://next-auth.js.org/configuration/callbacks#session-callback) dans la configuration NextAuth.js pour inclure l'ID de l'utilisateur dans le objet "session".
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: {
Expand Down Expand Up @@ -73,7 +96,7 @@ 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
```ts:server/auth.ts
export const getServerAuthSession = async (ctx: {
req: GetServerSidePropsContext["req"];
res: GetServerSidePropsContext["res"];
Expand All @@ -84,8 +107,8 @@ export const getServerAuthSession = async (ctx: {

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";
```ts:server/api/trpc.ts
import { getServerAuthSession } from "../auth";

export const createContext = async (opts: CreateNextContextOptions) => {
const { req, res } = opts;
Expand All @@ -98,7 +121,7 @@ export const createContext = async (opts: CreateNextContextOptions) => {

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
```ts:server/api/trpc.ts
const isAuthed = t.middleware(({ ctx, next }) => {
if (!ctx.session || !ctx.session.user) {
throw new TRPCError({ code: "UNAUTHORIZED" });
Expand All @@ -116,7 +139,7 @@ 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
```ts:server/api/routers/user.ts
const userRouter = router({
me: protectedProcedure.query(async ({ ctx }) => {
const user = await prisma.user.findUnique({
Expand Down Expand Up @@ -153,7 +176,7 @@ Si, par exemple, vous souhaitez ajouter un `role` au modèle `User`, vous devrez

## 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.
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

Expand Down
Loading