Next.js에서 404 페이지를 만드는 것은 아주 간단하다! 404페이지 pages 폴더 내부에 404.js 파일을 만들어서 일반 컴포넌트를 만드는 것처럼 만들어주면 된다. 404 외에도 500번대, 또는 다른 400번대 에러 페이지도 마찬가지로 에러번호.js를 붙여서 만들 수 있다.

Next.js는 Routing 기능을 기본적으로 제공해준다. 파일명, 혹은 폴더명에 index.js가 주소이기 때문이다. 하지만 블로그, 게시판 등을 개발할 때는 정해진 주소가 아니고 동적으로 주소가 변경된다. (ex, /board/123 ) 그런 경우에는 어떤 방법을 사용해야할까? [] 주소 아주 간단하게 만들 수 있다. [] 사용하고 안에는 파라미터로 받을 명칭을 넣어주면 된다. 그러면 /123을 할 경우 id 값으로 123을 받을 수 있고, [id].js 컴포넌트가 화면에 출력된다. 만약 예시처럼 board 아래에 123 같은 id값을 원할 경우에는 폴더명 안에 []를 사용해서 만들어주면 된다. [...] 주소 만약 주소창에 /a/b/c/d/e/f 같은 주소가 있다고 했을 때, /a까지만 있고 b,..

Next.js는 페이지에서 Server Side Rendering을 할 수 있게 지원해준다. API 데이터 혹은 서버로부터 정보를 가지고 올 때, 데이터를 가지고 오는 동안 Loading 화면을 띄운 적이 있을 것이다. 하지만 Server Side Render 기능을 사용하면 프론트엔드 화면이 나오기 전에 미리 데이터를 불러와서 Loading 화면이 필요없이 데이터를 나오게 할 수 있다. get server side props import Seo from "../components/Head"; const Home = () => { return ( Home ); }; export default Home; export async function getServerSideProps() { const { resu..

프로젝트를 진행하다 보면 API를 사용하게 되는 경우가 자주 있다. 그럴 때, API마다 사용하기 위해서 고유한 API KEY를 사는 경우가 있다. API KEY는 돈 주고 사거나, 사용할 수 있는 할당량이 정해져 있어서 프로젝트를 할 때 숨기는 경우가 대부분이다. ( ex_ .env ) 하지만, 웹사이트 내부에서 network 창을 확인해보면 API KEY가 나오는 경우가 있다. 프로젝트에서 API KEY를 network 창에서 나오지 않게 하는 방법이 Next.js는 아주 간단하다. Rewrite // next.config.js const API_KEY = process.env.API_KEY; /** @type {import('next').NextConfig} */ const nextConfig = ..

Next.js에서 _app.js는 global로 import 할 것들이 많고 Google Analytics 등 스크립트를 사용하는 경우가 많다. 그렇기 때문에 React 컴포넌트까지 _app.js에 모두 작성하게 되면 너무 커지게 된다. 즉, Next.js는 _app.js를 필요 이상으로 크게 만드는 것을 좋아하지 않는다. 그렇기 때문에 React 컴포넌트 부분을 따로 Layout으로 빼는 것을 Layout Pattern이라고 한다. Layout Pattern 앞서 말한 것처럼 React 컴포넌트를 분리해서 사용하기 위한 패턴이다. import NavBar from "../components/NavBar"; import "../styles/globals.css"; export default functio..

Styles JSX는 현재 컴포넌트만 scope로 가진다. 그렇게 되면 전역으로 css 속성을 주고 싶은 경우 모든 컴포넌트에 하나하나 입력해야하는데, 그렇게 되면 너무 귀찮아지고 실수가 발생할 수 있어 현실적으로 불가능하다. 그럴때 사용할 수 있는 방법이 global 속성과 _app.js이다. global import NavBar from "../components/NavBar"; const Home = () => { return ( Home ); }; export default Home; jsx 옆에 global 옵션을 준다면 해당 컴포넌트와 자식 컴포넌트, 부모 컴포넌트에게도 영향을 주는 css 속성이 된다. 하지만, 이것 역시 " 사용된 " 컴포넌트를 기준으로 속성이 적용된다. 만약 Home 컴포..

Next.js에서 .module.css 패턴을 통해서 style을 주는 방식 외에 다른 방법으로도 style을 줄 수 있다. Styles JSX React에서나 다른 언어도 개발을 할 때 한번도 들어보지 못한 방식일 것이다. Styles JSX는 Next.js에서만 제공하는 고유한 방법이기 때문이다. import Link from "next/link"; import { useRouter } from "next/router"; const NavBar = () => { const router = useRouter(); return ( Home About ); }; export default NavBar; style 태그에 jsx 속성을 준 다음 {` `} 에 css를 넣어주면 된다. 이렇게 넣어주면 .mod..

Next.js에서 CSS를 추가하는 방법은 다양하게 있다. 1. style 속성 사용 import Link from "next/link"; import { useRouter } from "next/router"; const NavBar = () => { // ... return ( Home About ); }; export default NavBar; 태그에 존재하는 style 속성을 사용하면 Next.js에서도 똑같이 style을 줄 수 있다. 하지만 이 방법은 재사용에 불편함이 있고, 개인적으로 코드 가독성이 떨어진다고 생각한다. 대신 사용할 수 있는 기능 중 하나가 .module.css 패턴이다. 2. .module.css 패턴 먼저 css 파일을 파일명.module.css로 만들어준다. impor..