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;
}
}