Next.js 페이지 추가하기

앱 처음으로 수정은 잘 했지?

Next.js 앱 처음으로 수정해보기

지금까지 우리가 만든건 한페이지 짜리 웹서버였는데, 보통 우리가 봐왔던 웹사이트들은 여러 페이지를 왔다갔다 했을꺼야. 그래서 이번엔 나만의 페이지를 추가해 보고 페이지별로 이동해 볼꺼야. 덤으로 Next.js가 가진 꿀기능 하나 알려줄께!

Photo by  Priscilla Du Preez  on  Unsplash

Next.js 페이지 추가하는 법

먼저 Next.js에서의 페이지 개념에 대해서 먼저 이야기 해볼께.

간단히 말해서, Next.js에서 페이지는 'pages' 디렉토리에서 추출된 리액트 컴포넌트야.

그래서 페이지들은 파일이름과 경로로 연관되어있어.

무슨말이냐 하면, 'pages/index.js' 페이지는 웹주소 '/'랑 연결되어 있고, 만약 새로 만든 파일이 'pages/posts/first-post.js' 경로에 저장되어 있으면 웹주소 '/posts/first-post' 로 접근할수 있는거지.

눈으로 보는게 낫겠지?

first-post.js파일을 한번 만들어보자.

pages디렉토리 안에 posts 디렉토리를 만들고, first-post.js파일을 아래와 같이 넣어봐

export default function FirstPost() {
  return <h1>난생처음 첫번째 글!</h1>
}

 

컴포넌트 이름은 상관없는데, 꼭 default 키워드를 써서 export해야해

한번 http://localhost:3000/posts/first-post 에 접속해 볼까?

두둥! 이루었도다! 나만의 첫번째 페이지!

후후후

pages 디렉토리에 파일을 만들어 넣는 것만으로 페이지가 만들어지고 바로 URL이 되는거야!

어때 쉽지?

 

이제 첫번째 페이지에 내가 만든 페이지를 한번 링크 걸어보자!

웹페이지를 이동할때 보통 우리가 쓰는 HTML 태그는 'a' 태그였지?

Next.js에서는 '<Link>'라는 컴포넌트 태그를 사용해! 요건 a태그를 살짝 래핑한 리액트 컴포넌트야.

말그대로 "링크를 건다".  클라이언트 사이드방식으로 여러페이지를 이동할수 있게 해준다구.

요거 한번 써보자!

우선 pages/index.js 파일을 다시 한번 열어서 맨위에 아래 코드를 넣어줘

import Link from 'next/link'

그리고 이번엔 이전에 수정했던 14줄의 '안녕하세요 Next.js'  내용을

14: 안녕하세요! <a href="https://nextjs.org">Next.js!</a> 

 

아래와 같이 수정!

14: 한번볼래? <Link href="/posts/first-post"><a> 내가만든 첫번째 페이지!</a></Link>

그리고 내가만든 페이지에서 다시 첫페이지로 돌아가도록 링크를 걸어줄꺼야.

pages/posts/first-post.js 을 다시 열어서

아래처럼 수정!

import Link from 'next/link'

export default function FirstPost() {
  return (
    <>
      <h1>난생처음 첫번째 글</h1>
      <h2>
        <Link href="/">
          <a>홈으로가기</a>
        </Link>
      </h2>
    </>
  )
}

 

지금까지 만든거 한번 볼까?

첫페이지

 

클릭하면 아래처럼 나옴!

Link 태그는 a태그랑 비슷하게 href 경로를 사용하고 있음을 알수 있어, 한가지 잊지 말아야 하는건 여전히 Link 태그 안쪽에 a태그를 사용하고 있다는 사실!  요걸 한번 빼보면 아래처럼 꼭 써야한다고 경고해!

Warning: You're using a string directly inside <Link>. This usage has been deprecated. Please add an <a> tag as child of <Link>

 

클라이언트 사이드 네비게이션

Link태그가 같은 next.js앱 내의 두 페이지를 클라이언트 사이드에서 이동할수 있게 만들어준대.

엥 잠깐! 무슨말이야?

Client-Side Navigation이란 페이지 이동이 자바스크립트로만 이루어진다는 말이야!  페이지 이동을 브라우저가 해줄때 보다 훨씬 빠른 방법이지.

간단히 확인하는 방법이 있어!

바로 브라우저의 개발자 툴을 이용하는 방법이지. 한번 배경색을 yellow로 바꾸고 링크를 클릭해봐바.

어때?

원래 대로라면 새로고침되면서 흰색이 되어야 되는데.... 계속 노란색이야!

아직 이해가 안된다면 Link 태그 대신 a태그로 바꿔서 눌러보면 이해될꺼야! ^^

Next.js의 꿀기능 : 코드분할과 선호출 (Code Splitting and prefetching)

Next.js는 코드 분할을 자동으로 해. 무슨말이냐면, 각 페이지는 해당 페이지에서 꼭 필요한 코드만 로딩한다는거야.

기존에는 각 페이지 별로 필요한 코드만 로딩하기 위해서, 공통된 코드만 분리하는 리팩토링 작업을 했어야 했는데, next.js는 기본설정으로 알아서 해준다는 말씀!

이말인 즉슨, 수백페이지가 있더라도 페이지 하나는 끝내주게 빠르게 나온다는 거지.

나중에 이야기 하겠지만, 심지어 프로덕션 모드에서, 페이지에 Link태그가 있으면, 해당 페이지코드를 현재페이지 로딩 이후에 백그라운드에서 선호출(prefetch)해서 가지고 있다가, 사용자가 링크를 클릭하면 거의 즉시 페이지 이동이 이루어 진다는거! 

요런걸로 더이상 시간낭비 할 필요 없다구! 요런게 바로 생산성 향상 아니겠어?

 

오늘의 정리

• Next.js는 자동으로 최적화작업을 한다!
  • 코드분할(Code Splitting)
  • 클라이언트 사이드 페이지 이동(Client-Side Navigation)
  • 선호출(prefetching/프로덕션모드에서) 
• pages/디렉토리에 파일만 추가하면, 페이지 이동 관련 추가 설정없이 내장된 Link 태그를 이용해 경로 이동이 가능하다.
• 만약 외부 사이트 링크를 연결하고 싶다면 a태그를 써야한다.
• 링크에 스타일링을 하고 싶다면 Link태그가 아닌 a태그에 해야 한다. 

 

다음 이시간엔 페이지 스타일링 하는 방법에 대해 알려줄께!

https://ppsu.tistory.com/58

Next.js 스타일링 하기