Magdy Atef Zahran

أفضل هيكلة لتنظيم ملفات مشروعك في Next.js لكتابة كود نظيف ومرتب

في المقال ده هنشرح مع بعض أفضل طرق لتنظيم ملفات مشروعك في Next.js خطوة بخطوة 👇

أول حاجة تقسيم المجلدات الأساسية:

هيكون بالشكل ده:

شرح التقسيم ده:

app/: ده المكان الأساسي للكود لو شغال بـ App Router
components/: جميع الكومبوننتس القابلة لإعادة الاستخدام زي Buttons، Modals، Forms.
hooks/: ملفات ال Custom Hooks زي useAuth أو useFetch.
utils/: وظائف عامة زي معالجة التواريخ أو تنسيق البيانات.
services/: الملفات اللي بتتعامل مع APIs.
styles/: ستايلات CSS/SCSS أو ملفات Tailwind
public/: ملفات عامة زي الصور أو الأيقونات
pages/: لو شغال بـ Pages Router.
middleware.js: لو عندك Middleware
next.config.js: إعدادات خاصة بـ Next.js

تنظيم المجلدات داخل app/

لو بتستخدم App Router قسم المجلدات بالشكل ده:

شرح التقسيم ده:

page.js: لكل صفحة جديدة.
layout.js: لو عندك تصميم مشترك لكل الصفحات زي Navbar أو Footer.
styles.css: لكل صفحة ستايلات مستقلة.

استخدم الـ Index Files عشان تقليل الاستيرادات

بدل ما تستورد الكومبوننتس واحد واحد اعمل ملف index.js في كل فولدر.

components/ |-- Navbar.js |-- Footer.js |-- index.js

في index.js:

export { default as Navbar } from './Navbar'; export { default as Footer } from './Footer';

دلوقتي بدل ما تعمل استيرادات بالشكل ده:

import Navbar from './components/Navbar'; import Footer from './components/Footer';

هتعمل كده:

import { Navbar, Footer } from './components';

خلي أسماء الملفات والكومبوننتس بـ PascalCase

UserProfile.js

userprofile.js

لو المشروع كبير، اعمل Feature-Based Structure

لو عندك Features كتير جمع الملفات الخاصة بكل Feature في فولدر واحد.

استفيد من Middleware

لو عندك صفحات محتاجة Authorization أو Redirect هتستخدم الـ Middleware:

export default function middleware(req) { const token = req.cookies.get('token'); if (!token) { return NextResponse.redirect('/auth/login'); } return NextResponse.next(); }