Next.JS

김태완·2022년 2월 4일

React nextjs

React

목록 보기

11/24

react.js의 라이브러리인 next.js에 대해 간단히 정리해보자

Next.js란?

react.js기반의 라이브러리고 서버사이드렌더링, SEO에 강점을 보인다

설치

npm i create-next-app 디렉터리

Routing

react와는 다르게 디렉터리 라우팅이 가능하다
page/photo.js파일은 localhost:3000/photo로 라우팅됨.
page/photo/[id]/index.js파일은 localhost:3000/photo/${id}로 동적 라우팅됨
링크이동은 react와 동일한 Link태그를 사용한다. 단 to대신 href를 쓰고 내부에 a태그를 사용해준다

<Link href="/photo">
	<a>이동하기</a>
</Link>

Style

styles폴더내부에 이름.module.css파일을 생성해서 css를 모듈처럼 사용가능.

//Photo.module.css
.container{ display:flex;}

// photo.js
import StylesPhoto from "../styles/Photo.module.css"
<div className={StylesPhoto.container]>ex</div>

또한 Global css는 _app.js파일에서만 적용가능

//_app.js
import '../styles/global.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Component

Head

아래처럼 head태그의 내용을 별도의 컴포넌트로 만들어서, 페이지별 다른 meta내용을 props로 보내줄수있다

import Head from "next/head";

<Head>
	<title>{title}</title>
    <meta keyword={keyword} />
    <meta content={content} />
</Head>

HeadInfo.defaultProps = {
  title: "next exmple",
  keyword: "next ex",
  contents: "practice next js",
};

Image

next에서 사용되는 img태그로써 리사이징, 최적화, 브라우저호환을 지원한다
width, height를 지정해줘야한다
외부 이미지를 사용하는경우 next.config에 도메인을 지정해줘야한다

import Image from "next/image";

<Image
     src={photo.thumbnailUrl}
     width={100}
     height={100}
     alt={photo.title}
/>

//next.config
module.exports = { 
	images: {
    	domains: ['example.com'],
    }, 
}

Script

외부스크립트를 가져올때 최적화
strategy="lazyOnload"를 설정해주면 가장 뒤쪽에서 해당 스크립트를 불러온다
onLoad는

 <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() =>
          console.log(`script loaded correctly, window.FB has been populated`)
        }
/>

서버사이드 렌더링, 클라이언트사이드 렌더링

Next.js를 사용하는 큰 이유 중 하나로 컴포넌트에서 렌더링 방식을 정할수있다
getServerSideProps, getStaticProps라는 고유의 키워드로 지정가능
아래 코드를 컴포넌트 제일 아래쪽에 지정해주면된다

const postComponent = ({posts}) => {
	return (
    	<ul>
        	{
            	posts.map(post => {
            		return <li>{post.title}</li>
                })
            }
        </ul>
    )
}

// 서버사이드 렌더링일때
export const getServerSideProps = async () => {
   const res = await fetch(URL);
   const posts = await res.json();

   return {
     props: {
       posts: posts,
     },
   };
 };
 
 // 클라이언트 사이드 렌더링일때
 export const getStaticProps = async () => {
  const res = await fetch(URL);
  const posts = await res.json();

  return {
    props: {
      posts: posts,
    },
    revalidate: 10,
  };
};