How I built my second brain using Next.JS

Okay! Before you declare me crazy and ask “How the hell can anyone build a second braing using Next.JS?” Let me tell you that I am not talking about a physical brain. I am talking about a repository of all the knowledge and information you have gathered over the years which you can visit anytime for ideas and inspiration.

What is second brain? 🤔

Our brain is meant for generating ideas and not storing them. So, how do we store them then? There comes the use of second brain. Second brain is where we store all our ideas, insights, experience, ideas, notes etc. It is perfect system for remind us of all the things we’ve gathered over the period of time which otherwise we would have easily forgotten. As Tiago Forte puts it in his words -

We feel a constant pressure to be learning, improving ourselves, and making progress. We spend countless hours every year reading, listening, and watching informational content. And yet, where has all that valuable knowledge gone? Where is it when we need it? Our brain can only store a few thoughts at any one time. Our brain is for having ideas, not storing them.

Building A Second Brain is a methodology for saving and systematically reminding us of the ideas, inspirations, insights, and connections we’ve gained through our experience. It expands our memory and our intellect using the modern tools of technology and networks.

Why to create second brain? 🤷‍♂️

Having a second brain as your knowledge base can be useful to you further down the line. It is a good way to document your learnings and experiences. It’s like writing notes for your future-self. You’re gonna thank yourself at later point in life for docmenting your learnings. The sooner you start documenting, the better!!

How can we developers use this concept? 🙂

We as developers have to constantly keep up to the latest tech. In this day & age, it can be overwhelming to keep up with all the knowledge. I figured a way for this problem. How about we have a personal space on the internet where we keep all our ideas & notes so we won’t have to google the same thing every time?

I did it by creating a personal documentation site for myself where I now keep all my development related notes and practices. I can hear you say, “But I don’t want to spend time building a site for this!!”

That’s exactly what I thought. This is why I went with Nextra.

What is Nextra? 😲

Nextra is a Static Site Generator based on Next.JS. As the official site says -

It supports Markdown and React components (MDX), automatically generated sidebar and anchor links, file-system based routing, built-in syntax highlighting, image
optimization, custom layouts, i18n, and all the features you love about
Next.js.

Nextra is a perfect solution for our problem. When we create a site using Nextra, we only need to create MDX files and mention those files in a “meta.json” file so that Nextra could automatically generate a sidebar for you to navigate through your files. Here’s an example of the site that I built for myself.

Nextra Features

• MDX - With Nextra all your .md and .mdx files will be rendered under the pages directory. The good thing with .mdx files are that they support React components. So you can create your own custom React components and use them. You can check more on MDX on their official docs.
• SSG - Nextra is built using Next.JS. So, obviously it supports Static Static Generation (SSG). Static Site Generation means your webpages will be generated at build time and statically served to users. You can read more about SSG with Next.JS here.
• Next Image - You can use Next Image component inside the .mdx files just like any other component.
• Syntax Highlighting - Nextra comes with in-built syntax highlighting. However, when I created my site the syntax highlighting feature doesn’t seem to be working. So, I ended up creating my own syntax-highlighting component with prism-react-renderer.
• Dark mode - Nextra comes with the support of dark mode. Also, it uses Tailwind CSS under the hood for styling purposes.
• Easy Configuration - The best thing is that you can configure your site according to the way you want. To configure the theme, you just have to edit theme.config.js file in the root directory.

How can you build your own documentation site?

1. Visit Nextra homepage and click on Get Started link from the sidebar.
2. Click on the Deploy button on the Get Started page.
3. You will be redirected to vercel.com. Choose a Repository name and whether you want it to be private or not and then click on create. The deployment process will start automatically.
4. Visit the Git Repository and clone it onto your system. npm install && npm run dev your website and TADA!! 🎉 You got your own documentation site..
5. To add a page, just create a .mdx files inside the pages directory and also mention that newly created file inside the meta.json file. Nextra will automatically generate sidebar links for your pages.

You can now use this site to store all your development knowledge here. For example, I’m using this site to

• Write code snippets (that I usually forget 😅). It saves me time googling the same thing everytime.
• Write anything I learn about.
• Revise/go through my notes whenever I’m free

Wrapping up!!

This is a great way of storing your inspirations, ideas, knowledge etc. It’s like you’re building your own knowledge network/database.

Connect with me

Twitter - shaancodes
Github - shaan-alam
YouTube - shaancodes
Instgram - shaancodes