diff --git a/www/src/config.ts b/www/src/config.ts index 2b697735b7..cbf684ff3a 100644 --- a/www/src/config.ts +++ b/www/src/config.ts @@ -205,6 +205,7 @@ export const SIDEBAR: Sidebar = { { text: "Dlaczego CT3A?", link: "pl/why" }, { text: "Instalacja", link: "pl/installation" }, { text: "Struktura Projektu (Pages)", link: "pl/folder-structure-pages" }, + { text: "Struktura Projektu (App)", link: "pl/folder-structure-app" }, { text: "FAQ", link: "pl/faq" }, { text: "Kolekcja T3", link: "pl/t3-collection" }, { text: "Przykłady", link: "pl/examples" }, @@ -216,6 +217,7 @@ export const SIDEBAR: Sidebar = { { text: "TypeScript", link: "pl/usage/typescript" }, { text: "tRPC", link: "pl/usage/trpc" }, { text: "Prisma", link: "pl/usage/prisma" }, + { text: "Drizzle", link: "pl/usage/drizzle" }, { text: "NextAuth.js", link: "pl/usage/next-auth" }, { text: "Zmienne Środowiskowe", diff --git a/www/src/pages/pl/folder-structure-app.mdx b/www/src/pages/pl/folder-structure-app.mdx new file mode 100644 index 0000000000..270aa1e53f --- /dev/null +++ b/www/src/pages/pl/folder-structure-app.mdx @@ -0,0 +1,254 @@ +--- +title: Struktura projektu (App) +description: Struktura projektu nowo utworzonej aplikacji T3 +layout: ../../layouts/docs.astro +lang: pl +isMdx: true +--- + +import Diagram from "../../components/docs/folderStructureDiagramApp.astro"; +import Form from "../../components/docs/folderStructureForm.astro"; + +Wybierz paczkę, aby zobaczyć strukture folderów nowo utworzonej z nią aplikacji. Poniżej znajdziesz opis każdego elementu. + +
+ + + +
+ +### `prisma` + +Folder `prisma` zawiera plik `schema.prisma`, który używany jest do konfiguracji połączenia z bazą danych i struktury tej bazy. Jest to także miejsce, w którym przechowywać można pliki migracji i/lub skrypty "seedowania" (jeżeli z nich korzystasz). Po więcej informacji, zobacz [korzystanie z Prismy](/pl/usage/prisma). + +
+
+ +### `public` + +Folder `public` zawiera zasoby statyczne, które "serwowane" są przez serwer webowy. Plik `favicon.ico` jest przykładem jednego z takich zasobów. + +
+
+ +### `src/env` + +Używany do walidacji zmiennych środowiskowych i definiowania ich typów - zobacz [zmienne środowiskowe](/pl/usage/env-variables). + +
+
+ +### `src/app` + +Folder `app` zawiera wszystkie strony aplikacji Next.js. Plik `page.tsx` w głównym folderze `/app` to strona główna twojej aplikacji. Plik `layout.tsx` jest używany do "zawinięcia" aplikacji w "providery". Po więcej informacji zobacz [dokumentację Next.js](https://nextjs.org/docs/app/getting-started/layouts-and-pages) + +
+
+ +#### `src/app/_components/post.tsx` + +Plik `post.tsx` jest przykładem komponentu klienta, który wykonuje mutacje TRPC. + +
+
+ +#### `src/app/api/auth/[...nextauth]/route.ts` + +Plik [...nextauth]/route.ts`jest slug routem używanym do uwierzytelniania ("authentication") poprzez NextAuth.js. Pomaga on przetwarzać zapytania o uwierzytelnianie. Po więcej informacji o kolejno NextAuth.js i slug route'ach, zobacz [korzystanie z NextAuth.js](/pl/usage/next-auth) oraz [dokumentację dynamicznych route'ów Next.js](https://nextjs.org/docs/routing/dynamic-routes). + +
+
+ +#### `src/app/api/trpc/[trpc]/route.ts` + +Plik `route.ts` to punkt wejścia dla API (tRPC). Pomaga on przetwarzać zapytania wykonane z tRPC. Po więcej informacji o kolejno tRPC i slug route'ach, zobacz [korzystanie z tRPC](/pl/usage/trpc#-pagesapitrpctrpcts) oraz [dokumentację punktów wejścia API](https://nextjs.org/docs/app/api-reference/file-conventions/route). + +
+
+ +### `src/server` + +Folder `server` używany jest do stworzenia wyraźnego podziału między kodem działającym na serwerze, a tym po stronie klienta. + +
+
+ +#### `src/server/auth.ts` + +Jest to główny punkt wejścia dla systemu uwierzytelniania po stronie serwera. Ustawiamy tutaj [opcje konfiguracji](/pl/usage/next-auth), [dostosowujemy model użytkownika](/pl/usage/next-auth#inclusion-of-userid-on-the-session) oraz zapewniamy narzędzia DX dla uwierzytelniania, takie jak funkcja pobierania sesji użytkownika po stronie serwera. Po więcej informacji, zobacz [korzystanie z NextAuth.js](/pl/usage/next-auth#korzystanie-z-trpc). + +
+
+ +#### `src/server/db.ts` + +Plik `db.ts` jest używany do tworzenia instancji klienta Prismy z globalnym zakresie. Po więcej informacji, zobacz [korzystanie z Prismy](/pl/usage/prisma#prisma-client) oraz [polecane korzystanie z Prismy wraz z Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices). + +
+
+ +### `src/server/db` + +Folder `db` zawiera wszystkie schematy klientu Drizzle. Należy pamiętać że drizzle potrzebuje pliku `drizzle.config.ts` (Zobacz poniżej) + +
+
+ +#### `src/server/db/index.ts` + +Plik `index.ts` jest używany do tworzenia instancji klienta Drizzle w globalnym zakresie. Po więcej informacji, zobacz [korzystanie z Prismy](/pl/usage/drizzle#drizzle-client) oraz [polecane korzystanie z Drizzle wraz z Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices). + +
+
+ +#### `src/server/db/schema.ts` + +Plik `schema.ts` jest używany do konfiguracji połączenia z bazą danych i struktury tej bazy [Zobacz](usage/drizzle#drizzle-client) oraz [polecane korzystanie z Drizzle wraz z Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices). + +
+
+ +### `src/server/api` + +Folder `api` zawiera kod TRPC po stronei serwera + +
+
+ +#### `src/server/api/routers` + +Folder `routers` zawiera wszystkie "sub-routery" tRPC. + +
+
+ +#### `src/server/api/routers/example.ts` + +Plik `example.ts` zawiera przykład routera tRPC wykorzystującego funkcję pomocniczą `publicProcedure` do zaprezentowania, jak stworzyć publiczny route tRPC. + +Zależnie od wybranych paczek, router ten zawiera więcej lub mniej route'ów, aby najlepiej zaprezentować jego sposób użycia. + +
+
+ +#### `src/server/api/trpc.ts` + +Plik `trpc.ts` jest głównym plikiem konfiguracyjnym dla tRPC po stronie serwera. W pliku tym: + +1. Definiujemy kontekst używany w zapytaniach tRPC. Po więcej informacji, zobacz [korzystanie z tRPC](usage/trpc#-serverapitrpcts). +2. Eksportujemy funkcje pomocnicze helperów. Po więcej informacji, zobacz [korzystanie z tRPC](usage/trpc#-serverapitrpcts). + +
+ +
+ +#### `src/server/api/root.ts` + +Plik `root.ts` jest używany do scalenia routerów tRPC i eksportowania ich jako pojedynczego routera, a także eksportowania jego definicji typów. Po więcej informacji, zobacz [korzystanie z tRPC](/pl/usage/trpc#-serverapirootts). + +
+
+ +### `src/trpc` + +Folder `trpc` zawiera pliki pozwalające na wykonywanie procedur TPRC z komponentow po stronie serwera i klienta + +
+
+ +#### `src/trpc/query-client.ts` + +Plik `query-client.ts` tworzy Query Clienta, którego TPRC używa do cache'owania i deduplikacji danych w komponentach po stronie klienta. + +
+
+ +#### `src/trpc/react.tsx` + +Plik `react.tsx` jest punktem wejścia dla trpc od strony klienta. Zawiera on też typy dla inputu i outputu rutera. Po więcej inforamcji, zobacz [korzystanie z trpc](usage/trpc#-serverapitrpcts). + +
+
+ +#### `src/trpc/server.ts` + +Plik `server.ts` jest punktem wejściowym dla tprc w komponentach po stronie serwera. + +
+
+ +### `.env` + +Plik `.env` jest używany do przechowywania zmiennych środowiskowych. Po więcej informacji, zobacz [Zmienne Środowiskowe](usage/env-variables). Plik ten **nie** powinien być commitowany do historii gita. + +
+
+ +### `.env.example` + +Plik `.env.example` pokazuje przykładowe zmienne środowiskowe bazując na wybranych bibliotekach. Plik ten powinien być commitowany do historii gita. + +
+
+ +### `.eslintrc.cjs` + +Plik `.eslintrc.cjs` jest używany do konfigurowania ESLinta. Po więcej informacji, zobacz [dokumentację ESLinta](https://eslint.org/docs/latest/user-guide/configuring/configuration-files). + +
+
+ +### `db.sqlite (tylko dla sqlite)` + +Plik `db.sqlite` zawiera baze danych do "developmentu". Ten plik jest tworzony po wykonaniu komendy `db:push`, i jest ignorowany przez git. + +
+
+ +### `drizzle.config.ts` + +Plik `drizzle.config.ts` jest używany do konfigurowania Drizzle kit. Po więcej informacji przeczytaj [ich dokumentację](https://orm.drizzle.team/kit-docs/config-reference) + +
+
+ +### `next-env.d.ts` + +Plik `next-env.d.ts` gwarantuje korzystanie z typów Next.jsa przez kompilator TypeScripta. **Nie powinieneś go usuwać ani modyfikować, ponieważ może on zmienić się w każdym momencie.** Po więcej informacji, zobacz [dokumentację Next.js](https://nextjs.org/docs/basic-features/typescript#existing-projects). + +
+
+ +### `next.config.mjs` + +Plik `next.config.mjs` jest używany do konfigurowania Next.js. Po więcej informacji, zobacz [dokumentację Next.js](https://nextjs.org/docs/api-reference/next.config.js/introduction). Uwaga: Rozszerzenie .mjs pozwala korzystać z importów ESM. + +
+
+ +### `postcss.config.cjs` + +Plik `postcss.config.cjs` jest używany przez Tailwind PostCSS. Po więcej informacji, zobacz [dokumentację Tailwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss). + +
+
+ +### `prettier.config.mjs` + +Plik `prettier.config.mjs` jest używany do konfigurowania Prettiera. Dołącza on plugin `prettier-plugin-tailwindcss` formatujący klasy CSS Tailwinda. Po więcej informacji, zobacz [post na blogu Tailwind CSS](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier). + +
+
+ +### `start-database.sh (tylko dla mysql lub postgres )` + +Plik `start-database.sh` jest używany do uruchomienia bazy danych. Zobacz komentarze w pliku po informacje jak uruchomić baze danych na twoim systemie operacyjnym. + +
+
+ +### `tsconfig.json` + +Plik `tsconfig.json` jest używany do konfigurowania TypeScripta. Niektóre ustawienia zostały włączone (takie jak `strict mode`), aby zapewnić najlepsze użycie TypeScripta do Create T3 App i jej bibliotek. Po więcej informacji, zobacz [dokumentację TypeScripta](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) albo [korzystanie z TypeScripta](/pl/usage/typescript). + +
diff --git a/www/src/pages/pl/folder-structure-pages.mdx b/www/src/pages/pl/folder-structure-pages.mdx index 0d935b79c6..0ebd2b8209 100644 --- a/www/src/pages/pl/folder-structure-pages.mdx +++ b/www/src/pages/pl/folder-structure-pages.mdx @@ -172,7 +172,7 @@ Plik `.eslintrc.cjs` jest używany do konfigurowania ESLinta. Po więcej informa ### `next-env.d.ts` -Plik `next-env.d.ts` gwarantuje korzystanie z typów Next.jsa przez kompilator TypeScripta. \*\*Nie powinieneś go usuwać ani modyfikować, ponieważ może on zmienić się w każdym momencie. Po więcej informacji, zobacz [dokumentację Next.js](https://nextjs.org/docs/basic-features/typescript#existing-projects). +Plik `next-env.d.ts` gwarantuje korzystanie z typów Next.jsa przez kompilator TypeScripta. **Nie powinieneś go usuwać ani modyfikować, ponieważ może on zmienić się w każdym momencie.** Po więcej informacji, zobacz [dokumentację Next.js](https://nextjs.org/docs/basic-features/typescript#existing-projects).
diff --git a/www/src/pages/pl/installation.mdx b/www/src/pages/pl/installation.mdx index 7366fef6f4..f5d7cd9792 100644 --- a/www/src/pages/pl/installation.mdx +++ b/www/src/pages/pl/installation.mdx @@ -49,20 +49,23 @@ Po tym, jak szablon aplikacji zostanie utworzony, sprawdź [pierwsze kroki](/pl/ Z powodu naszej integracji CI, posiadamy eksperymentalne flagi pozwalające skorzystać z szablonu bez żadnych informacji w konsoli. Jeżeli przemawia do Ciebie któraś z poniższych opcji, możesz z jakiejś flagi skorzystać. Pamiętaj, że są to opcje eksperymentalne - mogą się one zmienić bez względu na system wersji semver. -| Flaga | Opis | -| ------------ | ------------------------------------------- | -| `--CI` | Poinformuj narzędzie, że jesteś w trybie CI | -| `--trpc` | Zawrzyj tRPC w projekcie | -| `--prisma` | Zawrzyj Prisma w projekcie | -| `--nextAuth` | Zawrzyj NextAuth.js w projekcie | -| `--tailwind` | Zawrzyj Tailwind CSS w projekcie | +| Flag | Opis | +| ------------------------- | ------------------------------------------- | +| `--CI` | Poinformuj narzędzie, że jesteś w trybie CI | +| `--trpc` | Zawrzyj tRPC w projekcie | +| `--prisma` | Zawrzyj Prisma w projekcie | +| `--drizzle` | Zawrzyj Drizzle w projekcie | +| `--nextAuth` | Zawrzyj NextAuth.js w projekcie | +| `--tailwind` | Zawrzyj Tailwind CSS w projekcie | +| `--dbProvider [provider]` | Zawrzyj skonfigurowaną baze danych | +| `--appRouter` | Użyj Next.js App Router w projekcie | Jeżeli nie podasz flagi `CI`, pozostałe flagi nie zostaną użyte. -Nie musisz wyraźnie wskazywać paczek, z których nie chcesz korzystać. Jeżeli jednak -wolisz jasno wskazać czego używasz, możesz podać wartość `false` - np. `--nextAuth -false`. +Nie musisz wyraźnie wskazywać paczek, z których nie chcesz korzystać. Jeżeli +jednak wolisz jasno wskazać czego używasz, możesz podać wartość `false` - np. +`--nextAuth false`. ### Przykład diff --git a/www/src/pages/pl/usage/drizzle.mdx b/www/src/pages/pl/usage/drizzle.mdx new file mode 100644 index 0000000000..b55e1ed27c --- /dev/null +++ b/www/src/pages/pl/usage/drizzle.mdx @@ -0,0 +1,79 @@ +--- +title: Drizzle +description: Użytkowanie Drizzle. +layout: ../../../layouts/docs.astro +lang: pl +isMdx: true +--- + +Drizzle to headless ORM napisany w TypeScript, oferujący relacyjne oraz podobne do SQL interfejsy zapytań. Obsługuje migracje i schematy baz danych, a także zapewnia typowany klient do pracy z bazą danych. W zestawie znajduje się również Drizzle Kit --- zestaw narzędzi wspomagających zapytania do bazy danych. + +# Drizzle Client + +Klient Drizzle znajduje się w pliku `src/server/db/index.ts`. W tym pliku definiujesz adres URL połączenia z bazą danych i łączysz swój schemat z obiektem bazy danych. + +```ts:src/server/db/index.ts +import { env } from "~/env"; +import * as schema from "./schema"; +import postgres from "postgres"; + +const conn = postgres(env.DATABASE_URL) + +export const db = drizzle(conn, { schema }); +``` + +Zalecamy dołączenie klienta bazy danych do kontekstu tRPC: + +```ts:src/server/api/trpc.ts +import { db } from "~/server/db"; + +export const createTRPCContext = async (opts: { headers: Headers }) => { + const session = await auth(); + + return { + db, + session, + ...opts, + }; +}; +``` + +Schema + +Plik schematu Drizzle znajduje się w `src/server/db/schema.ts`. To tutaj definiujesz strukturę swojej bazy danych i modele, a także łączysz je z klientem Drizzle. + +Jeśli wybierzesz integrację NextAuth.js z Drizzle, plik schematu zostanie wygenerowany automatycznie i skonfigurowany zgodnie z zaleceniami dla modeli `User`, `Session`, `Account` i `VerificationToken`, zgodnie z dokumentacją Auth.js. + +Drizzle Kit + +Drizzle Kit to zestaw narzędzi CLI (wiersza poleceń), zaprojektowany do zarządzania bazą danych. T3 Stack automatycznie uwzględnia Drizzle Kit, jeśli wybierzesz Drizzle jako swój ORM. + +```json:package.json +"scripts": { + ... + "db:generate": "drizzle-kit generate", + "db:migrate": "drizzle-kit migrate", + "db:push": "drizzle-kit push", + "db:studio": "drizzle-kit studio", + ... +} +``` + +### Opis poleceń + +`db:generate` Generuje typy TypeScript i modele na podstawie schematu bazy danych, zapewniając bezpieczeństwo typów i łatwą integrację z Drizzle ORM. + +`db:migrate` Stosuje oczekujące migracje do bazy danych, synchronizując schemat z aktualnymi zmianami w projekcie. + +`db:push` Wysyła lokalne zmiany w schemacie bez potrzeby tworzenia plików migracji. Przydatne do szybkiej synchronizacji w środowisku developerskim. + +`db:studio` Uruchamia wizualny interfejs do zarządzania tabelami bazy danych, danymi i relacjami. + +### Przydatne zasoby + +| Zasób | Link | +| ------------------------------- | --------------------------------------------------- | +| Dokumentacja Drizzle | https://orm.drizzle.team/docs/overview | +| Repozytorium Drizzle (GitHub) | https://github.com/drizzle-team/drizzle-orm | +| Adapter Auth.JS dla Drizzle | https://authjs.dev/getting-started/adapters/drizzle | +| Przewodnik migracji Drizzle Kit | https://orm.drizzle.team/docs/kit-overview |