Create Next App으로 블로그를 만들기 위한 기초적인 프로젝트 세팅이다.

Next js 시작

npx create-next-app@latest

cli가 실행되면 아래와 같이 선택한다.

√ What is your project named? ... .
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like your code inside a `src/` directory? ... No
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to use Turbopack for `next dev`? ... Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No
Creating a new Next.js app in C:\Users\bluec\Desktop\next-js-boilerplate.

스니펫 설정

file - preferences - configure snippets - typescriptreact를 선택하여 스니펫을 설정할 수 있다.

Next.js 15에서는 searchParams와 params를 Promise로 받도록 되어 있어 위와 같이 스니펫을 만들었다.

{
	"TSX Function Component": {
		"prefix": "tfc",
		"body": [
			"export default function ${TM_FILENAME_BASE/(.+)/${1:/pascalcase}/}() {",
			"  return <div>${TM_FILENAME_BASE/(.+)/${1:/pascalcase}/}</div>;",
			"}"
		],
		"description": "TSX Function Component with File Name for TypeScript"
	},
	"TSX Function Component for Next.js Page (w)ith Dynamic Params": {
		"prefix": "tfcw",
		"body": [
			"interface PageProps {",
			"  params: Promise<{",
			"    ${TM_DIRECTORY/(.+[\\/\\\\])?\\[([^\\/\\\\]+)\\][\\/\\\\]*$/$2/}: string",
			"  }>;",
			"  searchParams?: Promise<Record<string, string | string[]>>;",
			"  children?: React.ReactNode;",
			"}",
			"",
			"export default async function Page({ params, searchParams, children }: PageProps) {",
			"  return (",
			"    <div>",
			"      <h1>Page Component</h1>",
			"      <pre>{JSON.stringify(await params, null, 2)}</pre>",
			"      <pre>{JSON.stringify(await searchParams, null, 2)}</pre>",
			"      {children}",
			"    </div>",
			"  );",
			"}"
		],
		"description": "TSX Function Component with Directory Name for Next.js 15 App Router"
	}
}

• tfc : 파일 이름을 기반으로 함수형 컴포넌트를 만든다.

  // app/[userId]/page.tsx
  export default function Page() {
    return <div>Page</div>;
  }
  

• tfcw : 폴더 주소를 기반으로 urlSlug 하나를 인터페이스에 추가해준다.

  // app/[userId]/page.tsx
  interface PageProps {
    params: Promise<{
      userId: string
    }>;
    searchParams?: Promise<Record<string, string | string[]>>;
    children?: React.ReactNode;
  }
  
  export default async function Page({ params, searchParams, children }: PageProps) {
    return (
      <div>
        <h1>Page Component</h1>
        <pre>{JSON.stringify(await params, null, 2)}</pre>
        <pre>{JSON.stringify(await searchParams, null, 2)}</pre>
        {children}
      </div>
    );
  }
  

VSCode 설정 변경으로 절대경로(alias) 강제 적용하기

Always use alias for automatic imports - Stack Overflow

tsconfig.json(또는 jsconfig.json)에서 **경로 별칭(path alias)**을 올바르게 설정했다면, VSCode의 설정을 변경하여 항상 절대경로를 사용하도록 강제할 수 있다.

1. VSCode에서 **설정(User Settings)**을 열고,
2. **"Import Module Specifier"**를 검색하면 TypeScript 및 JavaScript용 설정이 나타난다.
3. 이를 "non-relative"로 변경하면, 항상 경로 별칭(alias)을 사용하도록 강제할 수 있다.

VSCode settings.json 직접 수정

만약 설정 파일을 직접 수정하고 싶다면, settings.json에 아래 내용을 추가하면 된다.

{
  //...
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "javascript.preferences.importModuleSpecifier": "non-relative"
  //...
}

이렇게 설정하면, VSCode에서 자동으로 import를 정리할 때 상대경로(./)가 아닌 경로 별칭(@/)을 사용하도록 변경된다.