TypeScript로 작성하는 Next의 기본 튜토리얼입니다.
공식 문서의 튜토리얼이 짧아서 간단하게 작성했습니다.😅 Next + TypeScript를 처음 접하시는 분께 도움이 됐으면 좋겠습니다. 👍

Settings

👉 npm과 git을 초기화 시켜줍니다.

npm init -y
git init
touch .gitignore

👉 .gitignore을 간단하게 작성합니다.

.next
node_modules/
.DS_Store

👉 Next와 TypeScript, Sass 관련 모듈을 다운로드합니다.

npm install --save react react-dom next sass
npm install --save-dev typescript @types/react @types/node

👉 package.json, script를 수정합니다.

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }

👉 tsconfig.json을 작성해 줍니다. tsconfig 세부 내용

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

👉 기본적인 구조를 만들어 줍니다.

mkdir pages -페이지
mkdir public -static파일
mkdir components -컴포넌트
mkdir styles -공용 스타일

👉 /styles/reset_normalize.scss를 작성해 줍니다.

reset은 브라우저의 기본 속성을 초기화 시켜주는 것이고, normalize는 각 브라우저마다 동일한 화면을 보여주기 위함입니다.

/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display: block;
}

body {
  line-height: 1;
}

ol,ul {
  list-style: none;
}

blockquote,q {
  quotes: none;
}

blockquote {
  &:before,  &:after {
    content: "";
    content: none;
  }
}

q {
  &:before,  &:after {
    content: "";
    content: none;
  }
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* normalize */

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace,monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,strong {
  font-weight: bolder;
}

code,kbd,samp {
  font-family: monospace,monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,input,optgroup,select,textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,input {
  overflow: visible;
}

button,select {
  text-transform: none;
}

button,[type="button"],[type="reset"],[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

👉 pages/_app.tsx, pages/index.tsx를 작성해 줍니다.

_app.tsx (js)는 React의 app.js와 비슷한 역할을 합니다.
Next는 _app이 없을 경우 기본 _app으로 대체합니다.
js 파일을 작성할 땐 .ts 확장자를 사용합니다.
jsx 파일을 작성할 땐 .tsx 확장자를 사용합니다.

// /pages/_app.tsx
import type { AppProps } from "next/app";
import "../styles/reset_normalize.scss";

const _app = ({ Component, pageProps }: AppProps) => {
  return <Component {...pageProps} />;
};

export default _app;

// /pages/index.tsx
const index = () => {
  return <h1>Hello, World!</h1>;
};

export default index;

Run

npm run dev

실행하여 http://localhost:3000/ 에서 Hello, World! 가 잘 나오는지 확인합니다.
여기까지 create-next-app 없이 Next + TypeScript 기본 세팅을 아주 쉽게 끝냈습니다! 🚀

다음은 Color Hunt Clone - API와 레이아웃 입니다.

코드는 여기(GitHub)서 확인하실 수 있습니다.