creacte-next-app 없이 next.js 구축하기

728x90

아래의 내용은 <모던 리액트 딥다이브> 중 한 부분입니다.

create-react-app과 create-next-app은 각각 리액트, 넥스트 애플리케이션을 손쉽게 만들기 위한 CLI 도구이다. 해당 도구들은 애플리케이션 구축에 필요한 대부분의 작업을 대신해주기 떼문에 프로젝트 구조를 공부하기는 어렵다. 그리고 2023년도에 리액트 팀은 "create-react-app은 미래에 더이상 보일러플레이트 CLI가 아니라 여러 리액트 기반 프레임워크를 제안하는 런처 형태로 변경될 예정이다."라고 했기 때문에 아무것도 없는 상태에서 리액트 프레임워크를 구축하는 방법을 공부할 필요가 있다.

CLI란?
Command Line Interface의 약자로, 컴퓨터와 사용자 간의 상호 작용을 위해 텍스트 명령어를 사용하는 인터페이스를 의미합니다. CLI는 터미널 또는 명령 프롬프트를 통해 작동하며, 사용자가 키보드를 사용하여 텍스트 명령어를 입력하고 컴퓨터에 전달합니다.

그럼 creacte-next-app 없이 하나씩 구축해보자!

1. package.json 생성

2. Next.js의 핵심 라이브러리인 react, react-dom, next 설치

3. devDependencies에 필요한 패키지 설치 (node, typescript용, eslint)

npm init  // #1 (계속 enter)
npm i react react-dom next // #2
// #3
npm i @types/node @types/react @types/react-dom eslint eslint-config-next typescript --save-dev

4. tsconfig.json 생성 및 작성

{
    // 컴파일할 때 사용하는 것들
    "compilerOptions": {
        // 모듈 시스템, export, import 부분
        "module": "esnext",
        "moduleResolution": "bundler",
        // ESNext: 최신 문법, (에전 문법을 사용해야만 돌아가는 환경에 유용)
        "target": "es5",
        // target은 es5라도 신규 기능에 대한 API정보를 확인해서 오류발생x
        "lib": ["dom", "dom.iterable", "esnext"],
        // ts가 js 파일도 컴파일할지, 주로 .ts, .js가 혼재됐을 때 사용
        "allowJs": true,
        // 타입 정의 파일(.d.ts 확장자 같는 파일)의 타입 검사를 생략 , 보통 라이브러리에서 사용됨
        "skipLibCheck": true,
        // 엄격하게 타입관리 ex) 매개변수에 타입지정 필수
        "strict": true,
        // 컴파일x, just 타입 체크만 (next는 swc로 바로 ts파일을 텀파일0)
        "noEmit": true,
        // module.exports의 CommonJS 방식으로 내보낸 모듈도 ES방식(export function~)
        "esModuleInterop": true,
        // JSON 파일을 import 하게 해줌, 자동으로 allowJs도 켜짐
        "resolveJsonModule": true,
        // import나 export가 없다면 단순 스크립트 파일로 인식하고 해당 파일이 생성되지 않도록 막음
        "isolatedModules": true,
        // .tsx 내부에 있는 JSX를 어떻게 컴파일할지 설정, swc가 JSX도 알아서 변환해주기 때문에 그대로 유지 선택
        "jsx": "preserve",
        // 마지막 컴파일 정보 저장 -> 다시 컴파일러가 호출됐을 때 해당 정보를 활용해 비용 최소화
        "incremental": true,
        // 모듈 찾을 때 기준이 되는 디렉터리
        "baseUrl": "./src",
        //
        "paths": {
            "#components/*": ["components/*"],
            "#pages/*": ["pages/*"],
            "#statics/*": ["statics/*"],
            "#utils/*": ["utils/*"],
            "#hooks/*": ["hooks/*"],
            "#types/*": ["types/*"]
        }
    },
    // 컴파일 대상에 포함시킬 파일 목록
    "include": [
        "next-env.d.ts",
        "**/*.ts",
        "**/*.tsx",
        "next-sitemap.config.js"
    ],
    // 컴파일 대상에서 제외시킬 파일 목록
    "exclude": ["node_modules"]
}

5. next.config.js 생성 및 작성

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    // 보안 취약점으로 취급되는 X-Powered-By 헤더 제거
    poweredByHeader: false,
    // 빌ㄷ 시, eslint 무시 (이후 CI 과정에서 별도로 작동하게 만들어 빌드를 더 빠르게 할 예정)
    eslint: {
        ignoreDuringBuilds: true,
    },
};

module.exports = nextConfig;

6. ESLint와 Prettier 설정

코드 스타일링 등 eslint-config-next가 해주지 않는 일반적인 ESLint 작업을 수행하기에 가장 설치 및 설정이 쉬운 titicaca를 설치한다.

 npm i @titicaca/eslint-config-triple --save-dev

Next에서의 사용을 위한 추가 설정

const path = require('path');
const createConfig = require('@titicaca/eslint-config-triple');

const { extends: extendConfigs, overrides } = createConfig({
    type: 'frontend',
    project: path.resolve(__dirname, './tsconfig.json'),
});

module.exports = {
    extends: [...extendConfigs, 'next/core-web-vitals'],
    overrides,
};

7. 스타일 설정

npm i styled-components

swc가 styled-components를 빠르게 변환하게 하기위해 아래 코드를 추가한다.

// next.config.js
styledComponents: true, 추가

// pages/_document.tsx 

import Document, {
    DocumentContext,
    Html,
    Head,
    Main,
    NextScript,
    DocumentInitialProps,
} from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default function MyDocument() {
    return (
        <Html lang="ko">
            <Head />
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    );
}

MyDocument.getInitialProps = async (
    ctx: DocumentContext
): Promise<DocumentInitialProps> => {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
        ctx.renderPage = () =>
            originalRenderPage({
                enhanceApp: (App) => (props) =>
                    sheet.collectStyles(<App {...props} />),
            });

        const initialProps = await Document.getInitialProps(ctx);
        return {
            ...initialProps,
            styles: (
                <>
                    {initialProps.styles}
                    {sheet.getStyleElement()}
                </>
            ),
        };
    } finally {
        sheet.seal();
    }
};

8. 폴더 구조 잡기

[참고] 공식문서

Getting Started: Project Structure | Next.js

A list of folders and files conventions in a Next.js project

nextjs.org

9. 명령어 scritp에 기재

// package.json
 "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "next dev",
        "start": "next start",
        "build": "next build",
        "lint:des": "eslint '**/*.{js,ts,tsx}'",
        "lint:es:fix": "npm run lint:es -- --fix",
        "prettier": "prettier '**/*/' --check",
        "prettier:fix": "prettier '**/*' --write"
    },

위의 보일러플레이트 과정이 귀찮다면?

- 깃허브에 보일러플레이트 프젝을 하나 만든 다음, "Template repository"라는 옵션을 체크한 뒤, 다른 저장소를 생성할 때 해당 프젝을 템플렛으로 지정해서 사용하면 된다. 만일, 조직 내에서 마이크로서비스를 지향하고 있고, 앞으로 생성해야 할 프로젝트가 많다면 직접 create-***-app을 구현해보는 것도 좋다.

[참고하면 좋은 사이트]

Creating a CLI tool with Node.js - LogRocket Blog

In this article, you'll learn how to create a CLI tool using Node.js, test it, and then publish it on npm.

blog.logrocket.com

GitHub - vercel/next.js: The React Framework

The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.

github.com

한번 해봐야지..