Skip to content

I got tired of typing the same thing over and over again to create my next.js projects (page layouts, etc...), so I created snippets to code faster.

Notifications You must be signed in to change notification settings

MrInspection/moussax-snippets

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Moussax Snippets

I got tired of typing the same stuff over and over again. I wanted quick, memorable snippets with abbreviations that made sense — so I built my own collection.



📄 Snippets [16]

Note

The jetbrains version of the snippets contains additional snippets such as ustat for useState and more...

Name Prefix Description
component com Base component boilerplate
component-with-props comp TypeScript component with props type
component-with-base comb Component with children and className props (using cn utility)
commponent-with-props-children comc Create base TypeScript component with props children.
server-component coms Create a server component
not-found-page n404 Nextj.js 404 error page layout
error-page nerr Next.js Generic error boundary page with reset support
next-layout-page nlay Base layout file with children and async params
next-loading-page nloa Loading state page (used in Next.js route loading)
next-page npag Base page component using params
next-route-handler nrou API route handler for GET requests using NextResponse
providers prov Global provider component with React Query setup (requires @tanstack/react-query)
zod-schema schem Create a Zod schema and infer the type (requires zod library)
tanstack-useMutation nmut Create a tanstack useMutation template (requires @tanstack/react-query)
tanstack-useQuery nquer Create a tanstack useQuery template (requires @tanstack/react-query)

🧩 Installation

VS Code / Cursor Installation

Grab the snippets zip: vscode-snippets.zip and follow the steps below.

Step 1: Search User Snippets

Step 2: Select "Typescript"

Step 3: Add the snippets

You will right-click and then select "Reveal in Finder" on macOS or "Reveal in Explorer" for Windows

  • In the opened folder, drag and drop vscode-snippets.zip and extract its contents.
  • Restart VS Code (if needed).

Now you can drag-n-drop mes files vscode-snippets in the same folder as our current file. And voila you have snippets.


Jetbrains IDE Installation

Step 1: Download the Live Templates

Download the settings.zip file.

Step 2: Import the settings

  • In your JetBrains IDE, go to File > Manage IDE Settings > Import Settings.

  • Select settings.zip and click OK.

  • Restart the IDE when prompted.

Step 3: Verify the templates

  • Navigate to File > Settings > Editor > Live Templates.
  • You should see a group named Moussax React Snippets (Next.js).

Snippets Usage

  • Open a supported file (.ts, .tsx).
  • Type the snippet prefix (e.g., com, comb, n404).
  • Press Tab and voilà, snippet code appears.

About

I got tired of typing the same thing over and over again to create my next.js projects (page layouts, etc...), so I created snippets to code faster.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published