設定基礎Next.js+MUI開發環境與部屬firebase

-

這裡使用範例MUI本身示範例，因為有時寫一寫會忘記一些步驟，乾脆就會整成一篇。以下整理成10點內容

1. 使用範例專案

pnpm create next-app {你喜歡的專案目錄名稱} --example https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts

這裡使用MUI官方提供的Next.js的typescript範例，程式碼請參考這裡

使用到的主要技術堆疊如下

a. MUI v5 

b. Next.js v14 - App router

c. typescript v5


2. 改套件名稱

開啟package.json 修改 name 和 version 欄位。


3. 固定相依套件版本

pnpm install之後，手動填入當前版本

請開啟 pnpm-lock.yaml 把相依套件的各版本填入 package.json

舉例

"dependencies": {
"@emotion/cache": "11.11.0",
"@emotion/react": "11.11.4",
"@emotion/styled": "11.11.5",
"@mui/icons-material": "5.15.20",
"@mui/material": "5.15.20",
"@mui/material-nextjs": "5.15.11",
"next": "14.2.4",
"react": "18.3.1",
"react-dom": "18.3.1",
},
"devDependencies": {
"@types/node": "20.14.5",
"@types/react": "18.3.3",
"@types/react-dom": "18.3.0",
"eslint": "9.5.0",
"eslint-config-next": "14.2.4",
"typescript": "5.4.5"
},


4. 設定主題風格

修改src/theme.ts

因為我使用原生MUI風格就沒有改這裡的顏色或主題設定

4.1 設定字形

舉例選擇 google font 的 Noto_Sans_TC時

import { Noto_Sans_TC } from 'next/font/google';

const theFont = Noto_Sans_TC({
weight: ['300', '400', '500', '700'],
subsets: ['latin'],
display: 'swap',
});

const theme = createTheme(
{
...
typography: {
fontFamily: theFont.style.fontFamily,
},
...
}
);


5. 設定語言language

5.1 網頁設定語系

在 src/app/layout.tsx 改 html 標籤的 lang 屬性值

<html lang="zh-Hant-TW">

5.2 MUI設定語系

修改 src/theme.ts

import { zhTW } from '@mui/material/locale';

...

const theme = createTheme(
{
palette: {
...
},
typography: {
...
},
components: {
...
},
},
zhTW, // 是createTheme的第二個參數
);


6. 設定裝置瀏覽的縮放基準Viewport

在 src/app/layout.tsx 中加入 viewport 匯出 Next.js會使用它

import type { Viewport } from 'next'

export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
userScalable: false,
}


7. 設定網站Metadata

在 src/app/layout.tsx 中加入 metadata 匯出 Next.js會使用它

import type { Metadata } from 'next';

export const metadata: Metadata = {
...
};

7.1 設定網站標題title與描述description

網站的標題與描述

export const metadata: Metadata = {
title: "<你喜歡的標題>",
description: "<你喜歡的描述>",
};

7.2 設定網站關鍵字keywords

舉例關鍵字是Next.js, MUI, React

export const metadata: Metadata = {
keywords: ['Next.js', 'MUI', 'React'],
};

7.3 設定網站分享資訊OpenGraph(og)

export const metadata: Metadata = {
openGraph: {
title: 'Next.js',
description: 'The React Framework for the Web',
images: '/og-image.png',
},
};

因為實在很多種設定所以請參考Next.js官方文件


7.4 設定canonical

如果你的canonical網址是 `https://acme.com`

export const metadata: Metadata = {
metadataBase: new URL('https://acme.com'),
};


8. 設定網站圖示favicon.ico

放置到固定圖檔在 `src/app/favicon.ico` Next.js會自動加到header


9. 改每一頁的函數名稱命名方式

個人習慣使用 app router 時, 每個page的名稱都用 xxxPage

舉例:

a. src/app/page.tsx 用 IndexPage
b. src/app/create/page.tsx 用 CreatePage
c. src/app/list/page.tsx 用 ListPage


10. 部屬環境設定


10.1 修改.gitignore

部屬到firebase，建議在`.gitignore`加入以下兩條規則

a. `.firebase` 是部屬暫存目錄

b. `*-debug.log` 是firebase emulator會生成的log檔案


10.2 firebase指令紀錄

firebase init

firebase apps:create web

firebase apps:sdkconfig WEB {create指令獲得的id}

# 將web用的firebase設定放到環境變數

firebase deploy


10.3 環境變數.env

生成開發/產品用環境變數, Next.js預設會吃的設定檔案, firebase部屬也會使用

a. `.env.development.local` 開發時用環境變數

b. `.env.production.local`  產品時用環境變數



留言

張貼留言