
多國語系在許多網站已經是不可或缺的一個功能，在自己的研究中想做這事件情很久了，在公司的日常開發中也有許多這樣的功能，但前人已經設定好了，沒有從頭來過的感覺
剛好這兩天終於有一個契機與必要實作的需求出現了。於是就把自己實作的步驟記錄下來！

### 1. 安裝React-intl

```bash
yarn add react-intl
```

### 2. 設定next.config.js

開啟next.config.js設定預設的語系以及支援的語系設定，locales是設定支援的語系檔案而 defaultLocale 當沒有傳入語系設定時所使用的預設語系

```js
module.exports = {
  ...
  i18n: {
    locales: ['en', 'tw'],
    defaultLocale: 'tw',
  },
  ...
};
```

### 3. 放置語系包的位置

在語系設定上我的檔案會放在`/src/locales`中，裡面的檔案要對應到在**next.config.js**中所設定的語系相同，網站中有需要用到多國語系的語系檔案都可以在這邊設定

語系的檔案結構
```txt
.
├── ...
├── src
│   ├── locales
│   │   ├── en.ts
│   │   ├── tw.ts
│   │   └── index.ts
│   ├── pages
│   │   ├── _app.ts
│   └── ...
└── ...
```
語系資料對應後續我們就可以使用`FormattedMessage`的Component來取得該資料值。
```typescript
// en.ts檔案設定
export const en = {
    my_title: `Bruno's Jan Tech blogger`
}

// tw.ts
export const tw = {
    my_title: `Bruno's 技術筆記`
}

// index.ts
import { en } from "./en";
import { tw } from "./tw";

export const messages: any = {
    tw,
    en
}
```

### 4. 設定_app.tsx檔案

在_app.tsx中設定`IntlProvider`以及語系包的資料設定

```tsx
import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import React, { ReactElement } from 'react';
import { IntlProvider } from 'react-intl';
import { messages } from '~/locales';

const App: any = ({
                      Component,
                      pageProps,
                  }: AppProps) => {
    const router = useRouter();
    const {
        locale,
        defaultLocale,
    } = router;
    const message: any = messages[locale];
    return <IntlProvider locale={ locale } defaultLocale={ 'tw' } messages={ message }>
        <Component { ...pageProps } />
    </IntlProvider>;
};

export default App;
```

接下來就可以在畫面上需要多語言翻譯的位置加上下列程式碼就可以展現多國語系了！
```tsx
import { FormattedMessage } from 'react-intl';


<FormattedMessage id='my_title' defaultMessage='My default title' />
```

### 輸出靜態網站

完成了多語系社的設定以後，當要輸出靜態網站時出現了錯誤...竟然說i18n不支援`next export`！

```bash
$ next export
info  - using build directory: /Users/Yi-Shiuan/Documents/git/Blogger/.next
info  - Copying "static build" directory
info  - No "exportPathMap" found in "/Users/Yi-Shiuan/Documents/git/Blogger/next.config.js". Generating map from "./pages"
Error: i18n support is not compatible with next export. See here for more info on deploying: https://nextjs.org/docs/deployment
    at /Users/Yi-Shiuan/Documents/git/Blogger/node_modules/next/dist/export/index.js:147:19
    at async Span.traceAsyncFn (/Users/Yi-Shiuan/Documents/git/Blogger/node_modules/next/dist/trace/trace.js:79:20)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

後來在官網中找到了這一段文字..

> Note that Internationalized Routing does not integrate with next export as next export does not leverage the Next.js routing layer.
> Hybrid Next.js applications that do not use next export are fully supported.
>
> [Next.js - Internationalized Routing](https://nextjs.org/docs/advanced-features/i18n-routing#limits-for-the-i18n-config)

好吧，看起來我想輸出靜態網站不支援這樣的設定，所以只好動點手腳讓系統支援他！

用靜態路由的設定來讓他可以支援多國語系

```tsx
export const getStaticPaths: GetStaticPaths = async (): Promise<any> => {
    return {
        paths: [
            { params: { lang: 'tw' } },
            { params: { lang: 'en' } },
        ],
        fallback: false,
    };
};
```
再次修改_app.tsx

使用路由取得語系，再去設定 `IntlProvider`載入的語系設定
```tsx
import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import React, { ReactElement } from 'react';
import { IntlProvider } from 'react-intl';
import { messages } from '~/locales';

const App: any = ({
                      Component,
                      pageProps,
                  }: AppProps) => {
    library.add(fas, fab);
    const router = useRouter();
    const {
        locale,
        defaultLocale,
    } = router;
    const { lang } = router.query;
    // @ts-ignore
    const message: any = messages[lang ?? 'tw'];

    return <IntlProvider locale={ locale ?? 'tw' } defaultLocale={ 'tw' } messages={ message }>
        <Component { ...pageProps } />
    </IntlProvider>;
};

export default App;
```

最後移除next.config.js中的設定
```js
    i18n: {
        locales: ['en', 'tw'],
        defaultLocale: 'tw',
    },
```

這樣就可以在靜態網站中擁有多國語系囉！

### 參考資料

[Next.js - Internationalized Routing](https://nextjs.org/docs/advanced-features/i18n-routing#limits-for-the-i18n-config)

[Internationalizing Next.js app with react-intl by Iskren Lalov](https://www.laloov.com/posts/internationalizing-next-js-app-with-react-intl)


多國語系在許多網站已經是不可或缺的一個功能，在自己的研究中想做這事件情很久了，在公司的日常開發中也有許多這樣的功能，但前人已經設定好了，沒有從頭來過的感覺 剛好這兩天終於有一個契機與必要實作的需求出現了。於是就把自己實作的步驟記錄下來！

Next.JS 靜態網站 + React-Intl 的 i18n


其實Gatsby.js並沒有什麼不好，只是他每一次改版都需要花費許多精力去做更新，我從1.0用到了3.0，最後4.0真的讓我痛下決心轉換到了Next.js的懷抱

雖然官方有介紹如何從Gatsby.js遷移到Next.js的範例，但說真的還有許多沒有寫清楚的地方這邊先做幾個紀錄

## 更新package.json

除離移除所有的Gatsby.js的套件外，還需要安裝幾個套件這幾個套件官方都有說明主要是為了渲染markdown的文件以及讀取markdown的文件的套件功能

```json
{
  "scripts": {
    "build": "next build",
    "export": "next export",
    "dev": "next dev",
    "start": "next start"
  },
  "subpath": "`/*",
  "dependencies": {
    "gray-matter": "^4.0.3",
    "next": "^12.3.1",
    "react-markdown": "^8.0.3",
    "react-syntax-highlighter": "^15.4.4",
    "remark": "^14.0.2",
    "remark-html": "^15.0.1"
  }
}
```

## 讀取markdown檔案

在部落格中的markdown文件資料夾是這樣放的 `src/posts/{post}.mdx`

```typescript
// posts.ts

import dayjs from 'dayjs';
import fs from 'fs';
import matter from 'gray-matter';
import { join } from 'path';

export type Post = {
    id: number;
    fileName: string;
    url: string;
    title: string;
    tags: string[];
    content: string;
    date: Date;
    publish: boolean;
    description: string;
}

const postsDirectory = join(process.cwd(), '<<markdown 檔案位置>>');
let posts: Post[] = [];

// 取得markdown文件中的內容
export const getPost: Function = (slug: string): Post => {
    const realSlug = slug.replace(/\.mdx$/, '');
    const fullPath = join(postsDirectory, `${ slug }`);
    const fileContents = fs.readFileSync(fullPath, 'utf8');
    const {
        data,
        content,
    } = matter(fileContents);

    const obj = JSON.parse(JSON.stringify(data));
    return {
        id: dayjs(data.date).unix(),
        fileName: realSlug,
        url: `${ dayjs(data.date).format('YYYY/MM/DD') }/${ realSlug }`,
        ...obj,
        content,
    } as Post;
};

// 列表目標資料夾中的所有markdown檔案，並且逐一取得markdown文件中的資料
export const getAllPosts: Function = (): Post[] => {
    if ( posts.length === 0 ) {
        const slugs = fs.readdirSync(postsDirectory);
        posts = slugs.map((slug) => {
            return getPost(slug);
        });
    }

    return posts;
};
```

## 文章列表

有了這些，就可以把文章列表的部分印出來了！

```typescript jsx
export const getStaticProps: GetStaticProps = async (context: GetStaticPropsContext<ParsedUrlQuery>): Promise<any> => {
    const posts: Post[] = getAllPosts();
    return {
        props: {
            posts: posts.slice(0, 10)
        },
    };
};
```

## 文章內文

接下來要讀取markdown中的內容，並且渲染出整個html，然後我也有針對markdwon的element做客制處理，例如`h1`的渲染就會如同下方的html

```typescript jsx
export const h1 = (props: any) => {
    const {children} = props;

    return <div className={classNames("u-heading-v3", "g-mb-40")}>
        <h1 className={classNames("h1", "u-heading-v3__title")}>
            {children}
        </h1>
    </div>
}
```

另外官方給的方式，渲染移植會有錯誤（如下圖），所以自己做了一個呈現的頁面，讓畫面可以有更完整的客製化功能

![渲染錯誤](gatsbyjs-to-nextjs/render-error.png)

```typescript jsx
import { NextPage } from 'next';
import ReactMarkdown from 'react-markdown';

const Posts: NextPage = (props: any) => {
    return <>
        <div className={ classNames('g-mb-30') }>
             {/*略*/}
            <ReactMarkdown components={ connponents }>{ props.content }</ReactMarkdown>
        </div>
        {/*略*/}
    </>;
};

export const getStaticProps: GetStaticProps = async ({ params }: any): Promise<any>  => {
    const post = getPost(`${params.post[3]}.mdx`);
    return {
        props: {
            ...post
        },
    };
};

export const getStaticPaths: GetStaticPaths = async (): Promise<any>  => {
    const posts = getAllPosts();
    return {
        paths: posts.map((post: Post) => {
            return {
                params: {
                    post: post.url.split('/').map(i => i.toString()),
                },
            };
        }),
        fallback: false,
    };
};
```

## Tag標籤

在Gatsby.js可以透過gql把文章標籤弄出來但在next.js中就只能自己處理了..

我先在posts.ts中新加一個method，可以處理把文章的tag都列出來，然後在每一頁中添加印出tag的處理，這樣子就把原本Gatsby原有的功能做出來了！接下來差了分頁功能...

```typescript
// posts.ts
export const getTags: Function = (): { [index: string]: number } => {
    const tags: { [index: string]: number } = {};
    posts.forEach((post: Post) => {
        post.tags.forEach((tag: string) => {
            if ( tags[tag] === undefined ) {
                tags[tag] = 1;
            } else {
                tags[tag]++;
            }
        });
    });

    return tags;
};

// pages/*
export const getStaticProps: GetStaticProps = async ({ params }: any): Promise<any>  => {
    // 略
    const allTags = getTags();
    return {
        props: {
            // 略
            allTags
        },
    };
};
```

## 關於分頁功能

每一頁只顯示10篇文章，所以在`index.tsx`先hard code 只取得文章前10筆，接下來再運用`getStaticPaths`的方式就可以達成分頁功能了！

```typescript jsx
index.tsx中的getStaticProps
export const getStaticProps: GetStaticProps = async (context: GetStaticPropsContext<ParsedUrlQuery>): Promise<any> => {
    const posts: Post[] = getAllPosts();
    const allTags = getTags();
    return {
        props: {
            posts: posts.slice(0, 10),
            allTags,
            total: posts.length
        },
    };
};

// [page].tsx
export const getStaticProps: GetStaticProps = async (context: GetStaticPropsContext<ParsedUrlQuery>): Promise<any> => {
    const {
        page,
    }: any = context.params;

    const posts: Post[] = getAllPosts();
    const allTags = getTags();

    const current = parseInt(page ?? '0');

    return {
        props: {
            current,
            posts: posts.slice((current - 1) * 10, current * 10),
            allTags,
            total: posts.length,
        },
    };
};

export const getStaticPaths: GetStaticPaths = async (): Promise<any> => {
    const pages = [];
    const posts: Post[] = getAllPosts();

    for (let i = 0; i < posts.length / 10; i++) {
        pages.push({
                       params: {
                           page: `${ i + 1 }`,
                       },
                   });
    }

    return {
        paths: pages,
        fallback: false,
    };
};
```

## 參考連結

[Next.js Migrate from Gatsby.js](https://nextjs.org/docs/migrating/from-gatsby)


紀錄從Gatsby.js轉換到了Next.js的踩地雷過程

從Gatsby.js轉換到Next.js


之前同事去參加面試，在面試的時候有一道上機考的題目，我覺得很有趣並且是一個很好練習的一道題目，一開始我讓我們前端的新人試著寫出這道題，
沒想到所有新人都完成了，所以我想嘗試一下TDD的方式來撰寫這道題目。

## 練習題目需求

1. 每一區有1~10個數字，點擊後會變成選取狀態，再次點擊後取消選取
1. 在畫面上共有4個區域，每個區域都有10個數字，每區選取的號碼不能重複選取(ex: 第一區選擇"1"則其他區數字"1"為不可選)
1. 每一區都有一個重置按鈕，點擊後該區選取的數字要被清空，並且所有區可以選取胎數字

## 事後檢討

一開始我的commit是有循序漸進的但後面亂掉了，變成了一個commit有多個事件處理。
第二個是在重構的時候沒有及時的重構，所以在後面開始出現了很多個重構的commit。

[repo](https://github.com/Yi-Shiuan/select-numbers)


之前同事去參加面試，在面試的時候有一道上機考的題目，我覺得很有趣並且是一個很好練習的一道題目，一開始我讓我們前端的新人試著寫出這道題， 沒想到所有新人都完成了，所以我想嘗試一下TDD的方式來撰寫這道題目。

Select Number TDD練習


昨天面試一位React新手雖然最後因為一些原因沒有Hire她，但他問了一個問題讓我覺得很棒：`可以有什麼方法可以讓我的能力加強嗎？`

在我第一次接觸React距今已經過了好久了，久到我已經忘記我是如何啟動第一個React的APP...但身為一個React開發者又是一位面試官的角色，
未來還會有更多學習React的新手不斷進入，我想好好分享一下在面試一個React的新人時我在乎哪些技能另外也能當作學習React的入門時一個學習路徑

## Local state的應用

在學習React的第一步，當然建議可以先從`npx create-react-app my-app`開始，當然第一步就是在畫面印出簡單的文字來當作一個進入點，
在這之後建議可以開始做一個簡單的ToDo List的小專案，來體驗整個React的語法、JSX與Component等等的設計，Function Component與Class Component
都要體驗一下。

## Global state的使用

在學會了React的local state的應用也做了一個簡單的todo list之後，我建議學習一下Redux或是其他Global state的套件來改寫一下剛才的todo list
嘗試幾筆新增資料後，在畫面上驅動更新顯示出來

在Global state我建議的是使用Redux與React Hook的Context兩種全域的狀態管理都要學習，畢竟未來進入職場的時候不知道會使用哪一個

## Virtual DOM

在學習Global state之後，當然建議好好惡補一下Virtual DOM這個東西，這對未來的職涯上有很大的幫助，但又偏偏許多人忽略這個東西的養成...

## Fetch API

當Global state上手後，建議練習一下在React的APP中呼叫一下api取得資料與送出資料的練習，畢竟在工作上有很大的概率出現的
在呼叫API的部分我建議做兩個的練習，一個是使用fetch的方式另一個是axios的套件，然後了解一下這兩個的使用限制與優缺

## Component 的設計

在Global state後，嘗試一下把todo list的Component拆分成多個Component來練習，深入了解一下state與props的相異之處使用條件與限制，
也把Global state的狀態應用在Component中，嘗試一下使用props與Global state來更新todo list的資料，然後觀察一下其中的差異與變化。

## 生命週期

最後我的建議是React的生命週期，觸發render的時機等等的這些生命週期，這會讓你在React的道路上可以少踩一些地雷或是少遇到一些錯誤。


以上是我在近期面試許多React的新手與昨天面試的同學提問後，參與自身的學習經驗來給未來新入React的朋友簡單的一個路徑。
當然學習路徑有很多但我面試時偏好也會問這類的問題，從中鑑別候選人對React的理解程度。

###
[建立全新的 React 應用程式](https://zh-hant.reactjs.org/docs/create-a-new-react-app.html)


昨天面試一位React新手雖然最後因為一些原因沒有Hire她，但他問了一個問題讓我覺得很棒：可以有什麼方法可以讓我的能力加強嗎？ 在我第一次接觸React距今已經過了好久了，久到我已經忘記我是如何啟動第一個React的APP...但身為一個React開發者又是一位面試官的角色， 未來還會有更多學習React的新手不斷進入，我想好好分享一下在面試一個React的新人時我在乎哪些技能另外也能當作學習React的入門時一個學習路徑

React 入門的學習之路


## 前情提要

新專案即將完成之際，我們開始對各個頁面上的效能與一些過去被我們忽略的問題進行修正，
在這修正的過程中我發現了在每一次頁面切換時都會出現網站的Logo消失又再出現的問題，
Logo是一個經常變動的圖片所以在專案中是透過GQL取得Logo的CDN位置後才做渲染的，
再深入排查後才發現原來過去我的觀念不是非常正確所以用這篇來筆記一下正確地處理做法，當作小抄避免未來再犯同樣的錯誤。

## Next.js Layout最佳配置

在Next.js的Layout最佳配置應該是把Layout的component放在`_app.tsx`中，在轉換頁面時就不會再出現前情提要的相關問題了。

```typescript jsx
function App({Component, pageProps }: AppProps): any {
	const apolloClient: any = useApollo(pageProps.initialApolloState);

	return <ApolloProvider client={apolloClient}>
		    <Layout>
			    <Component {...pageProps} />
			</Layout>
		</ApolloProvider>
}
```

```typescript jsx
const Index: NextPage<any> = (props: any): any => {
	return <>
            {/*index content*/}
		</>
};
```


### 在得到結論前的一些排查點

在一開始我們的`_app.tsx`與`index.tsx`或其他page都是這樣的設計，在Layout中有`Header`與`Footer`兩個component以及負責所有頁面上的版面配置，
其中Header這個component中去取得GQL資料，但因為他是屬於React FunctionComponent的範疇，故無法使用getInitialProps這類的function

```typescript jsx
function App({Component, pageProps }: AppProps): any {
	const apolloClient: any = useApollo(pageProps.initialApolloState);

	return <ApolloProvider client={apolloClient}>
			<Component {...pageProps} />
		</ApolloProvider>
}
```

```typescript jsx
const Index: NextPage<any> = (props: any): any => {
	return <Layout>
            {/*index content*/}
		</Layout>
};
```

1. 在方案一的我是透過React Memo的方式Cache Layout起來下次使用Layout 這個component時就不會再重新渲染，但結果是仍然每次重新渲染Layout
1. 在_app.tsx中取得相關的Layout配置所需要的圖檔與文字，透過props的方式傳入給Layout中並讓Header在Server side 渲染，
但因為progress image的使用所以Logo仍然會有閃一下的情況

然後在官網上看到了這麼一段....
最後我把Layout放置到`_app.tsx`中，就可以如我們預期的一開始出現了progress image的Logo再出現真正的Logo，在每次轉頁時也沒有重新渲染相關的Layout component

我想主要的幾個原因是，_app.tsx的執行時間以及在轉頁渲染的最小單位是整個Next page不是採用差異的方式重新渲染。

> Next.js uses the App component to initialize pages. You can override it and control the page initialization. Which allows you to do amazing things like:
>
> - Persisting layout between page changes
> - Keeping state when navigating pages
> - Custom error handling using componentDidCatch
> - Inject additional data into pages
> - Add global CSS
>
> [Next.js Custom APP](https://nextjs.org/docs/advanced-features/custom-app)

### 相關連結

[Next.js Custom APP](https://nextjs.org/docs/advanced-features/custom-app)


新專案即將完成之際，我們開始對各個頁面上的效能與一些過去被我們忽略的問題進行修正， 在這修正的過程中我發現了在每一次頁面切換時都會出現網站的Logo消失又再出現的問題， Logo是一個經常變動的圖片所以在專案中是透過GQL取得Logo的CDN位置後才做渲染的， 再深入排查後才發現原來過去我的觀念不是非常正確所以用這篇來筆記一下正確地處理做法，當作小抄避免未來再犯同樣的錯誤。

Next.JS 靜態網站 + React-Intl 的 i18n

從Gatsby.js轉換到Next.js

Select Number TDD練習

React 入門的學習之路

Next.js 的Layout最佳配置