[TIL] 231024

Nextjs13

Api Route(12버전) = Route Handler(13버전)

API를 바로 추가할 수 있는 기능이다. 원래는 express 서버를 따로 배포하여 사용해야 했지만, Nextjs에서 바로 express로 추가하여 api 서버를 만들어서 vercel로 배포하면 된다.

Nextjs 13기준 Route Handler
page와 같은 위치에 route.ts를 사용해도 되지만, 가끔 안되는 경우가 있기에 api폴더 내에 만들어준다.
-> 서버 에러가 발생한다.
app/api/route.ts

import { NextResponse } from "next/server";

export const GET = () => {
  return NextResponse.json({ message: "Hello World" });
};
/*
export const HTTP메서드 = () => {
};
*/

HTTP메서드를 사용하여 사용한다.
로컬url/api에 접근해보면 {"message": "Hello World"} 가 출력되는 것을 확인할 수 있다.

클라이언트 컴포넌트에서 데이터를 가져올 때

route handler를 사용하여 호출할 수 있다. 주로 API 토큰같은 민감한 정보를 클라이언트에 노출시키고 싶지 않을 때 사용한다.

middleware

루트 폴더에 middleware.ts 를 생성하여 다양한 미들웨어 작업이 가능

redirect

NextResponse.redirect
특정 url로 접근할 때 자동으로 설정된 URL로 이동할 수 있다.

redirect 예제

ping페이지와 pong페이지가 있는데 ping 요청이 들어오면 pong으로 연결되도록 해주기
→ 안쓰는 url같은거 처리

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
	const currentUrl = request.nextUrl.clone();
	
	if (request.nextUrl.pathname === "/ping") {
		currentUrl.pathname = "/pong";
		return NextResponse.redirect(currentUrl);
	}
}

rewrite

url은 변하지 않지만, 컨텐츠만 설정된 url의 컨텐츠로 보이게 해주고 싶을 때 사용한다.
ex) AB 테스트

rewrite 예제

ping페이지로 요청을 보내는데 pong으로 rewrite를 하면 url이 변하지는 않지만 컨텐츠는 pong이 나온다!!
같은 url로 주지만 사람에 따라 다른 페이지를 보여주는 등

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
	const currentUrl = request.nextUrl.clone();
	
	if(request.nextUrl.pathname === "/ping") {
	currentUrl.pathname = "/posts/new";
	return NextResponse.rewrite(currentUrl);
	}
}

request 에 존재하는 cookie를 검사하여 비로그인 유저 검사하기

참고해볼만한 블로그!

https://velog.io/@jay/series/nextjs13-master-course
이분이 자세하게 nextjs13에 대한 설명을 해주신 것 같다. 나중에 전부 읽어봐야지

media쿼리를 이용한 다크모드

운영체제의 모드에 따라 css가 적용된다.

@media (prefers-color-scheme: light) {
  /* 라이트 모드에 적용될 css 정의 */
}

@media (prefers-color-scheme: dark) {
  /* 다크 모드에 적용될 css 정의 */
}