Next.js4 Nextjs depoly 꽁자로 deploy하는 법!! Next.js 프로젝트를 다 만드신다음 배포를 고민하시는 분 많으실거라고 생각합니다. 혹은 이미 알고 계실수도 있지만 바로 firebase을 이용해서 무료로 hosting을 하는 방법이죠 1. 일단 첫번째로 package.json 가셔서 export를 추가 해주세요 2. 빌드를 해주세요 npm run build && npm run export 3. 빌드후 out이라는 폴더가 생깁니다. 이 out및에 index.html이 deploy되는겁니다. react에서는 public이지만 nextjs에는 out폴더로 deploy 해주시면 됩니다. 4. firebase 툴을 설치 해줍니다. npm i firebase-tools 5. firebase init을 설치해주시고 6. Hosting을 눌러주시고 설정을 해주시면.. 2021. 2. 16. HTML을 NextJS 만들어 보자~~!!! 1. Next JS 프로젝트 설치 npx create-next-app 프로젝트 이름 # or yarn create next-app 프로젝트 이름 2. 설치 후 기본적인 설정 3. public에 css,font,js,images를 이동시킵니다. 4. pages안에 Document.js를 만들어 줍니다. import Document, {Html, Head, Main, NextScript} from 'next/document' class MyDocument extends Document { static async getInitialProps(ctx) { const initialProps = await Document.getInitialProps(ctx) return { ...initialProps } } re.. 2021. 2. 12. 쿼리 쉽게 하자 Graph QL [Server API] 탄생 배경: 서버를 운영 하다보면 여러가지 문제점을 만나게 됩니다. 특히 API의 많은 요청으로 서버의 성능이 저하되고나, 개발 로직을 위해서 리소스를 추가해야 한다는 점입니다. 이를 극복하기 위해서 나온 기술이 GraphQL입니다. 특히 Next.js는 Server Side Rendering(SSR)의 많이 사용되는 언어 입니다. 모르시면 Next.js 별거 아니야를 클릭해주세요 deveopler.tistory.com/5?category=876248 Next.js 별거 아니야 Next.js 이란 ??? 도대체 넌 무엇이냐? 탄생 배경: React, Vue, Angular 의 SPA(Single Page Application)의 등장으로 한페이지에서 모든것을 처리하는것에 초점이 마쳐있는 웹페이지 였습니다.. 2021. 2. 5. Next.js 별거 아니야 Next.js 이란 ??? 도대체 넌 무엇이냐? 탄생 배경: React, Vue, Angular 의 SPA(Single Page Application)의 등장으로 한페이지에서 모든것을 처리하는것에 초점이 마쳐있는 웹페이지 였습니다. 이것을 CSR(client-side rendering) 부릅니다. 하지만 여기 단점 2가지 1. 검색엔진의 어려움이 있습니다. 특히 Google SEO의 검색 문제가 있죠 (블로그 노출 광고 시 가장 취약) 2. 로딩 속도가 느립니다. client 요청--> server 요청 --> HTML --> client로 전달 그래서 등장한 !!! Next js! 1. Google- SEO 최적화된 SPA(Single Page Application) !!!! 2. CRS단점을 보안한 .. 2021. 2. 3. 이전 1 다음
