akellbl4

class MyCustomError extends Error {
  customField?: string
  constructor(msg: string, customData: Record<string, string>) {
    super(msg)
    this.customField = customData.customField
  }
}

try {
 throw new MyCustomError('Custom Error',  { customField: 'additional data' })

akellbl4

// pages/params.jsx
import Router, { useRouter } from 'lib/router'

function MyComponent() {
    const { query } = useRouter()
    
    function handleSubmit(evt) {
        const params = new FormData(evt.currentTarget).getAll("fruits");
        
        evt.preventDefault();

akellbl4

// lib/router.js
import NextRouter from 'next/router'

function push(url, opts) {
    return NextRouter.push(url, null, opts)
}

const Router = {
    ...NextRouter,
    push,

akellbl4

// pages/params.jsx
import Router from 'next/router'
import { useRouter } from 'lib/router'

function MyComponent() {
    const { query, pathname } = useRouter()
    
    function handleSubmit(evt) {
        const params = new FormData(evt.currentTarget).getAll("fruits");
        evt.preventDefault();

akellbl4

// lib/router.js
import { useRouter as useNextRouter } from 'next/router'

export function useRouter() {
    const router = useNextRouter()
    const [pathname, queryString = ''] = router.asPath.split('?')

    return Object.assign(router, { pathname, queryString })
}

akellbl4

// pages/params.jsx
import Router from 'next/router'

function MyComponent() {
    const handleClick = useCallback(() => {
        // some logic
        Router.push('/profile')
    }, [])
    
    useEffect(() => {

akellbl4

// pages/params.jsx
import { useEffect, useCallback } from 'react'
import { useRouter } from 'next/router'

function MyComponent() {
    const { push } = useRouter()
    const handleClick = useCallback(() => {
        // some logic
        push('/profile')
    }, [push])

akellbl4

import Link from 'next/link'

// Before
function MyComponent() {
    return (
        <Link href="/posts/[post]" as="/posts/blog-post">
            Blog post
        </Link>
    )
}

akellbl4

// Redirect
export function getServerSideProps() {
    return {
        redirect: {
            destination: '/',
            permanent: false,
        },
    }
}

akellbl4

async function fetchUser(params) {
  const res = await fetch('https://example.com/api/user', params);
  const data = await res.json();

  return data;
}

async function fetchUserFromServer(ctx) {
  const { token } = ctx.req.cookies;
  const user = await fetchUser({ headers: { Authorization: `Bearer ${token}` } });