Next.js 15 Fullstack Web Apps · درس

إعداد المشروع وتهيئته

أنشئ مشروع Next.js 15 جديدًا باستخدام أحدث الأدوات، واضبط الإعدادات الأساسية لتحقيق تطوير أمثل.

الدرس 2 من 411 خطوة

إعداد المشروع وتهيئته درس مجاني في Next.js 15 Fullstack Web Apps على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Next.js 15 Fullstack Web Apps، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Kickstarting Your Next.js Project

Time to spin up your first Next.js 15 app — prerequisites, the scaffolding tool, the file layout, and the dev server. This foundation matters.

Essential Tools: Node.js & npm

You need Node.js (the JS runtime for builds and the server) and npm, which ships with it. Check both: node -v and npm -v.

Creating Your First Next.js App

Scaffold a project with create-next-app. It asks about TypeScript, ESLint, Tailwind, and the App Router — which we will definitely use.

npx create-next-app@latest my-next-app --typescript --eslint --app --no-tailwind --import-alias "@/*"

Understanding Project Structure

Key files after scaffolding: app/ holds your routes and layouts, public/ serves static assets, and next.config.js configures the app.

Running the Development Server

Start the dev server with npm run dev from your project folder. You get hot reloading, so code changes show up in the browser instantly.

cd my-next-app
npm run dev

Your First Page: Hello, CoddyKit!

Visit http://localhost:3000 to see the welcome page, rendered from app/page.js — the React component for your app's root route.

// app/page.js
export default function Home() {
  return (
    <main>
      <h1>Hello, CoddyKit!</h1>
      <p>Your Next.js app is running.</p>
    </main>
  );
}

package.json: Project's Heartbeat

package.json is the project's heartbeat: name and version, the dev/build/start scripts, and your dependency list.

{
  "name": "my-next-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^15.0.0",
    "react": "^18",
    "react-dom": "^18"
  }
}

next.config.js: Customizing Next.js

next.config.js customizes your app — image domains, redirects, custom headers, webpack tweaks — by exporting a config object.

/** @type {import('next').NextConfig} */
const nextConfig = {
  // For example, enable React Strict Mode
  reactStrictMode: true,
  // Or configure image domains for `next/image`
  images: {
    domains: ['example.com', 'another-domain.com'],
  },
};

module.exports = nextConfig;

Environment Variables with .env

Use .env.local for environment variables like API keys. Anything prefixed NEXT_PUBLIC_ reaches the client; everything else stays server-only.

# .env.local
NEXT_PUBLIC_ANALYTICS_ID=UA-123456789-1
DATABASE_URL="postgresql://user:password@host:port/database"

Quick Check: Project Setup

Let's test your understanding of setting up a Next.js project.

أجب عليها في الدرس التفاعلي

Recap: Your Next.js Journey Begins!

You set up a Next.js 15 project: Node and npm, create-next-app, the app/ structure, the dev server, and the key config files. Routing next!

البدء مجانًا

تعلم TypeScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 12
الدروس: 48

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «إعداد المشروع وتهيئته» مجاني؟

نعم — نص درس «إعداد المشروع وتهيئته» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Next.js 15 Fullstack Web Apps، انتقل إلى CoddyKit PRO. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.

ماذا ستتعلم في «إعداد المشروع وتهيئته»؟

أنشئ مشروع Next.js 15 جديدًا باستخدام أحدث الأدوات، واضبط الإعدادات الأساسية لتحقيق تطوير أمثل. تتمرن على Next.js 15 Fullstack Web Apps مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Next.js 15 Fullstack Web Apps؟

لا تُشترط خبرة سابقة. Next.js 15 Fullstack Web Apps على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «إعداد المشروع وتهيئته»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Next.js 15 Fullstack Web Apps هذا؟

نعم. كل درس في Next.js 15 Fullstack Web Apps يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Next.js 15 Fullstack Web Apps