nextjs Data List
- NEXT.JS 기본개념
- NEXT.JS 설치
- NEXT.JS 실행방법
- NEXT.JS 파일 및 구조
- NEXT.JS 데이터 가져오기
- NEXT.JS API 쿼리데이터 생성
- NEXT.JS Components
- NEXT.JS page.js 파라미터 처리
- NEXT.JS app router 방식 client ip 주소 가져오는 방법
- NEXT.JS monaco-editor 사용방법
- NEXT.JS react-quill 사용방법
- NEXT.JS app router 방식 rss feed.xml 간단하게 설정 방법
- NEXT.JS app router 방식 sitemap.xml 간단하게 설정 방법
NEXT.JS react-quill 사용방법
2024-01-17 10:56:00
/ 목차 /
- NEXT.JS react-quill 설치
- page.tsx 생성
NEXT.JS react-quill 설치
command npm install react-quill
page.tsx 생성
- import react-quill 해서 사용하면 nextjs 빌드할때 오류가 발생하가 됩니다. SSR에 대한 오류이기 때문에 const ReactQuill = dynamic(() => import('react-quill'), { ssr: false }); 처리해야 빌드할때 오류가 안납니다.code "use client"; import dynamic from 'next/dynamic'; import 'react-quill/dist/quill.snow.css'; const ReactQuill = dynamic(() => import('react-quill'), { ssr: false }); export default function QuillEditor() { return ( <ReactQuill modules={ {toolbar: [ [{ header: [1, 2, false] }], ['bold', 'italic', 'underline', 'strike', 'blockquote'], [{ list: 'ordered' }, { list: 'bullet' }], ['link', 'image'], ['clean'], ], } } /> ); };
Comment