이제부터는 코드를 수정하고
git push만 하면
자동으로 배포됩니다!
app/page.jsx
이 파일이 홈페이지입니다!
기존 내용을 지우고 다음 코드를 입력하세요:
export default function Home() {
return (
<div className="flex flex-col items-center justify-center min-h-screen p-8">
<h1 className="text-5xl font-bold mb-4">
안녕하세요! 👋
</h1>
<p className="text-xl text-gray-600 mb-8">
제 첫 번째 Next.js 웹사이트입니다!
</p>
<div className="flex gap-4">
<a
href="/about"
className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
>
소개 페이지
</a>
</div>
</div>
);
}
브라우저에서
localhost:3000을
새로고침하면 변경사항을 볼 수 있어요!
# 1. 변경된 파일 추가
git add .
# 2. 커밋 (메시지 작성)
git commit -m "홈페이지 디자인 변경"
# 3. GitHub에 업로드
git push💡 이 3줄만 기억하세요! 항상 같은 순서입니다.
Vercel 대시보드 접속
vercel.com/dashboard프로젝트 클릭
"Building..." 또는 "Ready" 상태 확인
사이트 방문
1-2분 후 변경사항이 반영됩니다!
이제 전 세계 어디서나 변경된 사이트를 볼 수 있습니다! 🌍
Vercel은 모든 배포 기록을 저장합니다. 언제든 이전 버전으로 돌아갈 수 있어요!
홈페이지 디자인 변경
2분 전 • main 브랜치
첫 번째 커밋
1시간 전 • main 브랜치
app/about/page.jsx
export default function About() {
return (
<div className="flex flex-col items-center justify-center min-h-screen p-8">
<h1 className="text-4xl font-bold mb-4">소개</h1>
<p className="text-xl text-gray-600 mb-8 text-center max-w-2xl">
안녕하세요! 저는 웹 개발을 배우고 있습니다.
<br />
Session 0부터 6까지 완주했어요! 🎉
</p>
<a
href="/"
className="px-6 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600"
>
홈으로
</a>
</div>
);
}git add .
git commit -m "소개 페이지 추가"
git push
✅ 이제
your-site.vercel.app/about으로 접속할 수 있습니다!
시간이 남는다면 간단한 API를 만들어볼까요?
쉽게 말하면: JSON을 돌려주는 주소
JSON = API
/about
→ HTML 페이지
/api/hello
→ JSON 데이터
app/api/hello/route.ts
파일 만들기:
export async function GET() {
return Response.json({
message: "안녕하세요!"
});
}
이제 /api/hello로
접속하면 JSON이 나옵니다!
API를 더 깊이 배워서 데이터베이스와 연결하고,
진짜 백엔드를 만들어볼 거예요! 🚀
git add .
git commit -m "메시지"
git push
✨ 이제 여러분은 진짜 개발자의 워크플로우를 사용하고 있습니다!