nextjs28 Next.js getServerSideProps 에서 페이지 이동 방법 문제 상황 회원가입시 약관동의 이후 회원 정보 입력 페이지 이동하는 상황에서 약관동의 없이는 회원정보 입력페이지에 접속시 약관동의 페이지로 이동시키려 했다. getServerSideProps 는 페이지가 구성되기전 서버쪽에서 작업을 해주는 함수이므로 기존 클라이언트에서 사용되는 DOM 관련 메서드 나 routing 할 수 있는 메서드 등등 활용 할 수 없다. 만약 페이지 요청시에 들어온 쿼리정보를 토대로 적절여부를 따진 후에 지정된 페이지로 이동시키는 로직을 만들고자 할 때 getServerSideProps 페이지 이동은 제한적이다. (만약 페이지가 로드되고 쿼리정보를 확인해서 넘긴다면 어렵지 않겠지만 비효율적인 방법으로 보인다.) 구글링해서 답을 찾지 못하여 혹시나 해서 chatGPT 에게 답을 구해보.. 2023. 3. 31. nextjs 기타 지원 기능 12 버전 기준으로 정리한 내용이므로 주의 13 버전은 일부 바뀐 내용이 있습니다. 개념만 참고 추천 nextjs 기본 및 페이지 개념 에서 이어지는 내용 css 관련 css-module, sass, css in js 등등 지원함 Adding a Global Stylesheet pages/_app.js 에 style 을 적용하면 됨 Import styles from node_modules v9.5.4 부터 node_modules 에 있는 css 파일 가져와서 적용 가능 ex) bootstrap, antd import 'bootstrap/dist/css/bootstrap.css' layout 레이아웃 감싸는 것도 따로 만들어 둠 꽤 편리함 13 버전에는 layout 파일을 생성해서 적용 가능.. 2023. 2. 2. nextjs 기본 및 페이지 개념 12 버전 기준으로 정리한 내용이므로 주의 13 버전은 일부 바뀐 내용이 있습니다. 개념만 참고 추천 Next.js 는 무엇인가 Next.js is a flexible React framework that gives you building blocks to create fast web applications - 공식문서 소개 부분 Next.js는 서버 사이트 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다. - [출처] 위키 백과 (https://ko.wikipedia.org/wiki/Next.js ) 정리: React 를 효율적인 사용하기 위한 프레임워크 이며 SSR 을 구현하는데 많이 사용함 설치 npx.. 2023. 2. 2. next-redux-wrapper 이해하기 nextjs 에서 redux 를 사용하기 위해서는 next-redux-wrapper 가 필수적으로 필요한 이유가 궁금했다. 본문 일부 내용 번역 정적 앱용 Redux 를 설정하는 것은 다소 간단하다 모든 페이지에 제공되는 단일 Redux 저장소를 만들어지기 때문에. Next.js static site generator or server side rendering 이 관련되면 Redux 연결 구성 요소를 렌더링하기 위해 서버에 다른 저장소 인스턴스가 필요하기 때문에 작업이 복잡해지기 시작합니다. 또한 초기 값 관련해서 redux 의 store 에 접근해야 할 수 도 있다. next-redux-wrapper 는 자동으로 스토어 인스턴스를 생성하고 모두 동일한 상태를 갖도록 합니다. 이해 과정 실제로 처음 n.. 2023. 2. 2. 이전 1 2 3 다음
