본문 바로가기

nextjs5

[Nextjs] useRouter의 query를 useEffect에서 사용하기

개요 구현하려는 기능은, 원래 작성되어 있는 블로그 글을 다시, 업데이트하는 기능이다. 우선, 해당 페이지는 pre-rendering이 필요없는 페이지이다. 그래서, CSR을 사용하려고 했다. nextjs의 dynamic route 스펙을 사용해서, /wirte/[id].js라는 page를 만들었고, [id].js에서 useRouter hook을 사용해서, [id]의 id를 추출했다. 그리고, useEffect hook을 사용해서, nextjs의 api routes의 api를 호출했다. api routes의 url은 '/post/[id]'이다. 그래서, 다음 코드처럼, 호출했는데, 에러가 발생하였다. /** * @description CSR */ export default function WriteId(.. 2022. 10. 4.

[Nextjs] 기본 절대 경로 설정하기

홈 디렉토리 경로에 jsconfig.json 폴더에 다음을 작성 { "compilerOptions": { "baseUrl": "src" } } 2022. 9. 20.

[NextJS] 서버에서 데이터도 패치받아서 렌더링하기

결국.. 그냥 서버사이드렌더링이 있고, 오로지 서버사이드렌더링이 있다. getServerSideProps()로 컴포넌트에서 데이터를 패치받으면, 이 패치받은 데이터까지 렌더링해서 클라이언트에 전달한다. getServerSideProps() 말고도, getInitialProps()도 있다. 오직 서버사이드렌더링의 장점 - API 요청에 사용하는 key나 restful 정보를 클라이언트가 못 보게 할 수 있다.(서버에서만 처리되기 때문) - 사용자가, 데이터를 패치받는데 걸리는 시간동안, 로딩화면이나 스켈레톤을 안 봐도 되서 사용자 경험에 좋다. 개요 서버사이드렌더링의 경우, 클라이언트가 서버에 페이지를 요청하면, 서버는 html을 만들어서 우선적으로 클라이언트에 전달합니다. 클라이언트는 html을 일단, .. 2022. 1. 16.

[NEXTJS] api key 숨기기 nextjs rewrites

개요 - 숨겨야 하는 이유 보안. 클라이언트를 통해서 사용자들이 api와 key를 확인할 수 있음. Next.js로 api 숨겨서 요청보내는 방법 nextjs rewrites 설정을 하면 됩니다. https://nextjs.org/docs/api-reference/next.config.js/rewrites next.config.js: Rewrites | Next.js Add rewrites to your Next.js app. nextjs.org rewrites 속성은 요청 경로를 다른 목적지 경로로 매핑해주는 설정 객체를 배열로 가지는 nextjs의 설정 속성입니다. rewrites속성을 사용한다면, 유저가 url을 변경해서 요청할 수 없고, 개발자가 의도한 경로로만 접근할 수 있게 할 수 있습니다. .. 2022. 1. 16.

[NEXTJS] style jsx 설정 방법

Next.js에서 css-in-js 작성하는 방법 1. inline css(not cool) 2. ) } 전역 style 설정 방법 pages/_app.js를 만들면 됨. APP COMPONENTS APP PAGES차이점 2022. 1. 16.

티스토리툴바