next.js4 [ Next.js ] next/babel 에러 Next.js 개발을 위해 파일 설치 후 아래와 같은 에러가 뜬다 Parsing error: Cannot find module 'next/babel' npm run dev를 하면 실행은 되지만, 파일에 빨간 줄이 나타나는게 너무나도 신경이 쓰인다. 해결 방법.babelrc file을 생성해 주고 아래와 같은 코드를 적고{ "presets": ["next/babel"]} .eslintrc파일 생성우 아래 코드를 적어주면 빨간 줄이 바로 없어진다. { "extends": ["next", "next/babel", "next/core-web-vitals"]} 하지만 더 쉬운 방법!새로운 파일 생성없이 기존에 존재하는 .eslintrc.json파일의 코드만 수정해주면 된다!.eslintrc.json 파.. 2024. 5. 23. [ Next.js ] Next.js 13 시작하기 Installationnpx create-next-app 파일이름 Runnpm run dev Starting Folder Starting Page pages 폴더 추가Next.js 에서는 pages폴더에서 js 파일을 만들면 따로 라우팅 처리를 하지 않아도 페이지가 생성된다. pages 폴더 생성후 home.js 생성 home.jsexport default function Home() { return Home} 결과[id].js아무거나 쳐도 [id].js 파일의 내용으로 이동한다. sub 폴더 안에 [id].js 생성 [id].jsexport default function Sub() { return ID} 결과sub 폴더안에 'temp'로 [id].js폴더 안의 내용이 불러와.. 2023. 5. 8. [ Next.js ] Data Fetching (CSR vs SSR vs SSG vs ISR) CSR vs SSR vs SSG vs ISR Client-Side Rendering (CSR) 브라우저에서 HTML file을 로드하면, Javascript를 이용하여 웹 브라우저에서 rendering 하는 방식이다. Ex. ReactDom.render 함수. Server-Side Rendering (SSR) 브라우저에서 해당하는 페이지를 접속하면, 그 순간 서버에서 html을 App server에서 렌더링 해서 전달해 주는 방식이다. ⛔️ 단점: 페이지를 요청할 때마다 렌더링 하기 때문에 오래 걸린다. Static-Site Generation (SSR) 페이지를 요청할 때마다 서버에서 렌더링 한다. 정적인 페이지를 제공하려고 할 때는 그럴 필요 없이 빌드할 때 렌더링하고 페이지를 요청할 때 이미 렌더링.. 2023. 2. 1. [ Next.js ] Link, Dynamic Routes Next.js란 무엇이고, 왜 사용할까? 특징 개발 환경 설정이 쉽고 간단하다. SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다. 초기 로딩 속도 개선을 위한 자동 code splitting(코드 분할)을 지원한다. Next.js 프로젝트 시작하기 npx create-next-app 기본 구조 및 기능 개발 모드와 프로덕션 모드 // package.json ... "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, ... dev - next dev 개발 모드로 프로젝트를 실행 Hot reloading 등.. 2023. 1. 31. 이전 1 다음 728x90
