기본 설치방법

yarn init -y

yarn add next react react-dom

기본 사용방법

package.json 수정하기

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },

pages 폴더 생성

index.js 생성 및 컴포넌트 함수 작성하여 export

# 기본 컴포넌트 index.js

export default () => {
    return (
        <>
            <h2>Happy World</h2>
            <Links />
        </>
    );
}

기본 실행방법

npm run dev(yarn run dev) -> 아무것도 없으면(pages 폴더) 실행 안 됨

yarn next 하니까 3000 포트 실행되었음

라우터 설정방법

Links.js 컴포넌트(components 폴더 내에 생성)

라이브러리 가져옴

import Link from 'next/link';

이동할 링크 설정(a태그와 같다) 및 export 해줌

export default () => {
    return (
        <ul>
            <li><Link href={"/"}>root</Link></li>
            <li><Link href={"/classs"}>classs</Link></li>
            <li><Link href={"/happy"}>happy</Link></li>
        </ul>
    );
}

happy.js

사용할 파일에 불러와서 사용해준다.

생성한 컴포넌트 불러오기

import Links from "../components/Links";

<Links />를 통하여 해당 컴포넌트를 불러온다.


export default () => {
    return (
        <>
            <h2>해피컴포넌트</h2>
            <Links />
        </>
    );
}