鑒于flow爛尾了,為了維護(hù),故轉(zhuǎn)寫TypeScript.
然而苦等vue3未果,于是轉(zhuǎn)向?qū)W習(xí)React.
鄙人React剛起步,英語(yǔ)渣一名,文章大部分內(nèi)容為翻譯官網(wǎng)示例,并重寫,可能會(huì)存在與之相違的情況.
參考官網(wǎng):https://nextjs.org/learn/basics/getting-started
開(kāi)發(fā)環(huán)境:
window10 x64
node v10.16.3
npm v6.13.4

1.項(xiàng)目創(chuàng)建

首先,我們需要在電腦的某個(gè)地方,創(chuàng)建一個(gè)新的空文件(鄙人將其命名'next_js_learn'),然后打開(kāi)命令行工具(cmd或powershell),并切換至新建的文件夾目錄下,敲入'npm init -y'初始化一個(gè)空項(xiàng)目,此時(shí)文件夾里會(huì)生成一個(gè)'package.json'文件
ps:鄙人ide全程用vs cdoe

npm init -y

1.png

2.添加React,Next依賴

接著,我們需要把React,Next依賴添加進(jìn)去,在命令行工具敲入'npm install --save react react-dom next'

npm install --save react react-dom next

待命令執(zhí)行完畢,這時(shí)候文件夾的結(jié)構(gòu)應(yīng)該會(huì)如下圖左邊所示,并且'package.json'會(huì)把React,Next依賴添加進(jìn)來(lái).

2.png

3.添加TypeScript開(kāi)發(fā)環(huán)境依賴

此依賴是為了讓我們?cè)陂_(kāi)發(fā)中使用TypeScript,在命令行工具接著敲入'npm install --save-dev typescript @types/react @types/node'以安裝TypeScript.

npm install --save-dev typescript @types/react @types/node

這里我們會(huì)發(fā)現(xiàn)會(huì)多一個(gè)'tsconfig.json',
以上,我們基本已經(jīng)搭建完Next.js和TypeScript的開(kāi)發(fā)環(huán)境.

4.添加一個(gè)頁(yè)面以訪問(wèn)

這里,我們需要?jiǎng)?chuàng)建一個(gè)頁(yè)面,好讓我們能在打開(kāi)瀏覽器時(shí)候能看到些東西,一般我們默認(rèn)的頁(yè)面都以index命名(不知道是誰(shuí)規(guī)定的?),我們需要在原來(lái)文件夾里創(chuàng)建一個(gè)名叫'pages'的文件夾用以存放我們要訪問(wèn)的頁(yè)面,注意,這個(gè)名字一定要叫'pages',在Next.js有兩個(gè)文件夾比較特殊,一個(gè)是'pages',另一個(gè)是'public',這兩個(gè)文件夾的命名是固定不能變.
創(chuàng)建pages文件夾,并在文件夾下添加文件'index.tsx',如下圖

image.png

然后我們可以在'index.tsx'上開(kāi)始寫上我們偉大的code了,

//index.tsx
const Home = () => <h1>Hello world!My Name is Kun Ho</h1>;

export default Home;

5.啟動(dòng)服務(wù)器,并打開(kāi)瀏覽器訪問(wèn)

在我們啟動(dòng)服務(wù)器之前,我們需要配置Next.js的命令,打開(kāi)'package.json'文件,并且修改'scripts'如下:

//package.json
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

image.png

npm run dev

image.png

image.png

6.Typscript的嚴(yán)格模式約束

但這個(gè)頁(yè)面實(shí)在是有點(diǎn)太簡(jiǎn)單了,簡(jiǎn)直就是簡(jiǎn)單得我自己看了都想打人,于是我們?cè)陧?yè)面添加一些瀏覽器的信息,修改'index.tsx',如下:

//index.tsx
const Home = ({ userAgent }) => <h1>Hello world! My Name is Kun Ho - user agent: {userAgent}</h1>;

Home.getInitialProps = async ({ req }) => {
  const userAgent = req ? req.headers['user-agent'] : navigator.userAgent;
  return { userAgent };
};

export default Home;

保存一下,我們就能看到瀏覽器打印信息的變化:

image.png

但上述這代碼,我們無(wú)法知道'userAgent'是什么類型,而且編譯器又不像.NET,Java這樣報(bào)錯(cuò)提示我們.
于是,我們可以修改一下配置,把'tsconfig.json'中的"strict"設(shè)置為true:

image.png

保存一下之后,我們立馬就能看到錯(cuò)誤,而且編譯也編譯不過(guò)

image.png

//index.tsx
import { NextPage } from 'next';

const Home: NextPage<{ userAgent: string }> = ({ userAgent }) => (
  <h1>Hello world!My Name is Kun Ho - user agent: {userAgent}</h1>
);

Home.getInitialProps = async ({ req }) => {
  const userAgent = req ? req.headers['user-agent'] || '' : navigator.userAgent;
  return { userAgent };
};

export default Home;

然后我們又能愉快訪問(wèn)頁(yè)面了

7.Next.js路由

這個(gè)簡(jiǎn)單得我自己都不敢相信(vue有個(gè)兄弟版本,叫nuxt.js,異曲同工),我們僅僅需要做的就是'pages'文件夾,添加一個(gè)新頁(yè)面,然后直接瀏覽器輸入路徑,就能直接訪問(wèn)了,啥都不用配置.
如:在'pages'添加一個(gè)名叫'about.tsx'的文件,在文件輸入如下代碼:

//about.tsx
const About = () => (
    <div>
        <p>This is the about page</p>
    </div>
);

export default About;

image.png

保存,直接打開(kāi)瀏覽器,url加上路徑'about',頁(yè)面就出來(lái)了...

image.png