[NextJs] 학습 중

🏄‍♀️ 참고링크

1. 튜토리얼 공식 문서입니다.
2. 타입스크립트에서의 활용입니다. Js랑 다른 부분이 많으니 꼭꼭 참고!!!
3. 넥스트 예시모음 깃허브 레포지토리입니다. 참고하면 좋을 것 같습니다~
4. Next.js + Typescript + Styled-components 쉽게 구축하기

🏋️‍♀️ 스크립트

초기세팅 공식 문서 참고하여 작성하였으니 혹시 이상하다 싶으면 확인해주세요!

1. 프로그램 실행(개발모드)

cra의 npm run start와 같은 스크립트로 추정됩니다.

npm run dev 

2. 빌드

npm run build

3. 배포서버 시작(?)

npm run start 

4. esLint 세팅

처음에 eslint config 만들어주는 스크립트입니다. 초기세팅 이후로는 쓸일이 없어보입니다.

npm run lint

---

📍 컴포넌트

크게 다르지 않습니다.

---

📄 라우팅(페이지) ** 추가하는 중입니다!!! 참고 노노....

기존 Cra와 달리 파일을 기준으로 라우팅 페이지가 정해집니다.

pages 폴더 아래에 페이지 이름을 넣으면 걔가 바로 라우팅 주소 중 하나가 됩니다? 각 페이지에 연결하는 방법은
<Link href='/'><a>자기소개 페이지</a></Link>
이런식으로 사용하면 되는 거 같습니다.

1. 기본적인 방식

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
      <li>
        <Link href="/blog/hello-world">
          <a>Blog Post</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

2. 동적 라우팅

라우팅 관련 공식문서입니다. 필요한 부분을 찾아서 보는 편이 빠를거 같습니다....

기본적인 작동 방법만 정리해둡니다.
route되는 주소마다 방식이 달라지는데, 라우트 뒤에 문자가 붙는 경우가 조금 색다릅니다.

1. 뒤에 아무 문자가 들어오는 경우
pages/blog/[slug].js → /blog/:slug (/blog/hello-world)

2. 파라미터가 들어오는 경우?
pages/[username]/settings.js → /:username/settings (/foo/settings)

3. 뭐든지 들어오는 경우?
pages/post/[...all].js → /post/* (/post/2020/id/title)

1. encodeURIComponent 사용

   encodeURIComponent() 글자를 8503021f-47df-471f-b61d-945e237b0a37 이런식으로 바꿔주는건가봅니다.

import Link from 'next/link'

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${encodeURIComponent(post.slug)}`}>
            <a>{post.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts

2. url object 사용

import Link from 'next/link'

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link
            href={{
              pathname: '/blog/[slug]',
              query: { slug: post.slug },
            }}
          >
            <a>{post.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts