{"id":13577173,"url":"https://github.com/realvjy/nxt-lnk","last_synced_at":"2025-04-06T09:09:09.448Z","repository":{"id":98763502,"uuid":"527310237","full_name":"realvjy/nxt-lnk","owner":"realvjy","description":"Custom bio links for creatives who love coding. A perfect custom alternative for linktree, bio and other shortner platform. ","archived":false,"fork":false,"pushed_at":"2024-02-01T10:25:27.000Z","size":6932,"stargazers_count":325,"open_issues_count":0,"forks_count":55,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-30T07:11:51.856Z","etag":null,"topics":["link","linktree","linktree-clone","nextjs","portfolio","template","vercel"],"latest_commit_sha":null,"homepage":"https://mytiny.page","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/realvjy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-21T19:44:46.000Z","updated_at":"2025-03-27T11:47:46.000Z","dependencies_parsed_at":"2024-01-16T20:27:47.419Z","dependency_job_id":"e91cee44-5424-4b3b-9437-29b574c0e858","html_url":"https://github.com/realvjy/nxt-lnk","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realvjy%2Fnxt-lnk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realvjy%2Fnxt-lnk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realvjy%2Fnxt-lnk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realvjy%2Fnxt-lnk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/realvjy","download_url":"https://codeload.github.com/realvjy/nxt-lnk/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247457803,"owners_count":20941906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["link","linktree","linktree-clone","nextjs","portfolio","template","vercel"],"created_at":"2024-08-01T15:01:18.810Z","updated_at":"2025-04-06T09:09:09.421Z","avatar_url":"https://github.com/realvjy.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/realvjy"],"categories":["JavaScript"],"sub_categories":[],"readme":"# Nxt Lnk\n\n**Custom bio links for creatives who love coding. Made this first to use for my own weblinks vjy.me/lnk**\n\nA perfect custom alternative for linktree, bio and other shortner platform. Check live version here [nxtlnk.xyz](https://nxtlnk.xyz)\n\nPull requests are always welcome. In case you want inspiration or new features on what to add, check out the issues for feature requests.\n\nCoffee fuels coding ☕️\n\n\u003ca href=\"https://www.buymeacoffee.com/realvjy\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px !important;width: 217px !important;\" \u003e\u003c/a\u003e\n\n**Table of Contents**\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n  - [Usage](#usage)\n  - [Quick Start](#quick-start)\n  - [Manual Setup](#manual-setup)\n  - [Getting Started](#getting-started)\n  - [Images](#images)\n  - [Update Bio](#update-bio)\n    - [Add/Update](#update-bio)\n    - [Enable/Disable](#update-bio)\n    - [Featured Banner](#update-bio)\n  - [Update Links](#update-links)\n    - [Enable/Disable](#update-links)\n    - [Add/Update](#update-links)\n  - [Frontend](#frontend)\n  - [SEO](#seo)\n  - [Google Analytics](#google-analytics)\n  - [Custom Domain](#custom-domain)\n  - [Favicon](#favicon)\n  - [Contributors](#contributors)\n  \n  \n## Usage\n`nxt-lnk` template used to create your custom bio link and self-host on Vercel or Netlify using your own domain. Need little understanding of code :) ☕\n\nUsually, you don't need to worry a lot about coding if you're just updating information in `BioData.js` and `LinkData.js`. To deep dive know more  [Next.js](https://nextjs.org/docs) and [React](https://reactjs.org/docs/getting-started.html) official documentaion.\n\nFor customization used [styled components](https://styled-components.com/). If you want to customize styling you can [learn more here](https://styled-components.com/docs).\n\n**Template auto support dark-mode depending on system cofig.**\n\n## Quick Start\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https://github.com/realvjy/nxt-lnk) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/realvjy/nxt-lnk)\n\n\n## Manual Setup\nRun the following command to create a new project with this template:\n```bash\nyarn create next-app your-app-name -e https://github.com/realvjy/nxt-lnk\n# or\nnpx create-next-app your-app-name -e https://github.com/realvjy/nxt-lnk\n```\n\n## Getting Started\n\nUse any editor to work on editing. I use [vscode](https://code.visualstudio.com/)\n\nFirst, run the development server:\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n**Important files to edit or update info**\n`data/BioData.js` All basic info update here\n`data/LinksData.js` Contain all the links\n`Components/WebLinks.js` UI and stylesheet\n`Components/icons/index.js` Contain all SVG icon compo\n\nYou can start editing the page by modifying `data/BioData.js` and `data/LinksData.js`. The page auto-updates as you edit the file.\n\n\n\n## Images\nAll images stored inside `public` folder of the project.\n\n## Update Bio\n**Example from** `BioData.js` :\n```jsx\nconst bioData = [\n    {\n        name: 'vijay verma',\n        username: '@realvjy',\n        url: 'https://vjy.me',\n        titleImg: true,\n        avatar: '/avatar.png',\n        nftAvatar: true,\n        description: 'A short description/bio about you goes here',\n        subdesc: 'This is secondary description. If you do not need, you can remove it',\n        newProductUrl: 'https://vjy.me/lnk',\n        newProduct: true,\n    },\n];\n\nexport default bioData;\n```\n**Avatar**\nJust replace `avatar.png`. 200x200px will be good.\n\n**Hex/NFT avatar view**\n`nftAvatar: true` enable hex shape on avatar image.\n`nftAvatar: false` made it in oval shape.\n\n**Title**\nBy default `titleImg: true` and it look for `title.svg`. Replace svg with logo **logo**. Make sure to use `title.svg ` name.\n\n**Featured banner**\n`newProductUrl` and `newProduct` used for getting featured banner. You can replace the image `newproduct.png`  with any design you like.\n\n`newProduct: true` show banner. Default is `true` make it false to hide.\n\n\n## Update Links\n**Example from** `LinksData.js` :\n```jsx\nconst webLinks = [\n    // All social profile\n    {\n        title: 'Twitter',\n        url: 'https://twitter.com/realvjy',\n        type: 'social',\n        icon: '/twitter.svg',\n        on: true\n    },\n    ...\n    ...\n    \n    {\n        title: 'Instagram',\n        url: 'https://instagram.com/realvjy',\n        type: 'social',\n        icon: '/insta.svg',\n        on: true\n    }\n];\nexport default webLinks;\n```\n**Enable/Disable Social Media**\nFind `type: social` and change `on:true|false`\n\n| Title           | on (default)    | \n| ---------       | --------        | \n| `Twitter`       | `true`          | \n| `Instagram`     | `true`          | \n| `Dribbble`      | `false`          | \n| `Medium`        | `false`          | \n| `Github`        | `true`          | \n| `Youtube`       | `false`          | \n| `Behance`       | `true`          | \n| `Figma`         | `true`          | \n| `Linkedin`      | `false`          | \n| `Mastodon`      | `false`          | \n| `Hive Social`    | `false`          | \n| `Post.news`      | `false`          | \n\nSetting `on: true` show the social icon. \nThe social media icons are arranged in a single row at the top of the page below description. If you want to use as list, chagne type to `type: 'other'`\n\n**Add new Social Media link**\ncreate a new block by copying this\n```jsx\n    {\n        title: 'Social Name',\n        url: 'https://link.com/whateverurl',\n        type: 'social',\n        icon: '/newiconname.svg',\n        on: true\n    }\n```\nUpdate all info and make sure to add a `newiconname.svg` file in [public](#images) folder.\nThen you have to add new section to frontend `components/WebLinks.js`\n\n## Frontend\nAll frontend customization done inside `components/WebLinks.js`. If you wante to update and add new section just look this file and update according to your need.\n\n**Update section**\n\nLook for Section codes. Like if you want to change `install` type to `featured` Update  the `type: 'featured'` in `LinkData.js` then update all `install` related code in `WebLinks.js` to `featured`\n\n```js\n// Collect all links filter by type - social, project, nft and other etc=\n// get data for install section\nconst install = allLinks.filter((el) =\u003e {\n  return el.type === \"install\" \u0026\u0026 el.on\n});\n\n...\n...\n\n{/* Featured Section */ }\n\u003cLinkSection\u003e\n  \u003ch3\u003e{install[0].type}\u003c/h3\u003e\n  {\n    install.map((i) =\u003e {\n      return (\n        \u003cLink href={i.url} passHref key={i.title}\u003e\n          \u003cLinkBox\u003e\n            \u003cLinkTitle\u003e\u003cimg src={i.icon} style={{ filter: 'var(--img)' }} /\u003e {i.title}\u003c/LinkTitle\u003e \u003cNewUp /\u003e\n          \u003c/LinkBox\u003e\n        \u003c/Link\u003e\n      )\n    })\n  }\n\u003c/LinkSection\u003e\n{/* End Featured Section */ }\n```\n**Add New section**\n\nAdd new section with specific `type` in `Linkdata.js`. Then copy `LinkSection` Code to create new section in `WebLinks.js` file. Make sure to create get data of that section as well.\n      \n## SEO\nAlready added `next-seo`. All you have to do is `update next-seo.config.js` file. Make sure to add direct link of `preview.jpg`file, like - `https://vjy.me/preview.jpg`.\n\n## Google Analytics\nIn Vercel, you can set this by going to your project, then Settings and finally [Environments Variables](https://vercel.com/docs/concepts/projects/environment-variables). To get GA 4 code `G-ZXX0000XXX` follow [these steps ](https://support.google.com/analytics/answer/9304153?hl=en)\n\n\u003cimg src=\"https://vjy.me/ga-analytics.png\" style=\"width: 500px !important;\"/\u003e\n\n\n## Custom Domain\nBy default vercel give you a subdomain with your project name like - [nxtlnk.vercel.app](https:nxtlnk.vercel.app). But you can add own domain. \n\nVercel/Netlify give you option to add any domain to the deployed project like [vjy.me/lnk](https://vjy.me/lnk) or [nxtlnk.xyz](https://nxtlnk.xyz). All you have to do is follow official [Vercel documentaion](https://vercel.com/docs/concepts/projects/domains/add-a-domain) or [Netlify Documentaion](https://www.netlify.com/blog/2021/12/20/how-to-add-custom-domains-to-netlify-sites/)\n\n## Favicon\nCreate a `favicon.ico` file and place inside `public` folder. I use [favicon.io](https://favicon.io/favicon-converter/)\n\n## Contributors\nCreated by [realvjy](https://twitter.com/realvjy). You are always welcome to share your feedback on twitter or any social media platform.\n\nIf you want to contribute. Just create a pull request. \n    ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frealvjy%2Fnxt-lnk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frealvjy%2Fnxt-lnk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frealvjy%2Fnxt-lnk/lists"}