React-router-dom 에서 next.js 사용하기 - 1

Next.js 를 사용하기 시작한 가장 큰 이유는 다음과 같았습니다.

1. Server Side Rendering (SSR) 이 가능한 점.

2. react-router-dom 을 대체해 볼 수 있는 유사점.

 

이번에는 사용중 기억나던 것들을 위주로 하나씩 기록해보고자 합니다.

 

react-router-dom 에는 Link 가 있습니다.

App.js 쪽에서, 아니면 Router.js 라고 하나 파일을 만들어 둔 후에 보통 <Link> 각 연결 대상 페이지 마다 표기하죠.

 

Next.js 로는 이렇게 가능합니다. 거의 똑같지만, 차이점이 있다면 import 의 source 가 next 라는 점.

import React from 'react'
import Link from 'next/link'

class MyApp extends React.Component {
  render() {
    return (
      <div>
        <Link href="/">
          <a>Editor's Pick</a>
        </Link>
        <Link href="/cart">
          <a>Bookmark</a>
        </Link>
      </div>
    )
  }
}

 그리고 Route 로 하는 경우에도, next.js 에서는 element 를 언급하지 않는 점입니다.

import React from 'react'
import { Router } from 'next/router'
import EditorPick from './main'
import Bookmark from './cart'

class MyApp extends React.Component {
  render() {
    return (
      <Router>
        <EditorPick path="/" />
        <Bookmark path="/cart" />
      </Router>
    )
  }
}