공유/NextJS 검색 결과

해당 글 3건

[NextJS] 동적 routing 작업하기

[NextJS] 동적 routing 작업하기 이번 게시글에서는 동적 routing 작업을 해보겠습니다. 동적 routing 우리가 하고자 하는 것은 /details/과일이름 url을 만들고 해당 url에 접속하면 해당 컴포넌트가 보여지는 것입니다. 여기서는 apple, banana, orange가 있다고 가정해보겠습니다. 그럼 pages/details 폴더 아래 apple. banana, orange 파일을 만들어 주어야 합니다. 아래 이미지를 참고해봅시다. 해당 컴포넌트 코드도 확인해보겠습니다. apple.js코드는 아래와 같습니다. (나머지 동일 패턴) export default function Apple() { return Apple 페이지; } 그렇다면 해당 url에 접속하기 위한 header m..
공유/NextJS 2022. 3. 28. 05:33

[NextJS] routing, 공통 layout 작업

[NextJS] routing, 공통 layout 작업 이번 게시글에서는 NextJS에서 routing 작업을 하는 방법, 공통 layout을 잡는 방법을 알아보도록 하겠습니다. (css 설명은 없습니다.) routing & 공통 layout ◆ routing NextJS에서 routing 작업 하는 방법은 매우 간단합니다. 그냥 pages 폴더 아래 폴더 및 파일을 내가 원하는 url 형식으로 생성해주면 됩니다. 예를들어 /test/intro/a 와 같은 url을 만들고 싶으면 pages 폴더 아래 test 폴더 -> intro 폴더 -> a.js 파일을 만들면 됩니다. 그럼 해당 url로 접속할 경우 a.js 컴포넌트가 보여집니다. 그럼 예시로 /intro url를 생성해봅시다. 아래 이미지와 같이 ..
공유/NextJS 2022. 3. 25. 05:54

[Next.js] Next.js 소개

[Next.js] Next.js 소개 Next.js는 React Framework 입니다. Next.js는 CSR인 react를 보다 더 쉽게 SSR이 가능하도록 도와줍니다. SSR이 가능하면 SEO에 더 유리하게 됩니다. 그 뿐만이 아니라 SSR, SSG, CSR 중 내가 원하는 방법으로 렌더링 방식을 정할 수 있습니다. 또한 routing 작업, 404 page 등 보다 더 다양한 기능을 쉽게 사용할 수 있습니다. 해당 카테고리에서는 nextjs에 대해 알아보고 SSR, SSG, CSR을 nextjs로 하는 방법을 알아보겠습니다. Next.js 개발 환경 셋팅 우선 nextjs 개발 환경을 셋팅해보도록 하겠습니다. 설치 명령어 : npx create-next-app project-name 설치 명령어..
공유/NextJS 2022. 3. 24. 05:37