#17 No-code 之旅 — 專案架構 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 17

Modern Web

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 17 篇

#17 No-code 之旅 — 專案架構

13th鐵人賽 javascript react nextjs chakraui

Jade

2021-10-02 23:56:08

977 瀏覽

分享至

今天先建立專案，還有開始慢慢地定架構，裝 dependencies ～

No-code

Setup

這專案想要用 Next.js + TypeScript 寫，所以用下面指令建立專案：

npx create-next-app --typescript
# or
yarn create next-app --typescript

想了解更多可以看這篇 (Next.js 簡介)

`tsconfig.json`

因為專案用 TypeScript，這裡有 config 檔案，因為 Next.js 剛好沒有 src 資料夾，所有資料夾直接在根目錄，例如 /pages/，/config/。然後我想要用 absolute import，所以在 tsconfig.json 裡加了這行：

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

Dependencies

元件開發選擇用 Chakra UI：

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
# or
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

專案應該不需要什麼比較特表的 state management，所以採用 SWR：

npm install swr
# or
yarn add swr

`pages/_document.tsx`

因為想用 Chakra UI 的 color mode，所以需要加 ColorModeScript 在 _document.tsx 裡：

import { ColorModeScript } from "@chakra-ui/react";
import theme from "config/theme";
import NextDocument, { Head, Html, Main, NextScript } from "next/document";

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <ColorModeScript initialColorMode={theme.config.initialColorMode} /> // 這個～
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

`pages/_app.tsx`

用了 Chakra UI 也不忘記要加 ChakraProvider 喔：

import { ChakraProvider } from "@chakra-ui/react";
import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider> // 這個！
      <Component {...pageProps} />
    </ChakraProvider>
  );
}
export default MyApp;