豪翔天下

module.exports = {
  env: {	// 设置环境变量，设置后可以在jsx中直接用{process.env.customKey}获取值，环境变量还能设置在.env中
    customKey: 'my-value',
  },
  images: {
    domains: ['example.com']	// 定义哪些image允许展示
    loader: 'imgix',	// 如果图片存储在第三方，需要加这个设置
    path: '',	// 如果图片存储在第三方且使用相对路径需要添加域名在这里，但是如果是绝对路径，留空字符串即可
  },
  async redirects() {	// 设置重定向规则
    return [{
      source: '/home',
      destination: '/',
      permanent: true	// true表示永久重定向302，false表示暂时的，301
    }]
  },
  async rewrites() {	// 设置rewrites规则，将原来的路径进行重写以此来屏蔽实际的路径，浏览器url不会变化，但是该规则不适用于导出为纯静态的站点，如果是纯静态站点可能需要nginx等来配合
    return [{
        source: '/',
        source: '/old-blog/:slug',	// 也可以匹配参数
        source: '/blog/:slug*',	// 也可以模糊匹配
        source: '/post/:slug(\\d{1,})',	// 正则匹配
        destination: '/signin',
        permanent: true, // 重定向是否是permanent
        has: [{
          type: 'header',	// 可以匹配header中是否有某个key
          key: 'x-redirect-me'
        }, {
          type: 'query',	// 可以匹配query参数
          key: 'page',
          value: 'home'
        }, {
          type: 'cookie',	// 匹配cookie
          key: 'authorized',
          value: 'true'
        }, {
           type: 'header',
           key: 'x-authorized',
           value: '(?<authorized>yes|true)', // 可以提取value作为destination的值destination: '/home?authorized=:authorized',
        }]
      }]
  }
}

pages/blog/first-post.js → /blog/first-post
pages/dashboard/settings/username.js → /dashboard/settings/username

pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
pages/[username]/settings.js → /:username/settings (/foo/settings)
pages/post/[...all].js → /post/* (/post/2020/id/title)

// 可以通过context获取路由参数
export async function getServerSideProps (context: NextPageContext): Promise<any> {
  console.log(context.query.all)	// all得到的是一个数组，按每一级来
  return {
    props: {}
  }
}

import { useRouter } from 'next/router';

const router = useRouter()		// 等同于window.location
router.query.search	// 获取query参数
router.push('/signin');	// 路由跳转
router.replace('/signin');	// 路由跳转
router.push({pathname: '/post/[pid]', query: {pid: post.id}})	// 指定参数
router.pathname;	// 获取当前的pathname，例如/signin
router.back();	// 返回上一页，即window.history.back()
router.reload();	// 刷新页面，即window.location.reload()
router.locale	// 当前的locale
router.locales	// 所有的locales
router.defaultLocale	// 默认的locale

import Image from 'next/image'

<Image
  loader={myLoader}
  src="me.png"	// 要么是本地静态文件，要么用绝对路径，不能用//开头的路径
  alt="Picture of the author"
  width={500}
  height={500}
/>

// next.config.js 添加如下配置
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    });

    return config;
  }
};

<Link href=''>
  <a>title</a>
</Link>

<Link href=''>
  <a><Image ... /></a> // 如果link下需要包含image，不能直接image，外面得加一层a标签
</Link>

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 'auto',	// 每一页的slide数量自动确定，这样可以做到不用整数个显示，也不会导致左右空白
  spaceBetween: 10,	// 每两个slide之间的间隔
  centeredSlides: false,	// 不用从居中开始，否则左边是空白的
  pagination: {
    el: '.swiper-pagination',	// 分页元素位置
    clickable: true,
  },
  direction: 'vertical', // horizontal滚动方向
  width: 500,	// 设置slide的高度和宽度，单位职能是px
  height: 500,
  breakpoints: { // 可以自定义不同的breakpoints里面的不同参数
    1280: {	// 屏幕宽度>=1280时候的breakpoings
      width: 1000,
      height: 1000,
      direction: 'vertical', // 任何参数都可以breakpoint
    }
  }
  scrollbar: {
    el: '.swiper-scrollbar',	// scrollbar的位置
    clickable: true,
    hide: true
  },
  navigation: {			// 指定翻页按钮
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  on: {	// 使用对应的事件
    afterInit: function () {}
    activeIndexChange: function () {}, // 这个事件触发时active图片还没改变
    slideChange: function() {},	// 这个事件触发时图片就改变了
    slideChangeTransitionEnd: function() {}, // 感觉这个方法才是真正的改变完成了
  }
});