반응형 문서 정리 프레임워크13 [Nextra] .gif 파일 unoptimized warning 해결 Nextra .gif 파일 사용 시 "unoptimized" warning 해결 Nextra에서 .gif파일을 ![]() 형식으로 사용하면 아래와 같은 warning이 발생한다.The requested resource "/_next/static/media/파일이름.gif" is an animated image so it will not be optimized.Consider adding the "unoptimized" property to the . 해결방법1. 변경 전2. 변경 후 1. 위와 같이 형식으로 변경해주면 index를 사용하지 않고 페이지를 구성할 수 있다.2. width와 height를 지정해줘야 하는 단점이 있다. 2024. 8. 14. [Nextra] index 없애기 Nextra에서 페이지 구성할 때 index를 _meta.json에서 없애기1. Nextra에서 페이지를 구성할 때 _meta.json에는 index가 필수적으로 들어가야 한다.2. 일반적으로 index를 각 서브폴더의 소개나 설명같은 가장 먼저 나와도 될 내용을 넣는다.3. 하지만 이런 내용이 필요하지않을 때 바로 File로 시작하고 싶을 때 index를 첫 프로젝트 파일의 이름으로 하게되는데 이는 코드를 볼 때 가시성이 떨어진다.4. 이를 해결하는 방법은 아래와 같다. _meta.json1. 변경 전{ "index": project1, "projectFile2": "project2", "projectFile3": "project3", "projectFile4": "project4"}2. 변경 .. 2024. 8. 13. [Next.js, Nextra] video Next.js, Nextra에서 영상 파일을 사용하는 법1. next-videos 설치$ npm install next-videos$ yarn add next-videos$ pnpm add next-videos 2. next.config.js에 종속성 적용// 다른 종속성 적용 부분const nextConfig = { ...}const withVideos = require("next-videos");module.exports = withVideos(nextConfig);3. video 태그로 영상 파일 사용 1. autoPlay: 자동재생 여부2. muted: 음소거3. loop: 반복배생4. style: 크기 조절5. src: 영상파일 위치 2024. 8. 12. [Nextra] existSync is not a function Nextra로 문서정리 도중 existsSync 함수 Type Error가 발생 ○ Compiling /home ...TypeError: existsSync is not a function at file:///C:/[파일경로]/node_modules/.pnpm/nextra@2.8.0_next@14.2.5_react-dom@18.2.0_react@18.2.0/node_modules/nextra/dist/loader.mjs:19:35 위와 같은 에러 출력이 다른 모듈, 다른 위치 등에서 꽤 길게 발생 찾아보니 existsSync 함수가 함수가 아니라는 타입오류이며 이 문제는 아래와 같은 경우 발생1. existsSync 함수가 잘못된 모듈에서 호출되었음2. 해당 모듈이 올바르게 가져오지 못한 경우문제 .. 2024. 8. 11. [Next.js, Nextra] @next/font 패키지 경고 해결 Next.js, Nextra에서 @next/font 패키지 경고 해결1. Next.js, Nextra에서 font관련하여 아래와 같은 경고문이 발생⚠ Your project has `@next/font` installed as a dependency, please use the built-in `next/font` instead. The `@next/font` package will be removed in Next.js 14. You can migrate by running `pnpm dlx @next/codemod@latest built-in-next-font .`. Read more: https://nextjs.org/docs/messages/built-in-next-font 2. 이 경고는 @ne.. 2024. 8. 9. [Nextra] 마크다운 파일(.md) 테이블 사용(<table></table>) Nextra에서 .md파일에서 테이블 사용하는 방법1. GFM구문으로 .md파일에서 테이블 생성| left | center | right || :----- | :----: | ----: || 1 | 2 | 3 || a | b | c | 결과leftcenterright123abc ※ GFM 구문이란?https://github.github.com/gfm/#tables-extension- GitHub Flavored Markdown Spec github.github.com 2. 동적 테이블 + { } 추가{ left center right {[ .. 2024. 4. 22. [Nextra] Nextra에서 이미지 파일 사용하기 Next.js 이미지Next.js에서 이미지를 사용하는 표준 방법은 MDX 내부는 구성 요소를 직접 가져오는 것이다. - 위와 같이 Next.js의 Image를 사용하면 레이아웃 이동이 없다. - 영상을 로드할 때 기본적으로 흐릿한 자리 표시자가 표시된다. - 크기(width와 height)를 정해줘야 한다. 정적 이미지Nextra는 Markdown 구문을 사용하여 정적 이미지 가져오기를 자동으로 최적화한다.이미지의 너비와 높이를 지정할 필요는 없으며![]() Markdown 구문을 사용하면 된다.- 이렇게 하면 public 폴더 안에 example.jpeg 파일이 로드되고 Next.js의 로 자동 래핑된다.- 공개를 통해 호스트하지 않으려면 으로 링크 시켜주는 코드를 생성해보자.사용방법은 아래와 같다.## `[here](/)` 사용Click [here](/) to read more.출력결과 위 코드는 아래와 같이 동작한다.import Link from 'next/link'## `here` 사용Click here to read more.출력결과 하지만 Nextra에서는 위 출력결과에서 보면 알다싶이 here에 하이퍼링크가 표시되지 않는다. (here을 누르면 동작은 된다.. 2023. 6. 23. [Nextra] FileTree, Steps, Mermaid사용 Nextra에서 FileTree, Steps, Mermaid사용FileTree 컴포넌트의 사용방법import { FileTree } from "nextra-theme-docs"; 출력결과Steps 컴포넌트의 사용방법import { Steps } from "nextra-theme-docs"; ### Step1Step1의 내용이다.### Step2Step2의 내용이다.출력결과Mermaid```mermaidgraph TD;subgraph AA [Consumers]A[Mobile app];B[Web app];C[Node.js client];endsubgraph BB [Services]E[REST API];F[GraphQL API];G[SOAP API];endZ[GraphQL A.. 2023. 6. 22. 이전 1 2 다음 반응형
