본문 바로가기
개발 일지/TIL

[ Next.js ] Link, Dynamic Routes

by CODESIGN 2023. 1. 31.

Next.js란 무엇이고, 왜 사용할까?

특징

  • 개발 환경 설정이 쉽고 간단하다.
  • SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다.
  • 초기 로딩 속도 개선을 위한 자동 code splitting(코드 분할)을 지원한다.

 

 

Next.js 프로젝트 시작하기

npx create-next-app

 

 

기본 구조 및 기능

개발 모드와 프로덕션 모드

// package.json
...
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
...
  • dev - next dev 개발 모드로 프로젝트를 실행
    • Hot reloading 등 개발 환경에 유용한 기능들 제공
  • build - next build 제품 배포 용도로 프로젝트를 빌드
  • start - next start build를 통해 만든 프로젝트를 실행하는 명령어. 실제 운영 서버에서 배포되는 환경과 동일.

 

프로그램 시작

yarn dev

 

 

_App.js

  • 각각의 페이지가 렌더링 될 때 가장 먼저 실행되는 파일
  • 활용 예시
    • 공통된 레이아웃 페이지 작성
    • 글로벌 CSS 적용
import '@/styles/globals.css';
import Head from 'next/head';

export default function App({ Component, pageProps }) {
  return (
    <div>
      <Head>
        <title>테스트입니다.</title>
      </Head>
      <div>Header</div>
      <Component {...pageProps} />
      <div>Footer</div>
    </div>
  );
}
⭐️ Next.js에는 html 파일이 없다.
create-react-app으로 만들어진 프로젝트와는 다르게, next.js는 눈에 보이는 html 파일이 따로 존재하지 않는 100% 자바스크립트로 이루어진 프로젝트입니다. 그렇기 때문에, 기존 head 태그에 스크립트나 메타 태그를 추가하기 위해서는, next에서 제공하는 <Head> 컴포넌트를 사용해야 합니다.

 

<Head> 태그

Head 컴포넌트를 이용하면 meta tag 및 스크립트를 쉽게 프로젝트에 추가할 수 있습니다.

 

Static File Serving

  • Public 폴더 안에 파일을 추가하면 정적 파일을 쉽게 가져올 수 있습니다.

 

Next.js에서의 페이지란?

pages 폴더 안에 있는 react component를 의미합니다.

// pages/about.js (1)
export default function About() {
	return <div>About Page</div>
}

// pages/about/index.js (2)
export default function About() {
	return <div>About Page</div>
}

// pages/index.js (3)
export default function Index() {
	return <div>Index Page</div>
}

 

 

Link로 페이지 이동 (next/link)

import '@/styles/globals.css';
import Head from 'next/head';
import Link from 'next/link';

export default function App({ Component, pageProps }) {
  return (
    <div>
      <Head>
        <title>테스트입니다.</title>
      </Head>
      <div>
        <h2>Navigation</h2>
        <Link href={`/about`}>About</Link>
        <Link href={`/profile`}>Profile</Link>
      </div>
      <Component {...pageProps} />
      <div>Footer</div>
    </div>
  );
}

 

결과

 

라우터로 페이지 이동

import '@/styles/globals.css';
import Head from 'next/head';
import { useRouter } from 'next/router';

export default function App({ Component, pageProps }) {
  const router = useRouter();

  return (
    <div>
      <Head>
        <title>테스트입니다.</title>
      </Head>
      <div>
        <h2>Navigation</h2>
        <div
          onClick={() => {
            router.push('/about');
          }}
        >
          About
        </div>
        <div
          onClick={() => {
            router.push('/profile');
          }}
        >
          Profile
        </div>
      </div>
      <Component {...pageProps} />
      <div>Footer</div>
    </div>
  );
}

Link와 다르게 useRoute를 import 한 뒤 router.push로 페이지 이동이 가능하다.

 

 

Dynamic Routes

Next.js는 dynamic routes를 제공합니다. 

// pages/post/[id].js

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { id } = router.query

  return <p>Post: {id}</p>
}

export default Post

 

결과

 

 

'개발 일지 > TIL' 카테고리의 다른 글

[ Next.js ] Data Fetching (CSR vs SSR vs SSG vs ISR)  (0) 2023.02.01
[ Next.js ] API Routes, Dynamic API Route  (0) 2023.01.31
[ KTP ] CSS 프로젝트 회고  (0) 2023.01.30
[ TypeScript ]  (0) 2023.01.27
[ React ] 웹 링크 유효성 검사, React Query Firebase  (0) 2023.01.27

관련글

댓글

티스토리툴바