Next.js 시작하기 - (1) Project setting, Routing

FE/Next.js

Next.js 시작하기 - (1) Project setting, Routing

SH_Roh 2022. 9. 4. 19:52

Series

Next.js 시작하기 - (1) Project setting, Routing

Next.js 시작하기 - (2) CSS-in-JS, Custom App

Next.js 시작하기 - (3) Pre-rendering, Data Fetching

React 공식 문서에서는 Next.js를 아래와 같이 소개하고 있다.

Next.js는 인기 있는 경량의 프레임워크로 React로 만들어진 스태틱 서버 렌더링 애플리케이션입니다. 기본적으로 스타일링과 라우팅 해결책을 가지고 있으며, 사용자가 Node.js를 서버 환경으로 사용하고 있다고 생각합니다.

이게 무슨 말인지 바로 해보면서 알아보자.

1. Project setting

프로젝트를 만들 폴더에서 아래 커맨드를 입력한다.

npx create-next-app@latest

타입스크립트를 같이 사용할 경우에는 --typescript 옵션을 뒤에 붙여주면 된다.

npx create-next-app@latest --typescript

설치가 완료되면 아래와 같이 기본적으로 디렉토리가 만들어진다.

ESLint와 ts config가 기본적으로 세팅되어있는 상태로 만들어진다. ~~(감격..)~~

아래 커맨드를 입력하면 바로 실행해볼 수 있다.

npm run dev

- 참고로 기본적인 스크립트는 아래와 같이 세팅되어 있다. (현재는 development mode에서 실행하는 것이기 때문에 dev 스크립트를 실행해주면 된다.)

dev - Runs 'next dev' to start Next.js in development mode
build - Runs 'next build' to build the application for production usage
start - Runs 'next start' to start a Next.js production server
lint - Runs 'next lint' to set up Next.js' built-in ESLint configuration

2. Routing

처음부터 해보기 위해서 pages 폴더 내에 있는 파일들을 모두 삭제한 후, index.tsx 파일을 하나 만들어준다.

pages/index.tsx

const Home = () => {
  return <div>Home</div>;
};

export default Home;

index라는 이름의 파일의 내용들은 루트경로에 들어가면 보여진다.

혹시나 하고 /index에 들어가보면 404 페이지가 뜬다. (Next.js는 기본적인 not found 페이지도 제공한다..!!)

pages/about.tsx

const About = () => {
  return <div>About</div>;
};

export default About;

Next.js는 기본적인 라우팅을 제공하기 때문에 기존에 리액트에서 하는 것 처럼 따로 react-router-dom같은 패키지를 설치할 필요없이 pages 폴더 안에 파일만 만들어 주면 파일명과 같은 주소로 라우팅을 해준다.

그리고 간단한 네비게이션 바를 만들어보자.

컴포넌트는 components라는 이름의 폴더 안에 만들어주면 된다.

components/GNB.tsx

import Link from "next/link";

const GNB = () => {
  return (
    <nav>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/about">
        <a>about</a>
      </Link>
    </nav>
  );
};

export default GNB;

리액트에서 앱 내에서 페이지를 navigate할 때 react-router-dom의 Link를 쓰는 것처럼 넥스트에도 이러한 컴포넌트가 존재한다.

리액트에서 Link태그를 이용할 때는 Link 안에 바로 텍스트 내용을 써줬지만 넥스트에서 Link를 이용할 때는 a 태그로 감싸서 넣어줘야 한다. (Next 공식문서에서도 이렇게 나와있다.)

막상 사용해보면 a 태그로 텍스트를 감싸지 않고 그대로 Link 태그 안에 넣어도 잘 작동하기는 한다. (Next.js Link 태그안에 a tag를 안넣어도 왜 작동될까?)

그렇지만 Next의 Link에는 inline style이나 className이 적용되지 않기 때문에 Link 안에 a 태그를 넣어서 작업을 해주는 것이 좋다.

Link 컴포넌트를 이용하지 않고 a 태그만 쓸 경우 이렇게 경고가 뜬다.

그리고 아까 만들어뒀던 페이지들에 지금 만든 GNB 컴포넌트를 추가해주면 잘 작동하는 것을 확인할 수 있다.

import GNB from "../components/GNB";

const Home = () => {
  return (
    <div>
      <GNB />
      <h1>Home</h1>
    </div>
  );
};

export default Home;

이번엔 next 프로젝트 설치와 간단한 라우팅에 대해 다뤄보았다.

다음 포스트에서는 Next.js에서의 css 스타일링과 App 컴포넌트를 사용해 컴포넌트를 초기화하는 방법에 대해 다뤄보겠다.

Next.js 시작하기 - (2) CSS-in-JS, Custom App

티스토리