Next JS 14 Features

20 Must-Know Next js 14 Features and Enhancements

by

Next js 14 Features : Next.js continues to lead the pack in modern web development frameworks, providing powerful features that blend server-side rendering, static site generation, and hybrid approaches.

Next.js 14, introduces several improvements that enhance performance, developer experience, and scalability.

In this blog, we’ll explore 20 key features of Next.js, including the latest updates, with code examples and tips on measuring the benefits of your projects.

1. Router

Description: Improved performance for routing, better support for dynamic routes, and enhanced layouts.

Code Example:

// pages/blog/[slug].js

import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  return <h1>Blog Post: {slug}</h1>;
}

Read Also : Optimizing React Components with useCallback and React.memo

How to Check: Measure build times with next build and navigation speed between dynamic routes.

2. Server Actions

Description: Server Actions are a game-changing feature that allows you to define actions on the server side, which can be triggered from the client without an API route. This helps reduce boilerplate code and improves performance by reducing client-server round trips.

Code Example:

// app/dashboard/page.js

import { useState } from 'react';

export default function Dashboard() {
  const [data, setData] = useState(null);

  async function fetchData() {
    const res = await fetch('/api/data');
    const json = await res.json();
    setData(json);
  }

  return (
    <div>
      <h1>Dashboard</h1>
      <button onClick={fetchData}>Fetch Data</button>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

How to Check: Use Chrome DevTools to analyze network requests and measure the performance improvement.

3. Improved Image Component

Description: The Image component in Next.js 14 has been further optimized. It now includes built-in support for AVIF and WebP formats, automatic image sizing, and better caching strategies.

Code Example:

import Image from 'next/image';

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to My Site</h1>
      <Image
        src="/images/photo.avif"
        alt="Sample Photo"
        width={800}
        height={600}
        priority
      />
    </div>
  );
}

Read Also: Guide 101 : How to Write Effective Prompts

How to Check: Run Lighthouse audit and inspect network requests for image formats.

4. Enhanced next/link

Description: Enhanced prefetching for faster navigation.

Code Example:

import Link from 'next/link';

export default function HomePage() {
  return (
    <nav>
      <Link href="/about" prefetch={false}>
        About Us
      </Link>
      <Link href="/services" prefetch>
        Our Services
      </Link>
    </nav>
  );
}

How to Check: Test navigation speed and inspect DevTools Coverage.

5. Middleware Enhancements

Description: Better caching and control over request handling.

Code Example:

// middleware.js

import { NextResponse } from 'next/server';

export function middleware(request) {
  const token = request.cookies.get('auth-token');
  
  if (!token) {
    return NextResponse.redirect('/login');
  }

  return NextResponse.next();
}

Read Also: Creating Your Own Local ChatGPT-Like App Using HTML and JavaScript

How to Check: Analyze performance using server logs and load testing.

6. Server-Side Rendering (SSR)

Description: Next.js Offers built-in SSR capabilities, allowing you to render pages on the server and send the fully rendered HTML to the client, improving SEO, performance, and user experience.

Code Example:

// Next.js:
import { getServerSideProps } from 'next/server';

export default function IndexPage({ data }) {
  return (
    <div>
      <h1>Hello, {data.name}!</h1>
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
      props: { data },
     };
}

How to Check: Measure TTFB using WebPageTest and bundle size with next analyze.

7. Static Site Generation (SSG)

Description: Provides SSG, pre-rendering pages at build time and serving them directly to clients, offering excellent performance and SEO benefits.

Code Example:

export default function IndexPage({ data }) {
  return (
    <div>
      <h1>Hello, {data.name}!</h1>
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data   
 },
  };
}

How to Check: Inspect the build output to confirm static optimization.

8. Incremental Static Regeneration (ISR)

Description: Update static content after build without a full redeploy.Combines the benefits of SSG and SSR by pre-rendering pages at build time and allowing for dynamic updates without rebuilding the entire site.
you can specify the revalidate property to define how often a page should be regenerated.

Code Example:

export default function BlogPost({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    paths: posts.map((post) => ({ params: { id: post.id } })),
    fallback: 'blocking',
  };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: { post },
    revalidate: 60, // Regenerate the page every 60 seconds
  };
}

How to Check: Test content updates by changing data and measuring revalidation times.

9. Edge Runtime Support

Description: Run serverless functions at the edge for lower latency.

Code Example:

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Hello from Next.js Edge Runtime!</h1>
    </div>
  );
}

How to Check: Measure response times from different geographical locations.

10. Next.js Analytics

Description: Built-in analytics for monitoring performance and user interactions.

Code Example:

<script async src="https://nextjs.org/analytics"></script>

How to Check: Review analytics reports on the Next.js dashboard.

11. File Based API Routes

Description: Create RESTful APIs directly within your Next.js app.Make Unders pages/api/yourapi.js

Code Example:

export default function handler(req, res) 
{ 
  res.status(200).json({ message: 'Hello API' }); 
}

How to Check: Test API endpoints with tools like Postman or curl.

12. TypeScript Support

Description: First-class support for TypeScript with zero-config setup.

Code Example:

// pages/index.tsx
type User = {
  id: number;
  name: string;
};

const Home = () => {
  const users: User[] = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' },
  ];

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Home;

How to Check: Enable TypeScript by renaming files to .ts or .tsx.

13. Built-in CSS and Sass Support

Description: Use CSS and Sass modules directly in your Next.js project.

Code Example:

// styles.module.scss 
.container { color: blue; }

How to Check: Inspect the rendered styles in DevTools.

14. Custom Document and App

Description: Customize the document structure and wrap pages with global providers.

Code Example:

// _document.js 
import Document, { Html, Head, Main, NextScript } from 'next/document'; 
export default class MyDocument extends Document 
{ 
render() 
  { 
  return ( <Html lang="en"> <Head /> <body> <Main /> <NextScript /> </body> </Html> ); 
  } 
}

How to Check: Inspect the HTML output for custom elements.

15. Custom Error Pages

Description: Easily create 404 and 500 error pages.

  • Create a new folder: Create a new folder named pages/api/errors within your Next.js project.
  • Define error handlers: Create .js files within the errors folder, naming them based on the error codes you want to handle. For example, 404.js for a 404 Not Found error.

Code Example:

// pages/api/errors/404.js
export default function NotFound(req, res) {
  res.status(404).json({
    error: 'Not Found',
    message: 'The requested resource could not be found.',
  });
}

Use in Component :

import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();

  const handleError = (error) => {
    if (error.statusCode === 404) {
      router.push('/api/errors/404');
    } else {
      // Handle other error codes as needed
    }
  };

  // ... rest of your component logic

  return (
    <div>
      {/* Your component content */}
    </div>
  );
}

How to Check: Visit a non-existent route to trigger the custom 404 page.

16. API Middleware

Description: Apply middleware to API routes for tasks like validation or authentication.

Code Example:

export default function middleware(req, res, next) 
{ 
  if (!req.headers.token) return res.status(401).end(); 
  
  next(); 
}

How to Check: Test API routes with and without valid tokens.

17. Preview Mode

Description: Enable draft content preview from CMS without building the entire site.

Code Example:

export function getServerSideProps(context) { 
  context.preview = true; 
  return { props: {} }; 
  }

How to Check: Test preview mode with draft content.

18. Server-Side Caching

Code Example: Here’s an example of caching API responses for 1 minute

// pages/api/data.js
export default function handler(req, res) {
res.setHeader('Cache-Control', 's-maxage=60, stale-while-revalidate');
// Your data fetching logic here
const data = fetchSomeData();
res.status(200).json(data);
}

How to Check: Measure response times for cached and uncached requests.

19. File-Based Routing

Description: Uses a file-based routing system where pages are defined by their file path, making it easy to manage and understand your application’s structure.

Code Example:

// Create a file named `pages/about.js`
import React from 'react';

function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
    </div>
  );
}

export default AboutPage;

20. App Router

Description: A new routing system designed for building modern web applications with a more intuitive and performant approach. It offers a more declarative way to define routes and layouts, making your application’s structure easier to understand and maintain.

Code Example:

// app/layout.js
import { AppRouter } from 'next/app-router';

function Layout({ children }) {
  return (
    <html>
      <head>
        <title>My Next.js App</title>
      </head>
      <body>
        <AppRouter>{children}</AppRouter>
      </body>
    </html>
  );
}

export default Layout;

Conclusion : Next js 14 Features

Next.js 14 is packed with features that cater to both small and large-scale applications. Whether you’re focused on performance, developer experience, or flexibility, Next.js has the tools you need to build cutting-edge web applications. By leveraging these features, you can create applications that are fast, secure, and scalable.

To measure the improvements, utilize tools like Lighthouse, Chrome DevTools, and server-side metrics. Stay ahead in the ever-evolving world of web development by keeping your Next.js projects up-to-date with the latest features and enhancements!