디스 프로그래머 (This Programmer)

next.js에서 pages 디렉토리 트리구조를 구성하는 다른 방법 본문

HTML/CSS/JS/React & Next.js

next.js에서 pages 디렉토리 트리구조를 구성하는 다른 방법

디스 프로그래머 2019. 1. 17. 21:06

※주의(2019.08.21 추가) : 해당 글을 읽기 전에 댓글을 먼저 읽는 걸 권고드립니다. 해당 방법으로 프로젝트 디렉토리 구성시 디렉토리 그대로 라우팅되는 현상이 있습니다. 해당 현상을 해결하기 위해선 components디렉토리를 pages외부에 위치시키거나 server.js에서 정규식을 이용해 components가 들어가있는 라우팅을 방지하는 등의 부가작업이 필요합니다.

next.js에서 pages 디렉토리 트리구조를 구성하는 다른 방법

next.js는 굉장히 직관적인 페이지 라우팅방법으로 유명하다. 그냥 루트디렉토리에 pages라는 이름의 디렉토리를 만들고 거기에 이동시킬 페이지의 js파일을 생성한 다음에 그냥 index.js에서 임포트시키면 되기 때문이다. 프로젝트를 만들어서 테스트해보자.

$ mkdir next-test
$ cd next-test
$ yarn init -y
$ yarn add next react react-dom

프로젝트 기본요소들이 생성됐을 것이다. package.json을 열어 scripts 구문을 추가하자.

// package.json
{
  "name": "next-test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^7.0.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }
}

그리고 package.json이 있는 프로젝트 루트디렉토리에 pages라는 디렉토리를 만들고 index.js라는 이름의 파일을 만들어 다음을 입력하자.

// pages/index.js
const Index = () => (
  <div>
  <p>Hello Next.js</p>
</div>
);

export default Index;

그리고 콘솔에서 yarn run dev를 입력하자. 다음과 같은 화면을 확인할 수 있을 것이다.



이제 next.js의 존재이유인 페이지 라우팅을 해보자. pages디렉토리에 about.js를 만들어 다음 내용을 입력하자.

// pages/about.js
export default () => (
  <div>
    <p>This is the about page</p>
  </div>
);

그리고 index.js에서 해당 페이지로 이동할 수 있게 링크를 달아주자.

// pages/index.js
import Link from 'next/link';

const Index = () => (
  <div>
    <Link href="/about">
      <a>About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

그러면 메인페이지는 다음과 같은 모습으로 바뀐다.

짠.

누르면 우리가 만들었던 about.js로 이동되어 "This is the about page"라는 글시가 출력된다.

라우팅할 페이지가 몇 개면 상관이 없다. 하지만 페이지가 많아지고 그만큼 컴포넌트가 많아지면 pages라는 하나의 디렉토리에 모든 페이지가 들어있어 너무 어지러워진다. 그리고 components라는 디렉토리를 만들어서 해당 컴포넌트들을 불러와 쓴다고 하더라도 경로의 괴리가 생겨 직관적으로 디렉토리 구조를 파악할 수 없다. 그럴 땐 이렇게 하면 된다.


이번에는 login페이지로의 라우팅을 추가해보자. 먼저 pages안에 login이라는 디렉토리를 만들자. 그리고 그 안에 index.js를 작성하자.

// pages/login/index.js
export default () => (
  <div>
    <p>This is the login page</p>
  </div>
);

그리고 가장 상위 디렉토리의 index.js에서 해당 페이지로의 라우팅을 추가하자.

// pages/index.js
import Link from 'next/link';

const Index = () => (
  <div>
    <Link href="/about">
      <a>About Page</a>
    </Link>
    &nbsp;
    <Link href="/login">
      <a>Login Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

간단하게 만드는지라 a태그 사이의 간격을 위해 &nbsp;를 사용하였다. 실제로 만들 땐 더 신경써서 만들도록 하자... 아무튼 여기까지 입력을 마치면 다음과 같은 메인화면을 확인할 수 있다.



Login Page를 누르면 우리가 작성하였던 pages/login/index.js의 내용이 출력된다. 아래와 같이 말이다.



자, 이제 감이 오지 않는가? 이제 당신은 Login페이지에서만 쓰이는 컴포넌트들을 여기저기 난자해놓을 필요 없이 login디렉토리 안에 작성하고 이 안에서만 갖고 놀면 된다. 간단한 예를 만들어보자. 우리가 만든 pages/login/디렉토리에 components디렉토리를 생성하고 요소 하나를 만들자.

// pages/login/components/LoginComponent.js

export default () => (
  <div>
    <p>This is Login Component!!!!!</p>
  </div>
);

이제 login/index.js에 위 컴포넌트를 추가하자.

// pages/login/index.js
import LoginComponent from './components/LoginComponent';

export default () => (
  <div>
    <LoginComponent/>
    <p>This is the login page</p>
  </div>
);

여기까지 완료했으면 다음과 같은 화면을 만날 수 있다.


짠~


이것으로 디렉토리를 어떻게 구성해야할지 어느정도 감이 올 것이다. 각 요소별로 Component디렉토리와 함께 scss, sass, 혹은 css파일 등 스타일링 파일을 함께 위치시키고 관리한다면 아주아주 직관적이고 유지보수가 쉬운 디렉토리 트리구조를 만들 수 있을 것이다. 여기까지 완료했을 때의 디렉토리 구조는 다음과 같다.



3 Comments
  • 프로필사진 천명기 2019.08.21 01:38 안녕하세요. 검색하다가 들어와서 글보고 질문한번 드려봅니다.

    이글의 결론 대로 디렉토리를 만들면 결과 적으로
    /login/components/LoginComponent
    라는 path가 만들어졌습니다.
    http://localhost:3000/login/components/LoginComponent 이렇게 url이 만들어진다는 거죠.

    심지어 같은 경로에 "test.js"를 만들고 "export default 'test';" 구문을 넣고
    http://localhost:3000/login/components/test 이 주소로 들어가 봤습니다.

    그러니까 흰바탕에 "test" 라는 텍스트가 뜨더라구요.
    pages 하위로는 뭘 만들어도 js 또는 jsx로 만들었다면 page가 될 가능성이 있다고 봐야 할것 같습니다.

    제 예기가 틀렸다 생각 되시면 답변 부탁드립니다.

    yikl1004@gmail.com
  • 프로필사진 Favicon of https://this-programmer.com 디스 프로그래머 2019.08.21 12:13 신고 확인해보니 정말 그런 현상이 확인되네요. react강좌와 next.js튜토리얼 등 이것저것을 참고하여 고안해낸 방법이었는데 이런 허점이 있었네요. 알려주셔서 감사합니다. 해당 내용을 글 윗단에 추가하겠습니다.

    해당현상을 방지하기 위해선 components디렉터리를 pages가 아닌 루트폴더에 위치시키든가 혹은 server.js에서 직접적인 라우팅을 방지시키는 등의 조치가 필요할 것 같네요. 다시한번 감사드립니다.
  • 프로필사진 test 2019.12.09 00:33 component는 보통 root 쪽에 위치시켜놓는것 같네요 ..
댓글쓰기 폼