Next.js چیست؟ نگاهی به فریم‌ورک محبوب جاوا اسکریپت

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

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

Next.js کتابخانه اصلی Facebook React و پکیج create-react-app را گسترش می‌دهد تا یک فریم‌ورک React توسعه‌پذیر، آسان و production-proof در اختیار شما قرار دهد.

این راهنما به بررسی این موضوع می‌پردازد که چرا در تولید، باید از Next.js استفاده کنید. علاوه بر این، ما در مورد عناصر و ویژگی‌های Next.js نیز صحبت خواهیم کرد. در نهایت، ایجاد اولین برنامه Next.js خود را یاد می‌گیریم.

Next.js چیست؟

Next.js یک فریم‌ورک React است که به شما امکان می‌دهد تا با استفاده از آن، وب‌سایت‌های استاتیک و اپلیکیشن‌های supercharged، SEO-friendly و شدیداً user-facing بسازید. این فریم‌ورک برای ایجاد بهترین تجربه توسعه‌دهنده در هنگام ساخت اپلیکیشن‌های آماده تولید، با تمام ویژگی‌های مورد نیاز شما ساخته شده است.

این فریم‌ورک دارای رندر ترکیبی استاتیک و سرور، پشتیبانی از TypeScript ، bundling هوشمند، route prefetching و موارد دیگر است، که تمام این‌ها بدون هیچ پیکربندی اضافی در اختیار شما قرار می‌گیرد.

چرا باید از Next.js استفاده کنیم

این بخش از مقاله به بررسی این موضوع می‌پردازد که چرا باید Next.js را یاد بگیرید. ما همچنین به اپلیکیشن‌های مختلفی که می‌توانید با این فریم‌ورک بسازید، نگاهی خواهیم انداخت

بهینه‌سازهای تصاویر (Image Optimizations)

Next.js با ساخت‌های فوری، بهینه‌سازی خودکار تصاویر را ارائه می‌دهد. بهینه‌سازی تصویر یک ویژگی قدرتمند از پیش‌ساخته شده در Next.js است، زیرا مدیریت و بهینه‌سازی تصاویر به تنظیمات زیادی نیاز دارد و بهینه‌سازی دستی تصاویر، می‌تواند زمان تولید شما را کاهش دهد.

بین‌المللی سازی

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

تجزیه و تحلیل Next.js (Next.js Analytics)

Next.js یک داشبورد analytical ارائه می‌کند که می‌تواند برای نمایش داده‌های دقیق بازدیدکنندگان و page insights از بیرون، پیکربندی شود. با استفاده از این ویژگی، می‌توانید به سرعت یک داشبورد analytical بسازید و بدون کدنویسی یا پیکربندی اضافی، insight های ارزشمندی در مورد بازدیدکنندگان و صفحه خود به دست بیاورید.

پیکربندی صفر (Zero Config)

Next.js بدون هیچ‌گونه پیکربندی اضافی از جانب شما، به طور خودکار و با hot refresh کامپایل و ساخته می‌شود و به طور خودکار اپلیکیشن شما را مقیاس‌بندی و بهینه می‌کند.

دستیابی به hot refresh یا به‌روزرسانی خودکار در یک اپلیکیشن front-end سنتی با موانع زیادی همراه است. این امر مستلزم انتخاب و نصب کتابخانه‌های مناسب، و انجام تنظیمات خاص برای هر کتابخانه است تا به درستی کار کند. Next.js این مشکل را با ارائه یک hot refresh و بدون نصب و پیکربندی از جانب شما، حل می‌کند.

پشتیبانی از پیش‌ساخته SSR، SSG و CSR

با Next.js ، از رندر server-side ، تولید استاتیک و رندر client-side در یک اپلیکیشن پشتیبانی می‌کنید. شما می‌توانید نوع اپلیکیشنی را که می‌خواهید بسازید را انتخاب کنید و تصمیم بگیرید که چگونه اپلیکیشن خود را کامپایل کنید، تا به بهترین شکل مورد استفاده شما باشد.

رندر Server-side ، Next.js را برای اپلیکیشن‌های آماده تولید و مبتنی بر سئو در مقیاس بزرگ مناسب‌سازی می‌کند، و پیکربندی آن بسیار آسان است.

چه اپلیکیشن‌هایی از Next.js استفاده می‌کنند؟

در زیر لیستی از اپلیکیشن‌های توسعه‌یافته با Next.js آمده است. این فریم‌ورک توسط شرکت‌های Fortune 500 از جمله GitHub ، Uber و Netflix پشتیبانی می‌شود.

این 5 اپلیکیشن با استفاده از این فریم‌ورک ساخته شده‌اند:

TikTok

TikTok یک شبکه اجتماعی ویدئویی محبوب است که در آن کاربران ویدئوهای موبایلی کوتاه را برای بازدید میلیون‌ها کاربر در روز آپلود می‌کنند.

صفحه وب سایت TikTok با Next.js توسعه یافته است تا برای میلیون‌ها کاربر فعال روزانه، مقیاس‌پذیر و بهینه شده باشد.

Hashnode

Hashnode یک پلتفرم وبلاگ‌نویسی آنلاین و رایگان است که توسعه‌دهندگان را هدف قرار می‌دهد و با Next.js ساخته شده است. این سایت میلیون‌ها کاربر دارد و برای تأمین انرژی از این فریم‌ورک استفاده می‌کند.

Twitch Mobile

Twitch یک شبکه اجتماعی آنلاین برای چت، تعامل و لذت بردن از انواع مختلف محتوا و سرگرمی است. این شبکه اجتماعی نیز از Next.js کمک می‌گیرد.

Hulu

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

Binance

Binance یک پورتال محبوب ارزهای دیجیتال با بخش‌های اخبار، قیمت‌های لحظه‌ای و امکان خرید و فروش است که روزانه میلیون‌ها کاربر فعال، معاملات ارز دیجیتال خود را در آن ثبت می‌کنند. این سایت هم از Next.js استفاده می‌کند.

آن‌چه می‌توانید با Next.js بسازید

در Next.js هیچ محدودیتی برای نوع اپلیکیشن‌هایی که می‌توانید توسعه دهید وجود ندارد. با استفاده از این فریم‌ورک، می‌توانید انواع مختلفی از اپلیکیشن‌ها را توسعه دهید. همچنین، هر اپلیکیشنی که بخواهید با آن بسازید، تمام ویژگی‌ها و مزایای Next.js را بدون هیچ‌گونه تنظیمات اضافی از جانب شما خواهد داشت.

در زیر، لیستی از انواع اپلیکیشن‌هایی که می‌توانید با این فریم‌ورک بسازید آمده است:

- MVP (حداقل محصول قابل عرضه)

- پورتال‌های وب

- وب‌سایت‌های Jamstack

- صفحات وب تکی

- وب‌سایت‌های استاتیک

- محصولات SaaS

- وب سایت‌های E-commerce و فروشگاه اینترنتی

- داشبوردها

- وب اپلیکیشن‌های پیچیده و دارای طلبه

- رابط‌های کاربری Interactive

ویژگی‌های Next.js

در زیر، ویژگی‌های Next.js و آن‌چه را که می‌خواهید با استفاده از آن در پروژه خود به دست بیاورید، عنوان می‌کنیم.

Routing

Routing یکی از ویژگی‌های ضروری Next.js است. در مرحله بعد، این فریم‌ورک از سیستم Routing مبتنی بر فایل بر اساس صفحات استفاده می‌کند تا ببینید Routing اپلکیشن‌تان چگونه به نظر می‌رسد.

هر فایل و فولدری که در داخل pages folder ایجاد می‌شود، به طور خودکار در Next.js به route تبدیل می‌شود.

سیستم Routing در این فریم‌ورک به 3 نوع مختلف تقسیم می‌شود که در ادامه به بررسی هر یک از آن‌ها می‌پردازیم.

Index Routing

page folder به طور خودکار دارای index.js است که به route برای homepage route تبدیل می‌شود. همچنین می‌توانید یک صفحه index.js برای تمام route های خود در هر فولدری تعریف کنید. به عنوان مثال می‌توانید pages/profiles/index.js را تعریف کنید که به طور خودکار به صفحه /profiles ، map می‌شود.

به این مثال توجه کنید:

				
					- pages
  - index.js
  - profile
    - index.js
    - [user].js

ساختار صفحه بالا فولدرها و فایل‌ها را به یک ساختار URL ، map می‌کند. به عنوان مثال / مربوط به pages/index.js ، /profile/ مربوط به pages/profile/index.js و /profile/user برای pages/profile/user.js است.

Nested Routes

Nested Routes در یک route والد ایجاد می‌شوند. برای ایجاد یک nested route ، باید یک route/folder والد در pages folder ایجاد کنید و برای ایجاد یک nested route ، فولدرها یا فایل‌های درون آن را اضافه کنید.

به این مثال نگاهی بیندازید:

				
					- pages
  - index.js
  - dashboard
    - index.js
    - user.js

در اسکریپت بالا، فایل‌های user.js و index.js با route والد داشبورد nest شده‌اند، به این معنی که URL ها فقط با route داشبورد قابل دسترسی هستند.

Dynamic Routes

Dynamic Routes همیشه نامشخص هستند. آن‌ها را می‌توان از طریق API calls ایجاد کرد ی یک ID یا slug به URL اختصاص داد.

برای ایجاد یک dynamic route در Next.js ، یک براکت مربع در اطراف نام فایل یا نام دایرکتوری اضافه کنید. به این شکل: [id].js . می‌توانید فایل یا directory را به هر نامی که می‌خواهید نام‌گذاری کنید، اما برای dynamic کردن آن باید یک براکت [] به آن ضمیمه شود.

به این مثال توجه کنید:

				
					- pages
  - dashboard
    - [user].js
        - profile

اسکریپت بالا [user].js را dynamic می‌کند، به این معنی که صفحه پروفایل باید با /dashboard/2/profile یا /dashboard/johndoe/profile قابل دسترسی باشد.

از طریق اسناد رسمی، می‌توانید مطالب و ترفندهای بیشتری برای ایجاد یک سیستم routing پیشرفته‌تر در Next.js بیاموزید.

Static File Serving

در Next.js ، ارائه فایل‌های استاتیک یا دارایی‌هایی مانند آیکون‌ها، فونت‌های self-hosted یا تصاویر، از طریق public folder ، تنها منبع حقیقی برای دارایی‌های استاتیک، انجام می‌شود.

public folder نباید طبق Next.js docs تغییر نام دهد. با توجه به این که Next.js آن را پیکربندی کرده است، ارائه دارایی‌های استاتیک از طریق public folder بسیار ساده است.

Pre-Rendering (پیش‌رندر کردن)

یکی از ویژگی‌های بزرگ Next.js ، Pre-Rendering است که باعث می‌شود این فریم‌ورک بسیار خوب و سریع کار کند. Next.js با ایجاد HTML هر صفحه؛ در کنار حداقلی از جاوا اسکریپت که برای اجرای فرآیندی به نام Hydration نیاز است، هر صفحه را Pre-Render می‌کند.

دو شکل Pre-Render در این فریم‌ورک وجود دارد:

Server-side Rendering (SSR)
Static Generation (SG)

نحوه fetch کردن داده‌ها، تفاوت اساسی بین SG و SSR است. برای SG ، داده‌ها در زمان ساخت fetch می‌شوند و در هر درخواست، دوباره استفاده می‌شوند. (که باعث می‌شود سریع‌تر شوند زیرا می‌توان آن‌ها را cache کرد) در حالی که در SSR ، داده‌ها در هر درخواست fetch می‌شوند.

Absolute Imports

با ورود Next.js 9.4 به بازار، absolute import ها معرفی شدند. به این معنی که دیگر نیازی به وارد کردن اجزا با دایرکتوری‌های نسبتاً طولانی ندارید.

برای مثال نیازی به وارد کردن مؤلفه‌هایی مانند زیر نیست:

				
					import InputField from "../../../../../../components/general/forms/inputfield"

اما برای وارد کردن اجزا، از استایل زیر استفاده می‌کنید:

				
					import InputField from "components/general/forms/inputfield";

Linking Pages (پیوند دادن صفحات)

Next.js برای پیشمایش بین صفحات، next/link را فراهم می‌کند. پیمایش بین صفحات در اپلیکیشن‌های شما می‌تواند با مؤلفه export شده توسط next/link انجام شود.

با فرض این‌که ما این ساختارهای صفحه را در pages folder شما داریم و شما هم می‌خواهید صفحات را با آن به هم پیوند دهید، می‌توانید با استفاده از اسکریپت زیر به آن برسید:

				
					- pages
  - index.js
  - profile.js
  - settings.js
  - users
    - index.js
    - [user].js

شما صفحات را با استفاده از این اسکریپت به هم پیوند می‌دهید:

				
					import Link from "next/link";

export default function Users({users) {
  return (
    <div>
      <Link href="/">Home</Link>
      <Link href="/profile">Profile</Link>
      <Link href="/settings">
        <a> Settings </a>
      </Link>
      <Link href="/users">
        <a> Settings </a>
      </Link>
      <Link href="/users/bob">
        <a> Settings </a>
      </Link>
    </div>
  )
}

Styling (طراحی ظاهری)

Next.js به شما این قابلیت لاکچری را می‌دهد که در پروژه‌ خود، استایل‌های زیادی ایجاد کنید و آن‌ها را برای خود داشته باشید. این فریم‌ورک به طور پیش‌فرض دارای سه سبک مختلف است: یعنی CSS جهانی، ماژول‌های CSS و style-jsx .

معایب Next.js

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

هزینه توسعه و نگهداری

اگر از Next.js استفاده می‌کنید، باید بدانید که انعطاف‌پذیری آن با هزینه‌های بالایی در توسعه و نگهداری همراه است. برای ایجاد تغییرات و نگهداری از اپلیکیشن، به یک توسعه‌دهنده و متخصص Front-end اختصاصی Next.js نیاز دارید که این مورد هم هزینه شما را بالا می‌برد.

عدم وجود State Manager داخلی

این فریم‌ورک مستقیماً از state management پشتیبانی نمی‌کند. اگر به state management نیاز دارید، باید آن را نصب کنید و مانند React از آن استفاده کنید.

پلاگین‌های آن کم است

در Next.js ، به بسیاری از افزونه‌های easy-to-adapt دسترسی نخواهید داشت.

چگونه یک اپلیکیشن Next.js بسازیم

در این بخش، کاربرد عملی Nuxtjs و نحوه ایجاد اپلیکیشن NuxtJS را بررسی خواهیم کرد. با این حال، اجازه دهید برخی از مفاهیم ضروری معدود در توسعه یک اپلیکیشن Nuxtjs را بررسی کنیم.

ایجاد اپلیکیشن Next.js

ایجاد یک پروژه جدید در این فریم‌ورک، بسیار آسان و سرراست است. شما می‌توانید یک پروژه Nuxt را به شکل متفاوتی ایجاد کنید، اما رویکردی که اکثر افراد ترجیح می‌دهند و ما هم آن را توصیه می‌کنیم، رویکرد CLI است.

برای ایجاد یک اپلیکیشن Next.js جدید با CLE ، مطمئن شوید که npx را نصب کرده‌اید. (npx به طور پیش‌فرض از طریق npm 5.2.0 یا npm v6.1 یا yarn ارسال می‌شود).

سپس، دستور زیر را در فولدری که می‌خواهید پروژه Next.js خود را قرار دهید تایپ کنید:

				
					npx create-next-app
// Follow the instructions to create your first Next.js project.
cd <project-name>
npm run dev

مطمئن شوید که <project-name> را با نام واقعی پروژه خود جایگزین کنید. سپس می‌توانید شروع به ایجاد صفحات و اجزای مختلف پروژه خود کنید.

عناصر Next.js

هنگام ایجاد یک پروژه Next.js جدید، متوجه خواهید شد که دارای عناصر، صفحات و ساختار فولدرهای مختلفی است که درک آن برای مبتدیان بسیار سخت است. با این حال، ما برخی از عناصر این فریم‌ورک را بررسی می‌کنیم:

ساختار فولدر (Folder Structure)

پس از ایجاد یک پروژه Next.js جدید از یک CLI ، متوجه یک اپلیکیشن Next.js با lean folder tree خواهید شد. این ساختار فولدر یک پیش‌فرض حداقلی برای اجرای اپلیکیشن در این فریم‌ورک است. هنگامی که ساخت پروژه خود را شروع می‌کنید، فولدرها و فایل‌های بیشتری نسبت به فریم‌ورک اولیه خواهید داشت.

تنها فولدرهای خاص Next.js، فولدرهای pages ، public و styles هستند. نام این‌ها نباید تغییر کند، مگر این‌که برای پیکربندی تنظیمات اضافی آماده باشید.

در زیر، ساختار فولدر پیش‌فرض برای پروژه جدید Next.js آمده است:

				
					# other files and folders, .gitignore, package.json...
- pages
  - api
    - hello.js
  - _app.js
  - index.js
- public
  - favicon.ico
  - vercel.svg
- styles
  - globals.css
  - Home.module.css

Pages (صفحات)

Pages یکی از فولدرهای Next-specific است و مواردی وجود دارد که باید در مورد Next.js pages بدانید.

عبارت Pages به اجزای React اطلاق می‌شود، و هر فایل در فولدر Pages یک صفحه وب و هر صفحه وب یک React Component است. به عنوان مثال، ما یک React Component (مؤلفه React) در فولدر Pages داریم که در نتیجه، یک URL صفحه وب ایجاد می‌شود.

				
					// Location: /pages/index.js
//  is just a basic React component
export default Index() {
  return <h1>Welcome to Home</h1>
}

Next.jsدارای صفحات سفارشی از پیش‌ساخته شده با underscore هایی مثل _app.js و _document.js است. این فریم‌ورک از مؤلفه صفحه سفارشی _app.js برای مقداردهی اولیه صفحات استفاده می‌کند. این در فولدر Pages قرار دارد، در حالی که مؤلفه صفحه سفارشی _document.js تگ‌های <html> و <body> اپلیکیشن شما را تقویت می‌کند.

این فریم‌ورک همچنین از یک سیستم routing مبتنی بر فایل بر اساس صفحات استفاده می‌کند که در آن، هر صفحه به طور خودکار بر اساس file name خود به یک route تبدیل می‌شود. به عنوان مثال، یک صفحه در pages/user در /user و pages/index.js در / قرار خواهد گرفت.

خلاصه

Next.js یک فریم‌ورک مناسب برای ساخت اپلیکیشن‌های سازمانی و آماده برای تولید، با استفاده از React است، چرا که این فریم‌ورک برای ساده‌سازی در ساخت اپلیکیشن‌های تولیدی است که با ویژگی‌ها، ابزارها و پیکربندی‌های خاص خودش طراحی شده است.

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

درباره ما

موضوعات

Media

SEO

ارز دیجیتال

استارت آپ

امنیت سایبری

بازاریابی

اطلاعات تماس