今天先建立專案,還有開始慢慢地定架構,裝 dependencies ~
這專案想要用 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"]
}
元件開發選擇用 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 專案喔。
祝大家明天上班上課愉快!
晚安 <3