[nextjs-blog] #1. Navigation

https://nextjs.org/learn/basics/create-nextjs-app

Learn | Next.js

위의 링크를 참고하여 Next.js를 공부하고자 한다.

매우 간단한 블로그 앱을 만들면서 기본 사항을 배워보자 !

 

 

1. Next.js에서 다른 페이지를 만드는 방법

pages directory아래에 JS파일은 생성하면, 파일의 경로가 URL 경로가 된다. 즉, HTML이나 PHP 파일을 사용하여 웹사이트를 구축하는 것과 비슷하다. 

파일을 만들고, 구성 요소(component)의 이름은 제한이 없지만, export 'default' 를 사용해 내보내야 한다. 

export default function FirstPost() {
 return <h1>First Post</h1>
}

 

export default 

변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다. (내가 아는 import와 반대개념)

이 때 모듈은  export default라는 특별한 문법을 지원하는데, export default를 사용하면 '해당 모듈엔 개체가 하나만 있다'는 사실을 나타낼 수 있다! 단, var, let, const를 바로 export default 할 수 없다. 따라서 내보내고자 하는 개체 앞에 export default를 붙이면 된다. default를 붙이지 않으면 개체에 이름이 없는 경우 에러가 발생한다.

참고한 블로그 : https://ko.javascript.info/import-export#ref-4122  

 

 

2. Link Component

websites에서 <a> 태그를 사용해 페이지 사이를 연결한 것 처럼, Next.js에서는 'Link' component를 사용해 <a>태그를 감싼다. 

먼저, index.js에 Link component를 가지고 온다. 

import Link from 'next/link'

그리고 변경한다. 

//전
<h1 className="title">
  Learn <a href="https://nextjs.org">Next.js!</a>
</h1>

//후
<h1 className="title">
  Read{' '}
  <Link href="/posts/first-post">
    <a>this page!</a>
  </Link>
</h1>

 

 

위에서 언급했다시피,  'Link' component를 사용해 태그를 감싼다.  여기서 {' '}는 여러 줄에 걸쳐 텍스트를 나누는 데 사용되는 빈 공간을 추가하는 것이다.

 

posts/first-post.js 내용을 다음과 같이 수정한다.

import Link from 'next/link'

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  )
}

 

 

위의 링크에서 가지고 옴

요약 : 

<a href =" " >를 사용하는 대신에, <Link href=" ">를 사용해 <a>를 감싼다.

이때 각각의 .js에는 import Link from 'next/link'를 해준다.