Next.js+TypeScript를 사용하여 초기 환경을 템플릿화합니다.

28873 단어 GitHubNext.jsTypeScriptESLintPrettiertech

개시하다


개인과 실무 모두 넥스트다.js와 접촉하는 상황이 증가했다.
한 번 또 한 번 같은 순서에 따라 환경을 창조하는 것은 여전히 매우 힘든 일인데, 그것은 어떻게 된 일입니까?따라서 매번 조사는 피해야 한다.
이 기사에서, Next.js+TypeScript의 초기 환경을 쉽게 구성
그것을 본보기로 재사용하기 전에 (이것은 주제이다)의 절차를 총괄해 보았다.
나는 조사 내용 등을 공부하는 동시에 프로그램을 잘 출력하고 싶다.
하지만 이런 방법은 시간이 지날수록 천천히 바뀔 것 같아서 매번 업데이트가 됐으면 좋겠다고 생각해요.

전제 조건

  • GiitHub 계정 보유
  • Giit 설치
  • node
    • 설치
  • yarn/npm 실행 가능(이번은 yarn)

    • 컨디션


    최종적으로 다음과 같다.
    package.json
    "dependencies": {
  "next": "12.0.4",
  "react": "17.0.2",
  "react-dom": "17.0.2"
},
"devDependencies": {
  "@types/node": "16.11.9",
  "@types/react": "17.0.35",
  "@typescript-eslint/eslint-plugin": "^5.4.0",
  "eslint": "7.32.0",
  "eslint-config-next": "12.0.4",
  "eslint-config-prettier": "8.3.0",
  "prettier": "2.4.1",
  "sort-package-json": "^1.53.1",
  "typescript": "4.5.2",
  "yarn-run-all": "^3.1.1"
}

    대략적인 절차

  • GitHub 창고 준비
  • Next.js 프로젝트의 창설
  • 다양한 페이지, 구성 요소 등 준비 및 조정
  • ESLint + Prettier의 가져오기 및 설정
  • 템플릿으로 재사용하는 방법에 대한 소개
  • 경품

    • 환경 구축 프로그램


    새 창고 만들기


    우선 GiitHub에서 이번 프로젝트에 사용할 창고를 만들어 주세요.
    가장 좋은 것은 창고 이름이 템플릿이라는 것을 아는 것이다.
    주의점Initialize this repository with: 항목 내의 Add a READNE file를 선택하지 마십시오.

    프로젝트 작성


    mynextapp 부분은 자유롭게 변경할 수 있습니다.
    단말기
    # プロジェクト作成
npx create-next-app --typescript mynextapp

# プロジェクトフォルダへ移動
cd mynextapp

# 実行
yarn dev
    문제가 없으면 http://localhost:3000 페이지를 확인할 수 있습니다.

    src 디렉토리 만들기


    각 소스 코드를 src 아래로 집합합니다.
    이것은 나의 취향이지만, 나는 개인적으로 디렉터리가 노선에 분산되는 것을 좋아하지 않기 때문에 원본 파일을 src에 모으는 모델을 채택했다.
    단말기
    # プロジェクトルートで
mkdir src && \
mv pages/ src/pages && \
mv styles/ src/styles
    src를 기준으로 절대 경로 import을 설정합니다.
    tsconfig.json
    # tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src",
}

    불필요한 코드와 파일 삭제


    첫 페이지의 무용 코드를 삭제합니다. 아래와 같습니다.
    src/pages/index.tsx
    import type { NextPage } from 'next';

const Home: NextPage = () => {
    return (
        <div>
            <h1>My Template</h1>
        </div>
    );
};

export default Home;
    다음 파일을 삭제하거나 교체하십시오.
  • src/pages/api/hello.ts
  • src/styles/Home.module.css
  • public/favicon.ico
  • public/vercel.svg

    • 레이아웃 어셈블리 생성하기


    모든 페이지에 공통으로 사용되는 레이아웃 구성 요소를 만듭니다.src/components/Layout.tsx.(내용은 취향에 따라)
    src/components/Layout.tsx
    import Head from 'next/head';
import Link from 'next/link';
import { ReactNode } from 'react';

type Props = {
    children?: ReactNode;
};

const Layout = ({ children }: Props) => {
    return (
        <div>
            <Head>
                <title>MyTemplate</title>
            </Head>

            <header className=''>
                <Link href='/'>
                    <a>Home</a>
                </Link>
            </header>

            <div className='content'>{children}</div>

            <footer className=''></footer>
        </div>
    );
};

export default Layout;
    모든 페이지에 공통 버전을 적용합니다.
    src/pages/_app.tsx
    import 'styles/globals.css';
import Layout from 'components/Layout';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    );
}

export default MyApp;

    사용자 지정 문서 만들기


    모든 페이지에 공통적으로 사용되는 헤드 탭과 바디 탭 등 맞춤형 파일을 추가합니다.src/pages/_document.tsx.(내용은 취향에 따라)
    src/pages/_document.tsx
    import { Html, Head, Main, NextScript } from 'next/document';

const MyDocument = () => {
    return (
        <Html lang='ja-JP'>
            <Head>
                <meta name='application-name' content='MyTemplate' />
                <meta name='description' content='' />
            </Head>
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    );
};

export default MyDocument;

    ESlint 설정


    [email protected]에서 create-next-app를 사용할 때 가져오기가 완료되었으므로 다음 기본 설정만 수행됩니다.package.json에서 검사할 디렉토리를 수정합니다.
    자세히 검사할 디렉터리를 변경하거나 추가할 때, 취향에 따라 하십시오.
    package.json
    "scripts": {
    "lint": "next lint --dir src"
},
    추가 패키지를 가져옵니다.
    단말기
    yarn add --dev @typescript-eslint/eslint-plugin
    ESLight의 설정 파일을 수정합니다.
    .eslintrc.json
    {
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "next",
    "next/core-web-vitals",
  ],
  "rules": {
    // ここに追加したいルールをいれます
  }
}

    Pretier 가져오기


    필요한 포장을 가져오다.
    단말기
    # パッケージ追加
yarn add --dev --exact prettier eslint-config-prettier

# Prettier設定ファイル追加
touch .prettierrc.json
    Preettier 설정을 추가합니다.(취향에 따라 다시 쓰세요)
    .prettierrc.json
    {
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "arrowParens": "always",
}
    ESLight 및 Pretter 충돌 방지 설정을 추가합니다.
    .eslintrc.json
      ...
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "next",
    "next/core-web-vitals",
    "prettier" // ココを追加
  ],
    Preettier를 사용하여 코드 형식을 실행하는 명령을 추가합니다.
    package.json
    "scripts": {
    ...
    "lint:fix": "eslint \"src/**/*.{ts,tsx,js,jsx}\" --fix",
    "format": "prettier --write --ignore-path .gitignore \"src/**/*.{ts,tsx,js,jsx,json,css,scss}\""
},
    양식의 실행 여부를 확인하기 위해 src/components/sample.tsx를 만들고 다음 코드를 추가합니다.
    src/components/format.tsx
    export default function Format() {
  return (
    <div className="format test">
      hogehoge
    </div>
  )
}
    format 명령을 실행하여 자신이 설정한 규칙에 따라 성형을 하는지 확인하세요.
    이번엔 세미콜론이 주어지고 더블 따옴표가 싱글 따옴표로 바뀌면 OK.
    단말기
    yarn format
    ESLight 및 Pretter 명령을 사용할 때마다 시간이 많이 걸립니다.
    자신의 편집기에 파일을 저장할 때 명령어로 설정하면 진전이 있을 수 있으므로 미리 하는 것이 좋다.
    (사람마다 편집기를 사용하는 것이 다르기 때문에 이번에는 생략한다)

    스크립트를 순서대로 / 병렬로 실행할 수 있도록 합니다


    다음 패키지를 가져옵니다.
    단말기
    yarn add --dev yarn-run-all
    이전에 설정한 ESLight 및 Preettier 명령을 추가합니다.
    package.json
    ...
"scripts": {
    ...
    "lint": "next lint --dir src",
    "lint:fix": "eslint \"src/**/*.{ts,tsx,js,jsx}\" --fix",
    "format": "prettier --write --ignore-path .gitignore \"src/**/*.{ts,tsx,js,jsx,json,css,scss}\"",
    "test-all": "run-s lint format lint:fix" // ココを追加
  },
    추가 명령을 실행하고 동작을 확인합니다.
    단말기
    yarn test-all

    브라우저에서 작업 확인

    yarn dev 명령을 실행하고 문제가 없음을 확인합니다.

    필요에 따라


    상당히 작은 구성이지만 여기까지는 기본적인 환경이 가지런하다.
    기타
  • husky + lint-staged의 코드 해석/성형을 통한 자동화
  • 상태 관리 라이브러리
  • CSS 프레임워크
  • 테스트 도구
    • 등, 개인인지 실무인지 혹은 개인의 취향에 따라 다양한 변화가 있을 수 있으니 필요에 따라 도입해 주십시오.

    GiitHub push


    처음에 만든 창고를 로컬에서 만든 창고와 연결합니다.
    최종 단계이지만 SourceTree 등 GUI를 사용할 수도 있습니다.
    {} 에 미리 만든 원격 지점의 창고 URL을 지정합니다.
    단말기
    # ファイルをステージングしてコミット
git add .
git commit -m "first commit"

# リポジトリを紐付ける
git branch -M main 
git remote add origin {リポジトリのURLを指定}

# プッシュする
git push -u origin main
    push 완성 후 창고를 방문하여 반영 여부를 확인한다.

    템플릿으로 재사용


    길어졌지만 본론입니다.
    이것은 이번 절차로 설정된 프로젝트를 모델로 재사용하는 두 가지 방법이다.

    방법1example 옵션 사용


    다음부터 아래create-next-app의 --example 옵션을 사용하면 같은 프로젝트를 제작할 수 있다.
    {} 내부 섹션은 자체 환경에 따라 지정하십시오.
    단말기
    create-next-app {プロジェクト名} --example {GitHubリポジトリURL}
    URL 끝에 .git가 들어가지 않도록 주의하십시오.
    예제
    create-next-app mysecondapp --example https://github.com/hoge/template-next-ts-eslint-prettier

    방법GiitHub Template Repository 사용


    처음엔 GiitHub에서 창고를 만들었다고 생각해요.
    이 창고를 방문하여 메뉴Settings의 Template Repository에서 선택하십시오.

    이렇게 하면 창고의 첫 페이지Use this template에 있는 단추가 오른쪽 상단에 추가됩니다.
    이 버튼을 누르면 창고 제작 화면으로 전환한 뒤 평소대로 창고를 만들면 된다.

    수고하셨습니다.

    부가: 괜찮은 도구


    sort-package-json


    package.제이슨이 예뻐졌어!
    yarn add --dev sort-package-json
    설정
    package.json
    ...
"scripts": {
    "sort": "sort-package-json package.json",
},

    경품: 가져오는 프로그램 라이브러리 추천


    뭔가 발견되면 추가하고 싶어요.
    여러분의 추천을 댓글로 꼭 알려주세요!
  • http://localhost:3000
    • 페이지 맨 위에 쉽게 표시할 수 있는 마운트 표시줄입니다.
    유튜브 등에서 읽을 때 나는 소리입니다.
    페이지를 이동할 때나 시간이 좀 걸리는 처리를 할 때 사용자로 하여금 시각적으로'많은 시간이 걸렸다'는 것을 깨닫게 하기 쉽다.
    이것만으로도 사용자를 상당히 체험할 수 있다.
    가져오기도 매우 간단하니 반드시 채택해 주십시오.
    NProgress

    최후


    이번에 기사를 쓸 때 많은 사람의 기고문을 보고 많은 것을 배웠다.
    처음에는 좀 힘들었지만 통용되는 프로젝트를 준비하면 앞으로의 시작이 수월해지기 때문에 자신만의 기초 환경을 만들어야 합니다!
    최초의 리액트 개발에서 최근의 넥스트까지.js로 옮겼지만 너무 편리해서 개발의 단순성에 놀랐어요.이따가 넥스트.js를 떠날 수 없을 것 같습니다.
    저는 아직 공부 중이지만 이 기사의 내용에 대해 궁금한 점이 있다면 마음대로 지적하고 의견을 주시면 큰 도움이 될 것 같습니다.
    이 기사가 조금이라도 도움이 된다면 정말 좋겠다.
    여기까지 봐주셔서 감사합니다.
    snmp 썼어요.
    무질서한 지도의 성능 문제

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage