Next.js Generator

List screenshot

The Next.js generator scaffolds components for server-side rendered (SSR) applications using Next.js.

Next.js ジェネレーターは、Next.js を使用してサーバー側でレンダリングされる (SSR) アプリケーションのコンポーネントを足場にします。

Install

The easiest way to get started is to install the API Platform distribution. It contains a Next.js skeleton generated with Create Next App, a development Docker container to serve the webapp, and all the API Platform components you may need, including an API server supporting Hydra and OpenAPI.

開始する最も簡単な方法は、API プラットフォーム ディストリビューションをインストールすることです。これには、Create Next App で生成された Next.js スケルトン、Web アプリケーションを提供する開発用 Docker コンテナ、必要なすべての API プラットフォーム コンポーネント (API サーバーを含む) が含まれています。 Hydra と OpenAPI。

If you use API Platform, jump to the next section!

API Platform を使用している場合は、次のセクションにジャンプしてください。

Alternatively, create a Next.js application by executing:

または、次を実行して Next.js アプリケーションを作成します。

# using pnpm (recommended)
pnpm create next-app --typescript
# or using npm
npm init next-app --typescript
# or using yarn
yarn create next-app --typescript

Install the required dependencies:

必要な依存関係をインストールします。

# using pnpm
pnpm install isomorphic-unfetch formik react-query
# or using npm
npm install isomorphic-unfetch formik react-query
# or using yarn
yarn add isomorphic-unfetch formik react-query

The generated HTML will contain Tailwind CSS classes. Optionnaly, follow the Tailwind installation guide for NextJS projects (Tailwind is preinstalled in the API Platform distribution)

生成された HTML には、Tailwind CSS クラスが含まれます。必要に応じて、NextJS プロジェクトの Tailwind インストール ガイドに従います (Tailwind は API プラットフォーム ディストリビューションにプリインストールされています)。

Generating Routes

If you use the API Platform distribution, generating all the code you need for a given resource is as simple as running the following command:

API プラットフォーム ディストリビューションを使用する場合、次のコマンドを実行するだけで、特定のリソースに必要なすべてのコードを簡単に生成できます。

docker compose exec pwa \
    pnpm create @api-platform/client --resource book -g next

Omit the resource flag to generate files for all resource types exposed by the API.

API によって公開されるすべてのリソース タイプのファイルを生成するには、リソース フラグを省略します。

If you don't use the standalone installation, run the following command instead:

スタンドアロン インストールを使用しない場合は、代わりに次のコマンドを実行します。

# using pnpm
pnpm create @api-platform/client https://demo.api-platform.com . --generator next --resource book
# or using npm
npm init @api-platform/client https://demo.api-platform.com . -- --generator next --resource book
# or using yarn
yarn create @api-platform/client https://demo.api-platform.com . --generator next --resource book

Replace the URL by the entrypoint of your Hydra-enabled API. You can also use an OpenAPI documentation with -f openapi3.

URL を Hydra 対応 API のエントリポイントに置き換えます。-f openapi3 で OpenAPI ドキュメントを使用することもできます。

The code has been generated, and is ready to be executed!

コードが生成され、実行する準備が整いました!

Add the layout to the app:

アプリにレイアウトを追加します。

import type { AppProps } from "next/app";
import type { DehydratedState } from "react-query";

import Layout from "../components/common/Layout";

const App = ({ Component, pageProps }: AppProps<{dehydratedState: DehydratedState}>) => (
  <Layout dehydratedState={pageProps.dehydratedState}>
    <Component {...pageProps} />
  </Layout>
);

export default App;

Starting the Project

You can launch the server with

でサーバーを起動できます

# using pnpm
pnpm dev
# or using npm
npm run dev
# or using yarn
yarn dev

Go to http://localhost:3000/books/ to start using your app.

http://localhost:3000/books/ に移動して、アプリの使用を開始します。

Screenshots

List Show