🎯 오늘 공부해 볼 것은 바로! Next.js!
Next.js란?
React.js의 렌더링 방식을 SSR방식으로 만들어주는 React.js의 프레임워크다.
이미 React로 많은 프로젝트도 많들어져 있고, 전반적으로 널리 쓰이고 장점이 많은 라이브러리인데
Next.js라는 프레임워크를 사용하는 이유는 앞전 게시글에 적어두었다. 결론만 말하자면 SEO(Search Engine Optimization)때문에 사용하는 이유가 가장 크다고한다. 그렇다면 정말 SEO하나만 가지고 Next.js를 사용할까? 그건 아닐 것 같았다. 그럼 일단 Next.js가 어떻게 동작하는지 공식문서를 보면서 알아보려고 했는데, 동작원리 부분을 번역을 너무 잘한 블로그 글이 있어서 이걸 보는게 더 좋을 것 같다,,,,,,
나는 동작 원리가 아닌, 기능에 대해서 공식문서를 기반으로 작성하겠다.
✅ Next.js의 주요 기능
1. 페이지간의 이동, 라우팅 적용방법
- 페이지 라우팅 시스템
Next.js에서는 pages폴더가 있고, 이 폴더안에 있는 폴더와 파일을 기반으로 라우팅을 시켜준다.
pages/index.js // => "/" 페이지 폴더의 index pages/posts/first-post.js // => "/posts/first-post" 페이지 폴더 안의 posts폴더 안의 first-post 컴포넌트이와 같은 방식으로 기본의 React에서 사용했던, React-Router라이브러리도 사용하지 않아도 되고
라우팅 적용하는 것도 따로 하지 않아도 되어 엄청 편안하게 되어있다.
- Link Component
우리가 HTML에서 사용하던 a태그의 역할은 Next.js에서는 Link태그가 하게 된다.
import Link from 'next/link';// <h1 className="title"> Read <Link href="/posts/first-post">this page!</Link> </h1>이런식으로 사용 가능하다. React Router의 Link태그처럼 쓰이는 것 같다.
다시 이전페이지로 돌아올 가능성이 없다면, a태그를 사용해도 괜찮다고 한다.
- Client-Side Navigation
Next.js는 SSR이지만 Link Component를 사용했을 경우, SSR이 아닌 CSR처럼 동작되게 할 수 있다.
이 말은 페이지간 이동을 할때, SSR의 경우 깜빡임이나 새로고침이 있지만 CSR은 없다.
CSR의 동작하는 것 처럼 페이지의 깜빡임 없이 해온다는 얘기다.
위와 같은 동작이 가능한 이유는 페이지에 Link Component가 있다면 연결되어 있는 컴포넌트를 미리 불러오기 때문에,
Link Component를 클릭했을 때, 백그라운드에 로드시키고 CSR방식으로 동작시키게 되는 것이다.
//Code splitting and prefetching을 next.js에서 하고 있기 때문에 가능 한것
2. 정적파일과, 메타태그
- Image Component and Image Optimization
Next.js에서는Image Component를 사용하여 이미지들을 최적화 시키는 역할을 할 수가 있다.
Link Component을 사용한 것처럼 사용방법도 비슷하다.import Image from 'next/image'; const YourComponent = () => ( <Image src="/images/profile.jpg" // Route of the image file height={144} // Desired size with correct aspect ratio width={144} // Desired size with correct aspect ratio alt="Your Name" /> );위에 처럼 사용 가능하다! 여기서 라우팅 시스템과 비슷하게 src의 path의 경우 최상위 폴더인 public를 기반으로 주소를 설정한다.
Image Componet는 HTML에서 img 태그와 같은 역할을 하며, 가장 큰 차이점은 아무래도 HTML에서는 img태그를 선언하고 이미지를 가져올 때, img태그의 width, height을 고려하지 않고, 이미지파일 원본 크기 그대로를 가져오는 것인데 Next.js에서 Img Componet는 선언한 width, height 값을 기반으로 파일 크기를 잘라주어 가져온다. 그리고 브라우저가 지원만 해준다면 WebP파일도 그런 방식으로 가져올 수 있다. 또한, 이런 방식이 가능한 것은 Image Comopnet는 항상 레이지 로딩을 하기 때문이다. 뷰 포인트에 들어 와서야만 Image Componet의 이미지를 로드 시킨다. 이미지가 항상 렌더될때, 구글 무슨 방식과 뭘 고려해서 한다는데,,,! 이건 내가 정확히 이해를 못했음!
- Metadata
HTML태그 중 head에 쓰일 애들은 아래와 같이 사용 가능하다!
export default function FirstPost() { return ( <> <Head> <title>First Post</title> </Head> <h1>First Post</h1> <h2> <Link href="/">← Back to home</Link> </h2> </> ); }이렇게 사용하면 해당 페이지에 들어갔을 때, head태그에 적용 된걸 볼 수 있다.
그리고 전체 페이지에 적용하고 싶다면 _app.js라는 파일을 만들어서 적용 시키면 된다.
3. Pre-rendering and Data Fetching
여기서 부터는 직접 만들면서 공식문서를 보며 수정해 나가봐야겠다!
