<h1 id="nextjs">Next.js<a aria-hidden="true" class="anchor-heading icon-link" href="#nextjs"></a></h1>
<ul>
<li><p></p><div class="portal-container">
<div class="portal-head">
<div class="portal-backlink">
<div class="portal-title">From <span class="portal-text-title">what i expect from exposés on technologies</span></div>
<a href="/notes/keuy591joycjjpuaoopo1x3" class="portal-arrow">Go to text <span class="right-arrow">→</span></a>
</div>
</div>
<div id="portal-parent-anchor" class="portal-parent" markdown="1">
<div class="portal-parent-fader-top"></div>
<div class="portal-parent-fader-bottom"></div><ul>
<li><a aria-hidden="true" class="block-anchor anchor-heading icon-link" id="^anchor-tech-get-started" href="#^anchor-tech-get-started"></a>Getting started/How to use instructions</li>
</ul>
</div></div><p></p></li>
<li>How is Next.js different from <a href="/notes/2s5s0oltg02uyq4dl3wnshy">React.js</a>?
<ul>
<li><a href="https://www.toptal.com/next-js/next-js-vs-react">https://www.toptal.com/next-js/next-js-vs-react</a></li>
<li><a href="/notes/8bnm00yujch1yw8v7v7jxuc">TypeScript</a></li>
<li>NextJS playground
<ul>
<li>UI: Radix</li>
<li>UI: Animations</li>
</ul>
</li>
</ul>
</li>
<li><p></p><div class="portal-container">
<div class="portal-head">
<div class="portal-backlink">
<div class="portal-title">From <span class="portal-text-title">what i expect from exposés on technologies</span></div>
<a href="/notes/keuy591joycjjpuaoopo1x3" class="portal-arrow">Go to text <span class="right-arrow">→</span></a>
</div>
</div>
<div id="portal-parent-anchor" class="portal-parent" markdown="1">
<div class="portal-parent-fader-top"></div>
<div class="portal-parent-fader-bottom"></div><ul>
<li><a aria-hidden="true" class="block-anchor anchor-heading icon-link" id="^anchor-tech-internals" href="#^anchor-tech-internals"></a>Brief walk-through of internals/architecture/patterns/best practices</li>
</ul>
</div></div><p></p></li>
<li>Internals: Caching</li>
<li>Internals: App Router</li>
<li>Internals: Pages Router</li>
<li>Internals: Rendering; <a href="/notes/z1vgda4wug9ysue1stke1e4">server-side rendering</a></li>
<li>Internals: Data Fetching</li>
<li>Internals: Optimizations</li>
<li><p></p><div class="portal-container">
<div class="portal-head">
<div class="portal-backlink">
<div class="portal-title">From <span class="portal-text-title">what i expect from exposés on technologies</span></div>
<a href="/notes/keuy591joycjjpuaoopo1x3" class="portal-arrow">Go to text <span class="right-arrow">→</span></a>
</div>
</div>
<div id="portal-parent-anchor" class="portal-parent" markdown="1">
<div class="portal-parent-fader-top"></div>
<div class="portal-parent-fader-bottom"></div><ul>
<li><a aria-hidden="true" class="block-anchor anchor-heading icon-link" id="^anchor-production-problems" href="#^anchor-production-problems"></a>Good-First-Issue production problems</li>
</ul>
</div></div><p></p></li>
<li>next bugs/gritties
<ul>
<li><a href="https://youtu.be/GSyn2hNPXYM?t=177">https://youtu.be/GSyn2hNPXYM?t=177</a></li>
<li><a href="https://youtu.be/hMjYzeJVv8w">https://youtu.be/hMjYzeJVv8w</a></li>
</ul>
</li>
<li>Suspense components</li>
<li>How does <code>onBlur</code> work?</li>
<li>useRef</li>
<li>next-auth</li>
<li>Clerk auth</li>
<li>ContentLayer: "It is a content preprocessor that validates and transforms your content into type-safe JSON you can easily import into your application." <a href="https://contentlayer.dev/docs/concepts/how-contentlayer-works-da5b2220">https://contentlayer.dev/docs/concepts/how-contentlayer-works-da5b2220</a></li>
<li><a title="Private" href="https://wiki.dendron.so/notes/hfyvYGJZQiUwQaaxQO27q.html" target="_blank" class="private">how to implement viewcount for a webpage (Private)</a>?
<ul>
<li>Redis/serverless' Upstash, etc.</li>
</ul>
</li>
<li>Vercel <sub><a href="/notes/xuj9l4j5ckhy9ilig3ycfcl">serverless</a></sub></li>
</ul>
<h4 id="misc">Misc.<a aria-hidden="true" class="anchor-heading icon-link" href="#misc"></a></h4>
<ul>
<li>
<p><code>@media (prefers-color-scheme: dark)</code> - what is it?</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme">https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme</a></li>
</ul>
</li>
<li>
<p><a href="/notes/yoaw7100g7z50bj79brs10n">CodeMirror</a>, <a href="/notes/96uafepnjg67x3urkpe7hbs">documenting codeprop</a></p>
</li>
<li>
<p><a href="/notes/3ejaxv4xm6o2psn0du528yw">documenting netpin</a></p>
</li>
</ul>
<hr>
<strong>Backlinks</strong>
<ul>
<li><a href="/notes/3ejaxv4xm6o2psn0du528yw">documenting netpin</a></li>
<li><a href="/notes/113c6c5np8cuub04vh4vvj4">Projects</a></li>
</ul>

Next.js

Dendron


You've stumbled on [Caleb's](https://bycaleb.wasegun.com/) public notebook. You can conceive of this as a sketchbook too—i.e., rough, incomplete, and sometimes sparse. Hence, you might not get the full-gist of any one random page in the notebook. It is meant to help me elaborate/consolidate on my work & thoughts as a software engineer. This is not quite a [digital garden](https://maggieappleton.com/garden-history), and also unlike [Andy's working notes](https://notes.andymatuschak.org/About_these_notes).

I built this (experimentally & publicly) with [Dendron](https://www.dendron.so/), specifically, to understand if & how "quick, linked, and atomic" note-taking can help realize, remember, & learn (how to make better) design decisions when working on quick (or slow) software engineering projects. Of course, it does help—that makes this is a demonstration of exactly how it helps.

Check out my growing list of [[projects]]!

