dev_eun

[Next.js] 시작하기① Routing, Styling 본문

Web/Next.js

[Next.js] 시작하기① Routing, Styling

_eun 2021. 12. 22. 22:51

Page끼리 이동하기(Navigate)

Pages

/pages 디렉토리에 있는 파일로부터 export된 React Component가 페이지가 된다.

  • pages/index.js => / route
  • pages/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} />
}
728x90
저작자표시 비영리 변경금지

'Web > Next.js' 카테고리의 다른 글

[Next.js] 시작하기③ Routing  (0) 2021.12.23
[Next.js] 시작하기② Pre-rendering, Data Fetching  (0) 2021.12.23
'Web/Next.js' Related Articles more