v2 mytiny.page builder is here. Explore and go live in minutes
My Tiny Page (Formely Nxt Lnk)
Custom bio links for creatives who love coding. Made this first to use for my own weblinks vjy.me/lnk
A perfect custom alternative for linktree, bio and other shortner platform. Check live version here nxtlnk.xyz
Pull requests are always welcome. In case you want inspiration or new features on what to add, check out the issues for feature requests.
Coffee fuels coding ☕️
Table of Contents
Usage
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 :) ☕
Usually, 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 and React official documentaion.
For customization used styled components. If you want to customize styling you can learn more here.
Template auto support dark-mode depending on system cofig.
Quick Start
Deploy with Vercel Deploy to Netlify
Manual Setup
Run the following command to create a new project with this template:
yarn create next-app your-app-name -e https://github.com/realvjy/nxt-lnk
# or
npx create-next-app your-app-name -e https://github.com/realvjy/nxt-lnk
Getting Started
Use any editor to work on editing. I use vscode
First, run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
Important files to edit or update info
data/BioData.js All basic info update here
data/LinksData.js Contain all the links
Components/WebLinks.js UI and stylesheet
Components/icons/index.js Contain all SVG icon compo
You can start editing the page by modifying data/BioData.js and data/LinksData.js. The page auto-updates as you edit the file.
Images
All images stored inside public folder of the project.
Update Bio
Example from BioData.js :
const bioData = [
{
name: 'vijay verma',
username: '@realvjy',
url: 'https://vjy.me',
titleImg: true,
avatar: '/avatar.png',
nftAvatar: true,
description: 'A short description/bio about you goes here',
subdesc: 'This is secondary description. If you do not need, you can remove it',
newProductUrl: 'https://vjy.me/lnk',
newProduct: true,
},
];
export default bioData;
Avatar
Just replace avatar.png. 200x200px will be good.
Hex/NFT avatar view
nftAvatar: true enable hex shape on avatar image.
nftAvatar: false made it in oval shape.
Title
By default titleImg: true and it look for title.svg. Replace svg with logo logo. Make sure to use title.svg name.
Featured banner
newProductUrl and newProduct used for getting featured banner. You can replace the image newproduct.png with any design you like.
newProduct: true show banner. Default is true make it false to hide.
Update Links
Example from LinksData.js :
const webLinks = [
// All social profile
{
title: 'Twitter',
url: 'https://twitter.com/realvjy',
type: 'social',
icon: '/twitter.svg',
on: true
},
...
...
{
title: 'Instagram',
url: 'https://instagram.com/realvjy',
type: 'social',
icon: '/insta.svg',
on: true
}
];
export default webLinks;
Enable/Disable Social Media
Find type: social and change on:true|false
| Title |
on (default) |
Twitter |
true |
Instagram |
true |
Dribbble |
false |
Medium |
false |
Github |
true |
Youtube |
false |
Behance |
true |
Figma |
true |
Linkedin |
false |
Mastodon |
false |
Hive Social |
false |
Post.news |
false |
Setting on: true show the social icon.
The 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'
Add new Social Media link
create a new block by copying this
{
title: 'Social Name',
url: 'https://link.com/whateverurl',
type: 'social',
icon: '/newiconname.svg',
on: true
}
Update all info and make sure to add a newiconname.svg file in public folder.
Then you have to add new section to frontend components/WebLinks.js
Frontend
All 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.
Update section
Look 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
const install = allLinks.filter((el) => {
return el.type === "install" && el.on
});
...
...
{ }
<LinkSection>
<h3>{install[0].type}</h3>
{
install.map((i) => {
return (
<Link href={i.url} passHref key={i.title}>
<LinkBox>
<LinkTitle><img src={i.icon} style={{ filter: 'var(--img)' }} /> {i.title}</LinkTitle> <NewUp />
</LinkBox>
</Link>
)
})
}
</LinkSection>
{ }
Add New section
Add 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.
SEO
Already added next-seo. All you have to do is update next-seo.config.js file. Make sure to add direct link of preview.jpgfile, like - https://vjy.me/preview.jpg.
Google Analytics
In Vercel, you can set this by going to your project, then Settings and finally Environments Variables. To get GA 4 code G-ZXX0000XXX follow these steps
Custom Domain
By default vercel give you a subdomain with your project name like - nxtlnk.vercel.app. But you can add own domain.
Vercel/Netlify give you option to add any domain to the deployed project like vjy.me/lnk or nxtlnk.xyz. All you have to do is follow official Vercel documentaion or Netlify Documentaion
Favicon
Create a favicon.ico file and place inside public folder. I use favicon.io
Contributors
Created by realvjy. You are always welcome to share your feedback on twitter or any social media platform.
If you want to contribute. Just create a pull request.
评论