https://github.com/bradgarropy/next-link

🔗 link component for next
https://github.com/bradgarropy/next-link

eslint jest link next prettier react typescript

Last synced: 26 days ago
JSON representation

🔗 link component for next

• Host: GitHub
• URL: https://github.com/bradgarropy/next-link
• Owner: bradgarropy
• License: mit
• Created: 2021-06-22T14:51:43.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-03-01T04:42:21.000Z (over 1 year ago)
• Last Synced: 2024-09-29T11:25:42.487Z (about 1 month ago)
• Topics: eslint, jest, link, next, prettier, react, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@bradgarropy/next-link
• Size: 1.11 MB
• Stars: 5
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Contributing: contributing.md
  • License: license

Awesome Lists containing this project

README

        
# 🔗 next link

[![version][version-badge]][npm]

[![downloads][downloads-badge]][npm]

[![size][size-badge]][bundlephobia]

[![github actions][github-actions-badge]][github-actions]

[![coverage][codecov-badge]][codecov]

[![typescript][typescript-badge]][typescript]

[![contributing][contributing-badge]][contributing]

[![contributors][contributors-badge]][contributors]

[![discord][discord-badge]][discord]

_🔗 link component for [`next`][next]_

[Next][next] provides a [``][link] component for routing between internal pages. For external links, you have to use a regular `` tag. This `next-link` package solves that issue by providing a `` component that handles both internal and external urls.




    

        

    



## 📦 Installation

This package is hosted on [`npm`][npm].

```bash

npm install @bradgarropy/next-link

```

## 🥑 Usage

For both internal and external links, use the `Link` component and pass it a `to` prop.

```jsx

import Link from "@bradgarropy/next-link"

const App = () => {

    return website

}

```

## 📖 API Reference

### ``

| Name | Required | Default | Example                                    | Description               |

| :--- | :------: | :-----: | :----------------------------------------- | :------------------------ |

| `to` |  `true`  |         | `"/home"` 
 `"https://bradgarropy.com"` | Internal or external url. |

The component also passes through all other `props`, like `className` or `passHref`. See the [`next/link`][link] documentation for other relevant props. The examples below cover some common uses.

```jsx

// internal link

home

// internal link with additional props

home

// external link

website

// external link with additional props

website

```

## ❔ Questions

🐛 report bugs by filing [issues][issues]  

📢 provide feedback with [issues][issues] or on [twitter][twitter]  

🙋🏼‍♂️ use my [ama][ama] or [twitter][twitter] to ask any other questions

## ✨ contributors



  

    
Brad Garropy
💻 📖 ⚠️ 🚇

  

[codecov]: https://app.codecov.io/gh/bradgarropy/next-link

[contributing]: https://github.com/bradgarropy/next-link/blob/master/contributing.md

[contributors]: #-contributors

[npm]: https://www.npmjs.com/package/@bradgarropy/next-link

[codecov-badge]: https://img.shields.io/codecov/c/github/bradgarropy/next-link?style=flat-square

[version-badge]: https://img.shields.io/npm/v/@bradgarropy/next-link.svg?style=flat-square

[downloads-badge]: https://img.shields.io/npm/dt/@bradgarropy/next-link?style=flat-square

[contributing-badge]: https://img.shields.io/badge/PRs-welcome-success?style=flat-square

[contributors-badge]: https://img.shields.io/github/all-contributors/bradgarropy/next-link?style=flat-square

[issues]: https://github.com/bradgarropy/next-link/issues

[twitter]: https://twitter.com/bradgarropy

[ama]: https://bradgarropy.com/ama

[bundlephobia]: https://bundlephobia.com/result?p=@bradgarropy/next-link

[size-badge]: https://img.shields.io/bundlephobia/minzip/@bradgarropy/next-link?style=flat-square

[github-actions]: https://github.com/bradgarropy/next-link/actions

[github-actions-badge]: https://img.shields.io/github/workflow/status/bradgarropy/next-link/%F0%9F%9A%80%20release?style=flat-square

[typescript]: https://www.typescriptlang.org/dt/search?search=%40bradgarropy%2Fnext-link

[typescript-badge]: https://img.shields.io/npm/types/@bradgarropy/next-link?style=flat-square

[discord]: https://bradgarropy.com/discord

[discord-badge]: https://img.shields.io/discord/748196643140010015?style=flat-square

[next]: https://nextjs.org

[link]: https://nextjs.org/docs/api-reference/next/link