doc: Add documentation about client-generator-nextjs

client-generator/index.md

@@ -10,6 +10,7 @@ It is able to generate apps using the following frontend stacks:
 
 * [React with Redux](react.md)
 * [React Native](react-native.md)
+* [Next.js](nextjs.md)
 * [Vue.js](vuejs.md)
 
 Client Generator works especially well with APIs built with the [API Platform](https://api-platform.com) framework.

client-generator/nextjs.md

@@ -0,0 +1,109 @@
+# Next.js Generator
+
+![List screenshot](images/nextjs/client-generator-nextjs-list.png)
+
+The Next.js Client Generator generates routes and components for Server Side Rendered applications using [Next.js](https://zeit.co/blog/next)
+
+## Install
+
+### Next + Express Server
+
+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:  
+
+```bash
+$ npx create-next-app --example custom-server-express your-app-name
+# or
+$ yarn create next-app --example custom-server-express your-app-name
+```
+
+### Enabling Typescript
+
+Install typescript dependencies  
+
+```bash
+$ yarn add @types/next @zeit/next-typescript
+```
+
+Enable Typescript in your Next.js configuration file (`next.config.js`):
+
+```javascript
+const withTypescript = require('@zeit/next-typescript');
+
+module.exports = withTypescript();
+```
+
+Create a `.babelrc` file to store Babel configuration:
+```json
+{
+  "presets": [
+    "next/babel",
+    "@zeit/next-typescript/babel"
+  ]
+}
+```
+
+Create a `tsconfig.json` file to store Typescript configuration:
+```json
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "jsx": "preserve",
+    "lib": ["dom", "es2017"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "preserveConstEnums": true,
+    "removeComments": false,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "target": "esnext",
+    "typeRoots": [
+      "node_modules/@types"
+    ]
+  }
+}
+```
+
+### Installing the Generator Dependencies
+
+Install required dependencies:
+
+```bash
+$ yarn add lodash.get lodash.has @types/lodash isomorphic-unfetch
+```
+
+## Starting the Project
+
+You can launch the server with 
+```bash
+$ yarn dev
+```
+
+and access it through `http://localhost:3000`
+
+## Generating Routes
+
+```bash
+$ npx @api-platform/client-generator https://demo.api-platform.com src/ --generator next --resource book
+# Replace the URL by the entrypoint of your Hydra-enabled API
+```
+
+> Note: Omit the resource flag to generate files for all resource types exposed by the API.
+
+If your express server is compatible with the `custom-server-express` Next.js example, you can use the `server-path` flag to specify path to the server file. Routes will be added automatically to this file, otherwise, you will receive some hints on how to them to your own custom server.
+
+```bash
+$ npx @api-platform/client-generator https://demo.api-platform.com src/ --generator next --server-path ./server.js
+```
+
+Go to `https://localhost:3000/books/` to start using your app.
+That's it!
+
+## Screenshots
+
+![List](images/nextjs/client-generator-nextjs-list.png)  
+![Show](images/nextjs/client-generator-nextjs-show.png)

client-generator/react-native.md

@@ -27,7 +27,7 @@ $ yarn add redux react-redux redux-thunk redux-form react-native-elements react-
 In the app directory, generate the files for the resource you want:
 
 ```bash
-$ npx @api-platform/client-generator https://demo.api-platform.com . -g react-native --resource book
+$ npx @api-platform/client-generator https://demo.api-platform.com . --generator react-native --resource book
 ```
 
 Replace the URL with the entrypoint of your Hydra-enabled API.

client-generator/typescript.md

@@ -5,7 +5,7 @@ The TypeScript Generator allows you to create [TypeScript interfaces](https://ww
 To do so, run the client generator:
 
 ```bash
-$ npx @api-platform/client-generator -g typescript https://demo.api-platform.com src/ --resource foo
+$ npx @api-platform/client-generator --generator typescript https://demo.api-platform.com src/ --resource foo
 # Replace the URL by the entrypoint of your Hydra-enabled API
 # "src/" represents where the interfaces will be generated
 # Omit the resource flag to generate files for all resource types exposed by the API
@@ -20,7 +20,7 @@ NOTE: If you are not sure what the entrypoint is, see [Troubleshooting](troubles
 Assuming you have 2 resources in your application, `Foo` and `Bar`, when you run
 
 ```bash
-npx @api-platform/client-generator -g typescript https://demo.api-platform.com src/
+npx @api-platform/client-generator --generator typescript https://demo.api-platform.com src/
 ```
 
 you will obtain 2 `.ts` files arranged as following:

client-generator/vuejs.md

@@ -27,7 +27,7 @@ Reference the Bootstrap CSS stylesheet in `public/index.html` (optional):
 
 In the app directory, generate the files for the resource you want:
 
-    $ generate-api-platform-client -g vue https://demo.api-platform.com src/ --resource foo
+    $ generate-api-platform-client --generator vue https://demo.api-platform.com src/ --resource foo
     # Replace the URL by the entrypoint of your Hydra-enabled API
     # Omit the resource flag to generate files for all resource types exposed by the API