REACT - NEXTJS 교육 정리

REACT - NEXTJS 교육 정리

1. 주요 기능

- File-based Routing

- Server-side Rendering: SEO 지원, Client/Server Side를 적절히 조정

- Fullstack Capabilities: Backend코드와 연계, 데이터 저장/조회, 인증 등

사용방법

1913

2. 실행 방법

- npx create-next-app

3. 개발 방법

- pages folder에 페이지 별로 js파일을 생성

- 개별 js에는 react import가 불필요

- 하위 폴더를 추가하고 index.js로 지정하면 하위 폴더명으로 라우팅

- [newsId].js는 동적인 페이지로 인식

4. 주요 component

- useRouter : Parameter추출할 수 있음

  router.push('/'+param.id)

- Link : SPA 용 a tag 대용

5. 특별한 기능

- _app.js : Root component로 작동

전체에 적용할 Layout을 적용할 수 있음

xxx.module.css : xxx.js에 한정되는 Component로 지정됨

import classes from "xxx.module.css";

<xxx className={classes.detail}>

6. Page pre-rendering : 서버측에서 content를 처리한 후 SEO를 지원함

- Static Generation: pages 폴더의 파일에 getStaticProps Function을 export처리

export async function getStaticProps() {

    // fetch data from an API

    // 

    return {

        props: {

            meetups: DUMMY_MEETUPS

        }

        // 10초마다 사전 생성

        revalidate: 10

    };

} 

- Server-side Rendering: pages 폴더의 파일에 getServerSideProps Function을 export처리

export async function getServerSideProps(context) {

    const req=context.req;

    const res=context.res;

    // fetch data from API

    return {

        props : {

            meetups: DUMMY_MEETUPS

        }

    }

}

7. Paths를 통해 데이터 추출 

 export async function getStaticPaths() {

    return {

        fallback: false,

        paths: [

            {

                  params: {

                    meetupId: 'm1',

                }

            },

            {

                  params: {

                    meetupId: 'm2',

                }

            }

        ]

    }

}

Deploy : https://vercel.com/

https://github.com/academind/react-complete-guide-code/tree/23-nextjs-introduction

React Hook / Context