Web

[ Next.js - DeepDive ] - _document and Fonts

커스텀 도큐먼트 컴포넌트는 우리가 이전에 만든 커스텀 앱 컴포넌트와 비슷합니다. 커스텀 앱 컴포넌트는 NextJS가 앱을 빌드할 때, 앱 전체의 청사진과 같은 기능을 했습니다. 반면에 도큐먼트 컴포넌트를 이용하면 body태그도 변경할 수 있고, html태그도 수정할 수 있습니다. 그리고 이 컴포넌트 안에서 SEO는 어떻게 적용하는지, 그리고 NextJS가 폰트 최적화를 어떻게 대신해주는지 간단히 알아보도록 하겠습니다. https://nextjs.org/docs/advanced-features/custom-document Advanced Features: Custom `Document` | Next.js Extend the default document markup added by Next.js. nex..

[ Next.js - DeepDive ] - Lazy-load Imports

우리는 이전 Deep Dive에서 Dynamic Import에 대해서 살펴 보았습니다. 그런데, 만약에 다운되는데 많은 시간이 필요한 패키지라면 문제가 있을 수 있습니다. 따라서 우리는 2가지 방법으로 이 문제를 해결해 보도록 하겠습니다. /pages/enter.tsx import { Suspense, useEffect, useState } from "react"; import type { NextPage } from "next"; import useMutation from "@libs/client/useMutation"; import { cls } from "@libs/client/utils"; import Button from "@components/button"; import Input from "..

[ Next.js - DeepDive ] - Dynamic Import

https://nextjs.org/docs/advanced-features/dynamic-import Advanced Features: Dynamic Import | Next.js Dynamically import JavaScript modules and React Components and split your code into manageable chunks. nextjs.org Next에서의 Dynamic Import는 React에서와 매우 유사하므로 간단히 짚고 넘어가도록 하겠습니다. Next.js는 import()문법을 외부 라이브러리로 lazy loading을 지원합니다. 그리고 이는 Next에서 'next/dynamic'패키지에 존재합니다. 이러한 Deferred loading은 초기 화면을 ..

[ Next.js - DeepDive ] - Responses and Redirections

우선 실습을 진행하기 위해, 로그인이 되어 있을떄, cookie의 값이 어떤것이 있는지 확인을 해 보겠습니다. 이전에 iron-session에서 설정해둔 carrotsession이 잘 저장되어 있는 것을 보실 수 있습니다. 그래서 미들웨어 측면에서 cookie가 없다면 NextResponse를 이용해서 /enter로 redirect시켜보도록 했습니다. /pages/_middleware.ts import type { NextRequest, NextFetchEvent } from "next/server"; import { NextResponse } from "next/server"; export function middleware( req: NextRequest, ev: NextFetchEvent ) { i..