1. 직관적인 라우팅 방식 (pages 폴더)

pages 폴더 내부의 파일(.js, .jsx, .ts, .tsx)이름을 기반으로 라우팅 됨

/pages/test/hi.tsx 파일은 /test/hi 경로를 통해 접근가능

2. Dynamic Routes (동적 라우팅)

• page/posts/[name].tsx
• /posts/1111 로 접근하면 {name}은 1111, /posts/2222 로 접근하면 {name}은 2222가 출력됨

import { useRouter } from "next/router";

export default function Name() {
  const router = useRouter();
  const name = router.query.name;

  return <h1>{name}</h1>;
}

3. Pre-rendering (사전 렌더링)

• Next.js는 모든 페이지를 사전 렌더링
• 퍼포먼스 향상과 SEO에 유리함

✨[참고] SEO란
https://velog.io/@minbok/SEO-%EA%B2%80%EC%83%89-%EC%97%94%EC%A7%84-%EC%B5%9C%EC%A0%81%ED%99%94

Pre-rendering vs No Pre-rendering

1) Pre-rendering

• JS 로드 이전에 HTML 및 메타데이터가 화면에 표시됨
• JS 로드 이후 JS 요소가 작동
  

2) No Pre-rendering

• JS 로드 이전 빈 화면이 출력, 로드가 끝난 후 화면이 채워짐
  

방식

1) Static Generation (정적 생성)

• https://velog.io/@404/3.-%EB%84%A5%EC%8A%A4%ED%8A%B8%EC%9D%98-%EC%82%AC%EC%A0%84-%EB%A0%8C%EB%8D%94%EB%A7%81
• https://velog.io/@sominpark/NextJS-%EC%A0%95%EC%A0%81-%EC%83%9D%EC%84%B1%EA%B3%BC-%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81
• https://nextjs.org/docs/basic-features/pages#static-generation-recommended

2) Server-side Rendering (서버사이드 렌더링)

✨참고

• https://nextjs.org/docs/basic-features/pages
• https://nextjs.org/learn/basics/data-fetching/pre-rendering
• https://velog.io/@sominpark/NextJS-%EC%A0%95%EC%A0%81-%EC%83%9D%EC%84%B1%EA%B3%BC-%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81