WEB/NEXT3 [NEXT] 4강 에러 페이지, 환경 변수 + 6강 isFallback, getStaticPaths 타이틀 링크를 클릭하면 해당 주차 강의 코드가 정리된 깃허브로 연결됩니다. 4강 에러 페이지, 환경 변수 (Custom Error Page, Environment Variables) 에러 페이지 핸들링 404 에러 // pages.404.js import { Icon } from "semantic-ui-react"; export default function Error404() { return ( 404 : 페이지를 찾을 수 없습니다. ); } 기타 에러 - 클라이언트, 서버 측 에러 핸들링 가능 // pages._error.js function Error({ statusCode }) { return ( {statusCode ? `An error ${statusCode} occurred on server.. 2022. 5. 10. [NEXT] 3강 서버사이드 렌더링, 5강 정적 생성(Static Generation) 타이틀 링크를 클릭하면 해당 주차 강의 코드가 정리된 깃허브로 연결됩니다. 3강 서버사이드 렌더링 (Server-side Rendering/SSR/Dynamic Rendering) (5강 설명이랑 합침) Next.js: 모든 페이지 사전 렌더링 (Pre-rendering) 기본적으로 모든 페이지 pre-render 사전에 HTML 파일을 만든다는 의미 퍼포먼스 향상, SEO 안 하는 경우: 아무것도 렌더링 안 되다가 JS 파일 로드되면 보임 하는 경우: 사전에 초기 HTML 요소가 렌더링되고 JS 렌더링됨 효과 더 좋은 퍼포먼스 검색엔진최적화(SEO) 형태 둘의 차이점: html 파일 생성 시기 Static Generation: 정적 생성 [정적 생성]은 프로젝트가 빌드하는 시점에 html 파일 생성 모.. 2022. 5. 10. [NEXT] 1강 소개, 페이지 레이아웃 + 2강 Dynamic Routes, next/link 타이틀 링크를 클릭하면 해당 주차 강의 코드가 정리된 깃허브로 연결됩니다. 1강 소개, 페이지 레이아웃 npx create-next-app으로 설치 설치 시 앱 이름을 디폴트인 my-app으로 해줬다면 cd my-app → yarn dev 혹은 npm run dev로 실행 create-next-app 으로 설치하면 컴파일과 번들링이 자동으로 됨 (webpack 과 babel) 자동 리프레쉬 기능으로 수정하면 화면에 바로 반영 서버사이드 렌더링 지원 스태틱(정적) 파일 지원 자동 라우팅 지원: pages 폴더에 js 파일 만들면 자동으로 라우팅 적용됨. 다이나믹 라우팅 가능: pages/view/[id].js 생성 시 /view/[id] 라우팅. [id]에 아무거나 쳐도 인식됨. css 프레임워크 Sema.. 2022. 5. 9. 이전 1 다음