今天先建立专案,还有开始慢慢地定架构,装 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
<<: 【Day 23】建立 EKS on Outpost 的前置作业
>>: [day-17] 认识Python的资料结构!(Part .4)
回呼函式,或简称回调、回呼(Callback 即call then back 被主函式呼叫运算後会返...
前言 不管是学习 CSS 或是 Sass,在认识完基本的使用方式之後,都会透过作品的实作练习,才会更...
昨天我们建立了一个新的 Angular 专案,然後跑了一下内建的范例程序,今天我们要来动手加入一些自...
哈罗~ 前两天介绍了网路扫描的Hping 与 Nmap, 这两个工具可以协助我们搜索目前网域中的目标...
前言 CodeIgniter作为轻量化的PHP框架 db物件一直是操作资料库的好帮手 简化了下达sq...