Modern ES6+ JavaScript Features in Real-World Next.js Projects

ES6+ Features That Changed How We Write JavaScript

ES6 was not just an update — it was a paradigm shift. Arrow functions, destructuring, template literals, and modules transformed JavaScript from a quirky scripting language into a robust tool for large-scale applications. Here is how these features play out in real Next.js projects I have shipped.

Destructuring: Cleaner Component Props in React

// Before ES6
function UserCard(props) {
  return <h1>{props.name} - {props.role}</h1>;
}

// With destructuring
function UserCard({ name, role }: { name: string; role: string }) {
  return <h1>{name} — {role}</h1>;
}

Destructuring is not just pretty — it makes TypeScript integration seamless. Every project I build, from Vatsalya IVF to Luxe Design, uses destructured props with strict typing. It catches bugs at compile time instead of runtime.

Spread Operator for Immutable State in Redux Toolkit

State management with Redux Toolkit relies heavily on the spread operator for immutable updates. Instead of mutating state directly, you spread existing state into a new object, then override specific fields. This pattern is central to the complex checkout flows in Pizza World's multi-vendor system.

Optional Chaining — No More Cannot Read of Undefined

Deeply nested API responses used to require tedious null checks. Optional chaining (?.) lets you safely traverse nested objects. I use this extensively in Jobscater's candidate profile pages, where nested employer history data varies per user.