React.js 기반의 프레임워크

React의 기능을 포함 라우팅 설정을 자동화

서버 사이드 렌더링으로 React의 SEO 약점을 해결

라우팅

React는 페이지 라우팅을 직접 구현해야 함

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/board" element={<BoardPage />} />
      </Routes>
    </BrowserRouter>
  );
}

Next.js에선 파일 디렉토리 구조에 따라 자동으로 라우팅 적용

// 페이지 라우팅 방식
pages/
  index.js    // 홈페이지   
  about.js    // /about 페이지    
  contact.js  // /contact 페이지   

// 앱 라우팅 방식 (최신)
app/
  page.js         // 홈페이지 
  about/
    page.js       // /about 페이지
  contact/
    page.js       // /contact 페이지

SSR

next.js는 기본적으로 서버사이드 렌더링 방식이기 때문에 검색엔진 노출에 유리함

다만 CSR로 동작하게 만들고 싶다면 페이지 파일 최상단에 (import보다 위)

'use client'

를 작성하면 해당 페이지는 클라이언트 사이드 렌더링으로 동작하게 됨

React의 useState(), useEffect() 등의 브라우저 전용 기능을 사용하면 이것을 반드시 추가해야 함