DEV Community

Cover image for How I built my second brain using Next.JS
Shaan Alam
Shaan Alam

Posted on

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 Nextjs

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. Nextra NextJS
  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.Nextra NextJS
  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.. Nextra NextJS
  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.

Nextra NextJS

Nextra NextJS

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

Discussion (27)

Collapse
adhirajbhatia profile image
AdhirajBhatia

Very Nice Work ! You can create your second brain on Notion instead . It will be easier .

Collapse
shaan_alam profile image
Shaan Alam Author

Yeah, I thought of that too.. but having an isolated space just for development purpose is better. Coz this way I don't get distracted by all my future todos and calendars that I've setup for myself on notion. Moreover, with MDX I can create my own components which can be used to show interactive demonstration of the topic I am writing notes about.

Collapse
iam_virendra profile image
Virendra Giri

Try obsidian maybe..

Thread Thread
shaan_alam profile image
Shaan Alam Author

Thanks for the suggestion! I'll definitely check it out!

Thread Thread
jkhaui profile image
Jordy Lee

I love Obsidian. It's amazing because everything is just plain markdown, but there's so many useful features and plugins if you want more complex functionality.

Collapse
jkhaui profile image
Jordy Lee

Don't you need to pay for Notion past a certain point though?

I'm not against paid software at all, but I feel like for something such as a second brain or personal knowledge base which will grow exponentially over time, any service which holds your notes hostage by requiring payment is off the table.

Collapse
harshjoeyit profile image
Harshit Gangwar

Well tbh I have been using it for a couple of years now. It didn't come to that point for me yet.

Collapse
harshjoeyit profile image
Harshit Gangwar

Yep! Why reinvent the wheel

Collapse
rtpharry profile image
Matthew Harris

Seems like a good solution for also pairing it with learning this tech. I've been looking for a good snippet friendly storage system and recently found dendron which is a vscode based second brain. Not installed it yet but it looks quite promising.

Collapse
shaan_alam profile image
Shaan Alam Author

Thanks for mentioning dendron Matthew. I never knew about it. Will definitely try it out!

Collapse
scriptautomate profile image
Derek Ardolf

To add to this conversation: Dendron also has built-in publishing features to publish your Markdown notes/docs with their own Next.js based static site generator.

Collapse
tillt profile image
Till

How would you compare your solution to gollum (the git based wiki, not the lotr char 😉)?
Just asking bc just rn I'm also looking for a solution in that direction. And notion, which I also considered, doesn't seem to allow selfhosting (am I wrong?).
I assume your solution can be better web optimized while gollum can be better print optimized and working with citatations and tables etc is probably easier with gollum. But I would really like to hear your opinion since you are probably much deeper in that topic than I am 🙂

Collapse
clumsycoder profile image
Kaushal Joshi

This is very interesting Shaan, great work 🔥🔥🔥

Collapse
shaan_alam profile image
Shaan Alam Author

Thanks Kaushal 😄

Collapse
clumsycoder profile image
Kaushal Joshi

Welcome ^_^

Collapse
arymandeshwal profile image
Ahriman

I am in the process of creating a portfolio website and I am horrible at web development. Can I use Obsidian, Nextra or Notion for it? or any other helpful software? I just need a simple website nothing fancy.

Collapse
gus1 profile image
Gus

Notion.

Collapse
shaan_alam profile image
Shaan Alam Author

Yeah, Notion is great!

Collapse
nibodhdaware profile image
Nibodh Daware

Wow, Thanks for that I will definately use this for learning new stuff

Collapse
shaan_alam profile image
Shaan Alam Author

Glad you found it useful! 😄

Collapse
serwer20 profile image
pmioduszewski

:silent laugh of an unnamed AI:

Collapse
razvangvr profile image
Razvan Gaston

I use Joplin for the past 4 years, and it's great.

Collapse
shaan_alam profile image
Shaan Alam Author

Thanks for recommending Razvan! 😄

Collapse
damianc profile image
Damian

I have something like it on GH
github.com/damianc/dev-notes

Collapse
shaan_alam profile image
Shaan Alam Author

Great!!

Collapse
liviufromendtest profile image
Liviu Lupei

We did our Documentation with Docusaurus.

Most of those chapters even rank really well in search engines.

Collapse
shadid12 profile image
Shadid Haque

Snap I didn't know Nextra is a thing. Definitely going to check it out.