Next.js 정리(with React)

Next.js: React기반 Framework, Server Side Rendering에 장점이 있음

설치 방법

npx create-next-app next-tutorial(설치 폴더 이름)
# or
yarn create next-app next-tutorial(설치 폴더 이름)
# Manual
npm install next react react-dom
# or
yarn add react react-dom next

create next-app설치

1. 컴파일과 번들링이 자동(webpack과 babel)

- npm run dev // yarn run dev

2. 자동 리프레쉬 기능으로 바로 반영

3. 서버사이드 렌더링(개발자 모드에서 소스가 보임)

4. 스태틱 파일을 지원(public 폴더 활용)

5. pages폴더로 분기

6. [id].js라면

Global - CSS적용 방법

pages/_app.js에 import 시켜야함(모든 페이지 다 적용)

import '../styles/globals.css'
 
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
 
export default MyApp
cs

Semantic(React용 부트스트랩같은거)

https://react.semantic-ui.com/

yarn add semantic-ui-react semantic-ui-css
## Or NPM
npm install semantic-ui-react semantic-ui-css

pages/_app.js에 import

import 'semantic-ui-css/semantic.min.css'

_app.js 활용

페이지 전환시 레이아웃을 유지할 수 있음

페이지 전환시 상태값을 유지할 수 있음

componentDidCatch를 이용해서 커스텀 에러 핸들링을 할 수 있음

추가적인 데이터를 페이지로 주입이 가능

글로벌 CSS를 선언하는 곳

_document.js활용

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

https://nextjs.org/docs/advanced-features/custom-document

Next.js페이지를 커스터마이징 함(마크업 정의를 건너 뛰므로)

서버에서만 렌더링 됨 onclick, css작동이 안함

API쓰기 위해 Axios설치

npm i axios
yarn add axios
cs

기억하지 못해 남겨두기

이 블로그 검색