Next.js프로젝트는 create-next-app 명령어로 생성할 수 있으며 자동으로 폴더 구조가 생긴다.
기본적인 사용 방법은 다음과 같다.
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>
를 필요로 하지 않는다.
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
을 통해 현재 어느 페이지에 있는지 확인할 수 있다.)
스타일을 적용할 수 있는 가장 간단한 방법이라고 할 수 있다.
하지만 보기 좋지 않다는 단점이 존재한다.
...
<Link style={{ color : router.pathname === "/" ? "red" : "blue" }}>
Home
</Link>
<Link style={{ color : router.pathname === "/about" ? "red" : "blue" }}>
Home
</Link>
...
css파일을 직접 작성한 뒤 모듈 형태로 불러와 사용하는 방법을 말한다.
실제 보여지는 html 코드에서 클래스명이 무작위 텍스트로 설정되기 때문에 충돌의 가능성을 없앤다는 장점이 있으며, 컴포넌트 별로 각각 module.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>
);
}
Next.js의 고유한 방법으로, 다른 파일을 import할 필요 없이 즉각적으로 상요할 수 있다.
파일별로 각각 독립적으로 동작하므로 서로 다른 컴포넌트 사이에서는 같은 클래스 이름을 사용할 수 있다. 또한 module과 마찬가지로 클래스명이 무작위 텍스트로 설정되기 때문에 충돌의 가능성이 없다.
사용 방법은 다음과 같다.
<style jsx></style>
을 작성하고 그 사이에 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>
);
}
Next.js에는 모든 페이지를 렌더링할 수 있도록 해주는 기본 컴포넌트가 존재한다.
일종의 템플릿과 같은 존재로, 모든 페이지의 렌더링에 앞서 확인하는 파일이다.
pages/_app.tsx
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />);
}
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 파일이 아닌 다른 페이지나 컴포넌트에서 사용하는 경우, 부모-자식 간의 관계에서만 성립할 뿐 글로벌 스타일로 적용되지 않는다.