v2.4 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