Next.js 프로젝트 시작하기

1. Node.js 설치

먼저 Node.js가 설치하고 나면 커맨드 명령어로 Next.js 프로젝트를 생성할 수 있다.Node.js 공식 웹사이트 (https://nodejs.org/) 에서 LTS(Long Term Support) 버전을 다운로드하여 설치한다.

2. npx를 이용하여 Next.js 앱을 생성한다.

이름 입력 후 설정 관련 내용이 나오는데 잘 모르면 기본 설정으로 해도 무관하다.
npx create-next-app@latest my-project

3. 프로젝트로 이동 후 서버 실행

• 프로젝트 이동 : cd my-project
• 서버 실행 : npm run dev

이렇게 서버를 실행해주면 http://localhost:3000 로 접속해 초기 화면을 확인할 수 있다.

문구를 보면 알 수 있듯이 app/page.js 에 있는 화면이 출력되며 해당 파일 수정 시 내가 만든 UI가 출력된다.

4. Next.js 라우팅

Next.js는 파일 기반 라우팅 시스템을 이용하기 때문에 폴더 구조가 URL과 1:1로 매핑된다.

기본 라우팅

그래서 기본적으로 app 폴더 밑에 만든 디렉토리가 곧 URL 경로가 되기 때문에
해당 폴더 안에 반드시 page.js (또는 page.tsx)가 있어야 한다.

app/
 ├─ page.js               → http://localhost:3000/ (루트 페이지)
 ├─ dashboard/
 │   └─ page.js           → http://localhost:3000/dashboard
 ├─ about/
 │   └─ page.js           → http://localhost:3000/about

중첩 라우팅

폴더 안에 또 폴더를 넣으면 그대로 URL이 깊어진다.
/dashboard/settings 접속 시 settings 화면 표시

app/
 ├─ dashboard/
 │   ├─ page.js               → /dashboard
 │   ├─ settings/
 │   │   └─ page.js           → /dashboard/settings
 │   └─ users/
 │       └─ page.js           → /dashboard/users

동적 라우팅

[폴더명] 을 쓰면 동적 파라미터를 받을 수 있다.

app/
 ├─ blog/
 │   ├─ page.js                 → /blog
 │   └─ [slug]/
 │       └─ page.js             → /blog/1, /blog/hello, /blog/nextjs

export default function BlogPost({ params }) {
  return <h1>My Post: {params.slug}</h1>;
}

캐치올 라우팅

여러 경로를 한 번에 처리하고 싶을 때는 캐치올 라우팅을 사용해주면 된다.
경로 파라미터가 없어도 동작하도록 하려면 [[...slug]] 사용한다.

app/
 ├─ docs/
 │   └─ [...slug]/
 │       └─ page.js             → /docs/a, /docs/a/b, /docs/a/b/c

export default function DocsPage({ params }) {
  return (
    <div>
      <h1>Docs</h1>
      <p>경로 파라미터: {JSON.stringify(params.slug)}</p>
    </div>
  );
}

5. css 설정하기

• CSS Modules : CSS를 파일 단위로 모듈화하여 클래스 이름이 해당 컴포넌트 내부에서만 유효하게 됨
  - 전역 클래스 이름 충돌 방지 (.button이 여러 곳에 있어도 자동으로 고유 이름으로 변환됨)

.btn {
  background: blue;
  color: white;
}

import styles from './Button.module.css';
export default function Button() {
  return <button className={styles.btn}>Click</button>;
}

• Global CSS : 프로젝트 전체에 적용되는 전역 스타일로, 모든 페이지에 공통 적용되는 스타일을 관리할 수 있다.
  - 규모가 커질수록 클래스 충돌, 스타일 우선순위 관리가 어려워 진다.

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

• Tailwind CSS : 유틸리티 우선 CSS 프레임워크로, 유틸리티 클래스를 조합하여 빠르게 커스텀 CSS를 설정할 수 있다.

<button className="bg-blue-500 text-white px-4 py-2 rounded">
  Click
</button>

• Sass : 변수, 중첩 규칙, 믹스인 등의 기능을 제공하여 현재 널리 사용되는 CSS 전처리기
  - 유지보수가 쉬워지나 빌드 과정이 필요함 (컴파일 후 css로 변환)
  • css에서는 변수를 못쓰지만 Sass에서는 가능하고, 구조적으로 작성이 가능함

$primary: #3490dc;

.btn {
  background: $primary;
  &:hover {
    background: darken($primary, 10%);
  }
}

• CSS-in-JS: JavaScript 컴포넌트 내에 CSS를 직접 삽입하여 동적으로 스타일을 적용할 수 있다

import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  border-radius: 5px;
`;

export default function App() {
  return <Button>Click</Button>;
}