Skip to content

Commit fce48dd

Browse files
committed
✨ Add next.js snippets (#14)
The snippets which will be added are `getServerSideProps`, `getStaticPaths` and `getStaticProps`.
1 parent 89d6dd0 commit fce48dd

File tree

3 files changed

+143
-20
lines changed

3 files changed

+143
-20
lines changed

Diff for: CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,20 @@
22

33
## [Unreleased]
44

5+
### Added
6+
7+
- Add `getServerSideProps`, `getStaticPaths` and `getStaticProps` snippets
8+
[[#14](https://github.com/mheob/vscode-snippets/pull/14)]
9+
510
### Changed
611

712
- Use json as file extension for the source snippets files
13+
[[#13](https://github.com/mheob/vscode-snippets/pull/13)]
814

915
### Fixed
1016

1117
- Add missing return type to the React Function Component in the readme
18+
[[#11](https://github.com/mheob/vscode-snippets/pull/11)]
1219

1320
## [1.0.2] - 2021-08-31
1421

Diff for: README.md

+80-20
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,86 @@ environment in [VS Code](https://code.visualstudio.com/).
1717

1818
## Snippets List for JS/TS
1919

20+
### Components
21+
22+
#### `rfc⇥`
23+
24+
Creates a React Functional Component
25+
26+
Only for languages: `.tsx`
27+
28+
```tsx
29+
type MyDynamicComponentNameProps = { … }
30+
31+
export const MyDynamicComponentName = ({ … }: MyDynamicComponentNameProps): JSX.Element => {
32+
return (
33+
<div>$0</div>
34+
)
35+
}
36+
37+
export default MyDynamicComponentName
38+
```
39+
40+
#### `getServerSideProps⇥`
41+
42+
Adds the `getServerSideProps` function
43+
44+
Only for languages: `.tsx`
45+
46+
```tsx
47+
export const getServerSideProps: GetServerSideProps<…> = async (context) => {
48+
const data:= {};
49+
50+
if (!data) {
51+
return {
52+
notFound: true,
53+
}
54+
}
55+
56+
return {
57+
props: {
58+
...data,
59+
},
60+
};
61+
};
62+
```
63+
64+
#### `getStaticPaths⇥`
65+
66+
Adds the `getStaticPaths` function
67+
68+
Only for languages: `.tsx`
69+
70+
```tsx
71+
export const getStaticPaths: GetStaticPaths = async () => {
72+
return {
73+
paths: [
74+
{
75+
params: {},
76+
},
77+
],
78+
};
79+
};
80+
```
81+
82+
#### `getStaticProps⇥`
83+
84+
Adds the `getStaticProps` function
85+
86+
Only for languages: `.tsx`
87+
88+
```tsx
89+
export const getStaticProps: GetStaticProps<…> = async () => {
90+
const data:= {};
91+
92+
return {
93+
props: {
94+
...data,
95+
},
96+
};
97+
};
98+
```
99+
20100
### Common
21101

22102
| Trigger | Content | Only for languages |
@@ -73,26 +153,6 @@ environment in [VS Code](https://code.visualstudio.com/).
73153
| `useState⇥` | create `useState` hook |
74154
| `useTranslation⇥` | create `useTranslation` hook (part of [react.i18next](https://react.i18next.com/)) |
75155

76-
### React Components
77-
78-
#### `rfc⇥`
79-
80-
Creates a React Functional Component
81-
82-
Only for languages: `.tsx`
83-
84-
```.tsx
85-
type MyDynamicComponentNameProps = { … }
86-
87-
export const MyDynamicComponentName = ({ … }: MyDynamicComponentNameProps): JSX.Element => {
88-
return (
89-
<div>$0</div>
90-
)
91-
}
92-
93-
export default MyDynamicComponentName
94-
```
95-
96156
## Snippets List for Markdown
97157

98158
| Trigger | Content |

Diff for: src/typescript/nextjs.json

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
{
2+
"Add getServerSideProps function": {
3+
"prefix": "getServerSideProps",
4+
"body": [
5+
"export const getServerSideProps: GetServerSideProps$0<${1:InsertPageProps}> = async (context) => {",
6+
" const data: ${1:InsertPageProps} = {}",
7+
"",
8+
" if (!data) {",
9+
" return {",
10+
" notFound: true,",
11+
" }",
12+
" }",
13+
"",
14+
" return {",
15+
" props: {",
16+
" ...data,",
17+
" },",
18+
" }",
19+
"}",
20+
""
21+
],
22+
"description": "Add getServerSideProps function"
23+
},
24+
"Add getStaticPaths function": {
25+
"prefix": "getStaticPaths",
26+
"body": [
27+
"export const getStaticPaths: GetStaticPaths$0 = async () => {",
28+
" return {",
29+
" paths: [",
30+
" { ",
31+
" params: {}",
32+
" }",
33+
" ],",
34+
" };",
35+
"}",
36+
""
37+
],
38+
"description": "Add getStaticPaths function"
39+
},
40+
"Add getStaticProps function": {
41+
"prefix": "getStaticProps",
42+
"body": [
43+
"export const getStaticProps: GetStaticProps$0<${1:InsertPageProps}> = async () => {",
44+
" const data: ${1:InsertPageProps} = {}",
45+
"",
46+
" return {",
47+
" props: {",
48+
" ...data,",
49+
" },",
50+
" }",
51+
"}",
52+
""
53+
],
54+
"description": "Add getStaticProps function"
55+
}
56+
}

0 commit comments

Comments
 (0)