Next.js
1.[Next.js] NextJs 기초
react는 가장 인기 있는 자바스크립트 라이브러리이며 수백만 개 이상의 웹 사이트에서 다양한 목적으로 사용되고 있다. 단, 리액트는 기본적으로 클라이언트 사이드에서만 작동한다는 큰 문제점을 가지고 있다. 사용자의 웹 브라우저에서만 실행되기 때문에 리액트를 사용한 웹
2.[Next.js]Parsing error: Cannot find module 'next/babel' 에러해결
노마드코드 next 강의를 들으며 next프로젝트를 생성했는데 export하는 과정에서 아래의 에러가 떴다. Parsing error: Cannot find module 'next/babel'해당 에러는 VScode 파싱에러로 .eslintrc.json파일에서 코드를
3.[Next.js] Framework vs Library
\-next.js개발자의 코드를 프로그램이 불러오는 것이다. 정해진 규칙에 따라 코드를 작성하면 렌더링이된다. 어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조며, 소프트웨어 개발에 있어 하나의 뼈대역할을 한다.종류에는 spring, Django
4.[Next.js] 라우팅하기 (13이전/이후)
리액트에서는 react-router-dom 라이브러리를 통해 페이지간 라우팅을 구현하였다. 그렇다면 Next에서는 어떻게 루트를 설정할까?NextJs 13이전에는 pages폴더 안에 컴포넌트를 생성하면 자동으로 경로가 설정된다. pages폴더안에 index와 post
5.[Next.js] Pre Rendering
Client-Side-Rendering클라이언트가 입력한 것을 수신해서 HTML로 만들어서 크롬과 같은 어플리케이션에 해석해서 표시하는것이다. 대표적인 예로 자바스크립트가 있다. 리액트로 된 웹같은 경우는 페이지소스를 켰을때 아래처럼 뜬다.즉, 브라우저가 HTML을 가
6.[Next.js] CSS module사용하기
CSS를 사용할 때 클래스 이름을 고유한 값으로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 준다. 일반 CSS파일과 동일한 방식으로 작성하지만 파일생성 시 이름은 ㅇㅇㅇ.module.css 이런식으로 짓는다. 특징클래스 이름을 추가해줄 때,
7.[Next.js] Styles-JSX & Custom App
Next.js에 내장되어있는 Styled-jsx는 따로 노드 모듈설치없이 바로 사용할 수 있다. 그렇기에 import를 하지않아도 사용가능하다. 또한 기본적으로 사용된 컴포넌트에만 영향을 주며, 전역으로 활용하기 위해서는 global이라는 속성을 사용한다.nextjs는
8.[Next.js] SEO를 위한 <Head>
SSR 방식의 장점 중 하나에는 SEO가 있다. 다양한 SEO스킬을 적용하기 위해 서버로부터 <Head> 를 받을수있어야한다. 이를 가능하도록 하는것이 Next/Head이다. 별다른 서버 작업을 하지 않아도 head 태그를 받을수있다.재사용성을 위해 Seo.js라
9.[NextJS] Redirect and Rewrite
NextJS로 프로젝트를 진행하다보면 url를 유저에게 숨겨야하거나 api-key를 노출시키고싶지 않을때가 생긴다. 이럴때 쓰면 좋은 NextJS의 Redirect와 Rewrite기능을 알아보자. 앞서 두 기능은 유저가 특정 path로 이동시 정해진 화면이 보여지도록
10.[NextJS] Data Fetching: getServerSideProps
NextJS는 프리렌더링(pre-rendering)기능을 제공한다. 사전에 미리 html을 렌더링하는 것이다. 즉, HTML을 미리 생성하고 최소한의 js를 연결시킨 후 클라이언트에서 요청이 들어오면 해당 HTML을 로드하면서 나머지 js를 불러와 화면에 렌더링 시켜주
11.[NextJS] 페이지 이동 router.push
NextJS에서 함수형식으로 라우팅 할 수 있게 해주는 Next.js기본 라이브러리해당 URL로 이동한다.사용법적용 예시 2코드설명영화 api를 가져와 영화 포스터를 클릭하면 해당 영화 디테일 페이지로 이동된다. router.pushrouter.push(url, as,
12.[NextJS] params과 SEO
💻 URL주소에 item 타이틀 넣기 🖤 Params & SEO최적화시키기 NextJS My-App구조 여기서 봐야할 것은 index.js와 [...params].js다. 구글 검색엔진 최적화를 위해 url주소에 아이템 정보(타이틀 등)를 간단하게 넣어두면 많
13.[NextJS] error페이지 만들기 | Custom Errors
404페이지는 자주 엑세스될수있다. 방문할 때마다 서버에서 오류페이지를 렌더링하면 Next.js서버의 로드가 증가한다. 이로 인해 비용이 증가하고 사용감이 느려질수있다. 이를 피하기위해 Next.js에서 추가 파일 필요없이 기본적으로 정적 404페이지를 제공한다. Ne