NextJS

[NextJS] NextJS 깃헙 페이지 배포하기 (NextJS Github Pages Deployment)

참고 영상: https://youtu.be/dalXCXCIPHM 1. VS Code Setting 먼저 아래와 같이 package.json 파일의 scripts에 "export": "next export",를 추가한다 그리고 npm run build를 터미널에 입력한다 나는 npm run build 입력했더니 오류 발생하여 https://plming.tistory.com/211 를 참고하여 오류를 해결하였다 그리고 next.config.js의 nextConfig에 다음의 코드를 추가해준다 images: { loader: "akamai", path: "", } 그리고 npm run build와 npm run export를 터미널에 입력한다 npm run export를 입력한 뒤에는 아래처럼 out 폴더가 ..

[NextJS] Fetching Data & Redirect & Rewrite (API Key 숨기기)

Fetching Data Redirection next.config.js의 nextConfig에 아래의 코드를 추가한다 async redirects() { return [ { source: "/contact", // user가 source로 이동한다면 destination: "/form", // 유저를 destination으로 보낸다 permanent: false, // ㄴ redirection이 영구적인지 아닌지에 따라서 // 브라우저나 검색엔진이 이 정보를 기억하는지의 여부가 결정된다 } ] } 그리고 next.config.js를 수정하였기 때문에 터미널에 npm run dev를 다시 입력해준다 그러면 localhost:3000/contact에 접속하였을 때 localhost:3000/form 주소로..

[NextJS] Layout & Head Component

(1) Layout Pattern Layout pattern은 많은 사람들이 NextJS를 이용할 때 따르는 아주 흔한 패턴이다. 이는 custom app component를 사용할 때 쓰이는 패턴으로 _app.js 파일이 커지도록 하는 것을 방지하기 위해 레이아웃 파일을 따로 만들어 _app.js에 넣는 것이다 사용법 먼저 Layout.js라는 react component를 만들고 children prop을 넣어준다 children이란 react.js가 제공하는 prop으로 하나의 component를 또 다른 component 안에 넣을 때 쓸 수 있다 그리고 _app.js 를 을 으로 감싸준다. ./components/Layout.js import Layout from "../components/La..

[NextJS] CSS Module & Styles JSX & Custom App Component

(1) CSS Module CSS module 사용법 1. 파일명.module.css 파일을 만든다 NavBar.module.css .nav { display: flex; justify-content: center; background-color: tomato; } 2. 생성한 module을 css를 사용하고자 하는 파일 상단에 import 하고 다음과 같이 사용한다 NavBar.js import styles from "./NavBar.module.css" export default function NavBar() { const router = useRouter() return ( Home About ) } CSS Module의 장점 css.module 형식은 클래스 이름을 추가할 때 클래스 이름을 텍스..

[NextJS] NextJS Set up

1. cmd에 cd 경로명을 입력하여 프로젝트 생성을 원하는 공간을 지정한 후 npx create-next-app@latest을 입력하여 프로젝트를 생성한다 2. code 프로젝트명을 입력하여 vsc에서 프로젝트를 연다 3. npm run dev를 vsc 터미널에 입력하여 문제가 없는지 확인한다 4. url에 접속하였을 때 아래와 같이 뜨면 정상적으로 작동 중인 것이다 5. pages 폴더에서 index.js를 제외한 모든 파일들은 지운다 6. index.js를 페이지를 나타내는 필수적인 코드인 다음의 코드로 수정한다 index.js export default function Home() { return () } 6. next.js에서의 pages 폴더 안의 파일은 그 파일명의 url 페이지를 생성한다 ..