Next.js (6) 썸네일형 리스트형 [Next.js] Next.js app router error page 무한 새로고침 에러 next에 app router가 추가되었다! 기존의 page router도 사용가능 하지만 app router로 정의한 부분이 먼저 우선 적용된다고하기도 하고, 새 프로젝트를 개발하게되어 공식문서 따라하다가 오류난 부분이 있어서 정리해본다. app폴더 하위에 not-found.tsx 파일을 생성했는데 (404페이지인 경우 렌더링됨) 파일은 제대로 나오는데 무한 새로고침의 굴레에 빠졌음.. 사실 이전 프로젝트할때도 이런 증상이 있긴 했었다... 고질적인 문젠가개발환경에서만 그렇고 배포되면 별 문제 없길래 그냥 넘어갔었는데 이번엔 검색하다 이틀전에 올라온 해결방법을 찾아서 정리해둠! 추가한 폴더, 파일은 아래 이미지 참고 🤓 next 버전 : 13.4.6 1. app폴더 하위에 [...not_found] 라.. [Next.js] monorepo환경에서 next-seo, next-sitemap, robot 설정 | 사용하기 회사에서 monorepo로 프로젝트들을 작업하고 있는데, 그 중 한 프로젝트에 SEO를 위해 title, opengraph등 설정했던 내용들을 정리합니다. 1. next-seo 공식문서 https://github.com/garmeeh/next-seo 1. 라이브러리 설치 yarn add next-seo 2. DefaultSeo 설정 seo.config.js 옵션이 꽤 많은데, 일단 설정이 필요한 부분만 적용했습니다. 더 많은 옵션은 링크에서 확인가능합니다 : ) // /apps/프로젝트/seo.config.js export default { title: `{title}`, titleTemplate: '%s | `{부가설명}`', // %s에 각 페이지에서 설정한 title이 들어감 canonical: `.. [Next.js] Hydrate 간단하게 정리 일단 설명하기 전에, react에서 렌더링 되는 과정과 next에서 렌더링 되는 과정의 차이점에 대해서 정리합니다. 1. React.js Html과 JS파일을 한꺼번에 보내고 클라이언트에서 JS코드를 통해 웹 화면을 렌더링 2. Next.js Pre-rendering된 Html을 클라이언트에 전송 그 이후에 번들링된 React 코드(JS)들이 클라이언트에 전송 위 두개가 합쳐짐 = Hydrate 정리 위에 Next.js에 정리된 부분을 보면 먼저 전달받은 Pre-rendering된 Html은 단순하게 html으로만 구성된 화면이고, 자바스크립는 하나도 없는 상태입니다. 웹 화면을 보여주지만, 이벤트 리스너들도 각 DOM요소에 적용되기 전 상태라는 것! 그 이후에 번들링 된 React 코드들이 이전에 보내.. [Next.js] next/Link 사용하기 (공식문서 내용 정리) next/Link 사용하기 1.pages의 하위 디렉토리가 아래와 같을때 pages/index.js pages/about.js pages/blog/[slug].js 2. import 후 import Link from 'next/link' 3. 아래의 형태로 사용 Home About Us Blog Post Link의 props정리 필수값 1. href 이동할 경로 혹은 URL ... 옵션값 1. as 이동할 경로 혹은 URL ... 2. passHref 기본값 : false next Link에서 하위 컴포넌트로 href 속성을 전달해주는 역할 A태그 // 자식태그가 styled component a태그인 경우 참고 : https://f-dever-error-log.tistory.com/56 위처럼 pass.. [Next.js] next/router 사용하기 (공식문서 내용 정리) next/router 사용하기 router 객체에 접근하기 위해서 useRouter를 사용한다 1. import 후 import { useRouter } from 'next/router' 2. 아래의 형태로 사용 const router = useRouter() 아래처럼 console에서 router 객체에 대한 정보를 얻을 수 있다. router object 1. asPath - basePath이나 locale이 포함되지 않은 path ex ) 'https://dlquff-byeol4001.vercel.app/501da229-9915-4264-9d37-6783545ee553' 의 경우 asPath = '/501da229-9915-4264-9d37-6783545ee553' 2. basePath - 활성화 .. [Next.js] router.query가 빈값일때! ( with.useEffect ) 오늘의 문제는 Next에서 useEffect내에서 router.query를 console에 찍어봤는데 자꾸 빈 배열이 반환되는 경우! 화면에는 제대로 나오는데 console에 찍어보면 자꾸 빈 객체가 보이는 문제였다.. // ❌ ❌ ❌ ❌ ❌ export default function App() { const router = useRouter(); const queries = router.query; useEffect(() => { console.log(queries,'{} 빈 객체가 찍힘') }, []) return ( {queries} ) } Why? 정적 파일 최적화(Automatic Static Optimization)에 의해 정적으로 최적화된 페이지는 루트 매개 변수가 제공되지 않아서, que.. 이전 1 다음
