시작하기 앞서...

NextJS 프레임워크 Workspace가 있어야 합니다.
이전 게시글 참조 ----> [NextJS]Project Workspace 시작하기

NextJS Defining Routes

• 기본적으로, NextJS의 기본적인 구성은 다음과 같습니다.

  app
  ├layout.tsx
  ├page.tsx
  ├node_modules
  ├next-env.d.ts
  ├package-lock.json
  ├package.json
  └tsconfig.json

• 여기서, pages.tsx 파일의 역할은 index.html 파일의 역할과 동일하며,
  NextJS에서의 Route 설정은 app 폴더의 디렉토리 경로를 통해서 결정됩니다.

Example)

localhost:3000/dev ==> /app/dev/page.tsx
localhost:3000/dev/uat ==> /app/dev/uat/page.tsx
localhost:3000/prod ==> /app/prod/page.tsx

이 때, page.tsx에서는 아래의 내용과 같이, 컴포넌트에 대해서 export default 커맨드가 걸려있어야 합니다.

> app/dev/page.tsx

export default function Dev() {
    return <h1>Dev Page</h1>
}

또한, 폴더 경로 안에 page.tsx 파일이 없는 경우,
해당 경로에 접속하게 되는 경우 404 Not found 오류를 반환합니다.