|
| 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 | +### 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 | + |
| 102 | + |
0 commit comments