iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0

今天先建立專案,還有開始慢慢地定架構,裝 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;

小結

大家想要看看之前的網站可以看這裡,或是直接到首頁~ 有任何問題可以問我,或是也可以討論未來要開發的 No-code 專案喔。

祝大家明天上班上課愉快!

Live Demo

晚安 <3


上一篇
#16 No-code 之旅 — Project Setup
下一篇
#18 No-code 之旅 — 讀取資料庫來實作部落格 ft. Notion SDK
系列文
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言