ویتایتچ ، پایگاه آموزش تخصصی برنامه نویسی و مهارت های کاربردی ویژه بازار کار

Nextjs چیست؟

تاریخ انتشار: ۱۳ مهر ۱۳۹۸
nextjs چیست؟
Nextjs چیست؟


Next.js چیست؟

Next.js یک فریمورک است ، که از یک زبان سمت سرور به نام PHP و سیستم ماژول جاوا اسکریپت الهام گرفته است، که به شما این اجازه را می دهد که برنامه های ری اکت (React) خود را در سمت سرور اجرا کنید و موارد جالب دیگری که در ادامه به آن پرداخته می شود.

Next.js و چند ویژگی جالب از آن:

  • رندر کردن برنامه های ری اکت (React) در سمت سرور بصورت پیش فرض (Server-rendered by default)
  • استفاده از code splitting بصورت اتوماتیک برای انجام سریع بارگزاری های صفحه (Automatic code splitting for faster page loads)
  • مسیر دهی ساده در سمت کاربر بر اساس صفحه (Simple client-side routing (page-based
  • استفاده از محیط توسعه بر اساس وب پک Webpack که از قابلیت Hot Module Replacement) HMR) پشتیبانی می کند.
  • امکان پیاده سازی با Express یا هر Node.js HTTP server دیگری که وجود دارد.
  • قابلیت شخصی سازی با تنظیمات Babel , Webpack پروه خود

دوره ی آموزش پروژه محور Next.js کلیک کنید.


خوب بیایم حالا یه مقدار با Next.js کار کنیم:

برای شروع با Next.js ما نیاز داریم که روی سیستم خودمون node.js رو نصب کرده باشیم و این تمام چیزی هست که نیازه برای ما. Next.js شبیه بقیه برنامه هایی هست که با node.js ساخته شدن – شما برای نصب پکیج ها به npm یا yarn نیاز دارین.

خوب حالا بیایم با هم یک پروژه خیلی ساده و سریع رو با Next.js بسازیم.

اول، ما نیاز داریم که یک پوشه ایجاد کنیم و هر اسمی که دلمون می خواد براش بزاریم. من اسمشو میزارم nextjs-app

شما میتونین به راحتی با دستور زیر داخل cmd اون رو ایجاد کنین:

mkdir nextjs-app

بعد از اینکه پوشه nextjs-app رو ساختیم، حالا وارد اون پوشه می شیم با دستور cd nextjs-app . بعد از اینکه وارد پوشه شدیم، دستور npm init رو برای اینکه فایل package.json رو بسازیم اجرا می کنیم.

بعد، ما باید dependencies های خودمون رو نصب کنیم.

نصب Next.js

  • با استفاده از yarn
yarn add next
  • با استفاده از npm
npm i next --save

سپس ما باید React رو نصب کنیم چون Next.js از React استفاده می کنه. اولین خط در زیر برای نصب با استفاده از yarn هست.

yarn add react react-dom

نصب با استفاده از npm

npm i react react-dom --save

بعد از نصب همه فایل ها، ما باید یک پوشه ضروری رو ایجاد کنیم : pages . بدون این پوشه Next.js کار نمی کنه.

mkdir pages

شما باید بعد از اجرای دستور بالا در cmd : ساختار پوشه بندی زیر رو داشته باشین:

nextjs-app -pages -package.json

خوب حالا پوشه pages رو باز می کنیم با هر ویرایشگر کدی که باهاش کار می کنید بعد داخل اون یه فایل با نام Index.js ایجاد میکنیم.

داخل فایل Index.js کد زیر رو قرار میدیم:

const Index = () => (
	<h1>Home page Vitateach!</h1>
);
export default Index;

در کد بالا ما یک functional component ایجاد کردیم، که در خروجی به ما متن Home page Vitateach! رو نمایش می دهد. برای اینکه کد بالا رو در مرورگر ببینیم و در خروجی به نمایش در بیاریم باید دستورا ت زیر رو به فایل package.json اضافه کنیم:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

دستورات بالا برای اجرای برنامه ما در حالت توسعه و production مورد استفاده قرار می گیرد.

حالا دستور زیر رو در terminal اجرا می کنیم تا برنامه ما راه اندازی بشه:

npm run dev

بعد از اجرای دستور بالا در قسمت آدرس بار مرورگر آدرس http://localhost:3000 رو وارد می کنیم. همونطور که مشاهده می کنید، متن زیر در مرورگر نمایش داده می شه.

!Home page Vitateach

خب برای اینکه صفحات دیگه رو هم ایجاد کنیم باید در همین پوشه اونا رو بسازیم و ازشون استفاده کنیم و به هم لینکشون کنیم طبق آدرس دهی در Next.js.

برای اینکه Next.js رو بصورت پروژه محور با یک پروژه واقعی از صفر تا صدشو یاد بگیرین دوره ی آموزش پروژه محور Next.js رو از سایت ویتاتیچ دانلود کنید و ازش استفاده کنین.

اشتراک گذاری
برچسب ها