How I Made My Portfolio with Next.js

1. framer/motion

   1 45 24,067 9.8 TypeScript

   Discontinued Open source, production-ready animation and gesture library for React [Moved to: https://github.com/motiondivision/motion]

   

   framer-motion : To Add animation in project

2. SaaSHub

   www.saashub.com featured

   SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

   

3. react-toastify

   2 46 12,930 8.5 TypeScript

   React notification made easy 🚀 !

   react-toastify: allows you to add notifications to your app

4. next-google-docs

   3 1 15 10.0 JavaScript

   Next Google Docs is a web app which uses draft.js to create a document for you. It also uses Firebase to store all the documents.

   /* File: content/projectData.js */ module.exports = [ { id: 15, name: "Google Docs with Next.js", coverURL: "https://imgur.com/bQkEGlb.png", description: "Next Google Docs is a web app which uses draft.js to create a document for you. It also uses Firebase to store all the user's data.", githubURL: "https://github.com/j471n/next-google-docs", previewURL: "https://google-next-docs.vercel.app/", tools: ["Next.js", "Tailwind CSS", "Firebase", "Draft.js", "Next Auth"], pinned: true, }, /* ..............Other Projects......... */ ];

5. Highlight.js

   4 88 23,925 8.7 JavaScript

   JavaScript syntax highlighter with language auto-detection and zero dependencies.

   

   First install next-mdx-remote and highlight.js.

6. j471n.in

   5 7 157 7.0 TypeScript

   This is my portfolio built with Next.js, Tailwind CSS, Sanity, Spotify API, Dev.to API, MDX, Google Analytics and Vercel.

7. DOMPurify

   6 50 14,420 9.0 JavaScript

   DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:

   

   You need to install dompurify. DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML and SVG. This is the optional step.

8. globby

   7 7 2,550 5.3 JavaScript

   User-friendly glob matching

   

   First install globby and prettier.

9. prettier

   8 475 49,770 9.7 JavaScript

   Prettier is an opinionated code formatter.

   

   First install globby and prettier.

10. vercel

    9 559 13,099 9.9 TypeScript

    Develop. Preview. Ship.

    

    This step is important as we are using Vercel as a hosting platform and we need to use the Cache-Control. So vercel.json is like the following code:

11. SWR

    10 253 30,852 7.6 TypeScript

    React Hooks for Data Fetching

    

    First, we need to install swr. SWR is a strategy to first return the data from the cache (stale), then send the fetch request (revalidate), and finally, come up with up-to-date data.

12. React

    11 1,877 231,372 9.9 JavaScript

    The library for web and native user interfaces.

    

13. react-icons

    12 98 11,807 8.0 TypeScript

    svg react icons of popular icon packs

    

    react-icons: To use icons in the project

14. Next.js

    13 2,239 128,612 10.0 JavaScript

    The React Framework

    

15. mdx

    14 106 17,964 8.4 JavaScript

    Markdown for the component era

    

    Now the blog's part. It could be a little confusing at first. But it will come together in the end. I am using MDX as the content manager. You might be wondering why I am using MDX. It's because of control and customization. It provides you to customize the blog however you want. You can make your own custom component and add them to your blog. We will be creating several custom components. This page will look like this:

Suggest a related project