| 1 | ---
|
| 2 | title: Next.js Utils
|
| 3 | isExperimentalPackage: true
|
| 4 | ---
|
| 5 |
|
| 6 | ## Universal Next Link
|
| 7 |
|
| 8 | Resolves internal links using the
|
| 9 | [Next.js Link component](https://nextjs.org/docs/api-reference/next/link), which
|
| 10 | expects `href` to begin with a slash e.g. `href="/page"`. Uses a traditional
|
| 11 | anchor element for everything else e.g. external, hash, tel, mailto.
|
| 12 |
|
| 13 | For compatibility with TS + Spark the `href` property may only accept a string,
|
| 14 | so URL Objects must be resolved ahead of time. We recommend the
|
| 15 | [url package](https://www.npmjs.com/package/url) for complex cases, though most
|
| 16 | of the time it's simple to do this manually.
|
| 17 |
|
| 18 | You can pass the `UniversalNextLink` component to the `linkComponent` prop of
|
| 19 | the `SparkProvider` and all `Link`, `TextLink`, and `ButtonLink` components will
|
| 20 | automatically use the Next.js Link component for client-side transitions.
|
| 21 |
|
| 22 | ```jsx
|
| 23 | import { SparkProvider } from '@spark-web/core';
|
| 24 | import { UniversalNextLink } from '@spark-web/next-utils';
|
| 25 |
|
| 26 | export default function App({ Component, pageProps }) {
|
| 27 | return (
|
| 28 | <SparkProvider linkComponent={UniversalNextLink}>
|
| 29 | <Component {...pageProps} />
|
| 30 | </SparkProvider>
|
| 31 | );
|
| 32 | }
|
| 33 | ```
|
| 34 |
|
| 35 | ### Props
|
| 36 |
|
| 37 | | Prop | Type | Default | Description |
|
| 38 | | ---- | ------ | ------- | --------------------------------------------------------------------------------------- |
|
| 39 | | href | string | | URL to direct to. Note that the URL needs to be an internal link (i.e. `href='/page'`). |
|
| 40 |
|
| 41 | The `UniversalNextLink` props also includes HTML `a` anchor props and are not
|
| 42 | listed above.
|
| 43 |
|
| 44 | ## propsWithCssText
|
| 45 |
|
| 46 | Function that takes the `initialProps` from `getInitialProps` and inlines
|
| 47 | critical CSS server-side.
|
| 48 |
|
| 49 | ```jsx
|
| 50 | import { propsWithCssText } from '@spark-web/next-utils';
|
| 51 | import NextDocument, { Head, Html, Main, NextScript } from 'next/document';
|
| 52 |
|
| 53 | export default class Document extends NextDocument {
|
| 54 | static async getInitialProps(context) {
|
| 55 | const initialProps = await NextDocument.getInitialProps(context);
|
| 56 | return propsWithCssText(initialProps);
|
| 57 | }
|
| 58 |
|
| 59 | render() {
|
| 60 | return (
|
| 61 | <Html>
|
| 62 | <Head />
|
| 63 | <body>
|
| 64 | <Main />
|
| 65 | <NextScript />
|
| 66 | </body>
|
| 67 | </Html>
|
| 68 | );
|
| 69 | }
|
| 70 | }
|
| 71 | ```
|
| 72 |
|
| 73 | ### Props
|
| 74 |
|
| 75 | | Prop | Type | Default | Description |
|
| 76 | | ------------ | -------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
|
| 77 | | initialProps | DocumentInitialProps | | Value returned from the `getInitialProps` static method on the `Document` class (in `next/document`). |
|