반응형 next.js23 [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] 마크다운 파일(.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. [Next.js, Nextra] Parsing error: Cannot find module 'next/babel' ... Parsing error: Cannot find module 'next/babel' 해결방법Parsing error: Cannot find module 'next/babel' ... 해결 방법 프로젝트 루트 경로에 아래 두 파일을 생성 및 수정해준다..babelrc{ "presets": ["next/babel"], "plugins": []} .eslintrc.json{ "extends": ["next/babel","next/core-web-vitals"]}babel 파싱 에러가 사라진 것을 확인할 수 있다. 2023. 8. 4. [Next.js, Nextra] Error: Invalid src prop "(domains)" on `next/image` Error: Invalid src prop "(domains)" on `next/image` 해결방법 Next.js, Nextra에서 외부에서 이미지 파일을 불러오면 아래와 같은 Error가 발생한다.위와 같은 Error는 next.config.js에 domain을 설정해주면 된다. module.exports = { reactStrictMode: true, images: { domains: [ "www.notion.so", "s3.us-west-2.amazonaws.com", ], // 이곳에 에러에서 hostname 다음 따옴표에 오는 링크를 적으면 되고 배열로 여러가지 입력이 가능하다. }}이후 next.config 파일을 수정했기 때문에 서버를 껐다가 다시 켜면 정상적.. 2023. 7. 30. [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. [Next.js] Nextra 파일 구성 [Next.js] Nextra에서 파일 및 페이지 구성Nextra는 먼저 페이지 디렉토리에서 모든 Markdown 파일 및 구성을 수집한 다음 전체 사이트의 "페이지 맵 정보"를 생성하여 아래의 탐색 모음 및 사이드바와 같은 항목을 렌더링한다. 기본 동작기본적으로 페이지 맵에는 모든 .md 및 .mdx 파일 이름과 디렉토리 구조가 알파벳 순으로 정렬되어 있다. 그런 다음 Nextra는 제목 패키지를 사용하여 파일 이름에서 형식이 지정된 페이지 이름을 가져온다.예를 들어 다음과 같은 구조를 가진 경우pages/ contact.md index.mdx about/ legal.md index.mdx 페이지 맵은 다음과 같다. (모든 이름이 알파벳 순으로 정렬된다.)[ { "name": ".. 2023. 6. 20. [Next.js] Nextra를 사용한 문서화 [Next.js] 문서화를 위한 Nextra를 설치 및 시작Nextra는 Next.js를 기반으로 하는 프레임워크로 컨텐츠 중심의 웹사이트를 구축할 수 있다.Next.js의 모든 기능과 Markdown 기반 컨텐츠를 쉽게 생성할 수 있는 추가 기능이 있다. 1. Next 프로젝트 설치Next.js, React, Nextra 및 Nextra Docs Theme를 설치해야 한다.먼저 프로젝트를 설치하고자 하는 디렉토리에서 아래 명령어를 실행하여 Next.js 프로젝트 폴더를 설치한다.# npx 사용npx create-next-app@latest "프로젝트 이름"# pnpm 사용pnpm create next-app "프로젝트 이름"# yarn 사용yarn create next-app "프로젝트 이름" 이후 아.. 2023. 6. 19. [Next.js] 컴포넌트에 props로 useState값 넘기기 컴포넌트를 재사용하기 위해 분리시켜 props를 넘겨 제어할 때 useState를 props 넘겨줘야 하는 상황이 온다. * useState는 state의 초기값을 정할 수 있고, return 값으로 state, setState를 돌려주는 hook이다. 예를 들어 아래와 간은 DatePicker UI를 컴포넌트방식으로 만든다고 하자. 예제 코드는 다음과 같다. 1. 이번달의 첫 날과 마지막 날을 선언해주고 각각의 DatePicker로 전달할 useState값 또한 초기화 한다. const firstFormat = dayjs().startOf("month").toDate(); const lastFormat = dayjs().endOf("month").toDate(); const [selectedDate1,.. 2023. 5. 15. 이전 1 2 3 다음 반응형
