🌈 들어가기 next.js를 기반으로 동작하고 있는 중고나라 웹사이트에서 seo를 개선하기 위한 첫 작업으로 rel 속성에 대한 작업을 진행하게 되었다. 🤔 문제 상황 현재 중고나라 웹사이트에서 상품검색을 진행하면 상품리스팅에 광고가 포함되는 경우가 있다. 하지만, 아래의 화면처럼 광고에 대한 rel 속성이 정의되어있지 않아 검색엔진이 인지하지 못하는 문제가 발생하였다. ✨ 링크 태그와 검색엔진 SEO 검색엔진이 문서 내에 a 태그 ( 👉 next.js 에서의 Link) 를 만나게 되면, 그 속성에 연결된 url의 html을 읽으려는 시도가 시작될 것이다. 그렇기 때문에 a 태그의 rel 속성을 정의하여 검색엔진이 이를 읽을 수 있게 할 것인지, 현재 페이지와 관련이 없음을 알려줄 것인지를 지정할 수 있..
WEB/Next.js
지난 10/26에 Next.js 13버전을 발표했다. 이 글을 통해 어떤 부분이 달라졌고, 내가 배포한 nori 에서 변경해야 할 부분을 먼저 점검해보고자 한다. 공식문서를 참고하였다. 👇 최신 버전을 다운로드 하고자 하면 아래의 명령을 수행하면 된다. npm i next@latest react@latest react-dom@latest eslint-config-next@latest ✨ app/ Directory (beta) Next.js에서 가장 사랑받는 기능 중 하나는 파일 시스템 라우터이다. 즉, 폴더 안에 파일을 옮겨놓기만 애플리케이션에서 즉시 경로를 생성할 수 있다. 위의 폴더 구조를 따르게 되면 https://www.with-nori.com/write, https://www.with-nori...
✨ 들어가기 NextAuth.js는 Next.js 애플리케이션을 위한 Social 로그인을 쉽게 관리할 수 있는 라이브러리입니다 . ✨ 설치하기 yarn add next-auth ✨ 폴더구조 세팅하기 └── .env └── 📁 pages ├── 📁 api │ └── 📁 auth │ └── [...nextauth].ts ├── _app.tsx └── _document.tsx ✨ 환경변수 설정하기 네이버, 카카오, 구글 로그인 총 3개의 소셜 로그인을 진행할 예정이므로 이에대한 개발자 등록을 진행한 뒤 각각에 해당하는 ID or Key / Secrect 을 환경변수로 설정해준다. NEXT_PUBLIC_KAKAO_API_KEY= NEXT_PUBLIC_KAKAO_JS_KEY= NEXT_PUBLIC_KAKAO_S..
