반응형 개발/Next.js35 1분만에 auth 구현 할 수 있게 해주는 next-auth 깃허브 auth로 구현했는데 다 방식은 똑같다. * app router를 사용했고 rsc,rcc에 대한 설명은 생략함. 1. auth key 받아오기 나는 깃허브에서 받아왔다. 2. pages/api/aut/[...nextauth].ts 만들기 app router쓰는데 api폴더를 pages폴더에 만들어서 그냥 pages에 넣었다. app 폴더에 넣어도 상관 없을듯 아래코드는 그냥 next-auth에서 시키는대로 작성한거다. import NextAuth from "next-auth"; import GithubProvider from "next-auth/providers/github"; export const authOptions = { providers: [ GithubProvider({ clientId.. 2024. 4. 6. middleware.ts middleware middleware는 request가 완료되기 전에 실행된다. 그 후 들어오는 request에 따라 헤더를 다시 작성하거나 리다이렉트를 한다. app폴더와 동일한 레벨에 두어야 한다. app 폴더 안에 있으면 안된다. // middleware.ts import { NextResponse } from 'next/server' import type { NextRequest } from 'next/server' // This function can be marked `async` if using `await` inside export function middleware(request: NextRequest) { return NextResponse.redirect(new URL('/home'.. 2024. 2. 11. Next 서버 컴포넌트 이용시 보안 이 글을 읽고 기억해야 할 부분들을 메모 How to Think About Security in Next.js Learn about what security protections are built-in Next.js and view a guide for auditing applications. nextjs.org 보안 관련된 것은 props나 url이 아닌 cookie같은 것으로 검증하기 예를 들어 url에 isAdmin = true 같은 값을 사용하거나 로그아웃 혹은 변경사항 저장 같은 것을 수행하는데 사용되서는 안된다. 이는 클라이언트단에서 오용될 가능성이 있다. 그렇기 때문에 보안과 관련된 것들은 cookies같은 것들을 이용하는 것이 좋다. 클로저 서버컴포넌트에서도 클로저가 적용되고 서버액션은 클.. 2024. 2. 11. React Server Component React Server Component Next app-router에서 app 폴더에 컴포넌트를 만들면 자동으로 서버 컴포넌트(이하 RSC)로 만들어진다. 그런데 SSR과 RSC는 어떤 차이일까? SSR 일단 SSR은 다음과 같다. (이미지에 DOM이라고 적었는데 document로 정정) 먼저 서버에서 document를 렌더링하고, JS 번들을 다운받아 hydration이 이루어진다. 그 후 data fetching을 한다. fetching 중에는 loading UI가 나타나고, fetching이 완료되면 나머지 content들이 paint된다. 네트워크탭에서는 다음과 같이 확인할 수 있다. Data fetching을 렌더링 전에 수행하는 방법 그럼.. 만약 data fetching을 서버에서 미리 한.. 2023. 10. 12. 이전 1 2 3 4 ··· 9 다음 반응형
