DEV Community: Mark Kop

Should I replace my VPS with a Mac mini?

Mark Kop — Sun, 30 Aug 2026 17:10:14 +0000

I've had a Hostinger KVM 4 for a while with 4 vCPUs, 16 GB RAM and 200 GB NVMe with the following applications:

Project	7d CPU	7d RAM	Allocated
Coolify	9%	660 MB	host
Langfuse	21%	1.8 GB	7 GB, 5 CPU
Hermes	3%	1.1 GB	2 GB, 1.5 CPU
Forgejo	1%	210 MB	2 GB, 1.5 CPU
Multica	—	270 MB now	5 GB, 1.5 CPU
Garage	0%	40 MB	1 GB, 1 CPU
5 side projects	8%	1.4 GB	14 GB, 11 CPU

My next 2-year renewal is R$3,119.76, or roughly R$130/month, so I started checking what else I could get for the same money. I originally got it during a Black Friday promotion for around R$55/month

VPS alternatives

I compared a few options with roughly the same amount of RAM.

Provider	CPU	RAM	Storage	~Price/month
Netcup VPS 2000 G12	8 vCore	16 GB	512 GB NVMe	R$65 (€10)
Hetzner CX43	8 vCPU	16 GB	160 GB	R$95 (€16)
OVH VPS-4	8 vCore	24 GB	200 GB NVMe	R$120 (US$23)
Hostinger renewal	4 vCPU	16 GB	200 GB NVMe	R$130
HostGator NVMe 16	6 vCPU	16 GB	400 GB NVMe	R$160

I'm considering Hetzner mostly because of how popular it is with developers and the self-hosting community.

HostGator would be an option if I wanted to keep the server in Brazil, but I would probably only consider it if a good promotion or discount appeared.

What about a Mac mini?

Then I started wondering where buying my own hardware starts to make sense.

A Mac mini M4 with 16 GB for around R$5,000 is roughly in this territory:

Option	Initial cost	Monthly	~4 years
Hostinger VPS	R$0	~R$130	~R$6,200
Mac mini M4	~R$5,000	~R$12 power	~R$5,600

So the hardware cost can roughly catch up with the VPS after around 4 years.

The comparison isn't exactly fair, though. A machine at home also means dealing with power outages, CGNAT, internet availability, backups and hardware failures.

I don't think I would use it as a direct replacement for production infrastructure.

What I'm considering instead is keeping production and services/products that people pay for on rented VPS infrastructure, while eventually having a dedicated machine at home for hobby projects.

And you, how much are you paying for your own hosted solutions and hobby projects?

Coding a Feature in 2026

Mark Kop — Tue, 17 Feb 2026 22:58:08 +0000

If it's a legacy/unknown codebase, it's a good idea to research it by asking questions to Cursor/Claude Code/Codex

Then it's important to have minimal testing to validate that there are no errors in the code (lint, typecheck) after AI changes. Some agents will need rules, others will always try to do some testing.

It's vital to test every code change manually, so having local debugging tools setup is also very valuable (scripts, commands, ui/browser interactions). This might be skipped in the future as iterations are faster and safer/bug-free.

Asking for the feature itself really depends on each engineer's experience. Usually, describing the feature as much as possible with voice transcription tools does the trick. Using "Plan" modes + "make me questions" or "interview me" is another good trick for getting more context and planning.

Sometimes, just trying out a one-shot solution is also a good way of starting a feature since we can get misconceptions really quick.

Prototype first, design it later.

// Detect dark theme var iframe = document.getElementById('tweet-2023876832874139925-804'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2023876832874139925&theme=dark" }

Creating hobby websites in 2025

Mark Kop — Mon, 17 Nov 2025 21:24:04 +0000

Hey, guys!
Let me show you how I build new hobby websites with AI tools nowadays.

🧠 Brainstorm with AI agent

Using a voice transcription AI tool, like Cursor's native recorder or "Wispr Flow", I brain dump all my ideas and requirements into text and save it in a PRD.md file or in a Google Doc. I also attach a bunch of other copy-pasted text that might be related to that project.

🧱 Init a codebase

I personally go with npx create-next-app@latest my-next-app --tailwind --typescript --eslint --app --turbopack --use-pnpm and npx shadcn@latest init.

Then, I use an AI Agent tool, such as Claude Code, to create the project. I paste the document create before into a prompt and add some extra details, for example:

Project in nextjs, tailwind, shadcn components (don't create them, import them using shadcn commands), @neondatabase/serverless Neon DB, @stackframe/stack Stack Auth

Full Prompt: https://gist.github.com/Markkop/765612eecb7f6a7e1c2564eda03b228b

⚒️ Fixes and features

Now, using Claude Code and Cursor, I finish the integrations I want and the fixes needed. I also try to leverage AI at max via Playwright MCP/Chrome MCP/Cursor (browser testing) and Neon MCP (db updates).

This is where I most leverage my dev knowledge: I guide the AI to build the features I plan, change libraries, follow patterns and so on.

🌎 Publish and Release

Finally, when I have something okayish to release, I setup Vercel and domains.

When I started writing this post, I realized there's a lot of more profound knowledge applied to the process that is too much for write in a single post, so take this more as an overview of the process

My Top Cursor Tips (Oct 2025)

Mark Kop — Tue, 21 Oct 2025 16:47:25 +0000

Why Cursor over Claude Code?

Code-generation diffs are easier to review and roll back (the checkout system is great).
You can test and use other models for different tasks (o3 for complex tasks, gemini-2.5-pro for creativity, grok-code-fast-1 for quick tasks, etc.).*
Good IDE integration (e.g., accept/reject actions work great across the UI).

*That said, I’m only using claude-4.5-sonnet since its launch.

How to 10x Productivity on Cursor

Good pre-prompt

Use .cursorrules or similar to enforce behavior. For example:

// .cursorrules for a frontend project

- Always use the project’s Tailwind colors.
- Always use named exports with object parameters: `sum({ a, b })` instead of `sum(a, b)`.
- Use "pnpm" instead of "npm" for all package-management commands.
- Use the "use client" directive when using client-side state like useState, useEffect, etc.
- Don’t modify package.json dependencies directly.
- Always write fail-safe code using optional chaining and default values.
- Use DayJS for all date and time operations — don’t use `new Date()`, `Date.now()`, or other date functions.
- When searching the codebase for context, do at least three semantic searches and three grep searches (do more if needed).

// .cursorrules for a blockchain dapp project

- Don’t run dev-server commands; let me do it. If you want to run something, ask me first.
- You won’t be able to run smart-contract deployment commands when needed; ask me and I will do it.
- Run `npm run typecheck` after making changes in the frontend and fix errors. Avoid `any` types.
- Run `npm run compile:check` after making changes to the contracts and fix errors.
- When updating a smart contract, remember to generate the ABI and update the FE accordingly.
- When coding a smart contract, check BYTECODE_OPTIMIZATION.md for best practices.
- Don’t write .md files unless asked to.
- If updating a smart contract, at the end ask me to deploy the contract with `npm run redeploy:all`.

Good MCPs

Atlassian MCP (Jira ticket integration)
Chrome DevTools MCP (or Cursor’s in-browser)
~~GitHub MCP~~ I’d rather use GH CLI commands instead
Figma MCP
Neon MCP (for hobby projects)

I’ve also heard these are good:

Svelte MCP
Stripe MCP
Sentry MCP
AWS / Cloudflare / Vercel MCPs

Enable them on demand to avoid filling up context.

Fireship has a good video showing several of them:

Automation

Create .md files with reusable instructions to automate small wins, such as:

Creating and enhancing GitHub PRs and releases with links and more (Atlassian MCP + GitHub CLI)
UI testing (Chrome MCP / Playwright MCP / Cursor’s browser)
SVG → React component conversion using a template
API testing

Other 10x Modifiers

Use the “Plan” feature — always try it first.
Voice transcription tools to dictate detailed prompts.
Screenshot and text-recognition tools to provide extra context.

Other Cursor features I don’t use much

Bugbot (PR review — too expensive)
cursor-agent (too specific tasks)
@doc (usually web search does the trick)
/commands (I kinda prefer .md files)
Background Agents (It's quicker just to open the project locally)

My Top Cursor Tips (v0.43)

#tutorial #ai #productivity #learning

227

6 min read

How to create video transcription with ffmpeg and whisper

Mark Kop — Wed, 09 Apr 2025 21:13:57 +0000

Requirements

ffmpeg
whisper
Python 3.10+ (for Whisper)

Installation

macOS

# Install Homebrew if you don't have it
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Install ffmpeg
brew install ffmpeg

# Install Python (if needed)
brew install python

# Install Whisper
pip3 install --upgrade pip
pip3 install git+https://github.com/openai/whisper.git

Windows

# Install Chocolatey if you don't have it
# Run in PowerShell as administrator:
Set-ExecutionPolicy Bypass -Scope Process -Force
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072
iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

# Install ffmpeg
choco install ffmpeg

# Install Python (from python.org)
# Make sure to check "Add Python to PATH" during installation

# Install Whisper
pip install -U openai-whisper

Linux

# Install ffmpeg
sudo apt update && sudo apt install ffmpeg

# Install Python and pip
sudo apt install python3 python3-pip

# Install Whisper
pip3 install git+https://github.com/openai/whisper.git

Transcription Steps

Extract audio from video using ffmpeg

   ffmpeg -i input_video.mp4 -vn -acodec mp3 output.mp3

Transcribe audio with Whisper

   whisper output.mp3 --language English --model small --output_format txt

Model Options

tiny: Fastest, lowest accuracy (~1GB RAM)
base: Fast, decent accuracy (~1GB RAM)
small: Balanced speed/accuracy (~2GB RAM)
medium: Good accuracy (~5GB RAM)
large: Best accuracy (~10GB RAM)

Output Formats

txt: Plain text transcript
srt: Standard subtitle format
vtt: Web Video Text Tracks format
json: Detailed JSON with timestamps

Additional Options

--task translate: Translates non-English audio to English
--language en: Specifies the source language (faster and more accurate)
--model: Selects the model size (tiny/base/small/medium/large)

Source: macos.gadgethacks.com
Source: dev.to

My Top Cursor Tips (v0.43)

Mark Kop — Mon, 16 Dec 2024 21:38:22 +0000

I've been using Cursor extensively for 4 months in both professional and hobby ways, mostly on frontend projects.

During this time, I learned several tips and tricks I want to share. I won't cover the Cursor basics and how to use them, but I will give a few references you can look into if you're just starting

📚 Basics

Cursor has tons of AI features and you can discover most of them here:
https://www.cursor.com/features

You can also watch a few videos, but bear in mind they can get outdated quickly.

Cursor.AI Basics in 10 Mins (Is it Worth Using?)
https://youtu.be/gDzND0M6SGE (23 October 2024)

Cursor AI Tutorial for Beginners (How I Code 159% Faster)
https://youtu.be/yk9lXobJ95E (16 August 2024)

🕵️ Agent

TL;DR: It is great, but still has a lot to improve

Let's start talking about the current AI hot topic out there: Agents

Cursor has an Agent mode in the Composer panel that can search through the code base, go back and forth between files, and have better reasoning.

It still has a long way to go, but it's pretty good for small changes or features across several files and even bug-hunting.

My issue with the Agent mode is that I can't add folders to the context like in the normal Composer mode, only direct files. This is probably going to change in the future. The / tip I'm going to share next does the trick for now

🔧 Use "Reference Open Editors" command

TL;DR: Easy way to add several related files to the context

Like most tools, if the context is filled with content that is not related to the prompt, the AI "loses itself" when providing a response, so we want to keep the context minimal.

In Cursor, we can manually add files to the context by mentioning them with @ or by clicking on the + button, but that can get boring quickly.

The best trick I found out is actually closing all editor tabs, opening the ones I'm sure it will help the AI to figure out what to do and adding them all together in the prompt by pressing / and selecting "Reference Open Editors".

Sometimes, you will notice the AI trying to change other files that are not in the context, and sometimes, it will even (wrongly) rewrite the entire file.
That means you want to add that file to the context (or, if you're sure, you can tell the AI to not modify that file).

So more often than not you will be reverting changes and editing your initial prompt to add more files to the context.

This used to be smooth before, but nowadays is kinda buggy, so I usually end up copying the prompt, opening a new chat, opening the extra files, pressing / to add everything and pasting the chat.

Sometimes, for the / to work correctly, you need to empty the text prompt, but you can do this combo: Ctrl+A, Ctrl+X, /, "Reference Open Editors", Ctrl+V.

🗒️ Notepads

TL;DR: Easy way to use repeated files and prompts

In my last weeks, I've been doing too much of this process of opening related files and adding them to the context so I started to use another Cursor feature: notepads.

In a notepad, you can explain a feature in plain text and mention particular files in it and then mention that notepad in the prompt so the AI is aware of anything you want it to know about the feature you're working on.

You can also use notepad to save a prompt you usually use, like code review or vulnerability search.

Works very well for the agent mode too

🛂 Cursor Rules

TL;DR: Add custom project instructions to the context

By this point you probably already heard about .cursorrules. It's a file with instructions that will always be present in the AI context.

It's very useful to add things you see the AI doing wrong, like using specific libraries and code design.

It can also help the AI to have more context about the project itself, resulting in better responses, although for that you might want to use the "PRD" tip I will share more at the end.

You can find templates for the .cursorrules file here and use them as inspiration on what you can add to yours:

https://cursor.directory/

If you're using NextJs, for example, a great instruction to add is:

- Use "use client" on the top of the file when using client-side states like useState, useEffect, etc.

💬 Pre-prompt

TL;DR: Add custom personal instructions to the context

Similar to the .cursorrule, we can add instructions that will go along our prompt to the "Rules for AI" section in the Cursor settings.

On 4 Nov. 2024, @kayladotdev shared a tweet with those instructions from a Cursor employee @shaoruu.

// Detect dark theme var iframe = document.getElementById('tweet-1853272891023872450-640'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1853272891023872450&theme=dark" }

I've been using that myself, and the results have been pretty great; I suggest you try.

DO NOT GIVE ME HIGH LEVEL SHIT, IF I ASK FOR FIX OR EXPLANATION, I WANT ACTUAL CODE OR EXPLANATION!!! I DON'T WANT "Here's how you can blablabla"

- Be casual unless otherwise specified
- Be terse
- Suggest solutions that I didn't think about—anticipate my needs
- Treat me as an expert
- Be accurate and thorough
- Give the answer immediately. Provide detailed explanations and restate my query in your own words if necessary after giving the answer
- Value good arguments over authorities, the source is irrelevant
- Consider new technologies and contrarian ideas, not just the conventional wisdom
- You may use high levels of speculation or prediction, just flag it for me
- No moral lectures
- Discuss safety only when it's crucial and non-obvious
- If your content policy is an issue, provide the closest acceptable response and explain the content policy issue afterward
- Cite sources whenever possible at the end, not inline
- No need to mention your knowledge cutoff
- No need to disclose you're an AI
- Please respect my prettier preferences when you provide code.
- Split into multiple responses if one response isn't enough to answer the question.

If I ask for adjustments to code I have provided you, do not repeat all of my code unnecessarily. Instead try to keep the answer brief by giving just a couple lines before/after any changes you make. Multiple code blocks are ok.

You can use that in the .cursorrules file too, the main difference is that the file is subject to git versioning and therefore team sharing, while the "Rules for AI" is more of a personal preference.

👀 Use Diff of Working State

TL;DR: Add current diff from files changed to the context

Sometimes, you want the AI to change something that has not been committed yet, or you can even use it to review to find bugs or vulnerabilities.

The command @Commit (Diff of Working State) is very useful for those cases.

Sadly, it currently doesn't work on agent mode.

⚙️ Always check Cursor Settings

TL;DR: Toggle features and resync index

You can toggle useful and experimental features in there.

They change a lot on every update (which you can keep track of here) so make sure to revisit it often

Also, you can resync the codebase index there, which is VERY helpful when you're creating and deleting files a lot, especially when using scripts that do that

💾 Auto Save

2025 Update: now Cursor saves automatically and this is not needed anymore

TL;DR: A dangerous, but handy feature for a faster progress loop

In Twitter/X, @hive_echo shared a great tip on enabling the editor's Auto Save feature.

// Detect dark theme var iframe = document.getElementById('tweet-1865991903503856062-5'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1865991903503856062&theme=dark" }

Since most changes I make in the code when using Composer are safe enough to be applied and saved directly, this change made the frontend hot reload/compile time way faster and smoother.

The only issue is that it is an editor feature and not really Cursor's feature, so that means every file will auto-save even when you're coding manually, which will trigger unwanted reloads and break the page on several occasions.

📒 Use a Product Requirement Document

TL;DR Plan everything and make the AI to the rest

A great way to use Cursor is by creating a PRD and defining and laying down all the product features, specifications and requirements.

Then, you can reference that to the AI so it knows more about the project and know what to work next.

This video describes this strategy in details. I'd suggest watching at least its first 18 minutes if you want to know more

🔗 References and other links

Videos
AI tools for software engineers, but without the hype
https://www.youtube.com/watch?v=uRuLgar5XZw

Cursor + Playwright
https://www.youtube.com/watch?v=kH4hM0H_WPg

Podcast with the Cursor Team
https://www.youtube.com/watch?v=oFfVt3S51T4

Channels

Twitter

Switching Auth Method in Postman dinamically

Mark Kop — Mon, 18 Nov 2024 18:15:43 +0000

We're using Postman's Mock Server feature to develop the endpoints and payloads for our new API and I came to the issue where I couldn't easily switch auth methods to use the same request to call the API itself or the Mock Server

The solution was creating a Pre-request script to the root folder that would detect the active environment and add the correct authentication method header and secret

if (pm.environment.name.toLowerCase().includes('mock')) {
    pm.request.headers.upsert({key: 'x-api-key', value: pm.environment.get('api-key')});
} else {
    pm.request.headers.upsert({key: 'Authorization', value: 'Bearer ' + pm.environment.get('accessToken')});
}

Hope that helps anyone looking for something similar

Cursor Tips

Mark Kop — Sun, 17 Nov 2024 19:15:34 +0000

Hey people!

I've been using Cursor AI IDE for about 2 months, every day, for both work and hobby coding and I feel I can share some great tips about it

First of all, if you're not familiar with Cursor or AI in Web Development in general, I highly suggest watching the videos below:

AI tools for software engineers, but without the hype – with Simon Willison (Co-Creator of Django) (must watch/listen)
https://www.youtube.com/watch?v=uRuLgar5XZw

General Cursor Usage: Cursor AI Tutorial for Beginners (How I Code 159% Faster) (2 months old. It is not that old yet, but it might be
worth looking for a more recent one)
https://youtu.be/yk9lXobJ95E

Using it with PRD and documentation: Best Cursor Workflow that no one talks about... (no need to watch everything; the first 18 min
are enough to get the idea)
https://www.youtube.com/watch?v=2PjmPU07KNs

Effective Code Review: Getting Cursor AI to Review Its Own Code
https://www.youtube.com/watch?v=vOlAniUTlCY

Cursor + Playwright: How to Build Robust Applications with Cursor AI + Playwright
https://www.youtube.com/watch?v=kH4hM0H_WPg

Podcast with the Cursor Team: Cursor Team: Future of Programming with AI | Lex Fridman Podcast #447
https://www.youtube.com/watch?v=oFfVt3S51T4

.cursorrules

Use a .cursorrules file in the root directory of your project to automatically use its content as context for all Cursor prompts.

It is shared for everyone and subject to git versioning.

Great to guide the AI to code like you’d do

Great to remind the AI about outdated things (like 'use client' on top of client-side files in Nextjs)

Use https://cursor.directory/ to get some sample usage.

The Composer

The Composer feature helps you create and edit multiple files simultaneously, making saving, testing and validating changes easy.

Easy Testing: Save all changes without individually applying changes to them

Creating Tests Together: Develop code and corresponding tests or Storybook components side by side.

Possible use case: It could be useful to add an extra simple/easy API payload field by adding all related files in the context.

Passing React Props: Pass props down through related components easily.

There are three ways to view the composer panel: Expanded, Floating, and Side Bar. I’m sticking with the third one currently.

Tip: Open all related files in your editor. In the Chat or Composer input, press / and select "Reference Open Editors" to include them in the context.

Golden tip: open all related files and add them at once to the context

Leveraging Markdown Files for Context

Include markdown files as instructions to provide the AI with project context.

Enhanced Understanding: Helps the AI grasp the specifics of your project.

Detailed Guidance: Offers more information than usual for better assistance.

Tip: Mention these instruction files in your prompts to incorporate their content.

Watch the start of this video to get a better understanding: https://youtu.be/2PjmPU07KNs

Keeping a Clean Working Directory

Always keep your working directory free of uncommitted changes.

Easy Reversion: Revert unwanted AI changes easily.

Manageable Commits: Make small, focused commits.

Linking to Documentation

Add links to library documentation in your prompts to guide the AI.

Up-to-Date Implementations: Ensures the AI uses the latest methods.

Avoid Deprecated Code: Prevents outdated implementations.

Tip: Include documentation links in your prompts.

Example: "Refer to Library X Documentation to implement the new feature."

Press @ do add a new documentation. We can even share them with the team

Using Voice-to-Text Tools and Chatbots

Utilize tools like Wispr Flow and ChatGPT to streamline your workflow.

Wispr Flow: Transcribes voice to text for faster prompt creation.

ChatGPT: Generates documentation without extensive typing.

Complex Prompts: Provides detailed context for better AI responses.

Tip: Combine voice transcription with chatbots to create and refine prompts efficiently.

Models

Use claude-3.5-sonnet for everything. Sometimes, o1-mini is more helpful when the task involves more thinking. The o1-preview model is pretty expensive in Cursor ($0.40/request), and using it on the ChatGPT Plus website is worthwhile.

(TODO: This is a published draft version of this blog post, I still want to format it better and add images)

Como separar a rede 2.4/5G híbrida da Vivo

Mark Kop — Sat, 31 Aug 2024 18:21:57 +0000

This is for brazilian people who has Vivo as their internet provider ;)

Se você estiver com problemas para configurar algum dispositivo doméstico como Robô Aspirador, Assistente de Voz, Tomada Inteligente, Smart TV ou coisas similares - e você usa um modem da Vivo - pode ser que o seu dispositivo não seja compatível com a rede híbrida 2.4/5G que o modem oferece.

(Imagem: Note as redes com 2.4G/5G ao lado do nome - são redes híbridas)

Tive esse problema com um Robô Aspirador da Xiaomi e é algo recorrente com outros usuários, como podemos ver com esse tópico nesse forum:
https://forum.adrenaline.com.br/threads/problemas-de-conexao-com-o-robo-aspirador-kabum-smart-500-e-700.703527/#post-1076709367

Inclusive, graças a esse fórum, encontrei uma forma de separar essas redes. Nota que nenhum técnico da Vivo que me atendeu soube como configurar e tive que me virar.

Para separar as redes:

Entre na página <endereço de IP do modem>/padrao usando o login support e a senha. O endereço de IP e a senha estão disponível debaixo do modem
Ao entrar nessa página, pode ser que você seja redirecionado para /me_configuracao_avancada.asp. Tudo bem, entre com as credenciais mesmo assim.
Ao logar, você será redirecionado para /avanzada.asp
Lá, entre no menu na esquerda e vá em Wireless Lan - 5G
Então, em AP Settings, você verá que há duas redes com Enabled: a 2.4 e a 5G.
Clique no número index da que está com "2.4" e mude Adm.State para Disable.
Salve clicando em Apply. Nisso o modem deve reiniciar.
Note que se você mudar o nome do Wifi, terá que fazer o processo novamente.

How to use React Server Components components on Storybook 8

Mark Kop — Tue, 21 May 2024 21:31:34 +0000

Let's say you have a NextJS page that uses React Server Components (RSC) and you have to use the async keyword when exporting that page

// app/page.js
export default async function Home() {
  const { clients } = await getHomeContent()
  // ...code that displays clients cards on the home page
}

If you try to import this component/page into Storybook 8, you will get this error:
async/await is not yet supported in Client Components, only Server Components

To get around it, simply enable the experimentalRSC flag on .storybook/main.js

/** @type { import('@storybook/nextjs').StorybookConfig } */
const config = {
  features: {
    experimentalRSC: true,
  },
  // ...other configs
}
export default config

How to use NextAuth useSession on Storybook 8

Mark Kop — Tue, 14 May 2024 21:28:56 +0000

If you want to mock some NextAuth session data so a Story on Storybook 8 behaves as the user is logged in, you can use the <SessionContext> provider in the Story decorator as follows:

  decorators: [
    (Story, context) => {
      return (
        <NextAuthProvider>
          // Put your mocked session data here
          <SessionContext.Provider value={{ data: {} }}>
            <Story />
          </SessionContext.Provider>
        </NextAuthProvider>
      )
    },
  ],

A guy made an addon once, but it's now outdated:
https://github.com/TomFreudenberg/next-auth-mock

How to use NextJS pathname in Storybook 8

Mark Kop — Mon, 29 Apr 2024 20:38:10 +0000

When you're using usePathname from NextJS

import { usePathname } from 'next/navigation'
const pathname = usePathname()

And want to change the pathname for Storybook purposes, update your story as follows:

export const Default = {
  parameters: {
    nextjs: {
      appDirectory: true,
      navigation: {
        pathname: '/games'
      }
    }
  },
  args: { ... }
};

Source: qcatch on Feb 22, 2024
https://github.com/storybookjs/storybook/discussions/25470

DEV Community: Mark Kop

Should I replace my VPS with a Mac mini?

VPS alternatives

What about a Mac mini?

Coding a Feature in 2026

Creating hobby websites in 2025

🧠 Brainstorm with AI agent

🧱 Init a codebase

⚒️ Fixes and features

🌎 Publish and Release

My Top Cursor Tips (Oct 2025)

Why Cursor over Claude Code?

How to 10x Productivity on Cursor

Good pre-prompt

// .cursorrules for a frontend project

// .cursorrules for a blockchain dapp project

Good MCPs

Automation

Other 10x Modifiers

Other Cursor features I don’t use much

See also

My Top Cursor Tips (v0.43)

How to create video transcription with ffmpeg and whisper

Requirements

Installation

macOS

Windows

Linux

Transcription Steps

Model Options

Output Formats

Additional Options

My Top Cursor Tips (v0.43)

📚 Basics

🕵️ Agent

🔧 Use "Reference Open Editors" command

🗒️ Notepads

🛂 Cursor Rules

💬 Pre-prompt

👀 Use Diff of Working State

⚙️ Always check Cursor Settings

💾 Auto Save

📒 Use a Product Requirement Document

🔗 References and other links

Switching Auth Method in Postman dinamically

Cursor Tips

.cursorrules

The Composer

Leveraging Markdown Files for Context

Keeping a Clean Working Directory

Linking to Documentation

Using Voice-to-Text Tools and Chatbots

Models

Como separar a rede 2.4/5G híbrida da Vivo

How to use React Server Components components on Storybook 8

How to use NextAuth useSession on Storybook 8

How to use NextJS pathname in Storybook 8