next.js3 마지막) vercel에 무료로 배포하기 여기까지 완료했다면 이제 웹상에서 내 프로젝트를 볼 수 있도록 배포해보자 배포를 하는 방법은 여러가지가 있는데 next js는 쉽게 배포를 할 수 있는 vecel과 연동을 제공한다 https://vercel.com/ Develop. Preview. Ship. For the best frontend teams – Vercel Deploy web projects with the best frontend developer experience and highest end-user performance. vercel.com 해당 홈페이지에 로그인이 완료됐다면 다음과 같은 화면이 뜰것이다. import project를 클릭하자 기본값으로 셋팅하고 next.js가 선택되어있는지 확인한 후 deploy를 시작한다. 배.. 2020. 8. 1. 7) styled-components 적용하기 데이터를 긁어오고 화면에 표시하는 작업까지 완료되었다. 이제는 styled-components로 이쁘게 바꾸어보자. styled-components를 프로젝트에 적용하기위해서는 몇가지 설정이 필요하다. 먼저 yarn으로 패키지를 설치해보자 yarn add styled-components 설치가 완료되면 pages폴더에 _document.js파일을 생성한다. import Document from 'next/document' import { ServerStyleSheet } from 'styled-components' export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new Se.. 2020. 8. 1. 6) dot-env 민감한 정보는 따로 숨겨보자 API 키 같은 정보는 github repository처럼 오픈된 장소에 올려서는 안된다. 악용의 여지가 있기 때문이다. dot-env라는 녀석을 이용해서 키를 관리해보자 yarn add dot-env 그리고 루트 경로에 .env파일을 만들고 아래처럼 작성해보자. 발급받은 키도 같이 입력해준다. rapidApiKey=발급받은키 입력 next js에서는 dotenv를 사용하기 위해서 추가 설정이 필요하다 next.config.js 파일을 생성해준다. module.exports = { env: { rapidApiKey: process.env.rapidApiKey, }, }; 여기까지 작업한 내용을 깃에 올려보자 *** .env파일은 깃에 올리지 않는다 -> .gitignore파일에 추가한다. 잘따라왔다면 g.. 2020. 8. 1. 이전 1 다음
