Next.js 시작하기 - 간단한 Login 페이지 만들기 (1) Router

시작하기

전체적인 프로젝트 세팅이 끝났으니, 이제 본격적으로 페이지를 만들어볼 차례다. 빠른 개발을 위해 MUI를 적극적으로 사용하여 직접 스타일링을 하는 경우를 최대한 줄이고자 하지만, React-Hook-Form과 MUI를 사용하는 것에 있어서 컨트롤적인 문제가 발생하는 부분이 있다. 때문에 이러한 문제가 발생하는 부분에 대하여 직접 스타일링을 하는 부분 또한 존재할 예정이다.

만약 MUI를 어쩔 수 없이 꼭 React-Hook-Form과 사용하고자 한다면, 사용법을 함께 첨부할 예정이다. 필자는 방법을 알아내는데 너무 많은 삽질이 들어갔다.

Next.js의 라우팅 방식

Routing - 페이지 간의 이동을 관리하는 방법이다.

NextJS 14 Folder Structure

공식 페이지에 상세히 설명되어 있지만, 간단히 요약하자면 next.js에서는 자동 라우팅을 통해 파일 혹은 폴더를 생성하는 것으로 라우팅을 할 수 있다. 이러한 부분은 기존 리액트에서 react-router-dom을 세팅했던 경험과 차별화되는 Next.js 만의 편리한 부분이라고 할 수 있다.

크게 app과 page 두 가지 라우팅 방법이 존재한다.

 

app router - 폴더명을 기반 경로

app router방식은 폴더 하위에 page.tsx 혹은 layout.tsx 등 page와 layout 파일이 존재할 경우, 해당 폴더명을 기반으로 라우터 경로가 생성되는 방식이다.

app/documents/page.js -> /documents 경로
app/documents/flower/page.js -> /documents/flower
app/documents/button.js -> (x)

 

Pages router - 폴더와 파일명 기반 경로

반면 pages router는 pages 폴더 하위에 존재하는 폴더와 파일, 두 가지 모두 라우터를 생성 가능하다.

pages/documents/index.js -> /documents
pages/documents.js -> /documents

사용 방식에 대한 간단한 요약은 위와 같지만, 조금 더 자세한 차이를 알고 싶다면 아래의 블로그를 참고하면 좋을 것 같다.

[nextjs] 13.4.0부터 안정화된 App Router. Pages Router와 비교

 

그래서 무엇을 써야 할까...?

다행스럽게도, 공식 홈페이지에서 이미 이에 대한 힌트를 주었다.

Pages Router
Before Next.js 13, the Pages Router was the main way to create routes in Next.js. It used an intuitive file-system router to map each file to a route. The Pages Router is still supported in newer versions of Next.js, but we recommend migrating to the new App Router to leverage React's latest features.

Use this section of the documentation for existing applications that use the Pages Router.

공식 홈페이지에 따르면 Pages router가 먼저 나온 방식이며 최신 Next.js에서도 해당 기능을 지원하지만, Next.js는 React의 최신 기능들을 사용하기 위해서라도 App Router로의 마이그레이션을 권장한다고 한다. 물론 러닝 커브를 생각한다면 pages router가 훨씬 간단하고 여전히 많은 개발자들이 pages router 방식을 선호하며 사용중에 있다.

 

그러나 계속해서 안정화 되가는 app router 쪽을 배우는 것이 나중을 위해서라도 더 도움이 되지 않을까 생각되어(미리미리 업데이트 속도를 따라잡기 위해) 이번 프로젝트를 진행하면서 사용할 라우팅 방법은 app router를 활용한 것이다. 

 

Next.js 폴더 구조

처음 프로젝트를 세팅했을 때, 우리는 src 폴더를 사용하기로 했다. 따라서 현재의 src/app 폴더 하위에 login 폴더를 생성하게 되면 https://localhost:3000/login 이라는 경로로 라우팅이 가능해진다. 현재까지 진행한 폴더 구조는 다음과 같다.

src
├── app
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   ├── page.module.css
│   └── page.tsx
├── components
│   ├── sample.test.ts
│   └── sample.ts
└── mocks
    └── handlers.ts

여기서 app 하위에 login 폴더를 생성하고, 해당 폴더에 page.tsx를 생성하면 자동으로 라우팅이 된다.

 

이슈 발생

아마 폴더를 생성하고 난 뒤 npm run build, 혹은 npm run test 등을 진행하다가 아래와 같은 에러가 발생할 경우가 있다. 이는 commonJS와 ECMAScript의 동작 방식 차이로 인해 발생하는 문제이다.

ReferenceError: module is not defined in ES module scope

이때 commonJS는 require와 module.export의 기능을 제공하고, ECMAScript는 import와 export의 기능을 제공한다. 문제는 몇몇 기능에 대하여 ECMAScript가 제대로 지원이 되지 않는 문제로 인해 호환성 이슈가 발생한다. 지금의 경우, next.config.mjs와 jest.config.js에서 발생중이다.

 

이 문제를 해결하는 방법은 간단하다. 파일 확장자를 .cjs로 변경하면 된다.

 

.cjs는 해당 파일을 commonJS로 취급하겠다는 것과 동일하다. 기존의 import/export 방식으로 인해 호환성 문제가 발생하는 것을 이 방법으로 해결할 수 있다.

./src/app/layout.tsx:4:12 Syntax error: Unexpected token, expected "from"

위의 문제가 해결되었다면 다음으로 아마 위와같은 syntax 에러가 발생할 것이다. 이는 next.js에서 지원하는 babel 대신 우리가 직접 설정한 babel 설정으로 인해 발생하는 문제다. 이미 Next에서는 대부분의 경우에 필요한 Babel 설정을 가지고 있으니, 굳이 설정할 필요 없이 해당 babel 파일을 삭제하면 된다. 처음부터 안 만들었으면 되었던 것...

 

라우팅 테스트

제대로 login 폴더가 라우팅 되었는지 확인해 보기 위해 간단한 테스트 코드를 작성하였다.

// src/app/login/page.tsx
const Login = () => {
	return 'hello world';
};

export default Login;

이제 https://localhost:3000/login에 접속하였을 때 hello world가 뜨면 정상적으로 동작하는 것이다.

깨알같이 보이는 작고 소중한 hello world