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.
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 ) |
Grab the snippets zip: vscode-snippets.zip and follow the steps below.
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.
Download the settings.zip file.
-
In your JetBrains IDE, go to
File > Manage IDE Settings > Import Settings
. -
Select settings.zip and click OK.
-
Restart the IDE when prompted.
- Navigate to
File > Settings > Editor > Live Templates
. - You should see a group named
Moussax React Snippets (Next.js)
.
- Open a supported file (
.ts
,.tsx
). - Type the snippet prefix (e.g.,
com
,comb
,n404
). - Press
Tab
and voilà, snippet code appears.