تغییرات نسخه 15 Next.js

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

دو تا از ویژگی‌های کلیدی Next.js پشتیبانی از رندرینگ سمت سرور (SSR) و تولید صفحات استاتیک (SSG) است. این دو قابلیت به بهبود عملکرد، سرعت بارگذاری صفحات و بهبود سئو (SEO) کمک می‌کنند. رندرینگ سمت سرور به این معناست که صفحات وب قبل از ارسال به مرورگر کاربر روی سرور پردازش و رندر می‌شوند و تولید صفحات استاتیک امکان ایجاد صفحاتی با محتوای ایستا را فراهم می‌کند که در زمان ساخت اپلیکیشن تولید می‌شوند.

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

در ادامه، مهم‌ترین تغییرات و به‌روزرسانی‌های این نسخه را با جزئیات بیشتری مرور می‌کنیم تا با قابلیت‌های جدید Next.js 15 بیشتر آشنا شوید.

پشتیبانی از React 19

در ۱۵ Next.js، حداقل نسخه‌های مورد نیاز برای react و react-dom به ۱۹ ارتقا یافته‌اند. در 25 آوریل 2024، react نسخه کاندید انتشار (Release Candidate) خود را معرفی کرد. این نسخه شامل ویژگی‌های جدیدی مانند کامپایلر React، هوک‌های جدید و بهبودهایی در کامپوننت‌های سرور است.

اگرچه React 19 در حال حاضر در مرحله (Release Candidate) قرار دارد، این به‌روزرسانی به توسعه‌دهندگان امکان می‌دهد تا برنامه‌های خود را زودتر آماده کنند و فرآیند ارتقا در آینده را ساده‌تر کنند.

با انتشار React 19، ممکن است برخی از کتابخانه‌های شخص ثالث (third-party) هنوز با این نسخه جدید سازگار نباشند. این عدم سازگاری می‌تواند به دلایل مختلفی رخ دهد؛ از جمله تغییرات در API های داخلی React یا معرفی ویژگی‌های جدید که نیازمند به‌روزرسانی در کتابخانه‌های وابسته هستند.

👈 قبل از ارتقا به React 19، مستندات رسمی هر کتابخانه‌ای که در پروژه خود استفاده می‌کنید را مطالعه کنید تا از سازگاری آن با نسخه جدید اطمینان حاصل کنید. برای اطلاعات بیشتر از تغییرات نسخه 19 react، به سایت ری اکت مراجعه فرمایید.

Async Request APIs

در نسخه 15، برخی از API ها که به اطلاعات زمان اجرا وابسته هستند، از حالت synchronous (هم‌زمان) به حالت asynchronous (غیر هم‌زمان) تغییر یافته‌اند. به صورت سنتی، سرور تا زمان دریافت داده‌ها و پاسخ کامل به درخواست منتظر می‌ماند تا محتوای لازم را رندر کند. این رویکرد در بسیاری از موارد باعث می‌شد تا کاربر برای مشاهده محتوای صفحه منتظر بماند، حتی اگر برخی از کامپوننت‌های موجود در صفحه به داده‌های خاصی نیاز نداشتند.
در نسخه جدید Next.js، این رویکرد تغییر کرده است. با پشتیبانی از APIهای asynchronous، کامپوننت‌ها می‌توانند به‌صورت غیرهم‌زمان داده‌های موردنیاز خود را دریافت کنند و حتی قبل از درخواست کاربر، پیش‌پردازش (pre-render) شوند. این به معنای آن است که دیگر لازم نیست تا سرور منتظر دریافت داده‌های حیاتی باشد تا صفحه را رندر کند. در نتیجه، زمان انتظار کاربران کاهش یافته و تجربه کاربری بهتری فراهم می‌شود.
این تغییرات شامل موارد زیر می‌شوند:

کوکی‌ها (cookies)

حالت قبلی:

import { cookies } from 'next/headers'
const cookieStore = cookies()
const token = cookieStore.get('cookie-name')

حالت پیشنهادی جدید به صورت asynchronous:

import { cookies } from 'next/headers'
const cookieStore = await cookies()
const token = cookieStore.get('cookie-name')

هدرها (headers)

حالت قبلی:

import { headers } from 'next/headers'
const headersList = headers()
const userAgent = headersList.get('user-agent')

حالت پیشنهادی جدید به صورت asynchronous:

import { headers } from 'next/headers'

const headersList = await headers()
const userAgent = headersList.get('user-agent')

حالت پیش‌نویس (draftMode)

حالت قبلی:

import { draftMode } from 'next/headers'

const { isEnabled } = draftMode()

حالت پیشنهادی جدید به صورت asynchronous:

import { draftMode } from 'next/headers'

const { isEnabled } = await draftMode()

پارامترها (params) 

حالت قبلی:

type Params = { slug: string }

export function generateMetadata({ params }: { params: Params }) {
 const { slug } = params
}

export default async function Layout({
 children,
 params,
}: {
 children: React.ReactNode
 params: Params
}) {
 const { slug } = params
}

حالت پیشنهادی جدید به صورت asynchronous:

type Params = Promise<{ slug: string }>

export async function generateMetadata({ params }: { params: Params }) {
 const { slug } = await params
}

export default async function Layout({
 children,
 params,
}: {
 children: React.ReactNode
 params: Params
}) {
 const { slug } = await params
}

لی اوت (layout) 

حالت قبلی:

type Params = { slug: string }

export default function Layout({
 children,
 params,
}: {
 children: React.ReactNode
 params: Params
}) {
 const { slug } = params
}

حالت پیشنهادی جدید به صورت asynchronous:

import { use } from 'react'

type Params = Promise<{ slug: string }>

export default function Layout(props: {
 children: React.ReactNode
 params: Params
}) {
 const params = use(props.params)
 const slug = params.slug
}

متدهای روت هندلر (Route Handlers) 

حالت قبلی:

type Params = { slug: string }

export async function GET(request: Request, segmentData: { params: Params }) {
 const params = segmentData.params
 const slug = params.slug
}

حالت پیشنهادی جدید به صورت asynchronous:

type Params = Promise<{ slug: string }>

export async function GET(request: Request, segmentData: { params: Params }) {
 const params = await segmentData.params
 const slug = params.slug
}

** این تغییرات یک breaking change محسوب می‌شوند، به این معنی که اگر کد شما به صورت هم‌زمان از cookie ،header و سایر موارد نام برده استفاده می‌کند، نیاز به تغییرات دارد. اما ابزارهای خودکاری مانند codemod فراهم شده‌اند تا این انتقال را ساده‌تر کنند:

npx @next/codemod@canary next-async-request-api

این ابزار وابستگی‌های شما را به‌روزرسانی می‌کند، کد مادهای موجود را نمایش می‌دهد و در اعمال آن‌ها شما را راهنمایی می‌کند. استفاده از نسخه canary به شما دسترسی به آخرین بهبودها را می‌دهد و فرآیند ارتقا را با کار دستی کمتر آسان‌تر می‌کند. با این حال، اگر ترجیح می‌دهید این کار را به صورت دستی انجام دهید، مطمئن شوید که آخرین نسخه Next.js و React RC را نصب می‌کنید:

npm i next@latest react@rc react-dom@rc eslint-config-next@latest

استراتژی‌های جدید کش (Caching)

تیم Next.js با توجه به بازخورد توسعه‌دهندگان، سیستم کش را بهبود داده است. برای ایجاد رفتار قابل پیش‌بینی‌تر، درخواست‌های fetch، متدهای GET Route Handlers و مسیریابی کلاینت دیگر به صورت پیش‌فرض کش نمی‌شوند. درخواست‌های fetch اکنون به صورت پیش‌فرض از استراتژی no-store بدون ذخیره اطلاعات استفاده می‌کنند. این تغییر باعث می‌شود توسعه‌دهندگان کنترل بیشتری بر نحوه ذخیره و مدیریت داده‌ها داشته باشند، و از رفتارهای غیرمنتظره در کش جلوگیری شود. اکنون به جهت انجام کش می توان از دستور force-cache  استفاده کرد.

export default async function RootLayout() {
 const a = await fetch('https://...') // Not Cached
 const b = await fetch('https://...', { cache: 'force-cache' }) // Cached
}

متدهای روت هندلر (Route Handlers) 

در Next.js 15، توابع GET در Route Handlers دیگر به صورت پیش‌فرض کش نمی‌شوند. اگر می‌خواهید متدهای GET را به کش اضافه کنید، می‌توانید از گزینه route config استفاده کنید. برای فعال کردن کش، در فایل Route Handler خود، متغیر dynamic را به 'force-static' تنظیم کنید. این کار باعث می‌شود که پاسخ درخواست GET به صورت ایستا (Static) کش شود.

export const dynamic = 'force-static'
export async function GET() {}

 مسیریابی سمت کلاینت (Client-side Router Cache)

در Next.js 15، هنگام جابه‌جایی بین صفحات با استفاده از کامپوننت <Link> یا هوک useRouter، بخش‌های صفحه (Page Segments) دیگر به طور پیش‌فرض از کش سمت کلاینت استفاده نمی‌کنند. این تغییر به بهبود عملکرد برنامه‌ها کمک می‌کند و استراتژی‌های کش در Next.js را با نیازهای واقعی اپلیکیشن‌ها هماهنگ می‌سازد. به‌ویژه در سناریوهایی که داده‌ها به‌طور مکرر تغییر می‌کنند، این رویکرد امکان مدیریت بهتر و بهینه‌تر کش را فراهم می‌کند. برای فعال‌سازی کش صفحات، می‌توانید از گزینه staleTimes در تنظیمات صفحه استفاده کنید.

/** @type {import('next').NextConfig} */
const nextConfig = {
 experimental: {
   staleTimes: {
     dynamic: 30,
     static: 180,
   },
 },
}

module.exports = nextConfig

کامپوننت جدید <Form>

این ابزار فرم‌ها را بهبود می‌بخشد و کدنویسی اضافی را کاهش می‌دهد. این کامپوننت ویژگی‌های زیر را ارائه می‌دهد:

• پیش‌بارگذاری (Prefetching): بارگذاری اولیه طرح‌ها و رابط کاربری برای ناوبری سریع‌تر
• بهبود تدریجی (Progressive Enhancement): عملکرد صحیح حتی بدون جاوا اسکریپت فعال
• ناوبری سمت کلاینت (Client-side Navigation): حفظ وضعیت و طرح‌ها هنگام ارسال فرم

import Form from 'next/form';
export default function Page() {
 return (
   <Form action="/search">
     <input name="query" />
     <button type="submit">Submit</button>
   </Form>
 );
}

پیکربندی Next.js با TypeScript

اکنون می‌توانید فایل پیکربندی next.config.js را با TypeScript بنویسید (next.config.ts). این ویژگی  سبب خوانایی بهتر و جلوگیری از خطاهای احتمالی می شود.

import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
 /* config options here */
};
export default nextConfig;

ابزار TurboPack Dev

Turbopack، باندلر نسل جدید Next.js، اکنون برای توسعه پایدار است. این ابزار با بهبود زمان شروع، بروزرسانی‌های سریع‌تر و کامپایل اولیه بهتر، تا ۹۶.۳٪ سرعت بروزرسانی کد را افزایش می‌دهد. برای استفاده، دستور زیر را اجرا کنید.

next dev --turbo

بهبود عملکرد در Next.js 15

Next.js 15 با بهینه‌سازی‌های جدید، زمان ساخت (Build) و تولید استاتیک (Static Generation) را بهبود داده است. این بهبودها شامل استفاده مجدد از پاسخ‌های Fetch بین صفحات و کاهش پردازش‌های تکراری در طول مراحل ساخت و تولید صفحات استاتیک است. با این تغییرات، زمان ساخت و تولید استاتیک برای برنامه‌های داده‌محور به طور چشمگیری کاهش یافته و سرعت بارگذاری صفحات افزایش یافته است. این بهینه‌سازی‌ها تجربه بهتری هم برای توسعه‌دهندگان و هم برای کاربران نهایی فراهم می‌کند.