Pages Router

موجه الصفحات

GLS-000082

Intermediatereact-nextjs1 min read
pages directorypages routernext pages/pages

Definition

The original Next.js routing system based on files inside the /pages directory.

نظام التوجيه الأصلي في Next.js المعتمد على الملفات داخل مجلد /pages.

Why It Matters

Most existing Next.js tutorials and projects use Pages Router. Understanding it helps when reading older code or migrating to App Router.

معظم دروس ومشاريع Next.js الحالية تستخدم Pages Router. فهمه يساعد عند قراءة الكود القديم أو الترحيل إلى App Router.

Full Definition

Pages Router is the original Next.js routing system, where each file inside /pages maps to a URL. For example, /pages/projects.tsx becomes /projects. It uses getServerSideProps for SSR and getStaticProps for SSG. The newer App Router (introduced in Next.js 13) is now preferred for new projects, but many existing projects still use Pages Router.
Pages Router هو نظام التوجيه الأصلي في Next.js، حيث يُعيَّن كل ملف داخل /pages إلى URL. على سبيل المثال، /pages/projects.tsx يصبح /projects. يستخدم getServerSideProps لـSSR وgetStaticProps لـSSG. App Router الجديد (المُقدَّم في Next.js 13) مُفضَّل الآن للمشاريع الجديدة، لكن كثيرًا من المشاريع الحالية لا تزال تستخدم Pages Router.

Example Usage

/pages/glossary/[slug].tsx in Pages Router is equivalent to /app/glossary/[slug]/page.tsx in App Router.

/pages/glossary/[slug].tsx في Pages Router يعادل /app/glossary/[slug]/page.tsx في App Router.

Knowledge Graph

Avoid these mistakes when using Pages Router:

1

Mixing Pages Router and App Router conventions in the same project

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Pages Router.

Explain:
1. What is Pages Router and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Mixing Pages Router and App Router conventions in the same project
5. Best practices and production tips

Official Resources