차세대 JS로 웹사이트를 만들고 Vercel로 배포하세요.-JS 튜토리얼-php.cn

차세대 JS로 웹사이트를 만들고 Vercel로 배포하세요.

Mary-Kate Olsen

풀어 주다： 2024-11-15 08:02:02

원래의

380명이 탐색했습니다.

Next.js를 사용하여 웹사이트를 구축하고 배포하는 것은 생각보다 쉽고, 가장 좋은 점은 무엇입니까? 플랫폼에 구애받지 않으므로 macOS, Windows 또는 Linux를 사용하든 단계는 동일하게 유지됩니다. 이 가이드에서는 몇 가지 간단한 명령을 사용하여 Next.js 앱을 만들고, 로컬로 설정하고, Vercel에 배포하는 과정을 안내하겠습니다.

1. Next.js 프로젝트 설정 새로운 Next.js 앱을 만드는 것부터 시작해 보세요. 터미널을 열고 다음 명령을 실행하십시오.

npx create-next-app@latest my-website
-- Click yes for all dependencies

로그인 후 복사

my-website 폴더에 새로운 Next.js 프로젝트가 생성됩니다. 메시지가 표시되면 "예"를 클릭하여 필요한 모든 종속성을 설치합니다.

다음으로 프로젝트 폴더로 이동하세요.

 cd my-website

로그인 후 복사

2. 노드가 설치되어 있는지 확인 프로젝트를 설정하는 동안 문제가 발생한다면 Node.js의 오래된 버전 때문일 가능성이 높습니다. 이 문제를 해결하려면 최신 버전의 Node를 설치하면 됩니다.

nvm install node --latest-npm

로그인 후 복사

Next.js 설치 가이드에서 최신 버전 요구사항을 확인하여 올바른 Node.js 버전이 설치되어 있는지 확인하세요.

3. 프로젝트 파일 열기 프로젝트가 설정되면 원하는 코드 편집기에서 프로젝트 폴더를 엽니다. 아래와 비슷한 파일 구조가 표시됩니다.

Create a website with the next JS and deploy it with Vercel.

여기서 사용한 앱 이름은 Portfolio2.0이지만 프로젝트 이름은 원하는 대로 자유롭게 지정하세요. 이 파일에 대한 자세한 내용을 보려면 Next.js 프로젝트 구조 문서를 확인하세요.

4. 종속성 설치 다음으로 필요한 종속성을 설치합니다.

npm install

로그인 후 복사

설치 후 앱을 로컬에서 실행하여 실제 작동하는 모습을 확인할 수 있습니다. 브라우저에서 http://localhost:3000으로 이동하면 Next.js 기본 페이지가 표시됩니다!
Create a website with the next JS and deploy it with Vercel. .

5.GitHub에 코드 푸시

이제 앱이 로컬로 설정되었으므로 코드를 GitHub 저장소에 푸시하세요. Vercel에 배포하려면 이 정보가 필요합니다.

6.Vercel에 배포
Vercel 가입:
Vercel 계정이 없다면 vercel.com에 가입하세요. 간편한 통합을 위해 GitHub 계정을 사용할 수 있습니다.
Vercel을 GitHub에 연결:
Vercel에 로그인한 후 GitHub 계정을 Vercel 대시보드에 연결하세요.
GitHub 저장소 가져오기:
Vercel 대시보드에서 "새 프로젝트"를 클릭하세요.
"Git 저장소 가져오기"를 선택하고 Next.js 프로젝트가 포함된 저장소를 선택하세요.
프로젝트 구성:
Vercel은 프로젝트가 Next.js로 빌드되었는지 자동으로 감지합니다.
빌드 명령을 다음 빌드로 설정하세요.
출력 디렉터리를 .next로 설정합니다(일반적으로 자동 구성됨).
필요할 수 있는 환경 변수를 추가하세요(선택 사항).
프로젝트 배포:
"배포"를 클릭하면 Vercel이 배포 프로세스를 시작합니다.
Vercel은 저장소를 복제하고, 종속성을 설치하고, 앱을 빌드하고 배포합니다.
배포가 완료될 때까지 대기:
Vercel은 프로세스를 따라갈 수 있도록 실시간 배포 로그를 제공합니다.
라이브 사이트 액세스:
배포가 완료되면 your-project-name.vercel.app과 같은 사이트 링크를 받게 됩니다. 그게 다야! 이제 Next.js 앱이 출시되었습니다.