Web/NextJs

Next.js - with Redux thunk

이번에는 Next.js에서 전역으로 상태 관리를 하는법이 React와 다른거 같길래 너무너무 궁금해서 한번 조사하고 예시코드를 작성해보도록 하겠다. 참고는 https://github.com/vercel/next.js/tree/canary/examples/with-redux-thunk GitHub - vercel/next.js: The React Framework The React Framework. Contribute to vercel/next.js development by creating an account on GitHub. github.com 또한 공식 문서 https://github.com/kirill-konshin/next-redux-wrapper next-redux-wrapper를 참고하였..

Next.js - Static File Serving

Next.js는 정적 파일을 제공합니다. 'public'아래에 있는 폴더를 이용하면 됩니다. 'public'폴더 아래에 있는 파일들은 '/'을 통해 접근 가능합니다. import type { ReactElement } from "react"; import type { NextPageWithLayout } from "../_app"; import styles from "../../scss-styles/HomePage.module.scss"; import Image from "next/image"; import profilePic from "../../public/happy.jpg"; const Home: NextPageWithLayout = () => { return ( My Homepage Welcome..

Next.js - Font Optimization

기본적으로 Next.js는 빌드 시 자동으로 인라인 글꼴 CSS를 사용하여 글꼴 선언을 가져오는 추가 라운드 트립을 제거합니다, ㄷ따라서 첫 번째 내용물 페인트(FCP)와 최대 내용물 페인트(LCP)가 개선됩니다. HTML 태그 태그는 해당 문서와 외부 소스(external resource)사이의 관계를 정의할 때 사용합니다. 요소는 빈 태그이며, 속성만을 포함합니다. 또한, 이 요소는 ) } } export default MyDocument

Next.js - Image Optimization

Next.js의 'next/image'는 HTML의 ''을 계승한 컴포넌트이다 ( 최신의 웹을 위해 진화된 것 ). 이는 엄청난 퍼포먼스를 지닌 이미 최적화되어 갖추어진 변수들이 많다. 이는 사용자 경험에 엄청나게 많은 평가 지표가 될 이다. Improved Performance 어떠한 기기든 정확하게 사이징 된 이미지를 보여준다. Visual Stability 누적 레이아웃 이동 자동 방지 Faster Page Loads 이미지가 오직 viewport를 들어왔을 떄만 로딩된다. Asset Flexibility 멀리 떨어진 서버에 캐싱된다. Local Images 우린 'next/image'를 import하면 우리의 local파일들을 import해 올 수 있다. 또한 Dynamic 'await impo..