https://github.com/hipstersmoothie/next-prefixed

Prefix next links and images. Useful when serving from basePath.
https://github.com/hipstersmoothie/next-prefixed

Last synced: 9 days ago
JSON representation

Prefix next links and images. Useful when serving from basePath.

• Host: GitHub
• URL: https://github.com/hipstersmoothie/next-prefixed
• Owner: hipstersmoothie
• Created: 2018-10-24T08:44:25.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T14:15:18.000Z (over 2 years ago)
• Last Synced: 2025-04-23T01:52:38.867Z (9 days ago)
• Language: JavaScript
• Size: 1.07 MB
• Stars: 3
• Watchers: 1
• Forks: 2
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        


  

  
next-prefixed

  
Prefix next links and images. Useful when serving from basePath.



[![Codecov](https://img.shields.io/codecov/c/github/hipstersmoothie/next-prefixed.svg?style=for-the-badge)](https://codecov.io/gh/hipstersmoothie/next-prefixed) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/next-prefixed/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/next-prefixed) [![npm](https://img.shields.io/npm/v/next-prefixed.svg?style=for-the-badge)](https://www.npmjs.com/package/next-prefixed) [![npm](https://img.shields.io/npm/dt/next-prefixed.svg?style=for-the-badge)](https://www.npmjs.com/package/next-prefixed)

[Read More](https://hipstersmoothie.com/blog/next-pages/)

## Installation

```sh

yarn add next-prefixed

```

### Usage

`next-prefixed` exports components for rendering prefixed links and images. It also exports a function to prefix any url.

To set the prefix for the URLs, set the `assetPrefix` in your `next.config.js`.

```js

const debug = process.env.NODE_ENV !== 'production';

const assetPrefix = debug ? '' : '/your_prefix/';

module.exports = withPlugins([withCSS, withMDX, withBlog], {

  assetPrefix,

  publicRuntimeConfig: {

    assetPrefix

  }

});

```

#### prefixURL

```js

import { prefixURL } from 'next-prefixed';

prefixURL('/blog'); // => my_prefix/blog

```

#### Image

Passes all props to HTML `img` tag.

```js

import { Image } from 'next-prefixed';

const Example = () => ;

```

#### Link

Passes all props to next.js `Link` component.

```js

import { Link } from 'next-prefixed';

const Example = () => ;

```