๐งโโ๏ธ 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!
๐ฉ 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
- Installation: Invoke the NexTemplates extension from the VS Code marketplace.
- Casting Spells: In any
typescript
file, type your chosen prefix (likenpc
for a new page component). HitTab
, and watch the magic unfold. - Customization: Each spell (snippet) contains placeholders (
$1
,$2
, etc.) that guide your incantations. Navigate between them using theTab
key to customize the generated component.
๐ Enhancements
- 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.
- 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. - 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! โจ