doc: prettify docs for next script (vercel#26572)

x-ref: vercel#26518 (comment) ## Documentation / Examples - [x] Make sure the linting passes
blitz-js · Jun 24, 2021 · 72e05f6 · 72e05f6
1 parent 09b0d52
commit 72e05f6
Showing 1 changed file with 51 additions and 23 deletions.
diff --git a/docs/basic-features/script.md b/docs/basic-features/script.md
@@ -35,7 +35,7 @@ Previously, you needed to define `script` tags inside the `Head` of your Next.js
 // pages/index.js
 import Head from 'next/head'
 
-function Home() {
+export default function Home() {
   return (
     <>
       <Head>
@@ -54,7 +54,7 @@ With `next/script`, you no longer need to wrap scripts in `next/head`. Further,
 // pages/index.js
 import Script from 'next/script'
 
-function Home() {
+export default function Home() {
   return (
     <>
       <Script src="https://www.google-analytics.com/analytics.js" />
@@ -69,33 +69,54 @@ function Home() {
 
 ```js
 import Script from 'next/script'
-;<Script
-  src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver"
-  strategy="beforeInteractive"
-/>
+
+export default function Home() {
+  return (
+    <>
+      <Script
+        src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver"
+        strategy="beforeInteractive"
+      />
+    </>
+  )
+}
 ```
 
 ### Lazy-Loading
 
 ```js
 import Script from 'next/script'
-;<Script
-  src="https://connect.facebook.net/en_US/sdk.js"
-  strategy="lazyOnload"
-/>
+
+export default function Home() {
+  return (
+    <>
+      <Script
+        src="https://connect.facebook.net/en_US/sdk.js"
+        strategy="lazyOnload"
+      />
+    </>
+  )
+}
 ```
 
 ### Executing Code After Loading (`onLoad`)
 
 ```js
 import Script from 'next/script'
-;<Script
-  id="stripe-js"
-  src="https://js.stripe.com/v3/"
-  onLoad={() => {
-    this.setState({ stripe: window.Stripe('pk_test_12345') })
-  }}
-/>
+
+export default function Home() {
+  return (
+    <>
+      <Script
+        id="stripe-js"
+        src="https://js.stripe.com/v3/"
+        onLoad={() => {
+          this.setState({ stripe: window.Stripe('pk_test_12345') })
+        }}
+      />
+    </>
+  )
+}
 ```
 
 ### Inline Scripts
@@ -120,10 +141,17 @@ import Script from 'next/script'
 
 ```js
 import Script from 'next/script'
-;<Script
-  src="https://www.google-analytics.com/analytics.js"
-  id="analytics"
-  nonce="XUENAJFW"
-  data-test="analytics"
-/>
+
+export default function Home() {
+  return (
+    <>
+      <Script
+        src="https://www.google-analytics.com/analytics.js"
+        id="analytics"
+        nonce="XUENAJFW"
+        data-test="analytics"
+      />
+    </>
+  )
+}
 ```