programming study/NextJS (8) 썸네일형 리스트형 NextJS(8) - Routes, Context Parameter 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. Rotues 1.1 Dynamic Routes NextJS에서는 폴더 단위로 Route를 정의할 수 있음 Nested Route Dynamic Routes의 경우, 대괄호 안에 parameter를 적어주기 Catch All Routes 대괄호 안에 세 개의 점을 추가하여 모든 경로를 포착하도록 할 수 있음 ex) [...params].js 배열의 형태로 들어오게 됨 예시 ├── pages │ └── users │ ├── [id].js: Dyanamic Route │ ├── [...params].js: Catch All Routes │ ├── all.js: /users/all로 접근하면 띄워지는 페이지 │ └──.. NextJS(7) - Server Side Rendering 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. Server Side Rendering 해당 페이지가 SSR만 할 지 선택 가능 page가 열렸을 때 data fetching까지 완료하고 보여줄 수 있음 유저는 흰 화면 -> 완전히 렌더링된 페이지를 보게 됨 SEO 최적화에 유리 2. getServerSideProps server에서 해당 함수를 실행하고 return하는 객체를 props로 page에 전달할 수 있음 server(web backend)에서 실행하게 됨 고정된 이름을 사용해야함 getServerSideProps 함수를 실행하고 App Components의 pageProps로 해당 컴포넌트에 전달 됨 예시 export default functio.. NextJS(6) - next config(Redirect, Rewrite) 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. next.config.js NextJS 프로젝트의 설정 파일 Node.js 모듈 Redirect, Rewirte 등을 정의할 수 있음 2. Redirect 특정 url에 대한 접근을 지정한 url로 이동처리 할 수 있음 params도 인식할 수 있음 Properties source: 특정 url detination: 지정할 url permanent: cache 설정(boolean) 예시 module.exports = { reactStrictMode: true, async redirects() { return [ { source: "/example", destination: "/home", permanent: f.. NextJS(5) - Patterns, Head Component 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. Patterns Layout Pattern Layout 컴포넌트란 페이지들의 전반적인 Layout 정의(Navigation 등) global로 import할 것들을 불러옴(Google Analytics, SEO 관련 모듈 등) Global style 적용 정의한 Layout component를 App Components에서 불러오기 import NavBar from "../components/NavBar"; export default function Layout({ children }) { return ( {children} ); } 2. Head Component NextJS에서 Head를 관리하기 위한 .. NextJS(4) - Global Style, App Components 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. Global Style Style Jsx를 Global하게 적용 가능 App Components에서 사용해야 모든 페이지에서 적용됨 NextJS의 각 페이지는 독립적이기 때문 2. App Components 어떤 컴포넌트의 청사진(템플릿) 프레임워크 내에 포함된 기능 렌더링 되기 전에 먼저 보는 컴포넌트 _app.js 형식의 네이밍 NextJS에서는 Global.css를 import할 수 없음 반드시 module이어야 함 App Components에서는 Global.css를 import할 수 있음 Styles JSX Global 또한 적용 가능 // NextJS는 페이지를 렌더링하기 전 자동적로 이 컴포넌트를 .. NextJS(3) - Routing, CSS Modules, Styles JSX 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. Routing NextJS 어플리케이션에서 a태그를 네비게이팅에 사용하면 안 됨 a태그로 인한 이동은 전체 어플리케이션이 새로고침 됨 NextJS에서 앱 내에 네비게이팅에 사용해야만하는 컴포넌트가 있음 Link 컴포넌트 router 관련 proptery, function을 사용하기 위해서는 useRouter Hook을 사용 import Link from "next/link"; import { useRouter } from "next/router"; export default function NavBar() { // NextJS에서 제공하는 라우터 훅 // location에대한 정보 // path, back,.. NextJS(2) - Pages, Static Pre Rendering 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. Pages NextJS에서 Pages 아래의 파일들을 라우팅 처리 해줌 단, 해당 컴포넌트들은 export default 해야 함 index.(js|ts)는 앱의 홈(/)으로 연결 됨 JSX 사용하여도 React를 import 하거나 확장자를 바꿀 필요 없음 useState, useEffect와 같은 hook은 import 해야 함 2. Static Pre Rendering NextJS는 앱에 있는 페이지들을 미리 렌더링 정적으로 생성 됨 React.js vs Next.js CSR : Client Side Rendering 브라우저가 유저가 보는 모든 UI를 만드는 일을 함 React는 기본적으로 CSR id가.. NextJS(1) - Initialize, Framework Vs. Library 본 내용은 Nomad Coders - NextJS 시작하기 강의를 토대로 작성하였습니다. 1. Initialize npx create-next-app 2. Framework Vs. Library 라이브러리 사용하는 것 원하는 대로 코드를 작성 프레임워크 추상화된 코드를 불러오는 것 정해진 방식대로 구현 자유도의 차이 라이브러리 > 프레임워크 대표적으로 NextJS의 경우 pages 디렉토리 안에서 파일을 기준으로 라우팅을 할 수 있음 NextJS가 파일명에 맞추어 라우팅을 해줌 Inversion of Control(통제의 역전) 개발자는 라이브러리를 사용 개발자는 프레임워크의 규칙을 지킴 Reference Nomad Coders - NextJS 시작하기 이전 1 다음