
NextJS는 pages/api 디렉토리를 통해 백엔드에 대한 처리를 수행할 수 있다.

하지만 정적으로 배포된 사이트(ex. 블로그 등)에서는 pages/api 등과 같은 동적 로직은 지원되지 않기 때문에 api 디렉토리를 사용할 수 없다.

정적 배포 방법

```javascript
// package.json
// NextJS 13.3 이전 버전
"scripts": {
    "dev": "next dev",
    "start": "next start",
    "lint": "next lint",
    "build": "next build && next export", // ## 정적 배포
    "predeploy": "npm run build",
    "deploy": "touch out/.nojekyll && gh-pages -d out --dotfiles"
  },


// next.config.js
// NextJS v13.3 ~
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig
```

---

참조

https://nextjs.org/docs/advanced-features/static-html-export


NextJS에서 API 디렉토리가 사용되지 않는 이유

nextjs pages api dir unsupported


## prop 'classname' did not match. with styled-components 에러 해결 방법

NextJS의 next.config를 수정해준다.

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  compiler: {
    styledComponents: true, // 컴파일러 옵션 추가
  },
};

module.exports = nextConfig;
```


prop `classname` did not match. with styled-components

nextjs prop classname did not match


# Link / useRouter 사용법

```javascript
// Link
import Link from "next/link";

export const compo1 = () => {
  return (
    <Link href="url">
      <div>some element</div>
    </Link>
  );
};

// useRouter
import { useRouter } from "next/router";

export const compo2 = () => {
  const router = useRouter();

  const routeHandler = () => {
    router.push(url);
  };

  return (
    <div onClick={routeHandler}>
      <span>some element</span>
    </div>
  );
};
```

### Nextjs에서 페이지를 전환하기 위해 사용하는 방법으로, Link를 이용하거나 useRouter를 이용해 router.push()와 같이 사용하여 전환해줄 수 있는데, 비슷해 보이는 두 가지 방법의 차이를 간단히 정리해본다.

## Link의 특징

- Link는 Client-side navigation으로, javascript로 페이지 전환이 이뤄진다.
- 기본 navigation보다 빠르며 SPA(Single Page Application)의 특성을 유지한다.

## useRouter의 특징

- react-router-dom의 history.push()와 유사하다.
- 크롤러가 링크를 감지하지 못해 SEO가 좋지 않을 수 있다.
- 외부 URL을 사용할 경우 window.location 혹은 a 태그를 사용해야 한다.

또한 Link는 클릭 시 바로 페이지가 전환되지만, useRouter는 로직을 처리한 후 원하는 시점에 전환이 가능하다.

## 결론

> router.push()는 onClick에 사용되는 행동(action)이기 때문에 Link 태그보다 검색에 불리하지만, 로직의 처리에 따라 활용도가 높다.

> Nextjs의 장점인 SEO(Search Engine Optimization - 검색 엔진 최적화)를 원한다면 Link를 사용하는 것이 더 유리하다.

---

참조

https://stackoverflow.com/questions/65086108/next-js-link-vs-router-push-vs-a-tag

https://nextjs.org/docs/api-reference/next/link

https://nextjs.org/docs/api-reference/next/router


nextjs link userouter


# 에러 해결 방법

나의 경우 SSR 데이터를 contextAPI를 통해 패치하려 했으나, 정상적으로 받아오지 못할때 발생한 오류였다.

로컬 실행 종료 후 재실행하니 정상적으로 데이터를 받아올 수 있었다.

다소 허탈한 해결방안이었지만, SSR을 다루는 페이지의 데이터가 정상적으로 받아와지지 않는 경우, 코드 작성 후 프로그램을 다시 실행해보자.

---

참조 : https://github.com/vercel/next.js/issues/18090


WEBPACK_IMPORTED_MODULE_7_default is not a function 에러 해결

nextjs marked webpack imported module 7 default


# Nextjs에서 로딩처리하기

### 모든 페이지를 미리 렌더링하는 NextJS 특성상, 다른 페이지로 라우팅이 진행될때, 사용자는 가만히 멈춰있는 화면을 보게될 수 있다. 때문에 페이지 전환을 정지화면으로 두지 않기 위해 로딩 처리를 구현해볼 수 있다.

## 로딩 스피너 세팅

```typescript
// _app.tsx

// 미리 만들어놓은 로딩 훅과 로딩 스피너
import { useLoading } from "src/hooks/useLoading";
import { LoadingSpinner } from "src/components/videos/video/LoadingSpinner";

<Layout>
  {isLoading ? <LoadingSpinner /> : null}
  <Component {...pageProps} />
</Layout>;
```

로딩스피너는 CSS로 만들어도 좋고, SVG나 GIF, 라이브러리 등 자유롭게 적용해도 좋다.

## 라우팅 시 적용될 이벤트 설정

```typescript
// useLoading.ts

import Router from "next/router";
import { useEffect, useState } from "react";

export const useLoading = () => {
  const [nowLoading, setNowLoading] = useState<boolean>(false);
  useEffect(() => {
    const start = () => {
      setNowLoading(true);
    };
    const end = () => {
      setNowLoading(false);
    };
    Router.events.on("routeChangeStart", start);
    Router.events.on("routeChangeComplete", end);
    Router.events.on("routeChangeError", end);
    return () => {
      Router.events.off("routeChangeStart", start);
      Router.events.off("routeChangeComplete", end);
      Router.events.off("routeChangeError", end);
    };
  }, []);

  return nowLoading ? true : false;
};
```

- routeChangeStart(url, { shallow }) - 라우트가 변경되기 시작할때 트리거됨.

- routeChangeComplete(url, { shallow }) - 라우트가 완전히 변경되었을 때 트리거됨.

- routeChangeError(err, url, { shallow }) - 라우트 변경 중에 에러가 발생했거나, 취소되었을 때 트리거됨.

\_app.tsx(jsx)에 로딩 스피너나 로딩 페이지를 적용해 놓으면,

라우팅으로 인한 페이지 이동이 일어날 때마다 원하는 로딩 창을 호출해줄 수 있다.

## 적용된 페이지

![image](https://blog.kakaocdn.net/dn/cWz72g/btrSmvngm4A/hgKg4FviDpAqQk5U6kGHXK/img.gif)


nextjs loading


### 이번에 새로 만들고 있는 토이 프로젝트를 작업하던 중, 모바일 화면일때만 화면을 보여주고 싶었다. 단, 모든 컴포넌트에 미디어쿼리를 통해 작성해줄 수는 없기에 react-responsive를 적용해 화면이 481px을 넘어가면 고정된 페이지를 보여줄 수 있도록 코드를 작성했다.

## react-responsive 설치

```bash
yarn add react-responsive
```

## hook 설정

```typescript
// hook
// useMideaQuery.tsx
export const Desktop = ({ children }: any) => {
  const isDesktop = useMediaQuery({
    minWidth: 481,
  });
  return isDesktop ? children : null;
};

export const Mobile = ({ children }: any) => {
  const isMobile = useMediaQuery({
    minWidth: 481,
  });
  return Mobile ? children : null;
};
```

## \_app.ts 적용

```typescript
// _app.tsx

// ...
import { Mobile } from "src/hooks/useMideaQuery";
import { CannotDesktop } from "src/desktop/CannotDesktop";

<>
  <Mobile>
    <Layout>
      {isLoading ? <LoadingSpinner /> : null}
      <Component {...pageProps} />
    </Layout>
  </Mobile>
  <Desktop>
    <CannotDesktop />
  </Desktop>
</>;
```

똑같은 코드로 리액트 코드에 적용할 때는 문제가 없었지만, Nextjs를 이용한 이번 상황의 경우 Hydration 에러가 발생했다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbjYUXg%2FbtrTRCeaovE%2FwQr4OZdJectnkkG06XmTEk%2Fimg.png)

vercel로 배포할 때는 정상적으로 빌드되기는 했지만

로컬에서 작업할때 지속적으로 발생하는 오류 메세지 창이 불편하기도 하여 바로 처리해봤다.

> Hydration failed because the initial UI does not match what was rendered on the server

초기 UI가 서버에서 렌더링된 것과 일치하지 않는다고 한다.

https://nextjs.org/docs/messages/react-hydration-error

공식 페이지를 보면 "애플리케이션을 렌더링하는 동안 미리 렌더링된 React 트리(SSR/SSG)와 브라우저에서 첫 번째 렌더링 중에 렌더링된 React 트리 간에 차이가 있었기 때문에 발생한 오류"라고 한다.

일반적으로 이 문제는 사전 렌더링과 브라우저 간에 다를 수 있는 항목에 의존하는 특정 라리브러리 또는 애플리케이션 코드를 사용하여 발생한다고 하는데,

나의 경우, react-responsive에 의한 경우였다.

## 코드 수정

```typescript
// useMideaQuery.tsx

import { useEffect, useState } from "react";
import { useMediaQuery } from "react-responsive";

export const Mobile = () => {
  const [mobile, setMobile] = useState<boolean>(false);
  const isMobile = useMediaQuery({ maxWidth: 480 });

  const checkResize = () => {
    if (isMobile) {
      setMobile(true);
    } else {
      setMobile(false);
    }
  };

  useEffect(() => {
    checkResize();
  }, [isMobile]);

  return mobile;
};
//_app.tsx

<RecoilRoot>
  {isMobile ? (
    <Layout>
      {isLoading ? <LoadingSpinner /> : null}
      <Component {...pageProps} />
    </Layout>
  ) : (
    <CannotDesktop />
  )}
</RecoilRoot>;
```

useMideaQuery가 window 화면을 기준으로 동작하기 때문에,

공식문서의 예제와 비슷하게 useState를 통한 boolean 값으로 화면을 노출시켜줬다.

위의 방식을 적용하니 hydration 에러 없이 잘 작동하는 모습을 볼 수 있었다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdH0CZg%2FbtrTRp0izJZ%2FiolwpQXLvGOommEBhpCkaK%2Fimg.png)
