Next

[Next] 폴더 구조 및 동작

sian han 2023. 2. 20. 17:56

▶ _app.js

  • 페이지 전환 시 레이아웃을 유지할 수 있다
  • 페이지 전환 시 상태값을 유지할 수 있다.
  • componentDidCatch 를 이용해서 에러 핸들링을 할 수 있다.
  • 추가적인 데이터를 페이지로 주입시켜주는게 가능하다.
  • 글로벌 CSS 를 선언한다. 
function MyApp({ Component, pageProps }) {
  return (
    <div style={{ width: 1000, margin: "0 auto" }}>
      <Top />
      <Component {...pageProps} />
      <Footer />
    </div>
  );
}

export default MyApp;

Props 로 넘어온 Component 는 현재 페이지를 의미한다. 페이지 전환 시에 Component Props 가 변경된다. 

pageProps 는 데이터 패칭 메서드를 통해 미리 가져온 초기 객체이다.

이 메서드를 사용하지 않는다면 빈 객체가 전달된다. 

 

▶ public

  • public 폴더로 정적 파일들을 제공할 수 있다.
  • public 폴더에는 로봇파일이나 html 파일을 넣어서 사용할 수 있다.
  • public 이라는 이름은 변경 불가하다.
  • pages 폴더 하위에 같은 이름의 static 파일이 있다면 에러가 발생한다.

 

▶ _document

next 에서 제공하는 document 를 커스터마이징 할 수 있다. 이 파일을 사용해 모든 페이지에 공통된 메타데이터, header, footer 등을 쉽게 적용할 수 있다. 

_document.js 파일은 HTML 문서의 뼈대를 정의하는데 사용된다. 이 파일은 Next.js 의 서버 측 렌더링에서 사용되며, 모든 페이지의 공통 레이아웃과 메타 데이터를 설정할 수 있다.

  • HTML 컴포넌트 : <html> 태그와 <head> 태그를 포함하여 페이지의 기본 HTML 구조를 정의한다.
  • Head 컴포넌트 : 페이지의 메타데이터, 스타일시트 및 스크립트 태그를 포함하여 <head> 태그 내부를 정의한다.
  • Main 컴포넌트 : 애플리케이션의 실제 내용이 들어갈 컴포넌트를 포함한다.
  • NextScript 컴포넌트 : Next.js 의 자체 자바스크립트 파일을 로드하며, 애플리케이션에서 사용하는 모든 자바스크립트 파일을 로드한다.
class MyDocument extends Document {
  render() {
    return (
      <Html lang="ko">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

 

▷ _app과 _document 의 차이점

_app 은 글로벌 CSS 를 적용하거나 레이아웃을 잡는다. 

반면에 _document 는 서버에서만 렌더링되고 onClick 같은 이벤트 핸들러는 작동하지 않고, CSS 도 사용하지 않는다.

 

 

▶ Link 컴포넌트

  • Next.js 는 React 기반의 프레임워크로, SPA 에서 사용하는 라우팅 방식 대신 서버사이드 렌더링을 지원하는 페이지 기반의 라우팅 방식을 사용한다. Next.js 에서 페이지를 전환하려면 Link 컴포넌트를 사용한다. 
  • a 태그와 유사하지만 페이지 전환이 클라이언트 측에서 처리되지 않고 서버측에서 처리된다
  • Link 컴포넌트를 사용하면 페이지 이동 시에 브라우저의 새로고침을 막을 수 있다.
  • Link 컴포넌트를 사용해 프리패칭을 할 수 있다.
    • 프리패칭 : 페이지 이동전에 이미 페이지를 가져와 미리 렌더링 하는 것
import Link from 'next/link';

function MyPage() {
  return (
    <div>
      <Link href="/about">
        <a>About Page</a>
      </Link>
    </div>
  );
}

 

 

▷ Link 컴포넌트의 prefetch 속성

페이지 전환 이전에 다음 페이지의 리소스를 브라우저에 미리 가져와 렌더링 속도를 개선하는 기능이다. default 값은 true 이기때문에 Link 컴포넌트를 사용하는 모든 페이지의 리소스를 브라우저가 미리 가져온다.이때 가져온 리소스는 브라우저의 캐시에 저장되어 사용자가 해당 페이지를 방문할 때 더 빠르게 랜더링된다. 

 

ex ) 사용자가 홈페이지에서 다른 페이지로 이동함

 - 이때 해당 페이지의 리소스를 prefetch 속성으로 미리 가져온다 => 렌더링 속도가 개선됨

import Link from 'next/link'

function MyComponent() {
  return (
    <div>
      <Link href="/other-page" prefetch={false}>
        <a>Go to other page</a>
      </Link>
    </div>
  )
}

 

 

 

 

Next.js 는 기본적으로 모든 페이지를 사전렌더링한다.

사전렌더링 (Pre-rendering) 에는 두가지가 있다.

 

1. 정적 생성

2 Server Side Rendering

 

차이점은 언제 html 파일을 생성하느냐이다. 

 

▷ 정적생성

  • 프로젝트가 빌드하는 시점에 html 파일들을 생성한다.
  • 모든 요청에 재사용한다.
  • 정적생성된 페이지들을 CDN 에 캐싱된다. 
  • getStaticProps / getStaticPaths 을 사용하면 된다

 

▷ 서버사이드 렌더링

  • 매 요청마다 html 을 생성한다
  • CDN 에 캐싱되지 않기 때문에 조금은 느릴 수 있음
  • 항상 최신 상태를 유지한다
  • getServerSideProps
const Post = ({item}) => {
	
   ...
};

export async function getServerSideProps(context) {
	const id = context.params.id;
    const apiUrl = 'http://~'
    const res = await Axios.get(apiUrl);
    const data = res.data;
    
    return(
    	props: {
        	item: data,
        },
    );
}

 

 

getServerSideProps 함수를 통해 응답받은 item 은 Post 컴포넌트가 실행될때 props 로 받을 수 있다. 

= 응답값을 Post 페이지의 props 로 넘겨줄 수 있는 것임

 

개발자 도구를 확인하면 서버사이드렌더링이 된것을 확인할 수 있다.

 

 

▶ Next Router

next router 에 useRouter 라는게 있다. useRouter 는 페이지간의 이동을 쉽게 처리할 수 있도록 도와주는 React Hook 이다 (Next.js 에서 제공함)

 

useRouter 를 통해 현재 페이지의 URL 과 쿼리 매개변수(query parameter) 를 가져올 수 있다.

mport { useRouter } from 'next/router';

function MyPage() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <p>My page id is: {id}</p>
    </div>
  );
}

위 코드와 같이 router.query 를 사용해서 URL 쿼리 매개변수를 가져올 수 있다. 

 

location.href = 를 통해서 페이지를 이동시켜줄 수도 있지만

router.push 메서드를 사용해서 다른 페이지로 이동이 가능하다. 

function goLink(e,data){
	if(data.name ==="home"){
    	router.push("/");
    }else if(data.name === "about"){
    	router.push("/about");
    }
}

그렇담 왜 a 태그나 location href 를 사용하지 않을까 ?

사용해도 된다. 그러나 이들을 이용하면 페이지가 새로고침된다.

 

 

▷ router 객체 안의 속성은 무엇이 있는가 !

  • route : 현재 페이지의 경로 이름
  • pathname : 현재 페이지의 경로
  • query : 현재 페이지의 쿼리 파라미터
  • asPath : 브라우저에서 실제로 볼 수 있는 URL 경로
  • basePath : 앱이 실행되는 기본 경로
  • isFallback : fallback 렌더링 모드에서 현재 페이지가 fallback 페이지인지 여부를 나타낸다.

ex ) /about 라우트를 가진 페이지

route : about

pathname : /about

asPath : /about

basePath : /myapp/about

 

ex ) /about?id=123 라우트를 가진 페이지

query : {id : 123}

 

외에도 push, replace, reload, back, beforePopState 와 같은 메서드와 이벤트 핸들러가 있다.

 

▷ isFallback

동적 라우팅 페이지에서 getStaticPaths 또는 getServerSideProps 함수가 실행중일 때 해당 페이지가 fallback 중인지 여부를 나타내는 boolean 값이다.

 

fallback 옵션을 true 로 설정하면 요청한 페이지에 대한 HTML 파일이 없을 경우, 

요청이 들어오면 생성되기 전에 임시 페이지(빈 화면일 수 있음)를 보여주면서 생성되기를 기다린다.

fallback 옵션을 통해 임시 페이지를 보여줄 수 있다. 임시페이지를 보여주고있는 상황에서 isFallback 속성은 true가 되며, 이를 통해서 임시 페이지에서는 로딩중임을 표시할 수 있다.

const Post = ({ item, name })=>{
	const router = useRouter();
    
    if(router.isFallback){
    	return(
        	<div>Loading</div> //isFallback 속성이 true 인 경우 로딩중임을 표시함
        );
    }
}
...

 

 

▶ 에러페이지

자주사용하는 에러페이지를 서버에서 렌더링한다면 그만큼 비용이 증가하고 사용자들은 느리다는 느낌을 받게 된다.

Next.js 는 404 페이지를 static 페이지로 제공한다. 아무런 추가 작업 없이 default 로 제공되는 페이지를 사용할 수 있다. 

 

페이지를 꾸며주고 싶다면 ?

pages 디렉토리 하위에 404.js 파일을 생성한다. 

이 파일은 빌드 타임에 정적으로 생성된다.

500 에러도 400과 같이 페이지를 제공해준다. 하지만 500에러는 프로덕션에서만 확인가능하다. 개발모드에서는 500에러 페이지가 아닌 에러 로그를 보여준다. 

프로덕션모드로 보기 위해 : build > npm start 

 

 

▶ 환경변수 구분

환경에 따라 변하는 값들의 동기처리

Next.js 는 별다른 작업 없이 환경변수를 쓸 수 있도록 제공한다.

 

프로젝트 루트경로에 다음과 같은 파일을 생성한다. 

  • .env.development
  • .env.production

node.js 환경과 browser 환경이 다르다.

node js 에서는 process.env.변수명 으로 사용하고

browser 에서는 process.env.NEXT_PUBLIC_변수명 으로 사용한다. 

 

사용하기 : 브라우저 환경

const API_URL = process.env.NEXT_PUBLIC_API_URL;

 

사용하기 : node.js 환경

node.js 환경은 serverSideProps() 함수 내부에서 사용하면 된다

  •  serverSideProps() 함수 내부는 브라우저 환경이 아니다 ! 서버에서 동작한다. window 같은 브라우저 객체를 사용하면 에러가 발생한다.
const Post = ({item,name}) => {
	
   ...
};

export async function getServerSideProps(context) {
	const id = context.params.id;
    const apiUrl = 'http://~'
    const res = await Axios.get(apiUrl);
    const data = res.data;
    
    return(
    	props: {
        	item: data,
            name : process.env.name
        },
    );
}
저작자표시 (새창열림)

'Next' 카테고리의 다른 글

[Next] 정적생성 / getStaticPath()  (0) 2023.02.20
[Next] SSR / SSG / getStaticProps()  (0) 2023.02.20

'Next'의 다른글

  • 현재글[Next] 폴더 구조 및 동작

관련글

댓글

티스토리툴바