Next 12의 경우Next.js 12 이전에는 next/head 컴포넌트를 사용하여 메타데이터를 설정.import Head from 'next/head';export default function Page() { return ( My Page Title This is my page );}다음과 같이 메타데이터를 기록 하였다.Next 13 이후의 경우Next.js 13부터는 next/head 컴포넌트 대신 Metadata 라이브러리를 사용하여 메타데이터를 설정. Metadata API는 페이지의 메타데이터를 정의하는 객체를 제공import { Metadata } from 'next';export const metadata: Metadata = { t..
분류 전체보기
Next Image 사용하는 방법Next.js 에서는 별도의 Image 컴포넌트가 존재한다 .Image 컴포넌트의 장점은 다음과 같다향상된 성능: 최신 이미지 형식을 사용하여 각 디바이스에 대한 올바른 크기의 이미지 제공시각적 안정성: 자동으로 layout shift 방지빠른 페이지 로드: 이미지가 뷰포트에 들어갈 때만 로드되며 placeholder 제공유연성: 원격 서버에 저장된 이미지에 대해서도 온디맨드 이미지 크기 조정Sample Codepage.tsx 파일import Image from "next/image";import styles from "./imagepage.module.css";const ImagePage = () => { return ( );};export ..
Next.js 14 에서 editor 구현중에 다음과 같은 오류가 났다.❗️TypeError: Cannot read properties of undefined (reading 'prototype') 여러가지 방법이 있었지만 page에 “use client”를 잊어버렸다. 혹시라도 Next.js 에서 오류가 난다면 "use client" 를 빼먹었는지 확인해보자
📘 Next.js 에 markdown 설치 하기# ✨ Next.js에서 MDX 사용하기## 📦 MDX 관련 패키지 설치yarn add @next/mdx @mdx-js/loader @mdx-js/reactyarn add --dev @types/mdx@next/mdx: Next.js에서 MDX를 지원하기 위한 공식 패키지@mdx-js/loader: MDX 문서를 컴파일하는 Webpack 로더@mdx-js/react: MDX 문서 내에서 React 컴포넌트를 사용하기 위한 기능을 제공합니다.@types/mdx: TypeScript 프로젝트에서 MDX 파일에 대한 타입 지원을 제공합니다.remark-prism: 마크다운 내 코드 블록을 하이라이팅하기 위한 패키지 (선택사항)🔧 next.config.mjs ..
{ "extends": ["next/babel", "next/core-web-vitals"]}Error 발생❗️Parsing error : Cannot find module 'next/babel’에러표시가 발생해도 웹은 정상적으로 동작했지만 코드상에서 에러표시가 너무 보기가 싫었다.next/babel 을 새로 설치하는 방법도 소용이 없었다.해결방법- eslintrc.json -{ "extends": ["next/babel", "next/core-web-vitals"]}extends 에 next/babel 을 추가하는 것으로 에러표시가 사라졌다. 어차피 eslint 오류라 별 상관 없는데 에러가 왜 발생하는지는 나도 잘 몰루?, 혹시 발생하더라도 바로 해결방법을 적용하지말고 프로젝트를 껐다 다시 켜보면..
vscode snippet 당신의 시간을 소중히 해주는 snippet 사용하기1. snippets 설정 접근하기접근방법 1. cmd + shift + p 를 통해 아래와 같이 snippets에 들어가기접근방법 2. code - preferences - configure user snippets 로도 접근 가능2. 설정할 언어 입력필자는 typescriptreact.json 을 사용하므로 typescriptreact.json에 내용을 작성을 했다.3. 자신만의 커스텀 스니펫 작성snippet-generator.app/ 에서 간단하게 작성 가능하다.${TM_FILENAME_BASE}은 생성된 해당 파일의 이름이다.Description은 스니펫을 간단하게 설명하는 부분Tab trigger는 스니펫을 불러온 단..
