[NextJS] 프로젝트 생성하기 with Yarn berry 4.4.0

yarn create next-app .

현재 경로에 next 프로젝트 생성

 

yarn add next@14 react@18 react-dom@18

 

Next.js 14 버전에서는 next.config.ts 파일을 공식적으로 지원하지 않습니다.
즉, TypeScript(.ts)로 next.config.ts를 작성하는 것은 지원되지 않으며, .js 또는 .mjs 형식으로 변환해야 함

 

mv next.config.ts next.config.mjs

 

변경후 파일 내용 다음과 같이 수정

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true
};

export default nextConfig;

 

PnP 환경에서는 TypeScript가 @types/react를 제대로 찾지 못할 수 있습니다. 이를 해결하려면 @yarnpkg/pnpify플러그인을 설치하고 TypeScript 설정을 변경합니다.

yarn add -D @yarnpkg/pnpify

 

그리고 .yarnrc.yml 파일에 다음을 추가

nodeLinker: pnp

 

PnP 환경에서 TypeScript를 사용할 때는 yarn pnpify를 실행하여 IDE가 PnP를 지원하도록 해야함

yarn dlx @yarnpkg/sdks vscode

 

VSCode에서 TypeScript 버전 변경

• Cmd + Shift + P (Mac) 또는 Ctrl + Shift + P (Windows) → TypeScript: Select TypeScript Version
• Use Workspace Version 선택

 

 

next-env.d.ts에 다음과 같이 추가

/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

declare namespace JSX {
    interface IntrinsicElements {
        [elem: string]: any;
    }
}​