Save Time and Stay Informed: 9 Must-Know Updates in NextJS v14 🔥
Tags: nextjs, react, webdev, javascript
Published: 2023-11-06 12:04:04

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](#1-stable-nextjs-server-actions)
[2. Viewport Page Configuration](#2-viewport-page-configuration)
[3. Minimum Node.js Version](#3-minimum-nodejs-version)
[4. Improved Font Optimization](#4-improved-font-optimization)
[5. ImageResponse Import Update](#5-imageresponse-import-update)
[6. Static Exports with `output: 'export'`](#6-static-exports-with-output-export)
[7. Image OnLoad Callback](#7-image-onload-callback)
[8. Remote Image Patterns in NextJS Config](#8-remote-image-patterns-in-nextjs-config)
[9. Fetch Logging in Dev Mode](#9-fetch-logging-in-dev-mode)
[NextJS Conf 2023](#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.

```tsx
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](https://nextjs.org/docs/app/api-reference/functions/server-actions).

## 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.

```tsx
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](https://nextjs.org/docs/app/api-reference/functions/generate-viewport#generateviewport-function-1) function. Find more details about the viewport object in the [NextJS documentation](https://nextjs.org/docs/app/api-reference/functions/generate-viewport#the-viewport-object).

## 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](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts).

## 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](https://nextjs.org/docs/app/api-reference/functions/image-response).

## 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](https://nextjs.org/docs/app/building-your-application/deploying/static-exports).

## 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.

```tsx
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](https://nextjs.org/docs/app/api-reference/components/image#onload) 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.

```tsx
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](https://nextjs.org/docs/app/api-reference/components/image#remotepatterns).

## 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.

```tsx
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](https://www.youtube.com/watch?v=8q2q_820Sx4) or reading our [NextJS Conf 2023 recap](https://focusreactive.com/recap-of-next-js-14-announcement-and-2023-conference-highlights/) for the most important highlights.

Stay motivated, keep pushing boundaries, and happy coding!