Api Platform conference
Register now
v2.4 Next.js Generator
API Platform Conference
September 19-20, 2024 | Lille & online

The international conference on the API Platform Framework

API Platform Conference 2024: meet the best PHP, JavaScript and API experts

Learn more about the event, register for the conference, and get ready for two days of inspiration, ideas, and knowledge-sharing with our incredible lineup of renowned specialists and advocates.

Register now

Next.js Generator

List screenshot

The Next.js Client Generator generates routes and components for Server Side Rendered applications using Next.js

Install

Next + Express Server

Create a Next.js application with express server. The easiest way is to execute:

$ 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

$ yarn add @types/next @zeit/next-typescript

Enable Typescript in your Next.js configuration file (next.config.js):

const withTypescript = require('@zeit/next-typescript');

module.exports = withTypescript();

Create a .babelrc file to store Babel configuration:

{
  "presets": [
    "next/babel",
    "@zeit/next-typescript/babel"
  ]
}

Create a tsconfig.json file to store Typescript configuration:

{
  "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:

$ yarn add lodash.get lodash.has @types/lodash isomorphic-unfetch

Starting the Project

You can launch the server with

$ yarn dev

and access it through http://localhost:3000

Generating Routes

$ 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.

$ 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
Show

You can also help us improve the documentation of this page.

Made with love by

Les-Tilleuls.coop can help you design and develop your APIs and web projects, and train your teams in API Platform, Symfony, Next.js, Kubernetes and a wide range of other technologies.

Learn more

Copyright © 2023 Kévin Dunglas

Sponsored by Les-Tilleuls.coop