next.js初学

为什么要用next,js

最近公司有一个项目突然来了个需求,客户想要能在百度和谷歌这类搜索引擎搜到活动的子页面,但是这个项目一开始开发的时候用了react框架,也就是一直都是spa,这对于seo是很难优化的,没办法,只能重新找个方法来进行开发。我也很烦恼,刚接手就碰到了这个大问题,最后找了下,发现了一个名叫next.js的框架,能够实现react的服务端渲染,我也不多想了,直接投入到next.js的学习中去,开冲!

创建 Next.js 应用程序

这个很简单,参考文档直接npm安装就可以了
npm install --save next react react-dom
将下面脚本添加到 package.json 中:

{
   
  "scripts": {
   
 "dev": "next",
    "build": "next build && next export",
    "start": "next start"
  }
}

是否需要export看自己的需求,我是需要导出静态页面所以用了export

创建第一个页面

在page目录下直接新建一个index.js并输入一些奇怪的代码

import Link from 'next/link'
import Head from 'next/head'
export default () =>
    <div>
        <Head>
            <title>Index</title>
        </Head>
        Click{
   ' '}
        <Link href=
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值