鉴于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 = () => ( ); export default About; image.png 保存,直接打开浏览器,url加上路径'about',页面就出来了... image.png

本文章由javascript技术分享原创和收集