鉴于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 = () => <h1>Hello world!My Name is Kun Ho</h1>;
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 }) => <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
但上述这代码,我们无法知道'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 }) => (
<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;
然后我们又能愉快访问页面了
7.Next.js路由
这个简单得我自己都不敢相信(vue有个兄弟版本,叫nuxt.js,异曲同工),我们仅仅需要做的就是'pages'文件夹,添加一个新页面,然后直接浏览器输入路径,就能直接访问了,啥都不用配置.
如:在'pages'添加一个名叫'about.tsx'的文件,在文件输入如下代码:
//about.tsx
const About = () => (
<div>
<p>This is the about page</p>
</div>
);
export default About;
image.png
保存,直接打开浏览器,url加上路径'about',页面就出来了...
image.png
网友评论