NextJS

Next.js 튜토리얼 번역 Link

https://brunch.co.kr/@hee072794/81

---

Next.js

1. 기본적으로 서버 사이드에서 렌더링을 한다.

2. 더 빠르게 페이지를 불러오기 위해 코드 스플릿팅을 진행한다.

   (코드 스플릿팅 : 브라우저 로딩 시 모든 페이지를 로드 하지 않고, 필요한 부분만 로드)

3. 간단한 라우팅을 제공한다. (pages)

4. HMR(Hot Module Replacement)을 지원하는 WebPack 기반의 개발 환경을 제공한다.

Next.js 시작

mkdir hello-next cd hello-next

npm init -y

npm install react react-dom next

mkdir pages

★★ 모든 라우터들은 고정 네이밍인 pages 안에 들어가야 next가 인지해서 사용 가능하다. npm run dev

pages/index.js 파일 생성

const Index = () => {
   return (
      <div>
         <p>Hello Next.js</p>
      </div>
)}
export default Index

Next.js Link 라우팅

import Link from 'next/link'

코드를 통해서 Link Tag 생성 가능 (pages/about.js 생성 후)

<Link href="/about">
   <a>About Page</>
</Link>

위와 같은 코드로 링크를 설정 한 후, Anchor, Button 태그 등으로 사용 가능!

클라이언트 사이드 히스토리를 지원하므로, 뒤로가기 버튼을 누를 시, Index 페이지로 이동

하위 컴포넌트 렌더링하기

import Header from './Header'
   const Layout = (props) => (
      <div>
         <Header/>
         {props.children}
      </div>
   )
export default Layout

위와 같은 코드에서 아래와 같이 가져올 수 있습니다.

import Layout from '../components/MyLayout.js
   export default () => (
      <Layout>
         <p>Hello Next.js</p>
      </Layout>
   )

** 만약 위에 props.children을 삭제하면, Layout 엘리먼트 하위에 있는 p태그 등을 렌더링 하지 못한다. **

쿼리 문자열

<Link href={'/post?title=${props.title}'}>
   <a>{props.title}</a>
</Link>

props로 전달된, 타이틀을 가지고 쿼리 문자열로 URL이 작성 가능하다.

---

하지만 새로고침을 하면 페이지 자체 .js파일이 존재하지 않기 때문에 400 Err 코드가 발생한다!

쿼리 문자열 자체로는 사용자가 보기 어려운 문자열이기 때문에, 아래의 as를 사용한다.

as props 사용

as props를 사용하면, 클라이언트 히스토리에서 즉, 뒤로가기 버튼 후 앞으로가기 버튼을 눌렀을 때, 히스토리를 기억하도록 한다.

• 튜토리얼 5편 참조

---

위에 400 Err 코드를 해결하기 위한 방법으로 Next.js 커스텀 서버 API가 존재한다. 여기서는 테스트 Express(Node.js) 사용 https://brunch.co.kr/@hee072794/87

=====================================================================================================================

Next.js with styled-component

SSR은 서버에서 페이지마다 HTML을 미리 만들어놓고 자바스크립트 로딩이 끝나기 전에 바로 사용자들에게 화면을 보내줘서 사이트의 속도를 빠르게 한다. 그런데 CSS-in-JS를 사용한 모든 스타일은 자바스크립트에 들어가 있기 때문에 CSS가 static하게 추가되는 것이 아니라 자바스크립트에 의해 dynamic하게 추가되므로 자바스크립트가 로딩을 끝내기 전에 스타일이 적용되지 않은 HTML이 렌더링 되는 것이 문제였다.

해결방법

Next.js는 렌더링이 될 때 pages 디렉토리 안에 기본적으로 같이 렌더링 되는 컴포넌트가 있다. 이 컴포넌트를 커스터 마이징하여 위에서 언급한 문제를 해결할 수 있었다.

Next.js에서 styled-components 같은 CSS-in-JS 라이브러리에 대한 SSR을 지원하기 위해서는 , 태그를 보강할 수 있는 커스텀를 사용하여 HTML 구조를 확장해야 한다. 커스텀 는 Next.js의 /pages에 _document.js 파일을 만들어 정의할 수 있는데, _document.js는 HTML 문서로 커스텀 Document를 만들 때만 작성이 필요하며 생략된 경우 Next.js가 기본값을 사용한다.

아래 코드 참조 Next.js with Styled-component

=====================================================================================================================

Next.js with axios

모든 데이터들을 가져오기 위해서는 Next.js에서 getInitialProps라는 메소드를 설정해서 해결해야 한다. 데이터를 가져온 후 모든 컴포넌트에게 props로 사전으로 전달하기 때문에, 외부 데이터를 렌더링 가능하게 한다.