Save Time and Stay Informed: 9 Must-Know Updates in NextJS v14 🔥

#nextjs #react #webdev #javascript

NextJS, the popular React-based framework, recently released its highly anticipated major version, NextJS v14, in October 2023. With this release, NextJS has introduced a range of new features and improvements, emphasizing its commitment to providing a reliable and stable tool for modern web development. In this blog post, we will delve into some of the key updates in NextJS v14 that are essential for every React developer to know.

1. Stable NextJS Server Actions
2. Viewport Page Configuration
3. Minimum Node.js Version
4. Improved Font Optimization
5. ImageResponse Import Update
6. Static Exports with output: 'export'
7. Image OnLoad Callback
8. Remote Image Patterns in NextJS Config
9. Fetch Logging in Dev Mode
NextJS Conf 2023

1. Stable NextJS Server Actions

Server Actions, introduced in NextJS v13, have now reached stability, making them ready for production use. This powerful feature simplifies server-side code execution by creating API endpoints and serverless functions. With Server Actions in Next js 14, developers can seamlessly handle server-side operations, such as form submissions, by encapsulating the necessary logic within a React component.

export default function FormPage() {
  async function performServerAction(formData: FormData) {
    'use server';
    const id = await submitFormData(formData);
  }

  return (
    <form action={performServerAction}>
      {/* form inputs */}
      <button type="submit">Submit</button>
    </form>
  );
}

Discover more about Server Actions and how to integrate them into your Next JS projects in the NextJS documentation.

2. Viewport Page Configuration

Customizing viewport settings in NextJS has become even more straightforward with the introduction of a dedicated API. Instead of relying on the Next js metadata object for SEO and meta tags, you can now export a viewport object from your page or layout files. This allows you to define viewport options and even specify media attributes for granular control over different color schemes and device widths.

import type { Viewport } from 'next'

export const viewport: Viewport = {
  themeColor: 'black',
    // or you can even specify media attributes
    themeColor: [
    { media: '(prefers-color-scheme: light)', color: 'cyan' },
    { media: '(prefers-color-scheme: dark)', color: 'black' },
  ],
  colorScheme: 'dark',
  // below the default values, you don't need to specify them
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
}

To generate viewport values dynamically, you can use the generateViewport function. Find more details about the viewport object in the NextJS documentation.

3. Minimum Node.js Version

NextJS v14 requires a minimum Node.js version of at least v18.17. It is essential to update your project's engine requirements accordingly to ensure compatibility with the latest NextJS version.

4. Improved Font Optimization

NextJS offers an impressive Font Optimization feature, enabling self-hosting of fonts used in your application. With the new version, you can import this functionality directly from next/font. This enhancement supports both local and Google Fonts and even integrates seamlessly with Tailwind CSS. Explore more about optimizing fonts in the NextJS documentation.

5. ImageResponse Import Update

The import for ImageResponse, a useful tool for generating social images, has changed to next/og instead of next/server. This update ensures consistency and clarity in the import statements. See details in documentation.

6. Static Exports with `output: 'export'`

NextJS now provides the option to generate static HTML/CSS/JS files only, allowing you to host your application from any static file server. This improvement boosts performance optimization by excluding server-side JS code from the client bundle. Learn more about static exports in the NextJS documentation.

7. Image OnLoad Callback

With the introduction of the onLoad callback in the next/image component, developers gain more control over actions to perform after an image has finished loading in the browser. This functionality allows for various post-loading operations, such as additional rendering or data manipulation.

import Image from "next/image";

function MyImageComponent() {
  const handleImageLoad = (
    e: React.SyntheticEvent<HTMLImageElement, Event>
  ) => {
    console.log(
      "Image loaded!",
      e.currentTarget.naturalWidth,
      e.currentTarget.naturalHeight
    );
    // Perform additional actions after the image is loaded
    // ...
  };

  return (
    <Image
      src="/path/to/image.jpg"
      alt="Image"
      width={500}
      height={300}
      onLoad={handleImageLoad}
    />
  );
}

Note that the deprecated onLoadingComplete prop has been replaced by the onLoad callback. Check out the onLoad documentation for more details.

8. Remote Image Patterns in NextJS Config

The new version of NextJS configuration introduces the remotePatterns option, which allows you to define patterns for remote images. This offers greater flexibility in including images from different remote sources compared to the deprecated domains option.

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        pathname: '/account123/**',
    port: '',
      },
      {
        protocol: 'https',
        hostname: 'example2.com',
        pathname: '/images/**',
      },
    ],
    domains: ['example.com'], // Deprecated option
  },
}

Embrace the power of remotePatterns to enhance your NextJS application with remote images. More details can be found in the NextJS documentation.

9. Fetch Logging in Dev Mode

NextJS provides the ability to log fetch calls during development by configuring the logging level. By modifying the next.config.js file, you can control whether the full URL is logged to the console, aiding in debugging and monitoring activities.

module.exports = {
  logging: {
    fetches: {
      fullUrl: true
    }
  }
};

Enabling fullUrl will log the complete URL of fetched data to the console, helping you track and troubleshoot network requests.

NextJS Conf 2023

NextJS v14 was unveiled alongside future plans at the NextJS Conf held on October 26, 2023. This conference provided valuable insights into NextJS's roadmap and the web development industry as a whole. If you want to stay updated, we recommend watching the main stage or reading our NextJS Conf 2023 recap for the most important highlights.

Stay motivated, keep pushing boundaries, and happy coding!