[Next.js] 1. Next.js의 기본

최익준·2023년 3월 18일
1

Next.js

목록 보기
2/7

1. pages


Next.js프로젝트는 create-next-app 명령어로 생성할 수 있으며 자동으로 폴더 구조가 생긴다.

기본적인 사용 방법은 다음과 같다.

  1. pages 폴더는 라우터 기능을 하며, pages에 파일을 생성하면 파일명이 url 주소가 된다. (이 때 컴포넌트 이름은 중요하지 않다.)
  2. index.js은 홈 페이지를 나타낸다.
  3. export default를 통해서만 컴포넌트를 내보내야 한다.
  4. JSX를 사용할 때 React를 import할 필요가 없다.
  5. pages 하위에 404라는 이름의 파일을 만들면 404페이지 템플릿으로 사용할 수 있다.

2. Navigate


Navigate 기능은 Link를 통해 구현할 수 있다.

pages/NavBar.tsx

import Link from "next/link";

export default function NavBar() {
  return (
    <nav>
      <Link href="/">
        Home
      </Link>
      <Link href="/about">
        About
      </Link>
    </nav>
  );
}

Next.js 12 까지는 <Link>의 자식 태그로 <a>를 작성해야 했다. 하지만 13버전에서는 스타일을 추가하거나 클래스 이름을 지정하기 위해 따로 <a>를 필요로 하지 않는다.

3. Router


Next.js에서는 라우터 훅인 useRouter를 제공한다.
사용법은 다음과 같다.

import Link from "next/link";
import { useRouter } from "next/router";

export default function NavBar() {
  const router = useRouter();
  return (
    <nav>
      <Link href="/">
        Home
      </Link>
      <Link href="/about">
        About
      </Link>
    </nav>
  );
}

이 때 console.log(router);를 통해 router를 출력하면 라우팅과 관련된 속성을 가진 객체를 확인할 수 있다.
(예 : router.pathname을 통해 현재 어느 페이지에 있는지 확인할 수 있다.)

4. Styling


1) 태그에 stlye 속성 추가하기

스타일을 적용할 수 있는 가장 간단한 방법이라고 할 수 있다.
하지만 보기 좋지 않다는 단점이 존재한다.

...
      <Link style={{ color : router.pathname === "/" ? "red" : "blue" }}>
        Home
      </Link>
      <Link style={{ color : router.pathname === "/about" ? "red" : "blue" }}>
        Home
      </Link>
...

2) module 이용하기

css파일을 직접 작성한 뒤 모듈 형태로 불러와 사용하는 방법을 말한다.

실제 보여지는 html 코드에서 클래스명이 무작위 텍스트로 설정되기 때문에 충돌의 가능성을 없앤다는 장점이 있으며, 컴포넌트 별로 각각 module.css파일을 갖기 때문에 다른 컴포넌트 끼리는 동일한 클래스 이름을 사용할 수 있다.

사용 방법은 다음과 같다.

  • module.css파일을 생성한다.
  • css 파일에 작성한 클래스 이름을 그대로 쓰는 것이 아닌 객체에서 속성을 불러오는 형식으로 적는다.
  • 여러 개의 클래스를 적용할 때는 문자열로 적용시켜야한다.

NavBar.module.css

.link {
  text-decoration: none;
}
.active {
  color: tomato;
}

NavBar.tsx

import Link from "next/link";
import { useRouter } from "next/router";
import styles from "./NavBar.module.css";

export default function NavBar() {
  const router = useRouter();

  return (
    <nav>
      <Link href="/" className={[styles.link, router.pathname === "/" ? styles.active : ""].join(" ")}>
        Home
      </Link>
      <Link href="/about" className={[styles.link, router.pathname === "/about" ? styles.active : ""].join(" ")}>
        About
      </Link>
    </nav>
  );
}

3) styled jsx

Next.js의 고유한 방법으로, 다른 파일을 import할 필요 없이 즉각적으로 상요할 수 있다.

파일별로 각각 독립적으로 동작하므로 서로 다른 컴포넌트 사이에서는 같은 클래스 이름을 사용할 수 있다. 또한 module과 마찬가지로 클래스명이 무작위 텍스트로 설정되기 때문에 충돌의 가능성이 없다.

사용 방법은 다음과 같다.

  • <style jsx></style>을 작성하고 그 사이에 css코드를 작성한다.
  • 태그 사이에는 jsx형태로 css를 작성해야함을 잊지말자.
import Link from 'next/link';
import { useRouter } from 'next/router';

export default function NavBar() {
  const router = useRouter();
  return (
    <nav>
      <Link href='/'>
        <a className={router.pathname === '/' && 'active'}>Home</a>
      </Link>
      <Link href='/about'>
        <a className={router.pathname === '/about' && 'active'}>About</a>
      </Link>
      <style jsx>{`
        nav {
          background-color: tomato;
        }
        a {
          text-decoration: none;
        }
        .active {
          color: yellow;
        }
      `}</style>
    </nav>
  );
}

5. Custom App Component


Next.js에는 모든 페이지를 렌더링할 수 있도록 해주는 기본 컴포넌트가 존재한다.
일종의 템플릿과 같은 존재로, 모든 페이지의 렌더링에 앞서 확인하는 파일이다.

pages/_app.tsx

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />);
}
  • 이름은 반드시 _app.tsx이어야 한다.
  • 모든 페이지에 들어가야 하는 컴포넌트를 넣거나, 글로벌 스타일을 지정할 수 있다.
  • 이 페이지에서만 일반적인 css파일을 import할 수 있다.
import NavBar from '../components/NavBar';
import '../styles/globals.css'; //여기서만 가능

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
      <style jsx gloabal>{`
        a {
          text-decoration: none;
        }
      `}</style>
    </>
  );
}

style jsx로 글로벌 스타일을 지정하기 위해서는 global속성을 써주기만 하면 된다. 단, _app.tsx 파일이 아닌 다른 페이지나 컴포넌트에서 사용하는 경우, 부모-자식 간의 관계에서만 성립할 뿐 글로벌 스타일로 적용되지 않는다.

profile
공부하는 개발자 꿈나무

0개의 댓글