next-link

A wrapper component that uses next/link to enable client-side transitions between routes as well as external URLs.

Installation

$ npm install @moxy/next-link

This library is written in modern JavaScript and is published in both CommonJS and ES module transpiled variants. If you target older browsers please make sure to transpile accordingly.

Motivation

When using Next.js, we have next/link to navigate between client-side routes, but when we need to navigate to external URLs an anchor tag has to be used.

This component supports both, using NextLink we can pass an internal or external URL, using the same component for both. With the external prop we specify the type of route and it takes care of the rest for us, rendering the next/link or an <a> tag, maintaining the same styles between the two.

Usage

import React from 'react';
import NextLink from '@moxy/next-link';

const MyPage = (props) => (
    <div className="container">
        <NextLink href="/about">About</NextLink>
        <NextLink href="/contact">Contact</NextLink>
        <NextLink external href="https://moxy.studio">MOXY</NextLink>
    </div>
);

export default MyPage;

API

Besides the following supported props by the NextLink component, additional props will be spread to the anchor tag.

href

Type: string | Required: true

The path for an internal or external URL.

children

Type: node | Required: true

What to render inside the component.

className

Type: string | Required: false

A className to apply to the component wrapper.

newTab

Type: bool | Required: false | Default: false

If set to true, opens the link in a new tab.

external

Type: bool | Required: false | Default: false

If set to true, opens an external URL. If set to false, navigates to an internal page.

prefetch

Type: bool | Required: false | Default: true

Prefetch the page in the background.

Only available if external is set to false. Check the next/link documentation to learn more.

as

Type: string | Required: false

The path that will be rendered in the browser URL bar. Used for dynamic routes.

Only available if external is set to false. Check the next/link documentation to learn more.

scroll

Type: bool | Required: false | Default: true

Scroll to the top of the page after a navigation.

Only available if external is set to false. Check the next/link documentation to learn more.

Tests

$ npm test
$ npm test -- --watch # during development

License

Released under the MIT License.