Module: @headstartwp/next

Namespaces

• config
• middlewares

Interfaces

• AddHookDataBaseProps
• AddHookDataProps
• FetchHookDataOptions
• ImageProps
• LinkBlockProps

API handlers

previewHandler

▸ previewHandler(req, res, options?): Promise<void>

The PreviewHandler is responsible for handling preview requests.

Handling Previews requires the Headless WordPress Plugin.

Important: This function is meant to be used in a api route at /pages/api/preview.

Usage

// pages/api/preview.js
import { previewHandler } from '@headstartwp/next';

export default async function handler(req, res) {
    return previewHandler(req, res);
}

Parameters

Name	Type	Description
req	NextApiRequest	The request object,
res	NextApiResponse<any>	The response object.
options	PreviewHandlerOptions	The PreviewHandlerOptions PreviewHandlerOptions

Returns

Promise<void>

A response object.

Defined in

packages/next/src/handlers/previewHandler.ts:120

---

revalidateHandler

▸ revalidateHandler(req, res): Promise<void>

The RevalidateHandler is responsible for handling revalidate requests.

Handling revalidate requires the Headless WordPress Plugin.

Important: This function is meant to be used in a api route e.g: /pages/api/revalidate.

Usage

// pages/api/revalidate.js
import { revalidateHandler } from '@headstartwp/next';

export default async function handler(req, res) {
    return revalidateHandler(req, res);
}

Parameters

Name	Type	Description
req	NextApiRequest	The request object,
res	NextApiResponse<any>	The response object.

Returns

Promise<void>

A response object.

Defined in

packages/next/src/handlers/revalidateHandler.ts:30

Data Fetching Hooks

useAppSettings

▸ useAppSettings<T, P>(params?, options?): useAppSettingsResponse<T>

The useAppSettings hook

Usage

const { data, loading, error } = useAppSettings();

// check loading and error states

Server-Side-Rendering or Static-Site-Generation

export async function getServerSideProps(context) {
    const useAppSettingsData = await fetchHookData(useAppSettings.fetcher(), context);
    return addHookData([useAppSettingsData], {});
}

Important: You most likely want to fetch app settings on every route so that you can access global settings and menus in your pages & components

Type parameters

Name	Type
T	extends AppEntity = AppEntity
P	extends EndpointParams = EndpointParams

Parameters

Name	Type	Description
params	Partial<P>	The parameters accepted by the hook
options	FetchHookOptions<FetchResponse<T>>	Options for the SWR configuration

Returns

useAppSettingsResponse<T>

Defined in

packages/next/src/data/hooks/useAppSettings.ts:33

---

useAuthorArchive

▸ useAuthorArchive<T, P>(params?, options?): usePostsResponse<T>

The useAuthorArchive hook. Returns a collection of post entities queried by author

This hook must be used with a catch-all route [...path].js (e.g: pages/author/[...path].js)

Important: Use a catch-all and not an optional catch-all route ([[...path]].js) as the author param in the url is required.

In order to automatically map URL params create a catch-all route named [...path].js. You can create the catch-all at any level e.g: pages/author/[...path].js, etc.

The pages/author/[...path].js route for instance would yield a URL like this: /author-name/page/2, /author-name/category/category-name/page/3, etc.

The following URL params are supported:

• Category (/author-name/category/category-name)
• Tag (/author-name/tag/tag-name)
• Author (/author/author-name)
• Pagination (/page/2)
• Custom Taxonomy (/author//taxonomy/term-name)

Type parameters

Name	Type
T	extends PostEntity = PostEntity
P	extends PostsArchiveParams = PostsArchiveParams

Parameters

Name	Type	Description
params	Partial<P>	The parameters accepted by the hook
options	FetchHookOptions<FetchResponse<T[]>>	Options for the SWR configuration

Returns

usePostsResponse<T>

Defined in

packages/next/src/data/hooks/useAuthorArchive.ts:29

---

useMenu

▸ useMenu(menuLocation, options?): useMenuResponse

The useMenu hooks. Returns a Menu object.

Important: This hook depends on useAppSettings. If you want to enable SSR;SSG for this hook you will need to fetch app settings on the server side.

Usage

Basic usage

export const Nav = () => {
    const { data, loading, error } = useMenu('primary-menu');

    // handle loading, error states

    return <Menu items={data} css={navStyles} />;
}

Re-fetching client-side on focus and/or mount

If you are fetching app settings on the server, you can enable re-fetching on focus and/or mount to ensure menus are always up-to date even when using SSG/ISR.

export const Nav = () => {
    const { data, loading, error } = useMenu('primary-menu', {
        revalidateOnFocus: true,
        revalidateOnMount: true,
    });

    // handle loading, error states

    return <Menu items={data} css={navStyles} />;
}

Parameters

Name	Type	Description
menuLocation	string	The slug of the menu location you want to fetch
options	FetchHookOptions<FetchResponse<AppEntity>>	SWR configuration options

Returns

useMenuResponse

Defined in

packages/next/src/data/hooks/useMenu.ts:46

---

usePost

▸ usePost<T, P>(params?, options?): usePostResponse<T>

The usePost hook. Returns a single post entity

In order to automatically map URL params create a catch-all route named [...path].js. You can create the catch-all at any level e.g: pages/[...path].js, pages/blog/[...path].js, etc.

The pages/[...path].js route for instance would yield a URL like this: /post-slug, /2020/01/01/post-slug, etc.

Type parameters

Name	Type
T	extends PostEntity = PostEntity
P	extends PostParams = PostParams

Parameters

Name	Type	Description
params	Partial<P>	The parameters accepted by the hook
options	FetchHookOptions<FetchResponse<T>>	Options for the SWR configuration

Returns

usePostResponse<T>

Defined in

packages/next/src/data/hooks/usePost.ts:18

---

usePostOrPosts

▸ usePostOrPosts<T, P>(params?, options?): usePostOrPostResponse<T>

The usePostOrPosts hook

Type parameters

Name	Type
T	extends PostEntity = PostEntity
P	extends PostOrPostsParams = PostOrPostsParams

Parameters

Name	Type	Description
params	Partial<P>	The parameters accepted by the hook
options	FetchHookOptions<FetchResponse<PostOrPostsFetchStrategyResult<T>>>	Options for the SWR configuration

Returns

usePostOrPostResponse<T>

Defined in

packages/next/src/data/hooks/usePostOrPosts.ts:18

---

usePosts

▸ usePosts<T, P>(params?, options?): usePostsResponse<T>

The usePost hook. Returns a collection of post entities

In order to automatically map URL params create a catch-all route named [[...path]].js. You can create the catch-all at any level e.g: pages/[[...path]].js, pages/blog/[[...path]].js, etc.

The pages/blog/[[...path]].js route for instance would yield a URL like this: /blog, /blog/page/2, /blog/category/category-name/page/3, etc.

The following URL params are supported:

• Category (/category/category-name)
• Tag (/tag/tag-name)
• Author (/author/author-name)
• Pagination (/page/2)
• Date (/YYYY/MM/DD)
• Custom Taxonomy (/taxonomy/term-name)

Handling multiple WordPress routes in a single next.js route

The usePosts hook is very flexible and can handle multiple WordPress routes in a single next.js route when using the optional-catch-all route ([[...path]].js). Alongside with the actual data, usePosts also returns information about the current route so you can conditionally load different components.

const params = { postType: 'post' };
const Posts = () => {
     const { data, pageType } = usePosts(params);

     if (pageType.isAuthorArchive) {
       return <AuthorArchive data={data} />
     }

     if (pageType.isCategoryArchive) {
       return <CategoryArchive data={data} />
     }

     if (pageType.isTaxonomyArchive && pageType.taxonomy === 'my-custom-taxonomy' ) {
       return <TaxonomyArchive data={data} />
     }

     return (
       <div>
         <ul>
           {data.posts.map((post) => (
              <li key={post.id}>
                {post.title.rendered}
              </li>
           ))}
      </ul>
       </div>
     );
};

Type parameters

Name	Type
T	extends PostEntity = PostEntity
P	extends PostsArchiveParams = PostsArchiveParams

Parameters

Name	Type	Description
params	Partial<P>	The parameters accepted by the hook
options	FetchHookOptions<FetchResponse<T[]>>	Options for the SWR configuration

Returns

usePostsResponse<T>

Defined in

packages/next/src/data/hooks/usePosts.ts:62

---

useSearch

▸ useSearch<T, P>(params?, options?): useSearchResponse<T>

The useSearch hook. Returns a collection of search entities

In order to automatically map URL params create a catch-all route named [...path].js. You can create the catch-all at any level e.g: pages/search/[[...path]].js

The pages/search/[[...path]].js route for instance would yield a URL like this: /search/[term]/page/[number], /search/[term] etc

Type parameters

Name	Type
T	extends PostEntity = PostEntity
P	extends PostsArchiveParams = PostsArchiveParams

Parameters

Name	Type	Description
params	Partial<P>	The parameters accepted by the hook
options	FetchHookOptions<FetchResponse<T[]>>	Options for the SWR configuration

Returns

useSearchResponse<T>

Defined in

packages/next/src/data/hooks/useSearch.ts:18

---

useSearchNative

▸ useSearchNative<T, P>(params?, options?): useSearchNativeResponse<T>

The useSearchNative hook. Returns a collection of search entities retrieved through the WP native search endpoint.

In order to automatically map URL params create a catch-all route named [...path].js. You can create the catch-all at any level e.g: pages/search/[[...path]].js

The pages/search/[[...path]].js route for instance would yield a URL like this: /search/[term]/page/[number], /search/[term] etc

Type parameters

Name	Type
T	extends PostSearchEntity | TermSearchEntity = PostSearchEntity | TermSearchEntity
P	extends SearchParams = SearchParams

Parameters

Name	Type	Description
params	Partial<P>	The parameters accepted by the hook
options	FetchHookOptions<FetchResponse<T[]>>	Options for the SWR configuration

Returns

useSearchNativeResponse<T>

Defined in

packages/next/src/data/hooks/useSearchNative.ts:18

---

useSeo

▸ useSeo(format): Record<string, any> | null

The useSeo hook. Returns the current SEO object

Usage

const seo = useSeo();

Parameters

Name	Type	Description
format	"json"	how to return the seo object. Defaults to 'json'

Returns

Record<string, any> | null

Defined in

packages/next/src/data/hooks/useSeo.ts:18

▸ useSeo(format): string | null

Parameters

Name	Type
format	"html"

Returns

string | null

Defined in

packages/next/src/data/hooks/useSeo.ts:19

▸ useSeo(): Record<string, any> | null

Returns

Record<string, any> | null

Defined in

packages/next/src/data/hooks/useSeo.ts:20

---

useTerms

▸ useTerms<T, P>(params?, options?): useTermsResponse<T>

The useTerms hook. Returns a collection of term entities

Usage

const { loading, data } = useTerms({ taxonomy: 'category', slug: 'cat-name' });

Type parameters

Name	Type
T	extends TermEntity = TermEntity
P	extends TaxonomyArchiveParams = TaxonomyArchiveParams

Parameters

Name	Type	Description
params	Partial<P>	The parameters accepted by the hook
options	FetchHookOptions<FetchResponse<T[]>>	Options for the SWR configuration

Returns

useTermsResponse<T>

Defined in

packages/next/src/data/hooks/useTerms.ts:19

Next.js Data Fetching Utilities

addHookData

▸ addHookData<P>(_hookStates, nextProps): Object

The addHookData function is responsible for collecting all of the results from the fetchHookData function calls and prepares the shape of the data to match what the frameworks expects (such as setting initial values for SWR and collecting SEO data).

Usage

export async function getServerSideProps(context) {
    try {
        const usePostsHook = await fetchHookData(usePosts.fetcher(),context);
        const useAppSettingsHook = await fetchHookData(useAppSettings.fetcher(),context);
        return addHookData([usePostsHook, useAppSettingsHook], {});
    } catch (e) {
        return handleError(e, context);
    }
}

Type parameters

Name	Type
P	extends AddHookDataBaseProps

Parameters

Name	Type	Description
_hookStates	HookState<FetchResponse<Entity | Entity[]>>[]
nextProps	NextJSProps<P>	Any additional props to pass to Next.js page routes.

Returns

Object

Name	Type
notFound?	boolean
props	P & { fallback: {} ; seo: { yoast_head: string = seo; yoast_head_json: {} = seo_json } ; themeJSON: {} }
redirect?	Redirect
revalidate?	number | boolean

Defined in

packages/next/src/data/server/addHookData.ts:72

---

convertToPath

▸ convertToPath(args): string

Creates a path from array of arguments

Parameters

Name	Type	Description
args	undefined | string[]	Array of catch-all arguments

Returns

string

Defined in

packages/next/src/data/convertToPath.ts:8

---

fetchHookData

▸ fetchHookData<T, P, R>(fetchStrategy, ctx, options?): Promise<{ additionalCacheObjects: any ; data: FetchResponse<R> ; isMainQuery: boolean ; key: string = cacheKey }>

A function that implements data fetching on the server. This should be used in getServerSideProps or getStaticProps.

Data fetching will be performed by the specified strategy and URL params will be automatically extracted from `context

Usage

export async function getServerSideProps(context) {
    try {
        const usePostsHook = await fetchHookData(usePosts.fetcher(),context);

        return addHookData([usePostsHook], {});
    } catch (e) {
        return handleError(e, context);
    }
}´

@param fetchStrategy The fetch strategy to use. Typically this is exposed by the hook e.g: usePosts.fetcher() @param ctx The Next.js context, either the one from getServerSideProps or getStaticProps @param options See {@link FetchHookDataOptions}

@returns An object with a key of data and a value of the fetched data.

Type parameters

Name	Type
T	unknown
P	extends EndpointParams = EndpointParams
R	T

Parameters

Name	Type
fetchStrategy	AbstractFetchStrategy<T, P, R>
ctx	GetServerSidePropsContext<any, PreviewData> | GetStaticPropsContext<any, PreviewData>
options	FetchHookDataOptions<P, T>

Returns

Promise<{ additionalCacheObjects: any ; data: FetchResponse<R> ; isMainQuery: boolean ; key: string = cacheKey }>

Defined in

packages/next/src/data/server/fetchHookData.ts:182

---

handleError

▸ handleError(error, ctx, rootRoute?): Promise<{ notFound: undefined = true; redirect: { destination: string = redirect.location; permanent: boolean } } | { notFound: true = true; redirect: undefined }>

The handleError function is responsible for handling errors that occur during data fetching in getServerSideProps or getStaticProps.

It also handles redirects if redirectStrategy is set to 404 in headless.config.js

If error is of type NotFoundError it will redirect to the 404 page. Otherwise it will return a server error (500) page

Usage

export async function getServerSideProps(context) {
    try {
        const usePostsHook = await fetchHookData(usePosts.fetcher(),context);
        return addHookData([usePostsHook], {});
    } catch (e) {
        return handleError(e, context);
    }
}

Parameters

Name	Type	Default value	Description
error	Error	undefined	The error object
ctx	HeadlessGetServerSidePropsContext<ParsedUrlQuery> | HeadlessGetStaticPropsPropsContext<ParsedUrlQuery>	undefined	The Next.js context
rootRoute	string	''	The root route (deprecated/unnecessary). This needs to be revisited

Returns

Promise<{ notFound: undefined = true; redirect: { destination: string = redirect.location; permanent: boolean } } | { notFound: true = true; redirect: undefined }>

Defined in

packages/next/src/data/server/handleError.ts:62

Other

HeadlessAppProps

Ƭ HeadlessAppProps: Object

The props supported by HeadlessApp.

Type declaration

Name	Type	Description
children?	ReactNode	-
handleYoast?	boolean	If true, will automatically load yoast seo metadata into the head Default true
pageProps	any	The page props from next.js. It should contain fallback, themeJson and other props. Those props are added when using fetchHookData and addHookData See - fetchHookData - addHookData
settings	SettingsContextProps	Supported settings by the framework. Such as custom image component, custom link component etc. See SettingsContextProps
swrConfig	DataFetchingProviderProps["swrConfig"]	Pass any configuration to the SWR library. Globally. These settings can be overridden at the hook level.
useYoastHtml?	boolean	If true, will make the Yoast component use the yoast_head raw html to populate meta tags instead of yoast_head_json. yoast_head is the default and preferable option.

Defined in

packages/next/src/components/HeadlessApp.tsx:18

---

HeadlessGetServerSideProps

Ƭ HeadlessGetServerSideProps<P, Q>: GetServerSideProps<P, Q, PreviewData>

Type parameters

Name	Type
P	extends Object = { [key: string]: any; }
Q	extends ParsedUrlQuery = ParsedUrlQuery

Defined in

packages/next/src/data/types.ts:16

---

HeadlessGetServerSidePropsContext

Ƭ HeadlessGetServerSidePropsContext<Q>: GetServerSidePropsContext<Q, PreviewData>

Type parameters

Name	Type
Q	extends ParsedUrlQuery = ParsedUrlQuery

Defined in

packages/next/src/data/types.ts:10

---

HeadlessGetStaticProps

Ƭ HeadlessGetStaticProps<P, Q>: GetStaticProps<P, Q, PreviewData>

Type parameters

Name	Type
P	extends Object = { [key: string]: any; }
Q	extends ParsedUrlQuery = ParsedUrlQuery

Defined in

packages/next/src/data/types.ts:21

---

HeadlessGetStaticPropsPropsContext

Ƭ HeadlessGetStaticPropsPropsContext<Q>: GetStaticPropsContext<Q, PreviewData>

Type parameters

Name	Type
Q	extends ParsedUrlQuery = ParsedUrlQuery

Defined in

packages/next/src/data/types.ts:13

---

HookState

Ƭ HookState<T>: Object

Type parameters

Name
T

Type declaration

Name	Type
additionalCacheObjects?	HookState<T>[]
data	T
isMainQuery	boolean
key	string

Defined in

packages/next/src/data/server/addHookData.ts:10

---

NextJSProps

Ƭ NextJSProps<P>: Object

Type parameters

Name
P

Type declaration

Name	Type
notFound?	boolean
props?	P
redirect?	Redirect
revalidate?	number | boolean

Defined in

packages/next/src/data/server/addHookData.ts:17

---

PreviewData

Ƭ PreviewData: Object

The shape of the preview data that's stored in the preview data cookie

Index signature

▪ [k: string]: unknown

Type declaration

Name	Type	Description
authToken	string	The auth token that should be used to fetch the data
id	number	The id of the resource
postType	string	The post type
revision	boolean	Whether the preview data is on a revision

Defined in

packages/next/src/handlers/types.ts:4

---

PreviewHandlerOptions

Ƭ PreviewHandlerOptions: Object

The options supported by previewHandler

Type declaration

Name	Type
getRedirectPath?	(defaultRedirectPath: string, post: any, postTypeDef: CustomPostType) => string
onRedirect?	(req: NextApiRequest, res: NextApiResponse, previewData: PreviewData, defaultRedirect?: PreviewHandlerOptions["onRedirect"], redirectpath?: string) => void
preparePreviewData?	(req: NextApiRequest, res: NextApiResponse, post: PostEntity, previewData: PreviewData) => PreviewData

Defined in

packages/next/src/handlers/previewHandler.ts:11

---

VIPCustomImageLoader

Ƭ VIPCustomImageLoader: ImageLoaderProps & { aspectRatio?: string }

Defined in

packages/next/src/components/ImageComponent.tsx:38

---

seoKey

• Const seoKey: "@seo"

Defined in

packages/next/src/data/hooks/useSeo.ts:3

---

VIPImageLoader

▸ VIPImageLoader(props): string

Custom Image loader for WordPress VIP leveraging Photon's API. This can't be made a global loader because of the local loader used on the custom image component.

Parameters

Name	Type	Description
props	VIPCustomImageLoader	The loader props

Returns

string

Defined in

packages/next/src/components/ImageComponent.tsx:50

---

convertUrl

▸ convertUrl(url, hostUrl, sourceUrl): string

Parameters

Name	Type
url	string
hostUrl	string
sourceUrl	string

Returns

string

Defined in

packages/next/src/components/Yoast.tsx:15

---

getPathName

▸ getPathName(resolvedUrl): string

Extracts the path name out of the Next.js resolvedUrl

Parameters

Name	Type	Description
resolvedUrl	string	The full resolved URL

Returns

string

Defined in

packages/next/src/data/server/handleError.ts:23

---

getSiteFromContext

▸ getSiteFromContext(ctx): HeadlessConfig | { cache: undefined | FetchStrategyCacheConfig ; customPostTypes: CustomPostTypes ; customTaxonomies: CustomTaxonomies ; debug: undefined | { devMode?: boolean ; redirects?: boolean ; requests?: boolean } ; hostUrl: string ; integrations: undefined | Integrations ; preview: undefined | PreviewConfig ; redirectStrategy: RedirectStrategy ; sites: HeadlessConfig[] ; sourceUrl: undefined | string ; useWordPressPlugin: boolean }

Get site using context

Parameters

Name	Type
ctx	GetServerSidePropsContext<ParsedUrlQuery, PreviewData> | GetStaticPropsContext<ParsedUrlQuery, PreviewData>

Returns

HeadlessConfig | { cache: undefined | FetchStrategyCacheConfig ; customPostTypes: CustomPostTypes ; customTaxonomies: CustomTaxonomies ; debug: undefined | { devMode?: boolean ; redirects?: boolean ; requests?: boolean } ; hostUrl: string ; integrations: undefined | Integrations ; preview: undefined | PreviewConfig ; redirectStrategy: RedirectStrategy ; sites: HeadlessConfig[] ; sourceUrl: undefined | string ; useWordPressPlugin: boolean }

HeadlessConfig

Defined in

packages/next/src/data/server/getSiteFromContext.ts:10

---

prepareFetchHookData

▸ prepareFetchHookData<T, P, R>(fetchStrategy, ctx, options?): Object

Prepares all the things for fetchHookData

Type parameters

Name	Type
T	unknown
P	extends EndpointParams = EndpointParams
R	T

Parameters

Name	Type	Description
fetchStrategy	AbstractFetchStrategy<T, P, R>	The fetch strategy to use. Typically this is exposed by the hook e.g: usePosts.fetcher()
ctx	GetServerSidePropsContext<any, PreviewData> | GetStaticPropsContext<any, PreviewData>	The Next.js context, either the one from getServerSideProps or getStaticProps
options	FetchHookDataOptions<P, T>	See FetchHookDataOptions

Returns

Object

The various things fetchHookData needs

Name	Type
cache	{ afterGet: undefined | <E, P, R>(options: FetchStrategyCacheHandlerOptions<E, P, R>, data: FetchResponse<R>) => Promise<FetchResponse<R>> = cacheConfig.afterGet; beforeSet: undefined | <E, P, R>(options: FetchStrategyCacheHandlerOptions<E, P, R>, data: FetchResponse<R>) => Promise<FetchResponse<R>> = cacheConfig.beforeSet; cacheHandler: undefined | FetchStrategyCacheHandler = cacheConfig.cacheHandler; enabled: boolean = shouldCache; ttl: number = cacheTTL }
cache.afterGet	undefined | <E, P, R>(options: FetchStrategyCacheHandlerOptions<E, P, R>, data: FetchResponse<R>) => Promise<FetchResponse<R>>
cache.beforeSet	undefined | <E, P, R>(options: FetchStrategyCacheHandlerOptions<E, P, R>, data: FetchResponse<R>) => Promise<FetchResponse<R>>
cache.cacheHandler	undefined | FetchStrategyCacheHandler
cache.enabled	boolean
cache.ttl	number
cacheKey	{ args: Partial<P> & { sourceUrl: string } ; url: string }
cacheKey.args	Partial<P> & { sourceUrl: string }
cacheKey.url	string
params	Partial<P>
path	string
urlParams	Partial<P>

Defined in

packages/next/src/data/server/fetchHookData.ts:71

---

usePrepareFetch

▸ usePrepareFetch<T, P>(_params?, options?): Object

Prepares params and options for useFetch hooks

Type parameters

Name	Type
T	extends Entity | Entity[]
P	extends EndpointParams

Parameters

Name	Type	Description
_params	Partial<P>	The fetch params
options	FetchHookOptions<FetchResponse<T>>	The fetch options

Returns

Object

Name	Type
options	FetchHookOptions<FetchResponse<T>>
params	Partial<P>
path	string

Defined in

packages/next/src/data/hooks/usePrepareFetch.ts:13

React Components

HeadlessApp

▸ HeadlessApp(props): Element

The HeadlessApp component is the top level component for the Headless framework.

Should be used in pages/_app.js

Usage

import { HeadlessApp } from "@headstartwp/next";

const MyApp = ({ Component, pageProps }) => {
    const { fallback = {}, themeJson = {}, ...props } = pageProps;

    return (
        <HeadlessApp
            pageProps={pageProps}
            settings={{
                // Pass your own link components here
                linkComponent: Link,
            }}
        >
            <Layout>
                <Component {...props} />
            </Layout>
        </HeadlessApp>
    );
};

export default MyApp;

Parameters

Name	Type	Description
props	HeadlessAppProps	Component props. See HeadlessAppProps

Returns

Element

Defined in

packages/next/src/components/HeadlessApp.tsx:96

---

ImageComponent

▸ ImageComponent(props): Element

An implementation of the ImageBlock (core/image).

If width, height or src are not provided, this component will not be used.

Usage

import { BlocksRenderer, ImageBlock } from "@headstartwp/core/react";
import { ImageComponent } from "@headstartwp/next";

<BlocksRenderer html={html}>
    <ImageBlock component={ImageComponent} />
</BlocksRenderer>

Parameters

Name	Type	Description
props	ImageProps	ImageBlockProps

Returns

Element

Defined in

packages/next/src/components/ImageComponent.tsx:106

---

LinkBlock

▸ LinkBlock(props): Element

The Link Block converts a anchor tag node into a next/link component if it's an internal link

Usage

import { BlocksRenderer } from "@headstartwp/core/react";
import { LinkBlock } from "@headstartwp/next";

<BlocksRenderer html={html}>
    <LinkBlock />
</BlocksRenderer>

Parameters

Name	Type	Description
props	Omit<IBlock<LinkBlockProps>, "component">	Link Block Props

Returns

Element

The next/link component

Defined in

packages/next/src/blocks/LinkBlock.tsx:33

---

TwitterBlock

▸ TwitterBlock(props): Element

Renders a twitter embed

Usage

import { BlocksRenderer } from "@headstartwp/core/react";
import { TwitterBlock } from "@headstartwp/next";

<BlocksRenderer html={html}>
    <TwitterBlock />
</BlocksRenderer>

Parameters

Name	Type	Description
props	Omit<IBlock<IBlockAttributes>, "component">	Link Block Props

Returns

Element

Defined in

packages/next/src/blocks/TwitterBlock.tsx:25

---

Yoast

▸ Yoast(props): Element

The Yoast component renders the Yoast SEO meta tags. This component is automatically rendered by HeadlessApp so you don't have to manually render it.

Parameters

Name	Type	Description
props	Props	Component props. Expects a single seo prop

Returns

Element

Defined in

packages/next/src/components/Yoast.tsx:63