Programming/Next.js
[Next] 404 page
404 Page pages폴더 하위에 404.js 이름으로 컴포넌트를 만들고 코드를 작성하면 끝이다. 간단하다. export default function NotFound() { return 'here is 404 pages'; }
Programming/Next.js
Programming/Next.js
[Next] Catch All URL
Catch ALL URL pages 하위에 파일명을 [...params].js(원하는 이름 사용) 와 같이 설정하면 어떤 URL이라도 잡을 수 있다. [...] 를 통해서 movies라는 폴더 아래 모든 Endpoint를 라우팅 할 수 있다. Link 태그의 href 속성을 수정할 수 있다. {movie.original_title}; useRouter 를 사용해 params 배열을 구조분해할당해서 사용할 수 있다. import { useRouter } from 'next/router'; export default function Detail() { const router = useRouter(); const [title, id] = router.query.params; return ( {title || ..
Programming/Next.js
[Next] 동적라우팅 (Dynamic Router)
Dynamic Router Router pages는 페이지 라우팅을 자동으로 설정해주는 폴더로, 정적 라우팅은 물론 동적 라우팅도 가능하다. pages 하위 폴더 구조URL pages/index.js / pages/about.js /about pages/movies/index.js /movies pages/movies/all.js /movies/all pages/movies/[id].js /movies/12 동적 라우팅은 [변수].js 파일을 통해 설정할 수 있다. router 객체에 접근하기 위해서 useRouter를 사용한다 import { useRouter } from 'next/router'; const router = useRouter; import 후 router라는 변수에 저장하는 구조로 사..
Programming/Next.js
[Next] Data Fetching
프리렌더링(Pre-rendering) 앞서 공부한 것처럼 Next는 프리렌더링(pre-rendering) 기능을 제공한다. 말 그대로 사전에 미리 html을 렌더링 한다는 뜻이다. html을 미리 생성하고 최소한의 자바스크립트를 연결시킨 후 클라이언트에서 요청이 들어오면 해당 html을 로드하면서 나머지 자바스크립트를 불러와 화면에 렌더링 시켜주는 것이다. 프리렌더링을 하면 렌더링 성능과 SEO가 향상된다. Plain React App Pre-rendering을 하지 않으면, 초기에는 렌더링이 되지 않았다가 자바스크립트가 로드되면 페이지 요소들이 채워진다. Using Next.js App Pre-rendering을 한다면 사전에 만들어진 HTML 파일을 보여주고 이후 자바스크립트가 로드되면 Hydrati..
Programming/Next.js
[Next] next.config.js
next.config.js next.config.js 는 JSON 파일이 아닌, NodeJS 모듈이다. next.config.js는 파일명에서도 알 수 있듯 Next 프로젝트에서 추가적인 설정을 할 수 있도록 하는 NodeJS 모듈이며 프로젝트 루트에 생성해서 사용하면 된다. 해당 파일은 Next의 서버 및 빌드 단계에서 사용되며 브라우저 빌드에서는 포함되지 않는다. 기본적으로 아래와 같이 next config를 설정할 수 있으며 module.export로 export하여 사용할 수 있다. const nextConfig = { // 옵션 코드... }; module.exports = nextConfig; 이외에도 여러 상황마다의 적용방법이 있다. // 1. ECMAScript 모듈의 경우 const ne..
Programming/Next.js
[Next] 개발 패턴(Layout & SEO)
Layout 너무 큰 _app.js 파일은 좋지 않아서 레이아웃과 관련된 부분은 Layout 컴포넌트로 따로 분리한다. 대중적으로 사용하는 패턴 components 에 Layout.js 파일을 생성한다. Layout 컴포넌트에 { children } 을 매개변수로 지정한다. Layout 컴포넌트의 코드 예시는 아래와 같다._app.js 에서 Layout 컴포넌트를 아래와 같이 사용한다. import NavBar from './NavBar'; export default function Layout({ childredn }) { return ( {childredn} ); } import Layout from '../compenents/Layout'; import '../styles/globals.css'; ..
Programming/Next.js
[Next] 스타일 적용과 _App
Next에 스타일 적용 컴포넌트의 태그 안에 스타일을 직접 추가할수도있다. 하지만 인라인 스타일로 적용하는 것은 코드의 가독성 뿐만 아니라 효율적으로 관리할수 없다. 태그 안에 직접 적용 import styles from './NavBar.module.css'; 컴포넌트와 동일한 경로에 XXXX.module.css 파일을 생성하고 그 안에 일반적인 CSS를 작성하는 방법과 동일하게 작성한다. 그리고 적용 할 컴포넌트 안에서 해당 CSS를 styles로 불러와 클래스네임에 객체스타일로 원하는 클래스를 넣으면 브라우저에서는 랜덤의 이름으로 클래스를 부여하여 충돌할 걱정이 없다. 여러개의 클래스를 추가하는 방법은 다양하다. import Link from 'next/link'; import { useRouter..
Programming/Next.js
[Next] 프로젝트 생성과 구조 알아보기
프로젝트 생성 폴더 생성 후 npx를 통해 Next 프로젝트를 생성한다. npx create-next-app@latest "script": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", } Next에는 React와는 다르게 dev-build-start 로 구성되어있다. npm run dev를 통해 개발환경을 실행한다. npm run dev Next의 페이지와 라우팅 구조 React와의 차이점 Next와 React의 가장 큰 차이점은 라이브러리와 프레임워크라는 차이점이다. React에는 ReactDOMRender라는 함수가 자동으로 생성된다. 그래서 React로 생성된 html을 보면 root의 ..