{"componentChunkName":"component---src-templates-post-js","path":"/개발/2020/10/10/start-next-js-1/","result":{"data":{"markdownRemark":{"fields":{"slug":"/개발/2020/10/10/start-next-js-1/","date":"2020-10-10"},"frontmatter":{"title":"Next.js 시작해보자 1/5 - Next.js App 생성, 페이지 추가, Navigate Between Pages, Link, code splitting, client-side navigation, and prefetching","tags":["nextjs","react framework"],"author":"jslee"},"id":"9b03b22c-0ed1-5f83-8392-239b94a4720b","html":"

Gatsby와 함께 핫하다는 Next.js를 시도해보려고 한다. Gatsby의 경우 좀더 틀에 박힌 느낌? SpringBoot 처럼 그냥 따라해의 느낌이 강했는데, Next.js는 gatsby에 비해서 좀더 유연하게 React 관련 프로젝트를 구성할수 있다고 해서 시작해보려고 한다. (지금까지 시도해보지 않고 내가 그냥 읽은 글에서 느낀점을 작성해봄!)

\n

시작하기

\n

https://nextjs.org/

\n
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"\ncd nextjs-blog\nnpm run dev
\n

\n \n \n \n \n \n \n \n \n \n \n
출력 화면
\n

\n

프로젝트 시작은 gatsby와 동일하게 github에 있는 프로젝트를 템플릿으로 시작이 가능하다. 위에서는 next-learn-starter를 이용해서 페이지를 만들도록

\n

에러 표시

\n

\n \n \n \n \n \n \n \n \n \n \n
에러표시
\n

\n

React는 정말 알아보기 어렵게 에러를 화면에 표시하는데 next.js는 에러도 이렇게 잘… 표시해준다는게 놀랍다. 잠깐 사용해봐도 React는 정말 raw의 느낌인데 next.js는 개발자들이 많이 사용하고 필요로하는 기능을 넣어놓은 느낌 약간의 자유도는 떨어져도? 이정도 자유도 떨어지는건 전혀 문제되지 않음… 오히려 감사하다.

\n

새로운 페이지 추가하기

\n

https://nextjs.org/learn/basics/navigate-between-pages/pages-in-nextjs

\n

React에서 새로운 페이지를 추가하려면 Router 를 이용해서 추가하고 새로운 페이지를 만들어 연결해야 하는 작업이 필요한데 Next.js에서는 디렉토리에 파일만 넣으면 알아서 페이지를 만들고 navigate 까지 해준다.

\n

예를들어 내가 /pages/posts/first-post.js의 파일을 추가했다면 /posts/first-post로 URL을 접속하면 내가 추가한 파일명 그대로 접근이 가능하다.

\n

새로운 페이지 연겨하기

\n

https://nextjs.org/learn/basics/navigate-between-pages/link-component

\n

index.js에 다음과 같이 추가하면 위에 추가한 페이지로 연결이 가능하다.

\n
// index.js\nimport Link from \"next/link\";\nRead <Link href=\"/posts/first-post\"><a>this page!</a></Link>\n\n// first-post.js\n<Link href=\"/\">\n  <a>Back to home</a>\n</Link>
\n

Client-Side Navigation

\n

https://nextjs.org/learn/basics/navigate-between-pages/client-side

\n

위에서 사용한 Link의 경우 Client-side naviation이 가능하다. client-side navigation은 browser에서 수행하는 default navigation보다 빠른 JavaScript를 사용하여 페이지 전환이 발생한다. (전체 페이지를 리로드하지 않는다.)

\n

Link 대신에 href를 사용하면 전체 페이지를 리로딩한다. 컴포넌트 사이에 이동을 할때 배경색이 유지된다면 Link 나는 배경색이고 뭐고 전체를 기존에 정의한 값으로 리로딩하고 싶다면 href를 사용하면 된다.

\n

Code Splitting and Prefetches

\n

Next.js는 code splitting을 자동으로 수행하므로 각 페이지는 해당 페이지에 필요 것만 로드한다. 즉 페이지가 렌더링될때 다른 페이지의 코드는 처음에 제공되지 않는다. 이렇게 하면 수백개의 페이지를 추가해도 홈페이지가 빠르게 로드가 된다.

\n

요청한 페이지에 대한 코드만 로딩하면 페이지는 isloated. 만약 특정 페이지가 오류가 발생하면 나머지 앱들은 정상적으로 계속 동작한다.

\n

더나아가 Next.js의 production build에서 Link 컴포넌트가 브라우저의 viewport에 나타날때마다 Next.js는 백그라운드에 연결된 페이지의 코드를 자동으로 prefetches 한다. 링크를 클릭하면 대상 페이지의 코드가 이미 백그라운드에 로드되어 페이지의 전환이 거의 즉시 이루어진다.

\n

Summary

\n

code splitting, client-side navigation, and prefetching을 통해 Next.js는 application의 최고의 퍼포먼스를 내도록 자동으로 최적화를 해준다.

","excerpt":"Gatsby와 함께 핫하다는 를 시도해보려고 한다. Gatsby의 경우 좀더 틀에 박힌 느낌? SpringBoot 처럼 그냥 따라해의 느낌이 강했는데, Next.js는 gatsby에 비해서 좀더 유연하게 React…"}},"pageContext":{"pagePath":"/개발/2020/10/10/start-next-js-1/","next":{"fields":{"slug":"/개발/2020/10/10/start-next-js-2/"},"frontmatter":{"title":"Next.js 시작해보자 2/5 - Assets, Metadata, and CSS","tags":["nextjs","react framework","assets","metadata","css"]}},"prev":{"fields":{"slug":"/개발/2020/10/10/make-landing-page/"},"frontmatter":{"title":"Next.js로 Landing Page 만들어보기","tags":["nextjs","react framework"]}}}},"staticQueryHashes":["1981752614","3361508366"]}