|
| 1 | +# Next.js Generator |
| 2 | + |
| 3 | + |
| 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 | +### Enabling 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 | + |
| 29 | +```javascript |
| 30 | +const withTypescript = require('@zeit/next-typescript'); |
| 31 | + |
| 32 | +module.exports = withTypescript(); |
| 33 | +``` |
| 34 | + |
| 35 | +Create a `.babelrc` file to store Babel configuration: |
| 36 | +```json |
| 37 | +{ |
| 38 | + "presets": [ |
| 39 | + "next/babel", |
| 40 | + "@zeit/next-typescript/babel" |
| 41 | + ] |
| 42 | +} |
| 43 | +``` |
| 44 | + |
| 45 | +Create a `tsconfig.json` file to store Typescript configuration: |
| 46 | +```json |
| 47 | +{ |
| 48 | + "compilerOptions": { |
| 49 | + "allowJs": true, |
| 50 | + "allowSyntheticDefaultImports": true, |
| 51 | + "jsx": "preserve", |
| 52 | + "lib": ["dom", "es2017"], |
| 53 | + "module": "esnext", |
| 54 | + "moduleResolution": "node", |
| 55 | + "noEmit": true, |
| 56 | + "noUnusedLocals": true, |
| 57 | + "noUnusedParameters": true, |
| 58 | + "preserveConstEnums": true, |
| 59 | + "removeComments": false, |
| 60 | + "skipLibCheck": true, |
| 61 | + "sourceMap": true, |
| 62 | + "strict": true, |
| 63 | + "target": "esnext", |
| 64 | + "typeRoots": [ |
| 65 | + "node_modules/@types" |
| 66 | + ] |
| 67 | + } |
| 68 | +} |
| 69 | +``` |
| 70 | + |
| 71 | +### Installing the Generator Dependencies |
| 72 | + |
| 73 | +Install required dependencies: |
| 74 | + |
| 75 | +```bash |
| 76 | +$ yarn add lodash.get lodash.has @types/lodash isomorphic-unfetch |
| 77 | +``` |
| 78 | + |
| 79 | +## Starting the Project |
| 80 | + |
| 81 | +You can launch the server with |
| 82 | +```bash |
| 83 | +$ yarn dev |
| 84 | +``` |
| 85 | + |
| 86 | +and access it through `http://localhost:3000` |
| 87 | + |
| 88 | +## Generating Routes |
| 89 | + |
| 90 | +```bash |
| 91 | +$ npx @api-platform/client-generator https://demo.api-platform.com src/ --generator next --resource book |
| 92 | +# Replace the URL by the entrypoint of your Hydra-enabled API |
| 93 | +``` |
| 94 | + |
| 95 | +> Note: Omit the resource flag to generate files for all resource types exposed by the API. |
| 96 | +
|
| 97 | +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. |
| 98 | + |
| 99 | +```bash |
| 100 | +$ npx @api-platform/client-generator https://demo.api-platform.com src/ --generator next --server-path ./server.js |
| 101 | +``` |
| 102 | + |
| 103 | +Go to `https://localhost:3000/books/` to start using your app. |
| 104 | +That's it! |
| 105 | + |
| 106 | +## Screenshots |
| 107 | + |
| 108 | + |
| 109 | + |
0 commit comments