Next.js与TypeScript从零起步学习笔记-1.项目创建与路由
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
