📢🚨🚨npx create-next-app@latest가 작동하지 않음 - 이 문제를 해결하는 방법

🔴: 저도 같은 문제를 겪고 있습니다. 친구 여러분을 위해 게시물을 작성해야 할 것 같습니다. 이 문제를 어떻게 해결할 수 있습니까? 사이트, 포럼, GitHubissues를 많이 검색하지만 찾을 수 없습니다. 이 문제를 해결한 문제에 대한 트릭을 사용했습니다. 모든 JavaScript 라이브러리, 프레임워크 및 다른 프로젝트에서도 사용할 수 있습니다.

안녕하세요, JSSTACKDEVELOPERS의 M Ahmed입니다. 친구들과 이야기하게 되어 매우 기쁩니다.

요점으로 갑시다.

다음과 같은 프로젝트에서 이 문제가 발생했습니다.


이제 해당 문제의 해결 방법으로 이동해 보겠습니다.

먼저 시스템에 전역으로 create-next-app를 설치합니다.

By using npm package manger:
--------------------
npm install --global create-next-app@latest
or
npm i -g create-next-app@latest

If you are yarn package manger user then apply these commands:
By using yarn package manger:
--------------------
yarn add --global create next-app
or
yarn add -g create next-app

TypeScript는 시스템에 전체적으로 설치됩니다.
👉👉 시스템에서 다음 디렉토리로 이동합니다.C:\Users\<username>\AppData\Roaming\npm다음과 같은 것을 찾을 수 있습니다.


이제 node_modules 폴더를 열면 create-next-app 폴더를 찾을 수 있습니다. 다음과 같습니다.

이제 dist 폴더로 이동하여 Templates 및 typescript 두 개의 폴더를 더 찾을 수 있는 default 폴더를 찾습니다. 이것들은 우리 프로젝트에 필요합니다.

이제 프로젝트를 위해 Bash or Terminal를 설치하려는 Next.JS - App를 엽니다.

create-next-app my-app

가지고 있는 경우 기본적으로 yarn-package manger로 설치됩니다. 그렇지 않으면 npm-package manger를 사용합니다.

설치가 완료된 후:
npm run dev or yarn dev를 실행하여 http://localhost:3000에서 개발 서버를 시작합니다.
신청서를 보려면 http://localhost:3000 을 방문하십시오.

편집pages/index.js하고 브라우저에서 업데이트된 결과를 확인합니다.create-next-app 사용 방법에 대한 자세한 내용은 [ create-next-app documentation ]( https://nextjs.org/docs )을 참조하십시오.

또는

수동 설정

프로젝트에 next , react 및 react-dom를 설치합니다.

npm install next react react-dom
# or
yarn add next react react-dom

package.json를 열고 다음scripts을 추가합니다.

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

이러한 스크립트는 응용 프로그램 개발의 여러 단계를 나타냅니다.
dev - 개발 모드에서 Next.js를 시작하는 실행next devbuild - 프로덕션 용도로 응용 프로그램을 빌드하는 실행next buildstart - Next.js 프로덕션 서버를 시작하는 실행next startlint - Next.js의 내장 ESLint 구성을 설정하는 실행next lintNext.js는 페이지 개념을 기반으로 구축되었습니다. 페이지는 페이지 디렉토리의 .js , .jsx , .ts 또는 .tsx 파일에서 내보낸 React 구성 요소입니다.

페이지는 파일 이름을 기반으로 경로와 연결됩니다. 예를 들어 pages/about.js는 /about에 매핑됩니다. 파일 이름으로 동적 경로 매개변수를 추가할 수도 있습니다.

프로젝트 내에 페이지 디렉토리를 만듭니다.

다음 콘텐츠로 채우기./pages/index.js:

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

지금까지 우리는 다음을 얻습니다.
자동 컴파일 및 번들링
빠른 새로고침 반응./pages/의 정적 생성 및 서버측 렌더링
정적 파일 제공. ./public/는 /에 매핑됩니다.

감사합니다~ M Ahmed -- 질문이 더 있으면 자유롭게 물어보세요.
#jsstack개발자 🚀🚀