Next.js Utils


Install yarn add @spark-web/next-utils
Source GitHub.com
Bundle unpkg.com

Resolves internal links using the Next.js Link component, which expects href to begin with a slash e.g. href="/page". Uses a traditional anchor element for everything else e.g. external, hash, tel, mailto.

For compatibility with TS + Spark the href property may only accept a string, so URL Objects must be resolved ahead of time. We recommend the url package for complex cases, though most of the time it's simple to do this manually.

You can pass the UniversalNextLink component to the linkComponent prop of the SparkProvider and all Link, TextLink, and ButtonLink components will automatically use the Next.js Link component for client-side transitions.

import { SparkProvider } from '@spark-web/core';
import { UniversalNextLink } from '@spark-web/next-utils';
export default function App({ Component, pageProps }) {
return (
<SparkProvider linkComponent={UniversalNextLink}>
<Component {...pageProps} />


URL to direct to. Note that the URL needs to be an internal link (i.e. href='/page').

The UniversalNextLink props also includes HTML a anchor props and are not listed above.


Function that takes the initialProps from getInitialProps and inlines critical CSS server-side.

import { propsWithCssText } from '@spark-web/next-utils';
import NextDocument, { Head, Html, Main, NextScript } from 'next/document';
export default class Document extends NextDocument {
static async getInitialProps(context) {
const initialProps = await NextDocument.getInitialProps(context);
return propsWithCssText(initialProps);
render() {
return (
<Head />
<Main />
<NextScript />


Value returned from the getInitialProps static method on the Document class (in next/document).
© 2023 Brighte Capital Pty Ltd