next.js v14

💡

Next.js 와 MUI 셋팅법에 대해 정리하였습니다.

Node.js 설치

Next.js를 설치하기위해서는 Node.js 18.17 or later 버전이 필요합니다.
Node.js는 Javascript로 작성된 프로그램을 운영체제 상에서 일반 애플리케이션 프로그램처럼 실행시켜주는 런타임입니다. Next.js를 사용해보기 위해서 설치해 봅니다.

node.js 공식문서 https://nodejs.org/en
LTS 다운로드 클릭합니다. LTS는 long-term supprot로 안정화 된 버전이라고 보시면됩니다.
다운로드가 완료되면 실행하여 Node.js를 설치합니다. 모두 Next를 눌러서 설치하시면 됩니다. (혹시 설치가 제대로 되지 않는다면 구글에 Node.js설치를 검색하시면 도움이 되는 많은 글들이있습니다!)
설치 완료 후 터미널에서 node -v를 치면 현재 설치된 버전이 나타나면 성공입니다.
현재 설치된 node 버전은 20.12.1입니다. node는 nvm을 통해 버전 관리를 할 수 있습니다.
이 포스트에서는 nvm이야기는 생략하고 관련 포스트 링크 첨부하겠습니다. (nvm 설치)
시간이 나신다면 나무위키에서 Node.js에 대해서도 읽어보세요! (나무위키 Node.js)

Next.js 설치

Next.js를 설치하기 앞서 왜 Next.js를 쓰는지 알아보겠습니다.

React 공식문서에 Strat a New React project를 보면 프레임워크 사용을 권장하고있습니다. 아래는 공식문서에서 말하고있는 장점을 정리하였습니다.
Next.js뿐 만니라 Remix, Gatsby 등 다양한 프레임 워크가 있습니다. 진행하고자하는 프로젝트 특성에 맞게 사용하면 됩니다. (가벼운 프로젝트는 순수 리액트를 사용해도 무방합니다.)
다시 본론으로 돌아와 Next.js 설치 방법에 대해서 알아보겠습니다. 내가 설치하고싶은 경로에 접근 후 터미널에 아래 명령어를 실행합니다.
```
 npx create-next-app@latest
```
명령어를 실행하면 아래처럼 입력 받는 창이 나옵니다.
- 원하는 프로젝트이름
- 타입스크립트 사용여부
- ESlint 사용여부
- tailwind 사용여부
- src 폴더 사용여부
- app router사용여부
- import alias사용 여부
하고자하는 프로젝트 기술스택에 맞게 선택하시면 됩니다.
설치가 완료 후 vscode에서 프로젝트 파일을 열어보면 npm으로 패키지가 설치되어 있습니다.
(npm은 node.js의 패키지(독립된 모듈)을 개발하고, 배포, 공유하기 위한 관리 툴입니다. 자세한 내용은 npm 구글검색 GoGo)
저는 yarn 이라는 패키지 매니저를 사용할 것이기 때문에 yarn 을 설치해줍니다. 터미널에 아래 명령어를 입력합니다.
```
 npm install --global yarn
```
yarn을 설치 후 터미널에 yarn -v로 버전을 확인합니다. 버전이 나오면 설치가 완료된 것입니다.
다시 프로젝트에서 가서 아래 node_modules와 pack-lock.json을 지우고 yarn install을 실행 합니다.
yarn 으로 패키지 설치가 다시 완료 되면 아래 이미지 처럼 node_modules와 yarn.lock이 생성 됩니다.
이제 터미널에서 yarn dev로 프로젝트를 실행하면 아래 화면이 localhost:3000에 실행됩니다.
설치 완료!

MUI v5 설치

Next.js에 MUI를 셋팅해보도록 하겠습니다. 셋팅에 앞서 MUI란? 을 구글에 검색하면..

MUI는 Material Design 원칙을 기반으로 한 React 컴포넌트 라이브러리입니다. 개발자가 고품질의 UI를 빠르게 구축할 수 있도록 다양한 미리 만들어진 컴포넌트를 제공합니다. MUI를 사용하면 애플리케이션의 일관성과 접근성을 향상시키면서 개발 시간을 크게 단축시킬 수 있습니다.

라고 합니다. ㅎㅎ 저는 첫 회사에서 styled-compoent를 쓰다가 MUI를 사용하게 되었는데, 처음에는 커스텀하는데 너무 어려워서 쓰기 싫다가 이제는 MUI만 쓰게 됐습니다. 뭐 그렇습니다.
다시 본론으로 돌아와서 MUI를 설치합니다. 터미널에서 아래 명령어를 입력합니다.
```
 yarn add @mui/material @emotion/react @emotion/styled
```
주의할 점은 styledcompoent는 server-rendered를 지원하지 않습니다. 공식문서에서 SSR 프로젝트는 강력하게 Emotion쓰라고 권장하고있습니다. 꼭 emotion으로 설치합시다.
설치를 완료하고 공식문서에서 Next.js를 찾아보면 아래 탭이 있습니다. 여기를 보고 진행해도 되지만 v13 버전 기준으로 작성되었습니다. Next.js는 현재 v15를 바라보고있는데 v13기준인게 아주 맘에 안듭니다. 다른방법을 찾겠습니다.
MUI는 친절하게 각 프레임워크별로 example project를 제공해주고있습니다. 여기가 제일 최신화가 빠르더라구요. 일단 Next.js App router + typescript를 클릭합니다. (js를 사용하면 js 클릭)

아래 처럼 프로젝트가 나옵니다. 빨간색 네모에 있는 명령어를 터미널에 실행해서 클론해 봅시다.

 curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-ui-nextjs-ts
 cd material-ui-nextjs-ts

클론을 완료 후 내가 설치하고있는 프로젝트와 현재 받은 MUI example 프로젝트가 뭐가 다른지 비교해 봅니다.
사실 MUI example project를 바로 써도되지만, 어떤 부분이 추가 되었는지 알아보는 과정도 재밌습니다. 좀 더 잘 이해한것같은 느낌을 받는다랄까? 기분탓일 수도 있습니다.

package.json부터 비교하겠습니다.

직접 설치

  // 직업설치 pack.json

  {
    "name": "nextv14",
    "version": "0.1.0",
    "private": true,
    "scripts": {
      "dev": "next dev",
      "build": "next build",
      "start": "next start",
      "lint": "next lint"
    },
    "dependencies": {
      "@emotion/react": "^11.11.4",
      "@emotion/styled": "^11.11.5",
      "@mui/material": "^5.15.19",
      "next": "14.2.3",
      "react": "^18",
      "react-dom": "^18"
    },
    "devDependencies": {
      "@types/node": "^20",
      "@types/react": "^18",
      "@types/react-dom": "^18",
      "eslint": "^8",
      "eslint-config-next": "14.2.3",
      "typescript": "^5"
    }
  }

MUI example

  //  mui example package.json

  {
    "name": "material-ui-nextjs-ts",
    "version": "5.0.0",
    "private": true,
    "scripts": {
      "dev": "next dev",
      "build": "next build",
      "start": "next start",
      "lint": "next lint",
      "post-update": "echo \"codesandbox preview only, need an update\" && pnpm update --latest"
    },
    "dependencies": {
      "@emotion/cache": "latest",
      "@emotion/react": "latest",
      "@emotion/styled": "latest",
      "@mui/icons-material": "latest",
      "@mui/material": "latest",
      "@mui/material-nextjs": "latest",
      "next": "latest",
      "react": "latest",
      "react-dom": "latest"
    },
    "devDependencies": {
      "@types/node": "latest",
      "@types/react": "latest",
      "@types/react-dom": "latest",
      "eslint": "latest",
      "eslint-config-next": "latest",
      "typescript": "latest"
    }
  }

package.json을 비교해 보면 몇가지 차이점이 보입니다. 첫번째로 example package.json에는 버전이 모두 latest로 설정되어 있습니다. clone받을 때 마다 최신화된 버전으로 받게해주겠다는 얘기입니다. 하지만 실제 제품에 저렇게 latest로 해놓으면 어떤 재밌는 일이 일어날지 모르니 주의해야합니다. 두번째로는 dependecies에 emotion/cache, mui/material-nextjs, mui/icons-material가 더 설치되어있는 것을 확인할 수 있습니다. mui/icons 설치안해도 무방하지만 언젠가 쓸일이 있기에 같이 3가지 모두 설치해 주겠습니다. 아래 명령어를 터미널에 입력합니다.
```
 yarn add @mui/material-nextjs @emotion/cache @mui/icons-material
```
설치가 완료되었다면 이제 src/app 경로에있는 layout.tsx를 봐야합니다. Next.js layout 파일로 상태를 유지하거나, ui공유, no-rerender등을 할 수 있습니다. 자세한 사항은 나중에 다른 포스트로 정리하기로하고 공식문서 링크남겨놓겠습니다. (Next.js layout)

layout을 비교해보겠습니다.

직접 설치

  import type { Metadata } from "next";
  import { Inter } from "next/font/google";
  import "./globals.css";

  const inter = Inter({ subsets: ["latin"] });

  export const metadata: Metadata = {
    title: "Create Next App",
    description: "Generated by create next app",
  };

  export default function RootLayout({
    children,
  }: Readonly<{
    children: React.ReactNode;
  }>) {
    return (
      <html lang="en">
        <body className={inter.className}>{children}</body>
      </html>
    );
  }

MUI example

  import * as React from 'react';
  import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
  import { ThemeProvider } from '@mui/material/styles';
  import CssBaseline from '@mui/material/CssBaseline';
  import theme from '@/theme';

  export default function RootLayout(props: { children: React.ReactNode }) {
    return (
      <html lang="en">
        <body>
          <AppRouterCacheProvider options={{ enableCssLayer: true }}>
            <ThemeProvider theme={theme}>
              {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
              <CssBaseline />
              {props.children}
            </ThemeProvider>
          </AppRouterCacheProvider>
        </body>
      </html>
    );
  }

MUI example 프로젝트를 보면 body태그아래 AppRouterCacheProvider가 children을 감싸고 있고 그 아래 ThemeProvider가 감싸져있습니다. AppRouterCacheProvider 버전은 v14로 되어있네요. AppRouterCacheProvider의 역할은 공식문서에 나와있습니다.

The AppRouterCacheProvider component is responsible for collecting the CSS generated by MUI System on the server, as Next.js is streaming chunks of the .html page to the client.

While it's not required to use the AppRouterCacheProvider component, it's recommended to use it to ensure that the styles are appended to the <head> and not rendering in the <body>. See github.com/mui/material-ui/issues/26561#iss.. for why it's better.

요약하자면 Next.js는 streaming SSR방식을 사용합니다. 이를 보장하기위해 AppRouterCacheProvider를 사용해야하는것입니다. ApprouterCacheProvider 컴포넌트를 들어가면 EmotionCache를 사용하고있는 것을 확인할 수 있습니다. 아까 추가로 설치한 EmotionCache가 여기에 쓰이는 것입니다. ApprouterCacheProvider를 사용하면 head태그에 mui style을 추가해주기 때문에 성능상 이점도 있다고 합니다. options속성은 공식문서 Go!


import * as React from 'react';
import { EmotionCache, Options as OptionsOfCreateCache } from '@emotion/cache';
export type AppRouterCacheProviderProps = {
    /**
     * These are the options passed to createCache() from 'import createCache from "@emotion/cache"'.
     */
    options?: Partial<OptionsOfCreateCache> & {
        /**
         * If `true`, the generated styles are wrapped within `@layer mui`.
         * This is useful if you want to override the Material UI's generated styles with different styling solution, like Tailwind CSS, plain CSS etc.
         */
        enableCssLayer?: boolean;
    };
    /**
     * By default <CacheProvider /> from 'import { CacheProvider } from "@emotion/react"'.
     */
    CacheProvider?: React.ElementType<{
        value: EmotionCache;
    }>;
    children: React.ReactNode;
};
/**
 * Emotion works OK without this provider but it's recommended to use this provider to improve performance.
 * Without it, Emotion will generate a new <style> tag during SSR for every component.
 * See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's a problem.
 */
export default function AppRouterCacheProvider(props: AppRouterCacheProviderProps): React.JSX.Element;

AppRouterCacheProvider에 대해 알아봤으니 ThemeProvider와 CssBaseline에 대해서 알아보겠습니다. ThemeProvider MUI 디자인 시스템을 사용하거나 커스텀 디자인 시스템을 사용할 Theme파일을 주입하기위해 사용합니다. props로 전달된 theme파일입니다. 직접설치하는 프로젝트에 theme파일을 만들어 줍시다. 저는 src에 shared/provider/mui 경로에 생성하겠습니다. 폴더 구조는 전통적인 폴더구조 혹은 FSD를 주로 사용하는데 이건 시간되면 정리하겠습니다.

'use client';
import { Roboto } from 'next/font/google';
import { createTheme } from '@mui/material/styles';

const roboto = Roboto({
  weight: ['300', '400', '500', '700'],
  subsets: ['latin'],
  display: 'swap',
});

const theme = createTheme({
  palette: {
    mode: 'light',
  },
  typography: {
    fontFamily: roboto.style.fontFamily,
  },
  components: {
    MuiAlert: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          ...(ownerState.severity === 'info' && {
            backgroundColor: '#60a5fa',
          }),
        }),
      },
    },
  },
});

export default theme;

CssBaseline은 html에 기본으로 적용된 css를 리셋셋팅해주는 역할이라고 보시면됩니다. (CssBaseline공식문서)

이제 다 알아봤으니 layout.tsx파일을 직접설치 프로젝트에 바꿔보겠습니다.

import * as React from "react";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import theme from "@/shared/provider/mui/theme";

export default function RootLayout(props: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <AppRouterCacheProvider options={{ enableCssLayer: true }}>
          <ThemeProvider theme={theme}>
            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
            <CssBaseline />
            {props.children}
          </ThemeProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

MUI가 잘 적용됐는지 확인하기위해 app/page.tsx도 변경해보겠습니다.

import * as React from "react";
import Container from "@mui/material/Container";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Link from "@mui/material/Link";
import NextLink from "next/link";
// import ProTip from '@/components/ProTip';
// import Copyright from '@/components/Copyright';

export default function Home() {
  return (
    <Container maxWidth="lg">
      <Box
        sx={{
          my: 4,
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
          Material UI - Next.js App Router example in TypeScript
        </Typography>
        <Link href="/about" color="secondary" component={NextLink}>
          Go to the about page
        </Link>
        {/* <ProTip />
        <Copyright /> */}
      </Box>
    </Container>
  );
}

yarn dev로 실행 후 홈페이지에 아래 화면이 나오면 MUI 셋팅 완료입니다.
여기까지 읽느라 고생하셨습니다 ㅎㅎ 다음 포스트는 프로젝트 폴더구조에 대해서 작성해 보겠습니다.

Next.js v14 App router + MUI v5

Node.js 설치

Next.js 설치

MUI v5 설치