خواندن ۴ دقیقه·۱۰ ساعت پیش

چگونه یک اپلیکیشن نکست جی اس در اینترنت ملی نصب کنیم؟

چطور با استفاده از فریم‌ورک قدرتمند نکست جی اس یک اپلیکیشن بسازید. نکست یک فریم‌ورک مبتنی بر ری اکت است که برای ساخت وب‌سایت‌های سریع و اپلیکیشن‌های تحت وب مدرن بسیار مناسب است.

در اینجا یک راهنمای گام‌به‌گام برای ساخت یک اپلیکیشن ساده با نکست آورده شده است:

پیش‌نیازهای نصب نکست جی اس

قبل از شروع، مطمئن شوید که موارد زیر روی سیستم شما نصب هستند:

۱. Node.js: (نسخه ۱۸.۱۷ یا بالاتر)

۲. یک ویرایشگر کد: (مانند VS Code)

اگر ویرایشگر کد ندارید میتوانید از ترمینال لینوکس یا ویندوز استفاده کنید.

من از دستور زیر برای تنظیم مقصد دانلود پکیج های مورد نظر از رانفلر استفاده کردم. دراینترنت ملی شما از این دستور برای نصب نود پکیج منیجرها npm میتوانید استفاده کنید:

npm config set registry https://mirror-npm.runflare.com

برای توضیحات بیشتر درباره این پکیجها به این آدرس مراجعه کنید:

https://runflare.com/mirrors/npm-mirror/

اگر نود جی اس را از قبل روی کامپیوتر خود ندارید میتوانید از ادرس زیر یکی از پکیجها را نصب کنید

https://mirror-nodejs.runflare.com/dist/v25.2.1/

مرحله ۱: ایجاد پروژه

ترمینال (یا CMD) را باز کنید و دستور زیر را برای ایجاد یک پروژه جدید وارد کنید. ما از ابزار create-next-app استفاده می‌کنیم:

npx create-next-app@latest my-first-app

در طول نصب، ممکن است از شما سوالاتی پرسیده شود. برای شروع، گزینه‌های پیش‌فرض (با زدن دکمه Enter) معمولاً مناسب هستند، اما مطمئن شوید گزینه‌های زیر را انتخاب می‌کنید:

همانطور که در بالا میبینید من این اپلیکیشن را با استفاده از سرویسهای رانفلر ایجاد کردم. از آنجایی که در اینترنت ملی دسترسی به اینترنت بین الملل ممکن نیست، از سرویس پکیج منیجر نود در رانفلر استفاده میکنیم.

پس از اجرای دستور نصب بالا، برای من همانطور که در عکس میبینید: یک بله برای نصب پیشفرضها پرسیده شده است که به شما توصیه میکنم بله را انتخاب کنید. البته اگر میخواهید به جای تایپ اسکریپت از جاوا اسکریپت استفاده کنید باید کاستومایزیشن تنظیمات را با No انتخاب کنید.

Would you like to use TypeScript? *No** (برای سادگی در این آموزش)

Would you like to use ESLint? *Yes**

Would you like to use Tailwind CSS? *Yes** (برای استایل‌دهی سریع)

Would you like to use src/ directory? *No**

Would you like to use App Router? *Yes** (این روش پیشنهادی و جدید در نکست جی اس است)

Would you like to customize the default import alias? *No**

مرحله ۲: اجرای پروژه

وارد پوشه پروژه شوید و سرور توسعه را اجرا کنید:

#ورود به  پوشه برنامه ساخته شده
cd my-app

#اجرای برنامه ساخته شده در حالت توسعه
npm run dev

حالا اگر مرورگر خود را باز کنید و به آدرس http://localhost:3000 بروید، صفحه خوش‌آمدگویی نکست را خواهید دید.

مرحله ۳: درک ساختار پروژه با اپ روتر (App Router)

در نسخه‌های جدید نکست جی اس، پوشه اصلی app است. بیایید فایل‌های مهم را بررسی کنیم:

app/page.js: این فایل، صفحه اصلی (Homepage) سایت شماست.
app/layout.js: این فایل شامل ساختار اصلی HTML (مانند تگ‌های <html> و <body>) است که تمام صفحات در آن قرار می‌گیرند.
app/globals.css: فایل استایل‌های کلی سایت.

مرحله ۴: ویرایش صفحه اصلی

بیایید محتوای صفحه اصلی را تغییر دهیم. فایل app/page.js را باز کنید و کدهای آن را پاک کنید و کد زیر را جایگزین نمایید:

export default function Home() {
return (

    <main className="flex min-h-screen flex-col items-center justify-center p-24 bg-gray-100">

      <div className="z-10 max-w-5xl w-full items-center justify-center font-mono text-sm">

        <h1 className="text-4xl font-bold text-center text-blue-600 mb-4">

          سلام! من سید احمد، هستم

        </h1>

        <p className="text-center text-gray-700">

          این پروژه من با استفاده از فریم‌ورک نسکت جی اس است.

        </p>

      </div>

    </main>

  );

}

توضیح: من در اینجا از کلاس‌های Tailwind CSS (مثل flex, text-center, text-blue-600) برای زیبا کردن صفحه استفاده کردیم.

مرحله ۵: ساخت یک صفحه جدید

برای ساخت یک صفحه جدید (مثلاً صفحه «درباره ما»)، کافیست در پوشه app یک پوشه جدید به نام about بسازید و داخل آن فایلی به نام page.js ایجاد کنید.

مسیر فایل: app/about/page.js

کد زیر را در آن قرار دهید:

export default function AboutPage() {
return (

    <div className="flex min-h-screen items-center justify-center bg-gray-200">

      <h1 className="text-3xl font-bold text-gray-800">درباره ما</h1>

    </div>

  );

}

حالا اگر به آدرس http://localhost:3000/about بروید، صفحه جدید را خواهید دید.

مرحله ۶: اضافه کردن ناوبری (Navigation)

برای اینکه بین صفحات جابجا شویم، نیاز به یک منو داریم. بیایید فایل app/layout.js را ویرایش کنیم تا یک منوی ساده در بالای تمام صفحات داشته باشیم:

فایل app/layout.js را باز کنید و آن را به شکل زیر تغییر دهید:

import './globals.css';
import Link from 'next/link';

export const metadata = {

  title: 'اپلیکیشن سید احمد',

  description: 'ساخته شده با نکست جی اس',

};

export default function RootLayout({ children }) {

  return (

    <html lang="fa" dir="rtl">

      <body>

        <nav className="flex gap-4 justify-center p-4 bg-slate-800 text-white">

          <Link href="/" className="hover:text-gray-300">خانه</Link>

          <Link href="/about" className="hover:text-gray-300">درباره ما</Link>

        </nav>

        {children}

      </body>

    </html>

  );

}

توضیح: ما کامپوننت Link را از next/link وارد کردیم. این کامپوننت باعث می‌شود جابجایی بین صفحات بدون رفرش شدن کامل صفحه انجام شود (Client-side Navigation).

مرحله ۷: بیلد گرفتن برای نهایی کردن

وقتی پروژه شما تمام شد، برای آماده‌سازی آن برای قرار دادن روی سرور (Host)، دستور زیر را بزنید:

npm run build

این دستور پروژه شما را بهینه و فشرده می‌کند.

امیدوارم این آموزش برای شروع کار با مفید بوده باشد. اگر سوالی دارید، بپرسید!

اینترنت ملیطراحی سایتnextjs

سیداحمد

توسعه‌ دهنده وب | متخصص ری اکت و نکست | طراح سایت | راه ارتباطی در نظرات

شاید از این پست‌ها خوشتان بیاید

سیداحمد

خواندن ۴ دقیقه·۱۰ ساعت پیش

چگونه یک اپلیکیشن نکست جی اس در اینترنت ملی نصب کنیم؟

در اینجا یک راهنمای گام‌به‌گام برای ساخت یک اپلیکیشن ساده با نکست آورده شده است:

پیش‌نیازهای نصب نکست جی اس

قبل از شروع، مطمئن شوید که موارد زیر روی سیستم شما نصب هستند:

۱. Node.js: (نسخه ۱۸.۱۷ یا بالاتر)

۲. یک ویرایشگر کد: (مانند VS Code)

اگر ویرایشگر کد ندارید میتوانید از ترمینال لینوکس یا ویندوز استفاده کنید.

npm config set registry https://mirror-npm.runflare.com

برای توضیحات بیشتر درباره این پکیجها به این آدرس مراجعه کنید:

https://runflare.com/mirrors/npm-mirror/

اگر نود جی اس را از قبل روی کامپیوتر خود ندارید میتوانید از ادرس زیر یکی از پکیجها را نصب کنید

https://mirror-nodejs.runflare.com/dist/v25.2.1/

مرحله ۱: ایجاد پروژه

npx create-next-app@latest my-first-app

Would you like to use TypeScript? *No** (برای سادگی در این آموزش)

Would you like to use ESLint? *Yes**

Would you like to use Tailwind CSS? *Yes** (برای استایل‌دهی سریع)

Would you like to use src/ directory? *No**

Would you like to use App Router? *Yes** (این روش پیشنهادی و جدید در نکست جی اس است)

Would you like to customize the default import alias? *No**

مرحله ۲: اجرای پروژه

وارد پوشه پروژه شوید و سرور توسعه را اجرا کنید:

#ورود به  پوشه برنامه ساخته شده
cd my-app

#اجرای برنامه ساخته شده در حالت توسعه
npm run dev

حالا اگر مرورگر خود را باز کنید و به آدرس http://localhost:3000 بروید، صفحه خوش‌آمدگویی نکست را خواهید دید.

مرحله ۳: درک ساختار پروژه با اپ روتر (App Router)

در نسخه‌های جدید نکست جی اس، پوشه اصلی app است. بیایید فایل‌های مهم را بررسی کنیم:

app/page.js: این فایل، صفحه اصلی (Homepage) سایت شماست.
app/layout.js: این فایل شامل ساختار اصلی HTML (مانند تگ‌های <html> و <body>) است که تمام صفحات در آن قرار می‌گیرند.
app/globals.css: فایل استایل‌های کلی سایت.

مرحله ۴: ویرایش صفحه اصلی

export default function Home() {
return (

    <main className="flex min-h-screen flex-col items-center justify-center p-24 bg-gray-100">

      <div className="z-10 max-w-5xl w-full items-center justify-center font-mono text-sm">

        <h1 className="text-4xl font-bold text-center text-blue-600 mb-4">

          سلام! من سید احمد، هستم

        </h1>

        <p className="text-center text-gray-700">

          این پروژه من با استفاده از فریم‌ورک نسکت جی اس است.

        </p>

      </div>

    </main>

  );

}

توضیح: من در اینجا از کلاس‌های Tailwind CSS (مثل flex, text-center, text-blue-600) برای زیبا کردن صفحه استفاده کردیم.

مرحله ۵: ساخت یک صفحه جدید

مسیر فایل: app/about/page.js

کد زیر را در آن قرار دهید:

export default function AboutPage() {
return (

    <div className="flex min-h-screen items-center justify-center bg-gray-200">

      <h1 className="text-3xl font-bold text-gray-800">درباره ما</h1>

    </div>

  );

}

حالا اگر به آدرس http://localhost:3000/about بروید، صفحه جدید را خواهید دید.

مرحله ۶: اضافه کردن ناوبری (Navigation)

فایل app/layout.js را باز کنید و آن را به شکل زیر تغییر دهید:

import './globals.css';
import Link from 'next/link';

export const metadata = {

  title: 'اپلیکیشن سید احمد',

  description: 'ساخته شده با نکست جی اس',

};

export default function RootLayout({ children }) {

  return (

    <html lang="fa" dir="rtl">

      <body>

        <nav className="flex gap-4 justify-center p-4 bg-slate-800 text-white">

          <Link href="/" className="hover:text-gray-300">خانه</Link>

          <Link href="/about" className="hover:text-gray-300">درباره ما</Link>

        </nav>

        {children}

      </body>

    </html>

  );

}

مرحله ۷: بیلد گرفتن برای نهایی کردن

وقتی پروژه شما تمام شد، برای آماده‌سازی آن برای قرار دادن روی سرور (Host)، دستور زیر را بزنید:

npm run build

این دستور پروژه شما را بهینه و فشرده می‌کند.

امیدوارم این آموزش برای شروع کار با مفید بوده باشد. اگر سوالی دارید، بپرسید!

اینترنت ملیطراحی سایتnextjs

سیداحمد

توسعه‌ دهنده وب | متخصص ری اکت و نکست | طراح سایت | راه ارتباطی در نظرات

شاید از این پست‌ها خوشتان بیاید