#middleware

nextjs middleware 에서 protected route 처리 하는 방법이 궁금합니다

middleware 에서 토큰 인증에 따른 redirect 를 구현 할려고 합니다 제가 생각한 로직은 인증이 필요한 페이지는 accesstoken을 쿠키에서 받아오고 토큰이 없거나, 인증이 실패하면 login 페이지로 이동, 토큰이 만료된 경우에는 refresh 요청이후 accesstoken,refreshtoken 재발급 이후 원래 이동할려는 페이지로 이동 이렇게 생각중인데 다만 하나 걸리는게 middleware에서 refresh api 요청을 하는게 과연 올바를까? 궁금합니다 그럼에도 굳이 middleware 에서 할려는 이유는 page단 에서 처리할경우에는 결국에는 한번 그 페이지로 이동했다가 처리되는거라 깜빡이는 이슈가 생겨서 그렇습니다 보통 어떤식으로 처리하는지 궁금해요

Next.Js의 next/link, middleware 질문합니다!

안녕하세요. 회사에서 Next.js, Vercel 환경에서 개발하는 신입 프론트엔드 개발자입니다. Next.js 기술의 next/link와 middleware 기술에 대해서 궁금증이 생겨서 질문합니다!! next/link는 prefetch기능이 큰 장점으로 알고있어서 Link태그에 경로를 설정해서 미리 데이터를 받아오려고 테스트해보는데 prefetch={true} 속성값을 줘도 개발자도구에서 봤을때 미리 데이터를 받아오지 않는거같습니다 ㅠㅠ 원래 개발자 도구에는 확인이 불가능한건가요?? 그리고 next.js의 middleware는 공식문서에 구글링을 통해서 이론적인 부분은 알고있는데 어떤 경우에 사용해야할지 감이 안잡히네요. 어느 페이지에 middleware를 적용해보는게 좋을까요? 이해하기 쉽게 알려주시면 감사하겠습니다 🙏

Next.js 미들웨어

Vercel를 사용하지 않고 배포해서 Next.js (v13.4)의 미들웨어를 사용해보았는데 잘 작동하지만 공식 문서에서는 edge runtime에서만 가능하다라고 나와있는데 추후에는 vercel를 사용하지 않고 Next.js를 배포한다면 미들웨어는 사용할 수 없는건가요?! 관련 히스토리에 대해 알고 싶습니다. 감사합니다! https://nextjs.org/docs/pages/building-your-application/routing/middleware#runtime

Nextjs app router middleware + token 여부에 따른 리다이렉트

안녕하세요, next.js로 팀 프로젝트 진행 중 궁금한 것이 생겨 질문드립니다. next.js의 middleware.ts를 이용하여 모든 라우터에 접근할 때마다 유저 인증 토큰을 확인 후, 토큰이 없으면 /login 페이지로, 토큰이 있다면 원하는 페이지로 이동할 수 있도록 처리하길 원합니다. 유저 토큰은 로그인 시, access token을 body로 내려 받아 전역 utils 파일에 클래스 형태로 저장하고 있고, refresh token은 쿠키로 내려 받아 필요할 때마다 토큰 재발급 요청을 보낼 수 있도록 설계하고 있어요. 그런데 middleware.ts에서 전역으로 관리하는 토큰에 접근이 불가능한 것 같더라구요.. accessToken을 쿠키로 관리하지 않으면 미들웨어에서 토큰에 접근하는 방법이 아예 없는 것일까요? 아니면 제가 뭔가 단단히 착각하고 있는 것이라면 도움을 요청하고 싶습니다! 감사합니다🙇‍♂️

RTK action, state 직렬화 질문

안녕하세요! 저는 React + redux-tool-kit을 이용하여 개인 프로젝트를 진행하고 있습니다 redux의 state와 action에서는 직렬화가 되지 않는 객체등을 넣으면 안된다고 알고 있습니다. 외부로 요청한 api에서 받은 객체를 전역으로 사용하기 위해서 store의 state에 넣어주어야 한다고 생각하였는데 직렬화 관련 오류가 확인이 됩니다. 이렇게 직렬화 되지 않는 객체를 action.payload에 전달할 경우에는 해당 action만 getDefaultMiddleware에서 직렬화 검사를 하지 않는 옵션을 주어야 하는 걸까요?

서버 운영중에 궁금증이 생겼는데 이 로그는 해킹시도인가요?

django.core.exceptions.DisallowedHost: Invalid HTTP_HOST header: 'pingjs.qq.com'. You may need to add 'pingjs.qq.com' to ALLOWED_HOSTS. 2023-10-03 05:09:32,644 [ERROR] django.security.DisallowedHost: Invalid HTTP_HOST header: 'pingjs.qq.com'. You may need to add 'pingjs.qq.com' to ALLOWED_HOSTS. Traceback (most recent call last): File "/usr/local/lib/python3.9/site-packages/django/core/handlers/exception.py", line 55, in inner response = get_response(request) File "/usr/local/lib/python3.9/site-packages/django/utils/deprecation.py", line 133, in __call__ response = self.process_request(request) File "/usr/local/lib/python3.9/site-packages/django/middleware/common.py", line 48, in process_request host = request.get_host() File "/usr/local/lib/python3.9/site-packages/django/http/request.py", line 167, in get_host raise DisallowedHost(msg) django.core.exceptions.DisallowedHost: Invalid HTTP_HOST header: 'pingjs.qq.com'. You may need to add 'pingjs.qq.com' to ALLOWED_HOSTS. 2023-10-03 05:09:32,646 [WARNING] django.request: Bad Request: /ping.js 2023-10-03 05:09:32,646 [WARNING] django.request: Bad Request: /ping.js 2023-10-03 05:38:50,055 [WARNING] django.request: Not Found: /wp-admin/setup-config.php 2023-10-03 05:38:50,055 [WARNING] django.request: Not Found: /wp-admin/setup-config.php 2023-10-03 05:38:55,464 [WARNING] django.request: Not Found: /wp-admin/install.php 2023-10-03 05:38:55,464 [WARNING] django.request: Not Found: /wp-admin/install.php 2023-10-03 05:39:03,014 [WARNING] django.request: Not Found: /readme.html 2023-10-03 05:39:03,014 [WARNING] django.request: Not Found: /readme.html 2023-10-03 05:39:12,407 [WARNING] django.request: Not Found: /license.txt 로그를 까보면 이런식으로 무언가 요청을 엄청 많이 하더라구요 ?? 방지하는 방법이라던가 혹시 어떻게 대처해야할지 아시는분이 있을까요 ..?

Next.js middleware 질문입니다

getServerSideProps에서 통신하는 axios의 헤더에 쿠키에 들어있는 엑세스 토큰을 삽입하려고 합니다. 다음과 같이 요청시 헤더에 엑세스 토큰을 넣는 middleware를 작성하고 실행을 시켰는데 동작하지 않습니다. 정확히 말하면 middleware에서 request.url.includes('api') 값을 찍어보면 false밖에 출력되지 않고, 엑세스 토큰이 요청 헤더에 전달되지 않는거 같습니다. next.config에서 프록시 설정도 해주었는데 뭐가 문제일까요? page router 방식이고 로컬 환경에서 실행중입니다.

nextjs 전역 상태관리 질문

안녕하세요 nextjs(App router 사용)로 프로젝트를 진행하고 있는데, 전역상태를 정의하기 위해서 zustand를 사용하려고 하고 생각중입니다. 전역 상태를 정의하기 위해서는 1. 가장 root가 되는 layout.tsx에 provider를 불러와 감싸주어, 전역적으로 참조할 수 있도록 하는 것 2. persist middleware을 사용해서 LocalStorage에 저장하는 방식으로 상태를 관리하는 것 이 정도 두 가지가 있는 것 같은데, 질문은 1. 만약 1번 방법을 사용한다면 client component로 선언한 custom provider로 자식 컴포넌트를 감싸게 될텐데, 그러면 상태가 변경됨에 따라 하위 컴포넌트들(server, client 상관없이)이 모두 리렌더링 되는 것인가요? 만약 그렇게 된다면 SSR의 의미가 사라지는 것 아닌가요? 2. 일반적으로 nextjs에서는 전역 상태를 어떤 식으로 관리하나요? 입니다. 감사합니다!

next js middleware redirect 질문 있습니다.

안녕하세요, next js middleware를 사용해 로그인 사용별 화면을 분기하고 있습니다. 다름이 아니라 사용하면서 문제가 있어 이리저리 검색하다가 해결방법을 찾지 못해 글 남깁니다. 문제1. 브라우저 뒤로가기시 redirect대상 페이지면 title 미변경 문제. redirect된 페이지의 title이 아닌, redirect대상의 title이 적용되었습니다. redirect가 서버에서 브라우저에 요청하는 것이고 브라우저는 이를 실행은 하나 title은 변경되지 않았습니다. 2. 로그인후 뒤로가기를 계속 진행한후 브라우저 첫 페이지(구글)도달후 앞으로 가기를 하면 무한 리디렉션 문제가 발생. 해당 문제는 로그인후 메인 화면으로 넘어간 후 다시 뒤로가기를 반복하고 첫 페이지 도달시, 다시 앞으로 가기해서(예를 들어 로그인 페이지)면 미들웨어가 화면전환 도중에 리디렉션 요청이 많다고 에러를 발생 시킵니다. 아래는 제가 사용하는 코드를 첨부하겠습니다. 요약하자면 redirect하면 title 변경이 안됨. 뒤로가기후 다시 앞으로 가기하면 리디렉션 에러가 발생함. 만약 다른 방법이 있다면, 현업에선 어떻게 처리하는지 궁금합니다. export const verifyUser = (request: NextRequest, moveUrl: string) => { // const includesPage = ['/', '/auth/login', '/dashboard/customdashboard']; const accessToken = request.cookies.get('accessToken')?.value; const url = request.nextUrl.clone(); if (accessToken && isTokenExpired(accessToken)) { // 로그인 페이지 요청시 사용자 검증이 완료된 상태면 / 페이지로 강제 리다이렉트시킴. if (moveUrl === '/auth/login' || moveUrl.startsWith('/signup')) { url.pathname = '/'; return NextResponse.redirect(url); } return NextResponse.next(); } else { // 일반 페이지 요청시 사용자 검증이 미완료된 상태라면 로그인 페이지로 강제 리다이렉트시킴. if (moveUrl === '/auth/login' || moveUrl.startsWith('/signup')) { return NextResponse.next(); } removeLoginCookie(); url.pathname = '/auth/login'; return NextResponse.redirect(url); } };

next js middleware 사용시 404페이지 에러문제

안녕하세요, next js middleware를 사용해 라우팅 제어를 하고있습니다. 허나 404에러 페이지 테스트를 위해 아무 경로를 입력하고 들어가니 아래와 같은 에러를 발생시키더군요, 구글 검색결과 현재까지 수정되지 않은 버그인듯 합니다만,, middleware파일을 삭제하면 에러가 발생하지 않습니다. 혹시 아래와 같은 버그를 해결해보신분 계신가요? next 버전은 13.1 입니다. 이미지가 화질이 안좋은데 Unhandled Runtime Error Error: Invariant: attempted to hard navigate to the same URL /dashboard/customdashboard http://localhost:3000/dashboard/customdashboard 에러입니다.

Next JS 공식문서에서 getStaticProps()관련 문구의 해석을 했음에도 이해가 되지 않습니다.

The data can be publicly cached (not user-specific). This condition can be bypassed in certain specific situation by using a Middleware to rewrite the path. 위의 내용입니다. 해석해도 무슨의미인지 이해가 되지 않습니다.