Image

• https://nextjs.org/docs/basic-features/image-optimization
• 사용자 화면에 노출이 된 이미지만 network 요청을 한다.
• slow 3G인 상황에서 blur된 placeholder를 자동으로 씌워준다.

  • local image만 적용됨

    <Image
    	src={profilePic}
    	alt="Picture of the author"
    	// width={500} 자동으로 제공
    	// height={500} 자동으로 제공
    	// placeholder="blur" // 로딩 중 blur-up(선택 사항)
    	// blurDataURL="data:..." 자동으로 제공
    />
    

    • gif 파일로 보여주고 완전 로드가 된다면 image link로 변환 된다.
• remote image

  • next.config.js에 이미지 링크 도메인을 입력해줘야 한다.

    module.exports = {
    		images: {
    				domains: ['example.com', 'example2.com'],
    		},
    }
    

  • next 서버에서 사전에 미리 링크 도메인 사진을 가져온다. 프론트는 외부 도메인을 생각할 필요가 없다.

  • blurDataURL 태그를 통해서 blur된 이미지를 제공할 수 있다.

• width, height를 모른다면?

  • css object fill를 통해서 image를 absolute로 설정하고 relative 부모 크기에 맞춰 이미지를 설정할 수 있다.

    <div className="relative">
    	<Image
    		alt="Mountains"
    		src="/mountains.jpg"
    		layout="fill"
    		objectFit="cover"
    		quality={100}
    	/>
    </div>
    

Middlewares

미들웨어가 /pages/_middleware.ts에 생성된 경우 /pages 디렉토리 내의 모든 경로에서 실행됩니다.

import type { NextRequest, NextFetchEvent } from "next/server";
export function middleware(req: NextRequest, ev: NextFetchEvent) {
  console.log(req.ua);
}

• 중첩 경로가 있는 하위 디렉터리가 있는 경우 미들웨어는 위에서 아래로 실행됩니다.
• api에도 적용이 된다.

쿠키, bot 등에 따라 redirect 할 수 있다.

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

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  if (req.ua?.isBot) {
    return new Response("Plz don't be a bot. Be human.", { status: 403 });
  }
  if (!req.url.includes("/api")) {
    if (!req.url.includes("/enter") && !req.cookies.carrotsession) {
      return NextResponse.redirect("/enter");
    }
  }
  //  return NextResponse.json({ ok: true });
}

import type { NextFetchEvent, NextRequest } from 'next/server';
import { NextResponse } from 'next/server';

const RESTRICT_ROUTES = ['/login', '/register'];

export const middleware = (req: NextRequest, ev: NextFetchEvent) => {
  if (req.ua?.isBot) {
    return new Response('미치셨습니까 휴먼?', { status: 403 });
  }

  const pagename = req.page.name;
  const isAPI = req.url.includes('/api');
  if (isAPI || !pagename) return;

  const hasSession = !!req.cookies.mildvu_session;
  const isRestrictRoute = RESTRICT_ROUTES.some((route) => route === pagename);
  const isPrivateRoute = pagename.includes('/me');

  if (hasSession && isRestrictRoute) {
    return NextResponse.redirect(new URL(`/me`, req.url));
  }

  if (!hasSession && isPrivateRoute) {
    return NextResponse.redirect(new URL('/login', req.url));
  }
};