Next.js 배포후 스타일이 새로고침 할때 풀렸다가 다시 적용되는 현상을 발견했다. 개발모드에서는 로딩이 느리기 때문에 넘어갔었던 문제인데 배포하니 스타일이 아예 풀렸다가 다시 적용이 되었었다. 이건 백프로 styled-components 에 문제가 있을것이다 라고 생각을하고 코드를 뒤적거리며 검색을 한 결과..! _document.js 문제였다 수정전 import { ServerStyleSheet } from "styled-components" import { ServerStyleSheets } from "@material-ui/core/styles" export default class MyDocument extends Document { static async getInitialProps(ctx)..
Next.js
💡 Vercel vercel 은 Next.js 에서 제공하는 배포플랫폼 이다. Next.js 공식문서에 가보면 Vercel로 배포하는것을 추천하고 있다. github 를 사용하여 프로젝트를 배포할수있고 Next.js 에 최적화 되어 있다고 한다. 또한 Next.js 는 각 요청들을 빨리 라우팅 하기위해 전세계에서 cdn을 운영하고 있는데 한국에도 cdn이 제공되고 있다. 나는 내 프로젝트가 소규모고 Next.js를 기반으로 작업하였기 때문에 Vercel로 배포하는것을 선택하였다. 1️⃣ pakage.json deploy 추가 deploy는 배포시 명령어로 사용해야하기 때문에 추가한다. next export 는 서버없이 html만 내보낼경우 사용하는 명령어이다. deploly 명령어를 실행하면 next b..
next.js는 프리렌더링(pre-rendering) 기능을 제공합니다. 말 그대로 사전에 미리 html을 렌더링 한다는 것인데요 즉 html을 미리 생성하고 최소한의js를 연결시킨 후 클라이언트에서 요청이 들어오면 해당 html을 로드하면서 나머지js를 불러와 화면에 렌더링 시켜주는 것이죠. next.js는 주로 두가지 프리렌더링 방법을 제공합니다 - Server-side rendering: SSR - Static site rendering: SSG next.js의 프리렌더링 으로 각 page에 getServerSideProps ,getStaticProps, getStaticPaths 를 사용해서 데이터를 가져올수 있습니다 1. getServerSideProps (SSR) getServerSidePro..
Link로 동적라우팅 사용할때 props전달 하는 방법! //app.js import Link from "next/link" const obj = {name:'cccyyyy'} 이동 pathname : 해당하는 라우팅 query : 전달할 props를 넣어주고 현재 obj가 object인 상태이기 때문에 문자열로 바꿔주기위해 JSON.stringify()를 사용. as: props전달할때 url뒤에 표시 //[id].js import { useRouter } from "next/router" const view ()=> { const router = useRouter() const { currentName } = router.query const currentPost = JSON.parse(name) (..
next.js 에서 이미지를 어떻게 import해와야 하나해서 찾아봤는데 생각보다 복잡했다. 첫번째방법으로 단순히 상단에서 이미지를 import해와서 img태그에 src에 넣어주면 될줄알았는데 오류가생겼다 Unexpected character '�' (1:0) 위의 오류가 나서 구글링 해보니 next.js 내에서 이미지 설정을 또 해줘야 하는거 같았다. webpack에서 cofig.js 에서 url-loader를 따로 적용해줘야 하는것처럼 말이다. npm i next-images 모듈을 설치후 next.config.js 파일을 만들어서 아래 코드를 넣어주면 오류가 해결되었다 const withImages = require('next-images') module.exports = withImages() 두..
사용자가 구글에 키워드를 검색했을때 구글의 Search engine이 웹페이지의 정보들을 읽어서 가장 관련성이 높은 글들을 을 보여줍니다. 이것을 설정할 수 있게 하는 작업이 SEO(Search Engine Optimization) 검색엔진최적화 라고 해요 우리가 JavaScript로 웹사이트를 구축할때 SEO를 고려해야하는 이유는 구현방법을 어떻게 해야 하는지에 따라 사용자환경과 검색결과 순위에 영향을 미칠 수 있기 때문이에요. 어떠한 방법이 있는지 알아봅시다. SSR(Server Side Rendering) 서버에서 렌더링 되는 방식이에요. 클라이언트에서 요청을 하면 서버에서 데이터까지 갖춘 html을 클라이언트에 전달하게 되요. 👍장점(GOOD!) - 웹페이지 로드시 한번의 요청으로 페이지를 구성하..
