Amazon과 같은 Nextjs Ecommerce 웹 사이트를 구축하십시오
- 기술 : Nextjs 13, 다음 Auth 4
- UI : Tailwind, Chart.js, React-Chartjs
- DB : Mongodb, Mongoose
- 결제 : PayPal, Stripe
- 컨텐츠 호스팅 : Cloudinary
- 배포 : Github, Vercel, Mongodb Atlas
자원
- YouTube 비디오 : https://youtu.be/_iblyr5mrza
- 데모 웹 사이트 : https://next-tailwind-amazona.vercel.app
- 소스 코드 : https://github.com/basir/next-tailwind-amazona
- 전체 코스 : basir.thinkific.com
당신이 배울 것
- 프로젝트 설정, 페이지를 탐색하는 것과 같은 Nextjs 기본 사항 및 데이터 가져 오기
- Nextjs 동적 라우팅, 이미지 최적화, SSG 및 SSR과 같은 고급 주제
- 맞춤 테마, 애니메이션 및 회전 목마를 사용하여 반응 형 웹 사이트를 구축하기위한 Tailwind CSS 프레임 워크
- 분해 구성 요소, 컨텍스트 API 및 후크를 포함한 반응
- 다음 인증 패키지는 고객 및 관리자 사용자를 인증합니다
- Mongodb 및 Mongoose 제품, 주문 및 사용자와 같은 데이터를 저장하고 검색합니다.
- PayPal 개발자 API는 온라인 결제를합니다
- Vercel 및 NetLify와 같은 서버에 웹 응용 프로그램을 배포하십시오
전체 코스
https://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-next-js?coupon=save90 에서이 과정을 90% 할인하십시오
로컬로 달리십시오
복제 레포
$ git clone [email protected]:basir/next-tailwind-amazona.git
$ cd next-tailwind-amazona
.env 파일을 만듭니다
- .env.example을 복제하고 .env로 이름을 바꿉니다
MongoDB 설정
- 지역 몽고 브
- 여기에서 설치하십시오
- .env 파일 업데이트 mongodb_uri = mongodb : // localhost/amazona
- 또는 Atlas Cloud MongoDB
- https://cloud.mongodb.com에서 데이터베이스를 작성하십시오
- .env 파일에서 mongodb_uri = mongodb+srv : // db-connection
설치 및 실행
종자 데이터
- 브라우저에서 이것을 실행하십시오 : http : // localhost : 5000/api/seed
- 관리자 이메일 및 비밀번호 및 6 개의 샘플 제품을 반환합니다.
관리자 로그인
- http : // localhost : 3000/로그인을 실행하십시오
- 관리자 이메일 및 비밀번호를 입력하고 로그인을 클릭하십시오
수업
- 소개
- 도구를 설치하십시오
- 다음 앱을 만듭니다
- Github에 게시하십시오
- 웹 사이트 레이아웃을 만듭니다
- 레이아웃 구성 요소를 만듭니다
- 헤더를 추가하십시오
- 메인 섹션을 추가하십시오
- 바닥 글을 추가하십시오
- 테일 윈드 클래스를 추가하십시오
- 제품을 나열하십시오
- data.js 추가
- 이미지 추가
- 제품 렌더링
- 제품 세부 사항을 만듭니다
- 제품 페이지를 만듭니다
- 3 개의 열을 만듭니다
- 첫 번째 열에 이미지를 표시하십시오
- 두 번째 열에 제품 정보를 표시하십시오
- 세 번째 열에서 카트 액션에 추가하십시오
- 스타일을 추가하십시오
- 손잡이 카트에 추가하십시오
- 반응 컨텍스트를 정의하십시오
- 카트 항목 정의 상태
- 카트 액션에 Addd를 만듭니다
- 감속기를 추가하십시오
- 상점 제공 업체를 만듭니다
- 손잡이 카트 버튼에 추가하십시오
- 카트 페이지를 만듭니다
- cart.js를 만듭니다
- 컨텍스트를 사용하여 카트 항목을 얻으십시오
- 카트 항목에 항목을 나열하십시오
- 카트에 추가 한 후 카트 화면으로 리디렉션하십시오
- 카트에서 수량을 업데이트하십시오
- 수량에 대한 선택 상자를 추가하십시오
- 선택 상자 변경을 처리합니다
- 카트 항목을 저장하십시오
- JS-Cookie 패키지를 설치하십시오
- 쿠키에 카트 품목을 저장하고 리테로 리브합니다
- 로그인 양식을 만듭니다
- React 후크 양식을 설치하십시오
- 입력 상자를 만듭니다
- 로그인 버튼을 추가하십시오
- MongoDB에 연결하십시오
- 몽구스를 설치하십시오
- MongoDB를 설치하거나 MongoDB Atlas를 사용하십시오
- .env 파일에 연결 URL을 저장합니다
- DB Utils 파일을 만듭니다
- 샘플 사용자를 만듭니다
- 로그인 API를 만듭니다
- Next-Auth를 설치하십시오
- NextAuth.js를 만듭니다
- 서명을 구현하십시오
- 로그인 양식에 서명을 사용하십시오
- 사용자 메뉴를 추가하십시오
- 사용자 인증을 확인하십시오
- Headlessui를 설치하십시오
- 사용자 메뉴 표시
- 배송 화면을 만듭니다
- 주소 필드를 표시합니다
- 맥락에서 주소를 저장합니다
- 결제 방법 화면을 만듭니다
- 전파 지불 방법
- 맥락에서 지불 방법을 저장합니다
- 종자 샘플 제품
- 몽구스에서 제품 모델을 만듭니다
- 샘플 제품을 MongoDB에 삽입하십시오
- 로드 제품 mongodb
- MongoDB에서 홈페이지에 제품을로드하십시오
- MongoDB에서 제품 페이지에 제품을로드하십시오
- 제품 API를 사용하여 카트에 추가 된 재고를 확인하십시오.
- 장소 주문 화면을 만듭니다
- 선적 주소를 표시합니다
- 디스플레이 결제 방법
- 주문 항목을 표시합니다
- emptment 순서를 만듭니다
- 주문 화면을 만듭니다
- 주문 세부 정보는 백엔드 API를 구현하십시오
- 백엔드에서 데이터를로드합니다
- 표시 주문 세부 정보
- 레지스터 화면을 만듭니다
- 가입 API를 추가하십시오
- 레지스터 페이지를 만듭니다
- 양식 제출에서 API에 전화하십시오
- PayPal에 의한 지불 주문
- PayPal 버튼을 추가하십시오
- 지불을 처리합니다
- 백엔드 API를 만듭니다
- 주문 상태를 업데이트하십시오
- 주문 기록 화면을 만듭니다
- 내 주문 API를 만듭니다
- 주문 기록 구성 요소를 만듭니다
- 주문을 가져와 표시하십시오
- Vercel에 게시하십시오
- Vercel 계정을 만듭니다
- Github에 연결하십시오
- Env vars에서 다음 인 Auth 및 MongoDB DB를 설정하십시오
- 코드를 Github로 푸시하십시오
- 사용자 프로필을 업데이트합니다
- 프로필 화면을 만듭니다
- 사용자 정보 표시
- 업데이트 사용자 정보를 처리합니다
- 관리자 대시 보드를 만듭니다
- 관리자 메뉴를 만듭니다
- 대시 보드 화면을 만듭니다
- 관리자 요약 API를 구현하십시오
- 관리자에 대한 주문을 나열합니다
- 주문 페이지 생성
- Orders API를 만듭니다
- 페이지에서 API를 사용하십시오
- 관리자에 대한 주문을 제공하십시오
- 배달 API를 만듭니다
- 배달 버튼을 추가하십시오
- 클릭 핸들러를 구현하십시오
- 관리자 용 제품을 나열하십시오
- 제품 페이지 생성
- 제품 API를 만듭니다
- 페이지에서 API를 사용하십시오
- 제품 편집 페이지를 만듭니다
- 편집 페이지를 만듭니다
- 제품에 대한 API를 만듭니다
- 제품 데이터를 양식으로 표시합니다
- 제품 이미지 업로드
- Cloudinary 계정을 만듭니다
- 구름 키를 얻으십시오
- 업로드 API를 만듭니다
- 편집 페이지에서 파일을 업로드하십시오
- 제품을 만들고 삭제합니다
- 제품 생성 버튼을 추가하십시오
- 신제품 API를 구축하십시오
- 삭제를 위해 핸들러를 추가하십시오
- 삭제 API를 구현하십시오
- 관리자를위한 사용자 나열
- 사용자 페이지를 만듭니다
- 사용자 API를 만듭니다
- 페이지에서 API를 사용하십시오
- 회전 목마를 추가하십시오
- 주요 제품을 만듭니다
- 회전 목마 데이터를 공급하십시오
- 인기있는 제품을 보여줍니다
- 검색 페이지를 만듭니다
- 필터를 만듭니다
- 제품을 나열하십시오
- 필터 표시
