[MGS 3기 - 32일차] Next.js 사용법

박철연·2022년 5월 28일
0

MGS STFE 3기

목록 보기
29/35

저번 글에서는 Next.js의 이론적 배경에 대해 살펴보았고, 오늘은 Next.js로 프로젝트를 구성할 때 기본적으로 알아두어야 할 부분을 정리했습니다.

Next.js 사용해보기

Next.js 프로젝트 구성

React 기반의 프로젝트를 만들때 흔히들 사용하는 방법이 Create-React-App입니다. 간편하게 사전 프로젝트 설정을 할 수 있어 널리 사용되는 방법이죠.

Next.js도 CRA와 같은 방식으로 가능합니다.

$ npx create-next-app [프로젝트 이름]

CRA와 마찬가지로, 해당 명령어로 Next.js 프로젝트를 위한 사전 설정이 모두 제공됩니다.

TypeScript, SASS는 설치와 동시에 적용됩니다. 뿐만 아니라 기본적으로 ES6 문법이 지원되고, auto-prefix가 적용되어 있습니다.

Routing

React에서는 React-router-dom의 도움을 받아 라우팅을 진행합니다. 그래서 Routes나 Route 등의 패키지 컴포넌트들을 제대로 작성하는 것이 중요합니다.

하지만 Next.js에서는 라우팅을 위해 매우 직관적인 수단을 제공합니다. 개인적으로 React-router-dom을 사용하는 데 애를 먹은 기억이 있어서 가장 인상적으로 다가온 부분입니다.

/.next
/pages
  ㄴ-- index.jsx
  ㄴ-- pageOne.jsx
/public
/styles

Next.js에서는 놀랍게도 pages라는 폴더안에 넣어준 jsx 파일에 대해 자동으로 라우팅을 구성해줍니다.

위와 같은 파일 구조를 가진 프로젝는 개발 서버에서 실행했을 때, url 뒤에 '/pageOne'이라는 텍스트를 추가해주면 알아서 pageOne에 해당하는 라우팅을 만들어줍니다.

물론 index.jsx 파일에 대해서는 최초 '/'에 해당하는 경로에 라우팅을 잡아줍니다.

뿐만 아니라, Link를 통해 정적 라우팅도 가능합니다.

<Link href="/pageOne">
  <a>move to pageOne</a>
</Link>

아래처럼, 파일명을 조작하여 동적 라우팅도 할 수 있습니다.

/.next
/pages
  ㄴ-- index.jsx
  ㄴ-- /animal
         ㄴ-- [name].jsx
/public
/styles

위와 같은 파일 구조를 만들면, 'animal/dogs'와 같은 식으로 동적 라우팅을 자동으로 완성할 수 있습니다. 라우팅을 매우 손쉽게 할 수 있게 되는 것이죠.

Next.js와 CSS

Next.js에서도 module.css를 사용할 수 있습니다. 당연히 해당 jsx 파일의 이름에 .module.css를 붙여서 module css를 지정해줄 수 있습니다.

만약 전역에 영향을 미치는 css 파일을 만들고 싶을 때에는, pages 안의 _app.js에 module css가 아닌 css 파일을 불러오면 되겠습니다.

// index.module.css
.title { text-align: center; transition: 100ms ease-in background; } 
.title:hover { background: #ccc; }

//index.js
import styles from './index.module.css';

export default function Home() {
  return(
  <>
  <h1 className={styles.title}></h1>
</>
)
};

실제 적용 방법은 리액트와 비슷합니다. 위와 같이 styles라는 이름으로 import한 뒤, 선택자에 맞게 리액트 엘리먼트를 작성하면 되겠습니다.

profile
Frontend Developer

0개의 댓글