Study (114) 썸네일형 리스트형 [Next.js] React와의 차이점 설치하기 npx create-next-app@latest . —typescript React : Library, CSR Next : Framework, SSR React와 다르게 라우팅 등 기본적으로 나오는 것들은 없지만, 지정된 장소에 코드를 작성하면 자동으로 코드를 불러온다. ex) pages폴더안에 원하는 컴포넌트 제목을 작성하면 자동으로 라우팅된다. React처럼 자유로운 수정은 불가능하다. React는 오류페이지를 작성해야하지만, Next는 default page 존재.(수정가능) React : 브라우저가 유저가 보는 모든 UI를 만든다. 브러우저가 js를 가져와서 그 js가 모든 ui를 만든다. html은 비어있는 하나뿐이다. (느린 연결에서 큰 단점이 생김) Next : html이 존재하므로.. [Next.js] Dynamic Import Next.js에서 서버에서 랜더링할때 나타나는 문제입니다. 모달을 만들어서 사용할 때, Modal을 Import 하기전에 SSR방식으로 Modal을 렌더링 할 경우 에러를 동반했습니다. Next.js SSR 렌더링 순서 클라이언트 요청 Server Side 단에서 웹 페이지를 Pre-Rendering 으로 HTML 문서 생성 생성된 HTML 문서를 클라이언트에 전송 리액트에서 번들링된 JS파일을 클라이언트에 전송 클라이언트 단에서는 HTML 문서위에 전송받은 JS 파일을 매칭 동적 코드 분할 Dynamic Imports import dynamic from "next/dynamic"; const Header = () => { const Modal = dynamic(() => import("component.. [Next.js] useLocation, useNavigate, useRouter in Next react-router-dom의 useLocation, useNavigate, useRouter 의 기능을 Next.js에서는 'next/router'의 useRouter 로 구현할 수 있다. import { useRouter } from "next/router"; ... const router = useRouter(); useEffect(() => { if (window.location.href.includes("access_token")) { window.localStorage.setItem( "token", window.location.href.split("=")[1].split("&")[0] ?? "none", ); router.push("/"); } }, []); [Next.js] svg component in Next 1. webpack 설치 npm install -D @svgr/webpack 2. next.config.js 설정 module.exports = { webpack(config) { config.module.rules.push({ test: /\.svg$/, use: ["@svgr/webpack"], }); return config; }, }; 3. 프로젝트 루트 폴더에 custom.d.ts 파일 생성 declare module "*.svg" { import React from "react"; const svg: React.FC; export default svg; } 4. tsconfig.json 수정 "include": ["custom.d.ts", "next-env.d.ts", "**/*.ts", "*.. [Next.js] Styled-Components in Next 1. styled-components 설치 npm i styled-components npm i @types/styled-components 2. babel 설치 npm install babel-plugin-styled-components npm i babe-preset-next 3. 프로젝트 루트 폴더에 .babelrc 파일 생성 { "presets": ["next/babel"], "plugins": [ [ "babel-plugin-styled-components", { "fileName": true, "displayName": true, "pure": true, "ssr": true } ] ] } 4. .eslintrc.json 설정 { "extends": ["next/babel", "next/cor.. Next.js next/Link in React import { Link } from "react-router-dom"; 회원가입 in Next import Link from "next/link"; 회원가입 Next.js ImageComponent 사용하기 는 HTML의 태그에서 확장되어 built-in을 최적화하는 Next.js의 이미지 컴포넌트이다. Next.js 공식문서에서 설명하는 컴포넌트 사용의 의의는 아래와 같다. Improved Performance : modern image format을 사용해서 각각의 디바이스에 맞는 적절한 이미지 사이즈를 제공 Visual Stability : Cumulative Layout Shift(누적 레이아웃 이동) 이 발생하지 않도록 안정성을 보장 Faster Page Loads : 뷰포트에 들어갈때만 이미지가 로드된다. Asset Flexibility : remote 서버(클라우드, CMS 등)에 저장된 이미지도 리사이징이 가능 import Image from 'next/image' import profile .. styled-components svg 스타일링하기 import ArrowIcon from '/assets/icons/header/downArrow.svg'; ... ... // styled-components의 확장 기능을 사용해서 svg 스타일링 const Arrow = styled(ArrowIcon)` path { stroke: blue; fill: blue; } &:hover { path { stroke: red; fill: red; } } `; 이전 1 2 3 4 5 6 ··· 15 다음
