[Next.js] - v13 Changes

Next.js - v13

Minimum Requirements

• React: 17.0.2 -> 18.2.0
• Node.js 12.22.0 -> 14.6.0 (12.x reached end-of-life (PR)

---

Changes

@next/image

props

• lazyRoot : removed
• layout -> fill (boolean | undefined)
• objectFit -> use from style (CSSProperties)
• objectPosition -> use from style (CSSProperties)

@next/link

• <a>태그 자동 설정 (따로 추가 ❌)

// Before
<Link href="/">
	<a>test</a>
</Link>

// After
<Link href="/">
	test
</Link>

🌟 Upgrade method

• <a> 태그 사용 시 LegacyBehavior (boolean) 속성 추가
• next 제공 cli 사용

npx @next/codemod new-link ./pages

@next/font

• Automatically optimizes your fonts, including custom fonts
• Removes external network requests for improved privacy and performance
• Built-in automatic self-hosting for any font file
• Zero layout shift automatically using the CSS size-adjust property

MiddleWare : the new AOP?

version history

• 12.0.0 : beta
• 12.2.0 : stable
• 13.0.0 : can modify (request | response) headers & send response

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // Clone the request headers and set a new header `x-version`
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-version', '13');

  // You can also set request headers in NextResponse.rewrite
  const response = NextResponse.next({
    request: {
      // New request headers
      headers: requestHeaders,
    },
  });

  // Set a new response header `x-version`
  response.headers.set('x-version', '13');
  return response;
}