Skip to content

Commit fc503c2

Browse files
committed
doc: Add documentation about client-generator-nextjs
1 parent 28756b4 commit fc503c2

File tree

4 files changed

+103
-0
lines changed

4 files changed

+103
-0
lines changed
Loading
Loading

client-generator/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ It is able to generate apps using the following frontend stacks:
1010

1111
* [React with Redux](react.md)
1212
* [React Native](react-native.md)
13+
* [Next.js](nextjs.md)
1314
* [Vue.js](vuejs.md)
1415

1516
Client Generator works especially well with APIs built with the [API Platform](https://api-platform.com) framework.

client-generator/nextjs.md

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
# Next.js Generator
2+
3+
![List screenshot](images/nextjs/client-generator-nextjs-list.png)
4+
5+
The Next.js Client Generator generates routes and components for Server Side Rendered applications using [Next.js](https://zeit.co/blog/next)
6+
7+
## Install
8+
9+
### Next + Express server
10+
11+
Create a [Next.js application with express server](https://github.com/zeit/next.js/tree/canary/examples/custom-server-express). The easiest way is to execute:
12+
13+
```bash
14+
$ npx create-next-app --example custom-server-express your-app-name
15+
# or
16+
$ yarn create next-app --example custom-server-express your-app-name
17+
```
18+
19+
### Enable Typescript
20+
21+
Install typescript dependencies
22+
23+
```bash
24+
$ yarn add @types/next @zeit/next-typescript
25+
```
26+
27+
Enable Typescript in your Next.js configuration file ("next.config.js")
28+
```javascript
29+
const withTypescript = require('@zeit/next-typescript');
30+
31+
module.exports = withTypescript();
32+
```
33+
34+
Create a ".babelrc" file to store Babel configuration
35+
```json
36+
{
37+
"presets": [
38+
"next/babel",
39+
"@zeit/next-typescript/babel"
40+
]
41+
}
42+
```
43+
44+
Create a "tsconfig.json" file to store Typescript configuration
45+
```json
46+
{
47+
"compilerOptions": {
48+
"allowJs": true,
49+
"allowSyntheticDefaultImports": true,
50+
"jsx": "preserve",
51+
"lib": ["dom", "es2017"],
52+
"module": "esnext",
53+
"moduleResolution": "node",
54+
"noEmit": true,
55+
"noUnusedLocals": true,
56+
"noUnusedParameters": true,
57+
"preserveConstEnums": true,
58+
"removeComments": false,
59+
"skipLibCheck": true,
60+
"sourceMap": true,
61+
"strict": true,
62+
"target": "esnext",
63+
"typeRoots": [
64+
"node_modules/@types"
65+
]
66+
}
67+
}
68+
```
69+
70+
### Generator dependencies
71+
72+
Install required dependencies:
73+
74+
```bash
75+
$ yarn add lodash @types/lodash isomorphic-unfetch
76+
```
77+
78+
## Launch
79+
80+
You can launch the server with
81+
```bash
82+
$ yarn dev
83+
```
84+
85+
and access it through [http://localhost:3000](http://localhost:3000)
86+
87+
## Generating routes
88+
89+
```bash
90+
$ npx @api-platform/client-generator https://demo.api-platform.com src/ -g next --resource book
91+
# Replace the URL by the entrypoint of your Hydra-enabled API
92+
```
93+
94+
> Note: Omit the resource flag to generate files for all resource types exposed by the API.
95+
96+
Go to `https://localhost:3000/books/` to start using your app.
97+
That's it!
98+
99+
## Screenshots
100+
101+
![List](images/nextjs/client-generator-nextjs-list.png)
102+
![Show](images/nextjs/client-generator-nextjs-show.png)

0 commit comments

Comments
 (0)