#17 No-code 之旅 — 专案架构

今天先建立专案,还有开始慢慢地定架构,装 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


<<:  【Day 23】建立 EKS on Outpost 的前置作业

>>:  [day-17] 认识Python的资料结构!(Part .4)

【Day 27】JavaScript 回呼函式(callback function)

回呼函式,或简称回调、回呼(Callback 即call then back 被主函式呼叫运算後会返...

[Day 12] Sass/SCSS 实作练习

前言 不管是学习 CSS 或是 Sass,在认识完基本的使用方式之後,都会透过作品的实作练习,才会更...

[Day25] Angular 的 Module 与 Component

昨天我们建立了一个新的 Angular 专案,然後跑了一下内建的范例程序,今天我们要来动手加入一些自...

【Day9】利用列举技术取得更多资讯

哈罗~ 前两天介绍了网路扫描的Hping 与 Nmap, 这两个工具可以协助我们搜索目前网域中的目标...

[CodeIgniter 3] 记忆体的隐形杀手:Log all queries

前言 CodeIgniter作为轻量化的PHP框架 db物件一直是操作资料库的好帮手 简化了下达sq...