Next.js/이론13 [Next.js] _document & _app Next.js는 페이지에 공통으로 적용되는 _document와 _app이 존재한다. _app 서버에 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로 공통 레이아웃 역할을 한다. 애플리케이션이 실행되면 가장 먼저 호출되기 때문에 글로벌한 작업을 수행할 때 사용한다. function app({ Component, pageProps }) { return } app.getInitialProps = async (appContext) => { // ... return { ...appProps } } 사용 예. 페이지 전환 시에도 전체 레이아웃을 유지하고 싶은 경우 페이지 전환 후 state를 유지하고 싶은 경우 페이지에 추가적인 데이터를 삽입하고 싶은 경우 글로벌 CSS를 적용하고 싶은 경우 _document _.. 2022. 9. 10. [Next.js] getInitialProps vs getStaticProps vs getServerSideProps Next.js는 SSR이 가능한 특징을 가진 React 프레임워크이다. Next의 ServerSide Cycle Server가 GET 요청을 받는다. 요청에 맞는 Page를 찾는다. _app.js에 getInitialProps가 있다면 실행한다. 하위 Component의 getInitialProps가 있다면 실행하고 pageProps를 받아온다. 모든 props를 구성하고, _app.js => Component 순서로 렌더링을 한다. Content를 구성하면 _document.js를 실행해 html 형태로 출력한다. 여기서, 모든 페이지에서 공통적인 데이터 패칭이 필요하면, _app.js에서 데이터 패칭을 하고, 페이지마다 다른 데이터가 필요하면 각 페이지에서 데이터 패칭을 해주면 된다. Next.js .. 2022. 9. 9. [Next.js] 404 페이지 Next.js에서 404 페이지를 만드는 것은 아주 간단하다! 404페이지 pages 폴더 내부에 404.js 파일을 만들어서 일반 컴포넌트를 만드는 것처럼 만들어주면 된다. 404 외에도 500번대, 또는 다른 400번대 에러 페이지도 마찬가지로 에러번호.js를 붙여서 만들 수 있다. 2022. 7. 5. [Next.js] Dynamic Routes Next.js는 Routing 기능을 기본적으로 제공해준다. 파일명, 혹은 폴더명에 index.js가 주소이기 때문이다. 하지만 블로그, 게시판 등을 개발할 때는 정해진 주소가 아니고 동적으로 주소가 변경된다. (ex, /board/123 ) 그런 경우에는 어떤 방법을 사용해야할까? [] 주소 아주 간단하게 만들 수 있다. [] 사용하고 안에는 파라미터로 받을 명칭을 넣어주면 된다. 그러면 /123을 할 경우 id 값으로 123을 받을 수 있고, [id].js 컴포넌트가 화면에 출력된다. 만약 예시처럼 board 아래에 123 같은 id값을 원할 경우에는 폴더명 안에 []를 사용해서 만들어주면 된다. [...] 주소 만약 주소창에 /a/b/c/d/e/f 같은 주소가 있다고 했을 때, /a까지만 있고 b,.. 2022. 7. 5. [Next.js] Server Side Rendering 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.. 2022. 7. 4. [Next.js] Redirect & Rewrite 프로젝트를 진행하다 보면 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 = .. 2022. 7. 3. [Next.js] Pattern & Head 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.. 2022. 7. 2. [Next.js] Custom App Styles JSX는 현재 컴포넌트만 scope로 가진다. 그렇게 되면 전역으로 css 속성을 주고 싶은 경우 모든 컴포넌트에 하나하나 입력해야하는데, 그렇게 되면 너무 귀찮아지고 실수가 발생할 수 있어 현실적으로 불가능하다. 그럴때 사용할 수 있는 방법이 global 속성과 _app.js이다. global import NavBar from "../components/NavBar"; const Home = () => { return ( Home ); }; export default Home; jsx 옆에 global 옵션을 준다면 해당 컴포넌트와 자식 컴포넌트, 부모 컴포넌트에게도 영향을 주는 css 속성이 된다. 하지만, 이것 역시 " 사용된 " 컴포넌트를 기준으로 속성이 적용된다. 만약 Home 컴포.. 2022. 7. 1. [Next.js] Styles JSX 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.. 2022. 6. 30. 이전 1 2 다음 반응형
