Next.js의 프런트엔드 워크플로

1) 설정

yarn create next-app
# OR
npx create-next-app
# AND
npm i -g create-next-app

2) 페이지 및 경로

3) 레이아웃 구성요소

4) 스타일링

5) 데이터베이스

6) 가져오기

// Basic Example
import fs from "fs";
import path from "path";

export async function getStaticPaths() {
    const files = fs.readdirSync(path.join("blogs"));

    const paths = files.map((filename) => ({
        params: {
            slug: filename.replace(".txt", ""),
        },
    }));

    return {
        paths,
        fallback: false,
    };
}

export async function getStaticProps(context) {
    const blog = fs.readFileSync(
        path.join("blogs", context.params.slug + ".txt"),
        "utf-8"
    );

    const content = blog;

    return {
        props: {
            content,
        },
    };
}

7) 동적 라우팅

8) 테스트

# Dependencies
npm install --save-dev eslint
npm install --save-dev eslint-config-next

npm run lint

npm install --save-dev qunit

Matching "Test" file structures

9) 전개

기타

# Basic Example
npm i --save-dev next-seo