Rikard-Johansson97 / nextemplates

Next 14+ snippets

Home Page:https://marketplace.visualstudio.com/items?itemName=RikardJohansson.nextemplates

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

๐Ÿง™โ€โ™‚๏ธ NexTemplates for Next.js 13+

โœจ Welcome to NexTemplatesโ€”your magical extension for VS Code that propels your Next.js 13+ development journey to the stratosphere. Say goodbye to monotonous boilerplate and hello to instant scaffolding!

Banner

๐ŸŽฉ Features: Where Magic Happens!

NexTemplates harnesses the arcane arts to transform simple prefixes into robust Next.js components. Just whisper the right incantation, and behold as your spell manifests!

prefix summons
npc Next page component
npcp Next Page component with props
npcpp Next Page component with props with params
ncc Next Client component
nccp Next Client component with props
nsc Next Server component
nscp Next Server component with props
nasc Next Async server component
nascp Next Async server component with props
nlcp Next Layout component with props
nlc Next Loading component
nmw Next Middleware
nsmd Next Static metadata
ngmd Next Generated metadata
nec Next error component
ngec Next global-error component
nnfc Next not-found component
nasac Next async server action component
nasaf Next async server action function

๐ŸŒŒ Mystic Tip: For a visual spectacle of these spells, let the GIF above guide you!

๐Ÿ“œ Prerequisites

Before wielding this powerful extension, ensure you've mastered the scrolls of Next.js and React. If these aren't in your grimoire yet, best obtain them first.

๐Ÿ”ฎ Usage

  1. Installation: Invoke the NexTemplates extension from the VS Code marketplace.
  2. Casting Spells: In any typescript file, type your chosen prefix (like npc for a new page component). Hit Tab, and watch the magic unfold.
  3. Customization: Each spell (snippet) contains placeholders ($1, $2, etc.) that guide your incantations. Navigate between them using the Tab key to customize the generated component.

๐Ÿ“Œ Enhancements

  1. GitHub Copilot Synergy: Combine the might of NexTemplates with GitHub Copilot to ascend to coding divinity. Let Copilot complete your spells and incantations, making the coding process truly ethereal.
  2. Optimal Setting: To ensure your spells are woven seamlessly, consider setting "editor.suggest.snippetsPreventQuickSuggestions": true in your VS Code settings. This arcane tweak ensures that the auto-suggestions don't interfere with the magic of your snippets.
  3. Conformity with Best Practices: NexTemplates diligently follows the practices laid out in the Vercel Style Guide. Moreover, the snippets are conjured directly from the sacred texts of the Next.js documentation, ensuring your components are not only spellbinding but also crafted following the sacred lore.

๐ŸŽ‰ Concluding the Ritual

With NexTemplates, each line of code feels like a mystical chant, and redundant code becomes folklore. Embrace the enchantment and let your Next.js journey be filled with wonder.

May your code be forever enchanted! โœจ