Next 설치 및 구성에 대한 전체 설명서2022년 js 프로젝트

본문에서 우리는 다음 것을 설치하고 설정할 것이다.js 항목:

SASS/SCSS 지원

추가

설정 Eslint 및 Prettier

Eslint 설정은 제출할 때마다 자동으로 실행됩니다(Git 갈고리 통과).

설정 의미 제출(Git 갈고리 통과)

위의 모든 항목은 선택할 수 있으며 이 과정에서 건너뛸 수 있습니다.예를 들어 의미 제출에 익숙하지 않거나 사용하지 않으려면 이 부분을 건너뛰고 다른 부분으로 이동할 수 있습니다.

You may want to bookmark this article and use it as a reference when creating your projects. I will try to keep it up to date, and when I discover a new useful feature, I will include it here.

자, 시작합시다.

1. 노드를 설치합니다.js 및 NPM

노드가 필요합니다.js 12.22.0 이상 버전은 Next를 설치하고 사용할 수 있도록 합니다.js.
노드가 있는지 확인합니다.시스템에서 js 및 NPM을 설치한 후 다음 명령을 실행합니다.

node -v
npm -v

명령마다 인쇄된 설치 버전을 보실 수 있습니다.

이 출력이 아니라 command not found 또는 이와 유사한 오류가 있는 경우 Node를 다운로드하여 설치하십시오.js 공식 사이트:https://nodejs.org/en/download/

2. 다음 단계에서 설치합니다.js

터미널을 열고 새 항목을 만들 폴더로 이동한 다음 다음 다음 명령을 실행합니다.

npx create-next-app@latest

설치 과정에서 항목을 명명하고 가장 적합한 이름을 입력한 다음enter 키를 누르라는 메시지가 표시됩니다.

축하합니다!Next를 설치했습니다.js 프로젝트.
이 곳에서 프로그램을 처리하려면 새로 만든 디렉터리에서 다음 명령을 실행하십시오. (설치하는 동안 이름을 지정합니다.)

npm run dev

단, 설정을 추가하려면, 가장 좋아하는 코드 편집기에서 이 항목을 열고 다음 절차를 수행하십시오.각 단계는 선택할 수 있으며 자신에게 가장 적합한 단계를 선택할 수 있습니다.

3. 구성.JetBrains 제품의 gitignore

정보: 이 단계는 선택할 수 있으며 건너뛸 수 있습니다.
WebStorm 또는 PHPStorm과 같은 JetBrains 코드 편집기를 사용하는 경우 버전 제어에서 일부 폴더와 파일을 제외하는 것이 좋습니다.
다음과 같은 사전 설정을 사용할 수 있습니다.
https://github.com/github/gitignore/blob/master/Global/JetBrains.gitignore
내용을 .gitignore 파일에 복사하여 붙여넣기만 하면 됩니다.

4. SASS/SCSS 지원 추가

정보: 이 단계는 선택할 수 있으며 건너뛸 수 있습니다.
SASS/SCSS를 사용하려는 경우 다음 명령을 실행합니다.

npm install sass

이제 styles 폴더로 이동하면 다음과 같은 두 개의 .css 파일이 표시됩니다.

개/글로벌.css

개/개.모듈css

필요에 따라 이름을 .sass 또는 .scss으로 변경합니다.
파일 이름을 바꾸려면 다음 위치에서 파일의 경로를 변경해야 합니다.

페이지/적용.js

쪽/인덱스.js

이게 다야!나머지는 다음에 처리할 것이다.js.이제 프로젝트에서 SASS를 사용할 수 있습니다.

5. Eslint 및 Prettier 설정

정보: 이 단계는 선택할 수 있으며 건너뛸 수 있습니다.
다음 응용 프로그램에 Eslint가 설치되었습니다.기본적으로 js 항목입니다.프로젝트의 루트 디렉터리에서 설정 파일을 찾을 수 있습니다 (.eslintrc.json).
그러나 개발 모드(npm run dev)에서 프로그램을 실행할 때 자동으로 호출되지 않습니다.이것이 바로 우리가 다음 단계에서 Git 갈고리를 설치해야 하는 이유입니다. 그러나 우선 Prettier를 설치하고 설정하도록 합니다.
다음 명령을 실행하여 Prettier를 설치합니다.

npm install --save-dev prettier

Eslint에는 코드 형식 규칙도 포함되어 있으므로 기존 Pretter 설정과 충돌할 수 있으므로 Eslint config Pretter를 설치하는 것이 좋습니다.
구성을 설치하려면 다음을 실행하십시오.

npm install --save-dev eslint-config-prettier

설치가 완료되면 프로젝트의 루트 디렉토리에 Prettier(.prettierrc.json)에 대한 프로필을 만듭니다.다음은 구성 예입니다.

{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2
}

현재 prettier을 기존 Eslint 구성(.eslintrc.json)에 추가합니다.

{
  "extends": ["next/core-web-vitals", "prettier"]
}

완료되면 npm run lint을 실행하여Prettier와lint 코드를 사용할 수 있습니다.

6. 제출할 때마다 자동으로 실행되도록 Eslint 설정

정보: 이 단계는 선택할 수 있으며 건너뛸 수 있습니다.
Eslint 오류나 경고가 있는 코드가 작업 저장소로 전송되는 것을 방지하기 위해서, 제출을 시도할 때마다 next lint 명령을 실행하는 Git 갈고리를 설정할 수 있습니다.
Eslint 오류가 발생하면 커밋이 전송되지 않으며 오류/경고 세부 정보가 포함된 정보 메시지가 표시됩니다.다음 예제를 참조하십시오.

Git 갈고리를 설치하려면 Husky(npm 패키지)를 설치해야 합니다.

npm install husky --save-dev

설치가 완료되면 prepare 스크립트를 package.json 파일에 추가합니다.

...
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "prepare": "husky install"
},
...

그런 다음 를 한 번 실행하면 필요한 구성이 있는 .husky 폴더가 생성됩니다.

npm run prepare

Husky가 설치되어 있습니다. 이제 우리의 첫 번째 Git 갈고리를 만들 때가 되었습니다.
다음 명령을 실행합니다.

npx husky add .husky/pre-commit "next lint --max-warnings=0"

이 명령은 제출을 시도할 때마다 next lint 명령을 실행하는 미리 제출 연결을 만듭니다.--max-warnings=0 로고는 Eslint 경고 푸시 코드를 사용할 수 있도록 선택할 수 있습니다.오류 발생 시에만 정보 메시지가 표시됩니다.

7. 의미 제출 설정

정보: 이 단계는 선택할 수 있으며 건너뛸 수 있습니다.
만약 Semantic Commits에 익숙하다면, 모든commis의 형식이 정확한지 확인하기 위해 검증을 추가해야 할 수도 있습니다.
이를 위해서는 Husky를 설치해야 합니다(이 자습서의 6단계 참조).
Husky 설치 후 @commitlint npm 패키지를 설치해야 합니다.

# Install commitlint cli and conventional config
npm install --save-dev @commitlint/{config-conventional,cli}

# For Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli

그런 다음 CommitLink를 일반 구성으로 구성해야 합니다.

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

마지막으로 메시지를 제출하는 유효성을 검사하기 위해 갈고리를 추가합니다.

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

이제 일반 제출 규칙에 맞지 않는 제출을 보내려고 하면 다음 오류가 발생합니다.

본 문서에서 기술한 프로젝트의 최종 결과를 보려면 Github 저장소 https://github.com/AndrewSavetchuk/next-js-project-starter을 보십시오
이것들만, 나는 이 문장이 너에게 도움이 되기를 바란다.계속해서 더 많은 내용을 주목해 주십시오.
본문 중의 어떤 잘못도 저에게 알려 주세요.
이 정보가 도움이 된다면 buy me a coffee:)