Getting Started with Next.js 16

# Getting Started with Next.js 16 Next.js এগিয়ে যাচ্ছে দিন দিন, especially performance এবং developer experience নিয়ে। Next.js 16 হচ্ছে একটি major milestone release কারণ এতে React Compiler, Turbopack (Stable), better caching, এবং optimized routing officially add করা হয়েছে। এই guide-এ আমি দেখাবো: * কী কী new feature এসেছে * কীভাবে Next.js 16 locally configure করতে হয় * Real-world কোড examples * এবং upgrade বা new project start করার পরামর্শ 1) System Requirements + Installation Next.js 16 smoothly run করতে আপনার দরকার: Node.js 20.9+ Create a new Next.js 16 project <pre> <code> npx create-next-app@latest my-next16-app cd my-next16-app npm run dev </code> </pre> Default setup-এ আপনি পাবেন: * TypeScript support * Tailwind CSS * App Router * Turbopack enabled by default * Run with Turbopack explicitly npm run dev -- --turbo npm run build -- --turbopack Turbopack = Rust-based super-fast bundler, meaning refresh, rebuild, HMR সবকিছু অনেক faster. 2) What’s New in Next.js 16 (With Examples) ✔ React Compiler (Built-in Optimization) React Compiler এখন Next.js-এর মধ্যে built-in. আপনি manually কিছু configure করতে হবে না. Compiler automatically re-renders reduce করে performance increase করে। Example: export default function Greeting({ name }: { name: string }) { return <h1>Hello, {name}</h1> } Simple component, but under the hood Next.js automatically optimize করে দিবে. ✔ Turbopack as Default Bundler Next.js 16-এ local development automatic Turbopack দিয়ে run হয়। Result — insanely fast build + near-instant refresh. npm run dev -- --turbo ✔ Improved Caching + Smarter Routing Next.js 16 caching system আরও powerful হয়েছে—s-maxage, stale-while-revalidate, streaming, সব কিছুই উন্নত। Example API Route: import { NextResponse } from 'next/server' export async function GET() { return NextResponse.json( { message: "Hello from Next.js 16" }, { headers: { "Cache-Control": "public, s-maxage=60, stale-while-revalidate=30" } } ) } এতে API response fast + auto-refreshable থাকে। ✔ Server Components + App Router (Still the Default) App Router Next.js-এর main routing system। Server Components React-এ performance boost দেয়। Example Page: import Greeting from '../components/Greeting' export default async function Page() { const data = await fetch('https://api.example.com/stats').then(r => r.json()) return ( <main> <Greeting name={data.user ?? "Guest"} /> <p>Active users: {data.active}</p> </main> ) } এতে আপনি client-side heavy operations avoid করতে পারবেন। 3) Local Development Tips (Pro-Level) ✔ Use Node 20.9 or later Outdated Node version performance এবং compiler-related সমস্যার কারণ হতে পারে। ✔ Turbopack issue এলে disable করুন npm run dev -- --no-turbo ✔ TypeScript auto-enabled যদি না থাকে, শুধু একটা tsconfig.json file create করলেই হবে। ✔ Choose Edge or Node runtime Middleware, streaming, auth—সবকিছুর performance depend করে runtime-এর উপর। Edge = faster + lightweight Node = more stable + familiar APIs Conclusion (Portfolio-Friendly Summary) Next.js 16 is all about speed, stability, and developer happiness. React Compiler + Turbopack combo আপনার app-কে আগের version থেকে অনেক বেশি fast বানায়। If you're starting a fresh project — 👉 just run create-next-app and you’ll get a fully optimized setup. If you're upgrading — 👉 Node update করুন, caching behaviour test করুন, এবং middleware properly configure করুন। Next.js 16 is a perfect choice for modern, production-ready, scalable web applications.