먼저 프로젝트 디렉토리를 생성하고 npm을 사용하여 빈 프로젝트를 초기화합니다.

mkdir my-next-project
cd my-next-project
npm init -y

다음으로 Parcel과 Next.js를 설치합니다.

npm install parcel-bundler next react react-dom

이제 프로젝트 디렉토리에 pages 폴더를 생성하고 그 안에 index.js 파일을 만듭니다.

mkdir pages
touch pages/index.js

index.js 파일에 다음 내용을 추가합니다.

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Hello Next.js with Parcel!</h1>
    </div>
  );
};

export default Home;

프로젝트 디렉토리에 package.json 파일을 열고 scripts 부분에 다음 내용을 추가합니다.

{
  "scripts": {
    "dev": "parcel pages/index.js --port 3000",
    "build": "parcel build pages/index.js"
  }
}

이제 다음 명령어를 사용하여 개발 서버를 실행할 수 있습니다.

npm run dev

개발 서버가 성공적으로 실행되면 브라우저에서 http://localhost:3000 으로 이동하여 결과를 볼 수 있습니다. 그리고 번들링된 코드를 생성하려면 다음 명령어를 실행합니다.

npm run build

이 방법으로 Parcel에서 Next.js를 사용할 수 있습니다. 추가적으로 필요한 설정은 없으며 Parcel이 자동으로 모든 Next.js 파일을 처리합니다.

더 자세한 정보는 Parcel과 Next.js 공식 문서를 참고하세요.

• Parcel 문서: https://parceljs.org/
• Next.js 문서: https://nextjs.org/