NextJS 기본 규칙

NextJS는 리액트를 좀 더 성능 좋게 사용할 수 있게 하는 프레임워크이므로 폴더 구조나 코드들에 제약이 있다. 따라서 NextJS를 사용하면서 지켜야할 기본적인 규칙들을 설명하고자 한다.

Pages

1. NextJS에서는 특정 페이지를 만들기 위해 pages라는 폴더안에 js, tsx 파일을 만들어야한다. 이 때 파일명이 곧 라우팅 주소가 되며 페이지를 구성하기 위한 함수명은 자유롭게 지어도 된다.

2. 컴포넌트는 무조건 export default를 통해 이것이 컴포넌트임을 NextJS에게 알려야한다.

// O
export default function About() {
  return <div>About Page</div>
}
// X
function About() {
  return <div>About Page</div>
}

3. 애플리케이션의 홈은 index.tsx에 작성한다.

// index.tsx
export default function Home() {
  return <div>Hello World</div>
}

Routing

두가지 방법이 있다.

1. 라우팅시에는 next/link에서 제공하는 <Link /> 컴포넌트를 사용한다.

<Link href="/">
	main
</Link>

// about 페이지 이동
<Link href="/about">
	about
</Link>

💡 링크에 스타일을 입히거나 외부 링크로 이동이 필요한 경우에는 내부에 <a /> 앵커 태그를 사용한다.

passHref는 Link의 href속성값을 하위컴포넌트로 전달하는 역할을 한다. 아래에서는 <a>외부 링크</a>에 속성값을 전달하게된다.

<Link href="/">
<a className="styled-anchor">main</a>
</Link>

// 외부 링크 이동
<Link href="https://www.naver.com/" passHref>
	<a target="_blank" rel="noopener noreferrer">
		외부링크
	</a>
</Link>

2. next의 useRouter훅을 이용한다.

const router = useRouter();

const onClick = (id: number) => {
  router.push(`/movies/${id}`)
}

Global

만약 모든 페이지에 공통적으로 적용됐으면 하는 컴포넌트 (예를 들어 네비게이션바)나 스타일, 기능 등이 있으면 pages폴더 내부에 _app.tsx파일을 만들어 이 안에서 작성하면 된다.

import NavBar from "@/components/navbar";
// Custom App (_app.tsx)에서는 css파일을 적용할 수 있다.
import "@/styles/globals.css";
// Component와 pageProps 두 개의 인자를 받아준다.
export default function App({ Component, pageProps }) {
  return <div><NavBar /><Component {...pageProps}/></div>;
}

CSS

NextJS에서는 module.css가 아니면 .css 파일은 _app.tsx를 제외하고 그 어떤곳에서도 사용할 수 없다.