Next.js
-
[Next.js] Image Tag Error: Invalid src prop카테고리 없음 2022. 10. 6. 03:19
에러 발생 기존에는 로컬 이미지만 next/Image를 사용하고 있다가 리모트, 서버상에서 받아오는 값에도 적용을 시켜야 해서 아 그냥 하면 되겠다 싶었다. 하지만..? 아래와 같은 에러가 발생했다.. 심란스러웠다.. 빠르게 구글링을 통해서 무슨 에러인지 찾았다. 해결책 해당 에러는 Next.js의 Image태그를 사용해서 외부의 이미지를 불러올 경우 해당 이미지에 대해 보호하려고 발생하는 오류로 확인되었다. 이 에러를 해결하기 위해선 우리의 next.config.js에 아래와 같은 코드를 입력한다. module.exports = { images: { domains: ['firebasestorage.googleapis.com'], }, }; images 하위의 domains에 [] 안에 에러 문자의 ho..
-
[Next.js] Router로 새 창 띄우기카테고리 없음 2022. 10. 4. 21:56
Next.js를 사용하는데 새 창을 띄우고 싶다면 보통 Link나 Router를 이용해야 한다고 생각했다. 특정 글씨를 눌렀을 때 새 창을 띄우고 싶다면 Link를 생각하겠지만 Next.js에서는 a 태그만 사용해도 된다고 나와있다. 하지만 내가 원하는 상황은 글씨가 아니라 특정 부분을 누르고 나서 새로운 창이 열리면서 이동하길 바랬다. 그래서 찾은 방법을 공유하고자 한다. router.push('이동할 url') 처음에는 위와 같은 방법으로 이동하려고 했다. 특정함수를 실행하고 마지막에는 이동할 url로 새창을 여는 상황 하지만 새 창이 뜨지는 않았다. window.location('이동할 url') Next.js에서는 You don't need to use router.push for external..
-
Next.js카테고리 없음 2022. 5. 16. 13:59
Next.js? Next.js는 SSR, SEO 등 생산에 필요한 기능을 제공하는 React 프레임워크이다. Vercel에서 만들어졌다. Next.js의 작동방식 사용자가 초기에 Server에 페이지 접속을 요청한 경우 SSR방식으로 렌더링 될 HTML을 보낸다. 브라우저에서 JS를 다운로드하고 React를 실행한다. 사용자가 페이지와 상호작용을 하며 다른 페이지로 이동할 경우 CSR방식으로 Server가 아닌 브라우저에서 처리한다. Next.js의 작동 방식을 이해하기 위해 CSR과 SSR의 뜻을 알아보자. CSR이란? 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식이다. 우리가 사용하는 라이브러리, 프레임워크인 React, Vue, Angular들은 SPA방식을 사용한다. SPA는 기..