Next.js与TypeScript从零起步学习笔记-1.项目创建与路由

鉴于flow烂尾了,为了维护,故转写TypeScript.
然而苦等vue3未果,于是转向学习React.
鄙人React刚起步,英语渣一名,文章大部分内容为翻译官网示例,并重写,可能会存在与之相违的情况.
参考官网:https://nextjs.org/learn/basics/getting-started
开发环境:
window10 x64
node v10.16.3
npm v6.13.4

1.项目创建

首先,我们需要在电脑的某个地方,创建一个新的空文件(鄙人将其命名'next_js_learn'),然后打开命令行工具(cmd或powershell),并切换至新建的文件夹目录下,敲入'npm init -y'初始化一个空项目,此时文件夹里会生成一个'package.json'文件
ps:鄙人ide全程用vs cdoe

npm init -y

1.png

2.添加React,Next依赖

接着,我们需要把React,Next依赖添加进去,在命令行工具敲入'npm install --save react react-dom next'

npm install --save react react-dom next

待命令执行完毕,这时候文件夹的结构应该会如下图左边所示,并且'package.json'会把React,Next依赖添加进来.

2.png

3.添加TypeScript开发环境依赖

此依赖是为了让我们在开发中使用TypeScript,在命令行工具接着敲入'npm install --save-dev typescript @types/react @types/node'以安装TypeScript.

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

这里我们会发现会多一个'tsconfig.json',
以上,我们基本已经搭建完Next.js和TypeScript的开发环境.

4.添加一个页面以访问

这里,我们需要创建一个页面,好让我们能在打开浏览器时候能看到些东西,一般我们默认的页面都以index命名(不知道是谁规定的?),我们需要在原来文件夹里创建一个名叫'pages'的文件夹用以存放我们要访问的页面,注意,这个名字一定要叫'pages',在Next.js有两个文件夹比较特殊,一个是'pages',另一个是'public',这两个文件夹的命名是固定不能变.
创建pages文件夹,并在文件夹下添加文件'index.tsx',如下图

image.png

然后我们可以在'index.tsx'上开始写上我们伟大的code了,

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

export default Home;

5.启动服务器,并打开浏览器访问

在我们启动服务器之前,我们需要配置Next.js的命令,打开'package.json'文件,并且修改'scripts'如下:

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

image.png

然后,在命令行工具敲入'npm run dev',此时打开浏览器,输入'http://localhost:3000/',就能看到我们的第一个页面了.

npm run dev

image.png

image.png

6.Typscript的严格模式约束

但这个页面实在是有点太简单了,简直就是简单得我自己看了都想打人,于是我们在页面添加一些浏览器的信息,修改'index.tsx',如下:

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

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

export default Home;

保存一下,我们就能看到浏览器打印信息的变化:

image.png

但上述这代码,我们无法知道'userAgent'是什么类型,而且编译器又不像.NET,Java这样报错提示我们.
于是,我们可以修改一下配置,把'tsconfig.json'中的"strict"设置为true:

image.png

保存一下之后,我们立马就能看到错误,而且编译也编译不过

image.png

为了能正常编译,我们需要告诉编译器,这些是什么类型,用TypeScript主要就是为了这个,这时候我们修改一下'index.tsx',告诉编译器,userAgent是string

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

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

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

export default Home;

然后我们又能愉快访问页面了

7.Next.js路由

这个简单得我自己都不敢相信(vue有个兄弟版本,叫nuxt.js,异曲同工),我们仅仅需要做的就是'pages'文件夹,添加一个新页面,然后直接浏览器输入路径,就能直接访问了,啥都不用配置.
如:在'pages'添加一个名叫'about.tsx'的文件,在文件输入如下代码:

//about.tsx
const About = () => (
    

        
This is the about page
    
);

export default About;

image.png

保存,直接打开浏览器,url加上路径'about',页面就出来了...

image.png