https://github.com/mrinspection/moussax-snippets
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.
https://github.com/mrinspection/moussax-snippets
nextjs react snippets snippets-collection tanstack-react-query vscode-snippets webstorm-settings
Last synced: 28 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/mrinspection/moussax-snippets
- Owner: MrInspection
- Created: 2025-04-20T08:41:34.000Z (about 2 months ago)
- Default Branch: master
- Last Pushed: 2025-04-20T14:14:51.000Z (about 2 months ago)
- Last Synced: 2025-05-07T18:13:31.012Z (28 days ago)
- Topics: nextjs, react, snippets, snippets-collection, tanstack-react-query, vscode-snippets, webstorm-settings
- Language: TypeScript
- Homepage:
- Size: 1.77 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
---
* [Moussax Snippets](#moussax-snippets)
* [📄 Snippets [11]](#-snippets-11)
* [🧩 Installation](#-installation)
* [VS Code / Cursor Installation](#vs-code--cursor-installation)
* [Step 1: Search User Snippets](#step-1-search-user-snippets)
* [Step 2: Select "Typescript"](#step-2-select-typescript)
* [Step 3: Add the snippets](#step-3-add-the-snippets)
* [Jetbrains IDE Installation](#jetbrains-ide-installation)
* [Step 1: Download the Live Templates](#step-1-download-the-live-templates)
* [Step 2: Import the settings](#step-2-import-the-settings)
* [Step 3: Verify the templates](#step-3-verify-the-templates)
* [Snippets Usage](#snippets-usage)
---
# 📄 Snippets [14]
| 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) |
| `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](snippets/vscode/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](snippets/jetbrains/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.
