FrontEnd/Next.js5 [ Next.js ] Next.js 란？ 1. Next.js 는 무엇인가? Vercel에서 release한 오픈 소스로, (Vercel 은 미국의 클라우드 회사로, PaaS(Cloud Platform as a Service)를 제공한다.) Next.js는 풀스택 웹 개발을 위한 여러 추가 기능을 지원하는 리액트 프레임워크이다. 그렇다면 리액트는 무엇일까？ [ React ] React 란？ 간단하게 요약하면, 리액트는 컴포넌트 단위로 UI를 쉽게 만들 수 있게 하는 자바스크립트 라이브러리이다. Framework vs Library - 프레임워크와 라이브러리의 차이 Next.js는 다음의 원칙들을 기반으로 두고 있다고 한다. 1. out-of-the-box functionality requiring no setup 2. JavaScript ever.. 2023. 12. 30. [ Next.js ] next/document Head vs next/head Head Next.js로 계발을 하는 경우가 많은데, Head가 document에도 있고 head에도 있어서 둘의 차이점이 궁금해졌습니다. 그리고 어느 기준에 따라 나눠서 사용하는지도 궁금해졌습니다. 둘 다 html 의 를 가리키는 건 맞는데, next/document 의 Head 는 Custom Document를 만들 때, import 해오는 태그로, 모든 페이지에서 렌더링되기 때문에, 모든 페이지의 공통되는 정보만을 입력해야 합니다. The component used in _document is not the same as next/head. The component used here should only be used for any code that is common for all pages. For al.. 2023. 12. 24. [ Next.js ] 절대경로 설정하기 import Something from 'components/common/layout' { ... "compilerOptions":{ ... "baseUrl": "./src", } } https://velog.io/@himprover/Next.js%EC%97%90%EC%84%9C-%EC%8D%A8%EC%84%9C-import%ED%95%98%EA%B8%B0-%EB%B3%84%EC%B9%AD-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C 2023. 12. 24. [ Next.js ] Next.js v12 프로젝트 세팅하기 Setup 1. Next.js 12버전 설치하기 npx create-next-app@12.3.4 2. TypeScript 설치하기 터미널을 통해 tsconfig.json 파일 생성 후, touch tsconfig.json yarn dev 실행 yarn dev TypeScript를 사용하려고 하지만 필요한 패키지가 설치되어 있지 않은 것 같다는 메세지와 함께 typescript에 필요한 패키지를 설치 해준다. 3. eslint, prettier 설치 (eslint는 이미 설치되어 있음) yarn add -D prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-import eslint-plugin-react eslint-plugin-re.. 2023. 12. 24. [ Next.js ] Static Site Generation vs Server Side Rendering 원문 Static Site Generation (SSG) 란? 서버에 배포하기 전에 빌드하는 단계에서 HTML 페이지를 생성하는 것을 말한다. SSG 장점 페이지 로드 시간이 빠르다. 향상된 Search Ending Optimization (SEO) 서버에서 생성될 필요가 없기 때문에 비용적인 면에서 효율적이다. Next.js 로 SSG 구현하기/실행하기 => getStaticProps 사용하기 빌드 단계에서 반환된 prop로 미리 페이지를 렌더하는 기술을 말한다. 사전에 data fetching 과 page content generation이 진행돼 정적 파일로 보관되어 유저가 request를 하자마자 제공할 수 있다. export default function Home({ data }) { retur.. 2023. 11. 24. 이전 1 다음
