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 monaco-editor 사용방법
2024-01-15 09:08:00
/ 목차 /
- NEXT.JS monaco-editor 설치
- page.tsx 생성
NEXT.JS monaco-editor 설치
command npm install react-monaco-editor monaco-editor
monaco-editor를 사용할때 react-monaco-editor 패키지가 Monaco Editor를 감싸서 사용하도록 되여 있어 해당 패키지 2개를 설치 해야 합니다.page.tsx 생성
- import react-monaco-editor 해서 사용하면 nextjs 빌드할때 오류가 발생하가 됩니다. SSR에 대한 오류이기 때문에 const MonacoEditor = dynamic(() => import('react-monaco-editor'), { ssr: false }); 처리해야 빌드할때 오류가 안납니다.code "use client"; import dynamic from 'next/dynamic'; import { useRef } from 'react'; const MonacoEditor = dynamic(() => import('react-monaco-editor'), { ssr: false }); export default function CodeEditor() { const editorRef = useRef(null); const editorDidMount = (editor:any) => { console.log('Editor is mounted:', editor); editorRef.current = editor; // 에디터가 마운트되면 수행할 작업을 여기에 추가하세요. }; return ( <MonacoEditor width="800px" height="400px" language="javascript" editorDidMount={editorDidMount} value="// 여기에 코드를 입력하세요." /> ); };
Comment