반응형
1. Pages
react 컴포넌트를 export하는 파일들을 pages폴더 안에 넣어주면, 파일 이름으로 url을 만들어 자동으로 라우팅 해준다. 안의 function이름은 파일이름과 달라도 된다.
특징
- 파일 이름이 url이 된다.
- export default function ~ 형태로 컴포넌트 작성해야함.
- url에 pages폴더에 없는 파일이 보여줘도 자동으로 404페이지를 보여준다.
2. Routing
보통 페이지간 이동은 a 태그를 사용하지만, next.js에서는 사용하지 않는다.
a 태그를 사용하면 처음 페이지 진입시 번들파일을 받고, a태그에 의해 라우팅 되면서 다시 번들파일을 받기 때문이다. 그래서 next에서 페이지간 이동에는 모두 Link 태그를 사용한다.
3. CSS Modules
import Link from "next/link";
import { useRouter } from "next/router";
export default function NavBar() {
const router = useRouter();
console.log(router);
return (
<nav>
<Link
href="/"
style={{ color: router.pathname === "/" ? "red" : "blue" }}
>
Home
</Link>
<Link
href="/about"
style={{ color: router.pathname === "/about" ? "red" : "blue" }}
>
About
</Link>
</nav>
);
}
반응형
- 위와 같이 style을 주어 바로 적용하는 경우가 있다.
- className에 여러 클래스를 적용하고 싶다면, ${}로 해서 묶어준다.
- 배열로 하여 묶어준 다음에 join해준다.
<Link href="/" className={`${styles.link} ${ router.pathname === "/" ? styles.active : "" }`} > Home </Link> <Link href="/about" className={[ styles.link, router.pathname === "/about" ? styles.active : "", ].join(" ")} > - {폴더이름}.module.css 파일을 만들어 해당 파일에 import를 한다.
- 그럴 경우, import된 이름과 해당 스타일 이름을 적용한다.
// NavBar.tsx import styles from "./NavBar.module.css"; <nav className={styles.nav}> </nav> - // NavBar.module.css .nav { display: flex; justify-content: space-between; background-color: skyblue; }
- 그럴 경우, import된 이름과 해당 스타일 이름을 적용한다.
- 아래와 같이 style jsx로 만들어 파일에 적용시켜준다. 이는 내부에만 적용되므로 외부로 적용될려면 따로 파일을 작성해줘야 한다.
<style jsx>{`
nav {
background-color: tomato;
}
`}</style>
4. Custom App
_app.js
- 가장 먼저 실행되는 컴포넌트이다.
- pages폴더에 생성하여 사용한다.
- 공통 레이아웃, 글로벌 css 적용에 사용한다.
- <style jsx global>을 만들어서 사용한다.
- global.css를 _app.js에서 사용가능하다. global.css파일은 styles폴더에 존재한다.
import "../styles/globals.css"; - component 속성값은 서버에 요청한 페이지가 된다. 그래서 터미널창에 보면 페이지 이동할 때 해당 컴포넌트를 가르킨다.
추가)
Next.js을 만들 때 _app.js와 _document.js파일이 만들어져 있다.
_document.js
_document는 _app 다음에 실행되며, 공통적으로 활용할 <head>나 <body> 태그 안에 들어갈 내용들을 커스텀할때 활용한다.
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
1. _document를 작성할 때 Document 클래스를 상속받는 클래스 컴포넌트로 작성해야만 하며, 렌더 함수는 꼭 <Html>, <Head>, <Main>, <NextScript> 요소를 리턴해야 한다.
2. _document에서 사용하는 <Head> 태그는 next/document 모듈에서 불러와야한다.
_document의 <Head> 태그에는 모든 문서에 공통적으로 적용될 내용이 들어가야 한다.
반응형
