Merge pull request #4 from tywmick/extend-client-side

pablopunk · web-flow · commit 0ccca9bd67fa · 2020-06-15T00:58:07.000+02:00
Extend client-side redirects
diff --git a/package.json b/package.json
@@ -52,7 +52,7 @@
     "url": "https://github.com/pablopunk/nextjs-redirect"
   },
   "scripts": {
-    "build": "sucrase src -d dist --transforms imports,typescript && npm run generate-types && npm run prettier",
+    "build": "sucrase src -d dist --transforms imports,typescript,jsx && npm run generate-types && npm run prettier",
     "generate-types": "dts-bundle-generator -o typings.d.ts src/index.tsx",
     "prettier": "prettier src/*.tsx ./typings.d.ts --write",
     "prepare": "npm run build"
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,26 +1,55 @@
 import React from 'react'
 import Router from 'next/router'
+import Head from 'next/head'
 
 export default (
   redirectUrl: string,
   options?: { asUrl?: string; statusCode?: number }
 ) =>
   class extends React.Component {
+    // Redirects on the server side first if possible
     static async getInitialProps({ res }) {
-      if (res) {
+      if (res?.writeHead) {
         res.writeHead(options?.statusCode ?? 301, { Location: redirectUrl })
         res.end()
-      } else {
-        if (options?.asUrl != null) {
-          Router.push(redirectUrl, options.asUrl, { shallow: true })
-        } else {
-          Router.push(redirectUrl)
-        }
       }
-
       return {}
     }
+
+    // Redirects on the client with JavaScript if no server
+    componentDidMount() {
+      if (options?.asUrl != null) {
+        Router.push(redirectUrl, options.asUrl, { shallow: true })
+      } else if (redirectUrl[0] === '/') {
+        Router.push(redirectUrl)
+      } else {
+        window.location.href = redirectUrl
+      }
+    }
+
     render() {
-      return React.createElement('div')
+      const href = options?.asUrl ?? redirectUrl
+      return (
+        <>
+          <Head
+            children={
+              <>
+                {/* Redirects with meta refresh if no JavaScript support */}
+                <noscript>
+                  <meta httpEquiv="refresh" content={`0;url=${href}`} />
+                </noscript>
+                {(options?.statusCode === undefined ||
+                  options?.statusCode === 301) && (
+                  <link rel="canonical" href={href} />
+                )}
+              </>
+            }
+          />
+          {/* Provides a redirect link if no meta refresh support */}
+          <p>
+            Redirecting to <a href={href}>{href}</a>&hellip;
+          </p>
+        </>
+      )
     }
   }
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react",
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "skipLibCheck": true,
diff --git a/typings.d.ts b/typings.d.ts
@@ -8,6 +8,7 @@ declare const _default: (
   }
 ) => {
   new (): {
+    componentDidMount(): void
     render(): any
   }
   getInitialProps({ res }: { res: any }): Promise<{}>

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"compilerOptions": {`
	`3`	`+ "jsx": "react",`
`3`	`4`	`"target": "es5",`
`4`	`5`	`"lib": ["dom", "dom.iterable", "esnext"],`
`5`	`6`	`"skipLibCheck": true,`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@ declare const _default: (`
`8`	`8`	`}`
`9`	`9`	`) => {`
`10`	`10`	`new (): {`
	`11`	`+ componentDidMount(): void`
`11`	`12`	`render(): any`
`12`	`13`	`}`
`13`	`14`	`getInitialProps({ res }: { res: any }): Promise<{}>`