Next.js 16: हर नई चीज़ जो अब तुम्हें बर्दाश्त करनी पड़ेगी
Next.js 16 गिर चुका है और, क्या आश्चर्य, तुमसे किसी ने पूछा तक नहीं। आधिकारिक डॉक्यूमेंटेशन सभी बदलावों को अपग्रेड गाइड में ठूंस देता है, तो या तो पढ़ लो या चौंक कर बैठो। मार्केटिंग की चीनी छोड़ो: ये सब है जिसे झेलना पड़ेगा अगर दौड़ में रहना है।
एनवायरनमेंट: बहाने ख़त्म
अब भी Node 18 चला रहे हो? गलत दांव। Next.js 16 को कम से कम Node 20.9, TypeScript 5.1+ और आधुनिक ब्राउज़र चाहिए (Chrome/Edge/Firefox 111+, Safari 16.4+). अगर तुम्हारा बेड़ा इतना नहीं खींच पाता तो 15 पर अटक कर सुरक्षा छेद भी झेलो। कोई सौदा नहीं।
Turbopack अब आधार रेखा है
--turbopack फ्लैग भूल जाओ। इंजन dev और build दोनों में डिफ़ॉल्ट ऑन है, कॉन्फ़िग भी जड़ में शिफ़्ट (turbopack की जगह experimental.turbopack). अब भी custom webpack पकड़े बैठे हो? बिल्ड अब जानबूझकर फटती है ताकि तुम ध्यान दो। --webpack से बस मौत टलती है, मंज़ूरा Turbopack ही है—dev में डिस्क कैश और Sass के tilde इम्पोर्ट भी गए।
HTTP APIs अब पूरी तरह async
Next.js 15 ने cookies, headers, draftMode, params, searchParams के लिए सिंक वाली बैसाखी छोड़ी थी। खेल ख़त्म: अब सब कुछ async है, opengraph-image, twitter-image, icon, apple-icon समेत। पुरानी सिग्नेचर पकड़े हो? await छिड़कने की तैयारी करो। बोनस: next typegen अब helper (PageProps, LayoutProps, RouteContext) उगलता है ताकि types में डूबो मत।
React की तरफ़: 19.2 और स्थिर Compiler
Next.js 16 React 19.2 (canary) समेत पूरा जुलूस लाता है: View Transitions, useEffectEvent, Activity. ऊपर से React Compiler अब स्थिर विकल्प है (reactCompiler: true). हाँ, build लंबा होगा क्योंकि पीछे Babel अब भी ट्रांसपाइल कर रहा है, लेकिन बिना memo छुए ऑटो-मेमोइज़ेशन मिलती है।
Cache Components और ज़्यादा चालाक नेविगेशन
पुराना experimental_ppr फ्लैग गायब। जगह लेता है cacheComponents, जिससे Partial Pre-Rendering का नया अवतार ऑन होता है। SPA transitions अब ज़्यादा समझदारी से प्रीफ़ेच करती हैं: layout deduplication, incremental prefetch… रिक्वेस्ट बढ़ेंगी, payload घटेगा। आराम चाहिए था? लो, बिना लाइन छुए।
नई cache APIs: revalidateTag, updateTag, refresh
Cache लेयर जिम जा रही है:
revalidateTag(tag, cacheLife)अब अवधि प्रोफ़ाइल लेती है, आराम से रिफ़्रेश करो।updateTag(tag)Server Actions में तुरंत read-your-writes देता है।refresh()किसी server action के बाद client router को तुरंत ताज़ा कर देता है।cacheLifeऔरcacheTagसे आखिरunstable_का ठप्पा हट गया।
या तो इस मौके पर revalidation स्ट्रैटेजी साफ़ करो, या फिर टेप चिपकाते रहो और दुआ करो state न फटे।
middleware गया, proxy आया
middleware.{js,ts} फ़ाइलें अब proxy कहलाएंगी। Runtime nodejs पर लॉक, edge बाहर (फ़िलहाल)। ऑप्शन्स भी वही कहानी: skipMiddlewareUrlNormalize अब skipProxyUrlNormalize। डॉक हाथ पकड़ती है, लेकिन हाँ, फाइलों की लाइन लगाकर rename करना पड़ेगा।
इमेज: कसकर कंट्रोल
पवित्र गाय next/image पर कई वार:
- लोकल इमेज पर query string चाहिए तो
images.localPatterns.searchसेट करो। minimumCacheTTLडिफ़ॉल्ट से 4 h हो गया ताकि revalidation का जुनून शांत हो।imageSizesसे16उड़ गया,qualities[75]पर सिमट गई और लोकल IP अब ब्लॉक हैं जब तकdangerouslyAllowLocalIPन लगाओ।- रीडायरेक्ट 3 पर सीमित,
next/legacy/imageको अलविदा। images.domainsअब deprecate, जगहremotePatternsलेता है।
कॉन्फ़िग को यूँ ही सड़ने दिया था? प्रोड में झटके के लिए तैयार रहो।
DX: dev/build आउटपुट अलग, ESLint खुद संभालो, स्क्रोल वहीं रहता है
next dev और next build अब अलग फोल्डर में लिखते हैं (.next/dev dev के लिए) और एक-दूसरे को लॉक करते हैं ताकि दो इंस्टेंस न चलें। next.config लोडिंग भी साफ़-सुथरी, तो process.argv.includes('dev') वाले जुगाड़ भूल जाओ।
Linting में next lint गायब है। अब नंगी ESLint CLI (या Biome, अगर दर्द पसंद है) से काम चलाओ और @next/eslint-plugin-next वाली flat config अपनाओ। और अगर instant scroll जबरदस्ती कर रहे थे तो <html> पर data-scroll-behavior="smooth" लगाओ—Next.js अब तुम्हारे CSS को छोड़ देता है।
अल्फ़ा एक्स्ट्रा और बाकी बचा खुचा
- Build Adapters API (alpha): एक प्रयोगात्मक hook जिससे तुम्हारा इंफ्रा build pipeline में हाथ डाल सके।
- Modern Sass API
sass-loaderv16 की बदौलत। - AMP,
next lint,serverRuntimeConfig/publicRuntimeConfig, अजीबdevIndicators,experimental.dynamicIOऔरunstable_rootParamsकूड़ेदान में।
“फुल-स्टैक फ्रेमवर्क” चाहिए था? Next.js 16 याद दिलाता है बॉस कौन है। सीधा अपडेट करो — npm install next@latest react@latest react-dom@latest, TypeScript वालों के लिए @types, npx @next/codemod@canary upgrade latest — या फिर मुंह बनाकर बैठो। अगली लहर पर मिलेंगे।
