blitz-js · beerose · Oct 11, 2021 · Oct 2, 2021 · Oct 3, 2021 · Oct 6, 2021
diff --git a/nextjs/packages/next/client/image.tsx b/nextjs/packages/next/client/image.tsx
@@ -282,6 +282,28 @@ function handleLoading(
 }
 
 export default Image
+/**
+ * To add an image to your application, import the Image component:
+ *
+ * It renders a `img` element.
+ *
+ * @example
+ * ```
+ * import { Image } from "blitz"
+ * import profilePic from "../public/me.png"
+ *
+ * function Home() {
+ *   return (
+ *    <>
+ *      <h1>My Homepage</h1>
+ *      <Image src={profilePic} alt="Picture of the author" />
+ *      <p>Welcome to my homepage!</p>
+ *    </>
+ *  )
+ * }
+ *
+ * @see Docs https://blitzjs.com/docs/image-component
+ */
 export function Image({
   src,
   sizes,

diff --git a/nextjs/packages/next/client/script.tsx b/nextjs/packages/next/client/script.tsx
@@ -126,6 +126,29 @@ export function initScriptLoader(scriptLoaderItems: ScriptProps[]) {
   scriptLoaderItems.forEach(handleClientScriptLoad)
 }
 
+/**
+ * With `<Script>`, you can define the strategy property and
+ * Blitz.js will optimize loading for the script:
+ *
+ * With `<Script>`, you no longer need to wrap scripts in <Head>.
+ *
+ *
+ * @example
+ * ```
+ * import { Script } from "blitz"
+ *
+ * function Home() {
+ *  return (
+ *    <>
+ *      <Script src="https://www.google-analytics.com/analytics.js" />
+ *    </>
+ *  )
+ * }
+ * ```
+ *
+ * @param props {@link ScriptProps}
+ * @see Docs {@link https://blitzjs.com/docs/script-component}
+ */
 export function Script(props: ScriptProps): JSX.Element | null {
   const {
     src = '',

diff --git a/packages/core/src/router/index.tsx b/packages/core/src/router/index.tsx
@@ -22,6 +22,25 @@ export interface WithRouterProps {
   router: BlitzRouter
 }
 
+/**
+ * `withRouter` is a higher order component that wraps a React
+ * component `router` object as a prop.
+ *
+ * @example
+ * ```
+ * import {withRouter} from "blitz"
+ *
+ * function Page({router}) {
+ *  return <p>{router.pathname}</p>
+ * }
+ *
+ * export default withRouter(Page)
+ * ```
+ *
+ * @param WrappedComponent - Component to that needs router in its props
+ * @returns A component that has `router` object as prop.
+ * @see Docs {@link https://blitzjs.com/docs/router#router-object | router}
+ */
 export const withRouter: typeof withNextRouter = (WrappedComponent) => {
   function Wrapper({router, ...props}: any) {
     const query = useRouterQuery()
@@ -31,6 +50,13 @@ export const withRouter: typeof withNextRouter = (WrappedComponent) => {
   return withNextRouter(Wrapper)
 }
 
+/**
+ * `useRouter` is a custom React hook used to expose
+ * the router object within components.
+ *
+ * @returns `router` object
+ * @see Docs {@link https://blitzjs.com/docs/router#router-object | router}
+ */
 export function useRouter() {
   const router = useNextRouter()
   const query = useRouterQuery()