dev_eun
[Next.js] 시작하기① Routing, Styling 본문
Page끼리 이동하기(Navigate)
Pages
/pages
디렉토리에 있는 파일로부터 export된 React Component가 페이지가 된다.
pages/index.js
=>/
routepages/posts/first-post.js
=>/posts/first-post
route
Link
Link
컴포넌트 안에는 a
태그가 가장 상위에 있어야 한다.href
속성을 사용하여 다른 페이지로 라우팅할 수 있다.
만약 내부 라우트가 아닌 외부 페이지로 링크하고 싶다면 Link
가 아닌 a
태그를 사용한다.
그리고 className
같은 속성을 사용해야 할 경우 Link
가 아닌 a
태그에 추가해야 한다.
import Link from 'next/link'
<Link href="/posts/first-post">
<a>this page!</a>
</Link>
Client-side Navigation
Next.js는 코드 스플릿을 자동으로 하기 때문에, 각 페이지들은 자신이 필요한 것들만 로드한다. 그렇기 때문에 많은 페이지를 가지고 있어도 빠르게 로드할 수 있다. 또, 하나의 페이지에서 에러가 나더라도 각 페이지는 독립적이기 때문에 다른 페이지에 영향을 끼치지 않는다.
prefetches
그리고 Link
컴포넌트가 브라우저 뷰포트에 나타날 때, Next.js는 백그라운드에서 자동으로 링크된 페이지의 코드를 prefetch한다.
그래서 유저가 해당 링크를 클릭했을 때는, 그 페이지에 대한 코드가 이미 백그라운드에서 로그되어 있기 때문에 바로 접근할 수 있다.
Assets, Metadata, and CSS
Images
<Img>
컴포넌트는 기본적으로 이미지 optimization을 제공한다. 그래서 리사이징, 옵티마이징을 자동으로 해준다.
게다가 빌드 타임에 이미지를 최적화하는 것이 아니라, 필요할 때만(사용자가 요청했을 때)하기 때문에 이미지가 빌드 타임에 영향을 주지 않는다.
Metadata
next/head
모듈의 Head
컴포넌트는 head
메타 태그를 수정할 수 있게 해준다.
import Head from 'next/head'
export default function FirstPost() {
return (
<>
<Head>
<title>First Post</title>
</Head>
<h1>First Post</h1>
<h2>
<Link href="/">
<a>Back to home</a>
</Link>
</h2>
</>
)
}
브라우저 메타 태그에 title
이 추가된다.
Third-Party JavaScript
analytics, ads 등등 써드파티 js를 추가하려면 script
태그를 사용하면 된다.next/script
모듈의 Script
컴포넌트를 사용하면 추가적인 스크립트를 패치하고 실행할 때 최적화해준다.
import Script from 'next/script'
export default function FirstPost() {
return (
<>
<Head>
<title>First Post</title>
</Head>
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="lazyOnload"
onLoad={() =>
console.log(`script loaded correctly, window.FB has been populated`)
}
/>
<h1>First Post</h1>
<h2>
<Link href="/">
<a>Back to home</a>
</Link>
</h2>
</>
)
}
CSS Styling
<style jsx>{`
…
`}</style>
위의 스타일을 styled-jsx 라고 말한다. 이건 CSS-in-JS 라이브러리이다.
Layout Component
여러 페이지와 공유할 수 있는 Layout 컴포넌트를 만들 수 있다./components/layout.js
파일을 생성한다.
children prop을 이용하여 Layout 컴포넌트 생성
export default function Layout({ children }) {
return <div>{children}</div>
}
CSS Modules
components/layout.modul.css
파일로 css 모듈을 import할 수 있다. 이름은 무조건 .module.css
로 끝나야 한다.
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}
이 있다면, styles
로 import하여 styles.container
를 클래스 이름으로 사용할 수 있다.
<div className={styles.container}>{children}</div>
Global Styles
pages/_app.js
를 수정하면 재실행해야 한다.
global css는 pages/_app.js
에 import될 때만 적용된다.(당연한 말씀. 왜냐면 _app.js가 앱이 시작되는 포인트니까)styles/global.css
에 글로벌 css를 정의한 후, pages/_app.js
에 css를 import하면 글로벌로 스타일을 적용할 수 있다.
import '../styles/global.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}
'Web > Next.js' 카테고리의 다른 글
[Next.js] 시작하기③ Routing (0) | 2021.12.23 |
---|---|
[Next.js] 시작하기② Pre-rendering, Data Fetching (0) | 2021.12.23 |