12 버전 기준으로 정리한 내용이므로 주의 13 버전은 일부 바뀐 내용이 있습니다. 개념만 참고 추천
nextjs 기본 및 페이지 개념 에서 이어지는 내용
css 관련
css-module, sass, css in js 등등 지원함
Adding a Global Stylesheet
pages/_app.js 에 style 을 적용하면 됨
Import styles from node_modules
v9.5.4 부터 node_modules 에 있는 css 파일 가져와서 적용 가능 ex) bootstrap, antd
import 'bootstrap/dist/css/bootstrap.css'layout
레이아웃 감싸는 것도 따로 만들어 둠 꽤 편리함
13 버전에는 layout 파일을 생성해서 적용 가능 참고
// components/layout.js
import Navbar from './navbar'
import Footer from './footer'
export default function Layout({ children }) {
return (
<>
<Navbar />
<main>{children}</main>
<Footer />
</>
)
}// pages/_app.js
import Layout from '../components/layout'
export default function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}Per-Page Layouts
multiple 한 레이아웃을 원한다면 getLayout 추가하면 된다Page.getLayout 을 추가하고 Page() 를 export _app.js 에서 Component.getLayout 로 접근 가능
※ 중요 ※layout 은 페이지가 아니라 컴포넌트에 불과함 그러므로 useEffect , SWR 같은 라이브러리는 사용가능하고 페이지에서 활용하던 getStaticProps , getServerSideProps 같은 메서드는 활용불가하다.
// pages/index.js
import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'
export default function Page() {
return {
/** Your content */
}
}
Page.getLayout = function getLayout(page) {
return (
<Layout>
<NestedLayout>{page}</NestedLayout>
</Layout>
)
}//pages/_app.js
export default function MyApp({ Component, pageProps }) {
// 레이아웃 더있으면 그거 쓰고 없으면 그대로
const getLayout = Component.getLayout || ((page) => page)
return getLayout(<Component {...pageProps} />)
}Image Component
이미지 관련 최적화를 위해 이미지 컴포넌트를 제공함 확장한 버전
※ svg 파일도 제한적으로 사용 가능하다.
_사용성에 대해서는 좋은점도 있고 불편한점 도 있는듯 이미지 최적화 생각하면 고려해볼만 한 듯 _
import Image from 'next/image'
import Image from 'next/future/image' // 기존 img 태그와 비슷함import 해서 쓰는 방식
import Image from 'next/image'
import profilePic from '../public/me.png'
function Home() {
return (
<>
<h1>My Homepage</h1>
<Image
src={profilePic}
alt="Picture of the author"
// width={500} 자동 제공
// height={500} 자동 제공
// blurDataURL="data:..." 자동 제공
// placeholder="blur" // Optional blur-up while loading
/>
<p>Welcome to my homepage!</p>
</>
)
}src 에 url 로 줄때 width 와 height 꼭 적어줘야함
import Image from 'next/image'
export default function Home() {
return (
<>
<h1>My Homepage</h1>
<Image
src="/me.png"
alt="Picture of the author"
width={500}
height={500}
/>
<p>Welcome to my homepage!</p>
</>
)
}Script Component
기존 script 태그에서 발전해 로딩 속도 최적화 및 영향을 최소화
import Script from 'next/script'
export default function Home() {
return (
<>
<Script src="https://www.google-analytics.com/analytics.js" />
</>
)
}Font Optimization
_document 에 폰트를 주는게 개별페이지에 주는거보다 좋다
// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}next lint
v11.0.0 부터 ESLint 를 활용할 수 있게 지원해주는 스크립트가 추가됨
"scripts": {
"lint": "next lint"
}eslint 관련 설정파일에 따라 실행되고 없으면 설치도 해주는듯 하다
에러를 잡기 위해 원할 때 next lint 사용 할 수 있다.esLint 가 설정되면 모든 빌드(다음 빌드) 동안 자동으로 실행된다
오류는 빌드에 실패하지만 경고는 실패하지 않는다.
설정 관련: (https://nextjs.org/docs/basic-features/eslint#eslint-config)
플러그인 관련: (https://nextjs.org/docs/basic-features/eslint#eslint-plugin)
shallow Routing
데이터 패치 없이 URL 을 바꾸는 것
router.push('/?counter=10', undefined, { shallow: true })'nextjs' 카테고리의 다른 글
| 커스텀 crousel (nextjs + ts + styled-components) (0) | 2023.04.20 |
|---|---|
| Next.js 에 <Link /> 는 무엇인가 (0) | 2023.04.06 |
| Next.js getServerSideProps 에서 페이지 이동 방법 (0) | 2023.03.31 |
| nextjs 기본 및 페이지 개념 (0) | 2023.02.02 |
| next-redux-wrapper 이해하기 (0) | 2023.02.02 |
