(Pages)بِنية المجلد

prisma

مجلد prisma يحتوي على prisma.schema الذي بدوره يحتوي ملف تكوين الاتصال مع قاعدة البيانات كما يحتوي أيضا علي schema التي تحدد شكل الـ tables هذا إلى جانب ملفات الـ migrations و/أو كود لإضافة المعلومات إلى Database، اقرآ كيفية استخدام Prisma.

public

يحتوي مُجلد Public على الملفات الثابتة التي يقوم السيرفر بتقديمها، يكون ملف favicon.ico مثال على ذلك.

src/env

يستخدم للتحقق من صحة الـ environment variable وتحديد الأنواع (types)، اقرأ المزيد Environment Variables

src/pages

مجلد pages يحتوي علي كل الصفحات التي يحتوي عليها تطبيق Next.js، يعمل ملف index.tsx في مستند root من /pages كالصفحة الأساسية للتطبيق، يعمل ملف __app.tsx لإمداد التطبيق بما تحتاجه من موفر، لقراءة المزيد Next.js documentation↗.

src/pages/api

يحتوي مجلد api علي كل Api routes في تطبيقك الـ Next.js، يحتوي example.ts على مثال عن route الذي يستخدم Next.js API route↗ مع Prisma. يحتوي ملف restricted.ts علي مثال عن route الذي يستخدم خاصية في Next.js API route↗ ومحمي من NextAuth.js↗.

src/pages/api/auth/[...nextauth].ts

إن ملف [...nextauth].ts خط سير التوثيق (authentication slug route) في NextAuth.js، ويستخدم في طلبات التوثيق. اقرأ NextAuth.js usage و Next.js Dynamic Routes Docs↗ لمزيد من المعلومات حول catch-all/slug.

src/pages/api/trpc/[trpc].ts

يُعتبر ملف [trpc].ts المدخل لـ API في tRPC، ويكون مسئول عن تنفيذ طلبات tRPC. اقرأ Next.js Dynamic Routes Docs↗ و tRPC usage لمزيد من المعلومات حول catch-all/slug.

src/server

يُستخدم مجلد server للفصل بوضوح بين الكود من جانب السيرفر (Server Side) والكود من جانب العميل (Client Side).

src/server/auth.ts

يحتوي على الوظائف الخادمة (utilities) التي تقوم بالتوثيق مثل استرداد جلسة المستخدم (user session) من جانب السيرفر. اقرأ NextAuth.js↗ للمزيد من المعلومات.

src/server/db.ts

يستخدم ملف db.ts ليوضح استخدام Prisma client بشكل شامل. اقرأ استخدام Prisma↗ وافضل الطرق لاستخدام Prisma client مع Next.js↗ لمزيد من المعلومات.

src/server/db/client.ts

يستخدم ملف client.ts لإنشاء نُسخة لـ Prisma Client علي مستوي التطبيق كلة، اقرأ Prisma usage لمزيد من المعلومات.

src/server/api

مجلد tRPC يحتوي على كود tRPC للسيرفر.

src/server/api/routers

يُحتوي مجلد routers على كل وطائفك الوصول الفرعية (sub-routers) لمكتبة tRPC.

src/server/api/routers/example.ts

إن ملف example.ts مثال عن وظيفة الوصول tRPC التي تستخدم publicProcedure الوطيفة المساعدة (helper) لتوضيح كيف ينشئ وظيفة وصول من tRPC.

سوف يحتوي الملف على وظائف بأعداد مختلفة طبقا لأختيراتك، لتوضيح الاستخدام حسب احتياجك.

src/server/api/trpc.ts

إن ملف trpc.ts الملف الرئيسي لإعدادات back-end في tRPC. هنا:

1. يحدد المحتوى المستخدم في طلبات tRPC. اقرأ استعمال tRPC↗ للمزيد من المعلومات.

2. يورد (export) نهج الوطيفة المساعدة. اقرأ استعمال tRPC↗ للمزيد من المعلومات.

src/server/api/root.ts

يُستخدم ملف root.ts لدمج وظائف tRPC للوصول, وتوريدهم كوظيفة وصول واحدة، وكذلك أنواع بيانات الوظيفة المحددة، اقرأ المزيد هنا tRPC usage↗.

src/styles

يحتوي مجلد styles على التصميمات العامة للتطبيق.

src/types

يحتوي مجلد types على الأنواع البيانات (Types) أو الأنواع المحددة (type declarations).

src/types/next-auth.d.ts

يُستخدم ملف next-auth.d.ts للتعديل على إعدادات NextAuth الافتراضية، لمزيد من المعلومات NextAuth.js usage.

src/utils

يُستخدم مجلد utils لحفظ الـ functions التي يكثر استخدامها.

src/utils/trpc.ts

يُستخدم ملف trpc.ts كـ entrypoint لـ front-end إلى tRPC، اقرآ المزيد هنا tRPC usage.

.env

يُستخدم ملف .env لتخزين environment variables، اقرأ المزيد Environment Variables. يجب ألا يضاف هذا الملف في تاريخ Git.

.env.example

ملف .env.example هو مثال لاستخدام example environment مبني على المكتبات المختارة. يجب أن يضاف هذا الملف في تاريخ Git.

.eslintrc.cjs

يٌستخدم ملف .eslintrc.cjs لإعداد ESLint، اقرأ المزيد هنا ESLint Docs↗.

next-env.d.ts

يحقق ملف next-env.d.ts أن Typescript تأخذ Types في Next.js في الحسبان. لا تُعدل عليها ولا تحذفها لأنها تتغير باستمرار، لمزيد من المعلومات Next.js Docs↗.

next.config.js

يستخدم ملف next.config.js لإعداد Next.js، لمزيد من المعلومات Next.js Docs↗. تلميح: يسمح تمديد .mjx باستخدام ESM imports.

postcss.config.js

إن ملف postcss.config.js ضروري عند استخدام TailwindCSS PostCSS، لمزيد من المعلومات Taiwind PostCSS Docs↗.

prettier.config.js

إن ملف prettier.config.js ضروري عند استخدام Prettier ولإضافة prettier-plugin-tailwindcss لتنظيم الفئات (classes) مع Tailwind CSS، لمزيد من المعلومات Tailwind CSS blog post↗.

tsconfig.json

إن ملف tsconfig.json ضروري عند استخدام TypeScript. فعيلت بعض الإعدادات الغير افتراضية، مثل strict mode، لتوفير أفضل إمكانية للاستخدام الـ TypeScript في Create T3 App ومكتباتها، لمزيد من المعلومات اقرأ TypeScript Docs↗ أو TypeScript Usage.