Skip to content

Nextjs(v14)

SeungAh Hong2min read

Installation

npm i next@latest
# or
yarn upgrade next --latest
# or
pnpm up next --latest

Summary

  • Internet Explorer has been dropped from the list of supported browsers, and support has shifted to modern browsers.

    • Chrome 64+
    • Edge 79+
    • Firefox 67+
    • Opera 51+
    • Safari 12+

  • The minimum Node version has changed from 12.22.0 to 18.17.x.

  • Turbopack Passing 5,000 tests for the App & Pages Router

    • 53% faster local server startup
    • 94% faster code updates with Fast Refresh

  • Forms and Mutations

    • API Routes, a way to quickly build backend endpoints alongside your frontend code, were introduced (a feature that landed in Next.js 9).
    // app/api/submit.js
import type { NextApiRequest, NextApiResponse } from 'next';
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const data = req.body;
  const id = await createItem(data);
  res.status(200).json({ id });
}
 
// client
import { FormEvent } from 'react';
 
export default function Page() {
  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
 
    const formData = new FormData(event.currentTarget);
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: formData,
    });
 
    // Handle response if necessary
    const data = await response.json();
    // ...
  }
 
  return (
    <form onSubmit={onSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

  • Server Actions (Stable)

    • Next.js has been upgraded to the latest React, which includes Server Actions from React's Canary release.
    • For performance-heavy actions such as mutating data, re-rendering a page, or redirecting, you can present the client user with a screen that reflects the corresponding state.
    • Caching, Revalidating, Redirecting, and more
      • As Server Actions are integrated with the app router, the following APIs are available.
      • Revalidate cached data with revalidatePath() or revalidateTag()
      • Redirect to different routes through redirect()
      • Set and read cookies through cookies()
      • Handle optimistic UI updates with useOptimistic()
      • Catch and display errors from the server with useFormState()
      • Display loading states on the client with useFormStatus()

  • Metadata Improvements The viewport, colorScheme, and themeColor information that affects the user experience has been separated from the existing Metadata type and must now be defined separately. Sending viewport data together with the page content lets you avoid layout shifts or flickering caused by theme color changes or viewport changes.

    • viewport : Sets the initial zoom and other properties of the viewport.
    • colorScheme : Sets the supported modes (light/dark) of the viewport.
    • themeColor : Sets the color that the chrome surrounding the viewport will render. The properties that used to be defined in the existing meta can be added using viewport and generateViewport. (Use the static field: viewport; use the runtime dynamic field: generateViewport.)
    // v13
export const metadata: Metadata = {
  viewport: {
    width: 'device-width',
    initialScale: 1,
    maximumScale: 1,
  },
};
 
// v14
//// The viewport object
import { Viewport } from 'next';
 
//// viewport(정적 뷰포트 생성)
export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  // Also supported by less commonly used
  // interactiveWidget: 'resizes-visual',
};
 
export default function Page() {}
 
//// generateViewport(동적 뷰포트 생성)
type Props = {
  params: { id: string };
  searchParams: { [key: string]: string | string[] | undefined };
};
 
export function generateViewport({ params, searchParams }: Props): Viewport {
  return {
    themeColor: 'black',
  };
}
 
export default function Page({ params, searchParams }: Props) {}
 
//// output
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1"
/>;

References