NextJS
-
Next.js 다이나믹 메타 태그 넣기Nextjs 2022. 7. 10. 21:36
저번 글에 이어서 SEO 작업을 계속 하고 있다. 이번주엔 다이나믹 메타 태그 작업을 했다. (메타태그 종류나, 검색최적화를 위한 추천 등의 내용은 없습니다) https://jisoo-log.tistory.com/18 Next.js 정적, 동적 사이트맵 만들기 갑작스레 전혀 모르는 프로젝트의 사이트맵을 만드는 업무를 하게 됐다. 처음에는 사이트맵이 무엇인지도 몰라서 급하게 리서치를 했다. 사이트맵은 사이트에 있는 페이지, 동영상 및 기타 파 jisoo-log.tistory.com 메타 태그란? 웹페이지에서 element 를 열어보면 meta tag ); } 하지만 아래와 같은 방식으로 하면 메타태그가 비어있는 참사(?)가 일어난다. import Head from 'next/head'; import { m..
-
Next.js 정적, 동적 사이트맵 만들기Nextjs 2022. 6. 26. 23:57
갑작스레 전혀 모르는 프로젝트의 사이트맵을 만드는 업무를 하게 됐다. 처음에는 사이트맵이 무엇인지도 몰라서 급하게 리서치를 했다. 사이트맵은 사이트에 있는 페이지, 동영상 및 기타 파일과 그 관계에 관한 정보를 제공하는 파일입니다. (출처: Google 검색 센터) 검색엔진들은 사이트맵 파일을 읽고서 사이트를 크롤링하기 때문에, SEO(Search Engine Optimization, 검색최적화)를 위해 기본적으로 세팅해주어야한다고 한다. 사이트맵 파일이 없어도 검색엔진이 크롤링을 통해 사이트를 찾긴 하지만, 발견되지 않는 웹페이지가 없도록 직접 url들을 넣어주는 것이다. 아래 내용은 이 블로그를 많이 참고해서 작성했다. 덩달아 링크로 타고 들어간 이 글도 도움이 많이 되었다. (이 두 글이 없었다면 ..
-
Next.js 와의 첫 만남 (CSR vs SSR)Nextjs 2021. 9. 26. 22:15
회사에서 React Native 앱 개발을 주력으로 하고 있는데, 어느날은 Next.js로 구현된 홈페이지 리뉴얼 일감이 주어졌다. Next.js 라 하면 보통 SSR을 쉽게 구현할 수 있는 자바스크립트 프레임워크라는 설명이 따라온다. 당시 CSR과 SSR이 무엇인지도 모르는 채여서 한참 이런저런 설명을 찾았었다. CSR(Client Side Rendering) 과 SSR(Server Side Rendering)이란? 이름에서도 알 수 있지만, 결국 어디에서 화면을 랜더링 해주느냐의 방식 차이다. 우리가 보는 화면은 기본적인 html 틀과, 그 안에 들어갈 다양한 데이터들이 합쳐져서 완성된다. 첫 화면을 만드는데 필요한 내용을 서버에서 받아온 뒤, 클라이언트쪽에서 조합 후 보여주면 CSR, 서버에서 이미..