nextjs-app

The web-app

Intro

Basic demo of a nextjs app, part of the nextjs-monorepo-example.

• Home: Demo/Vercel
• SSR-I18n: Demo/Vercel english | Demo/vercel french
• REST API: Demo rest/Vercel
• GRAPHIQL (pothos): Demo/Vercel
• Changelog

Quick start

$ yarn install
$ cd apps/nextjs-app
$ yarn dev

Backend

For rest/api database access be sure to start

docker-compose up main-db

To create the database and seed it: see the @your-org/db-main-prisma README.

Features

Some common features that have been enabled to widen monorepo testing scenarios.

• Api routes: some api routes for rest.
• I18n: based on next-i18next
• Styling: Emotion v11 support with critical path extraction enabled.
• Styling: Tailwind v3 with JIT mode enabled and common plugins.
• Security: next-secure-headers with basic defaults.
• Seo: next-seo
• Tests: jest + ts-jest + @testing-library/react
• E2E: Playwright

Monorepo deps

This app relies on packages in the monorepo, see detailed instructions in README.md

{
  dependencies: {
    "@your-org/core-lib": "workspace:*",
    "@your-org/db-main-prisma": "workspace:*",
    "@your-org/ui-lib": "workspace:*",
  },
}

And their counterparts in tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@your-org/ui-lib/*": ["../../../packages/ui-lib/src/*"],
      "@your-org/ui-lib": ["../../../packages/ui-lib/src/index"],
      "@your-org/core-lib/*": ["../../../packages/core-lib/src/*"],
      "@your-org/core-lib": ["../../../packages/core-lib/src/index"],
      "@your-org/db-main-prisma/*": ["../../../packages/db-main-prisma/src/*"],
      "@your-org/db-main-prisma": [
        "../../../packages/db-main-prisma/src/index",
      ],
    },
  },
}

API routes

Rest api

Try this route http://localhost:3000/api/rest/poem

Graphql (sdl)

In development just open http://localhost:3000/api/graphql to have the graphiql console.

Try

query {
  getUser(id: 1) {
    id
    email
  }
}

Some tips

I18N & typings

Translations are handled by next-i18next. See the next-i18next.config.mjs. The keys autocompletion and typechecks are enabled in ./src/types.d/i18next.d.ts.

Structure

.
├── apps
│   └── nextjs-app
│       ├── public/
│       │   └── locales/
│       ├── src/
│       │   ├── backend/*     (backend code)
│       │   ├── components/*
│       │   ├── features/*    (regrouped by context)
│       │   └── pages/api     (api routes)
│       ├── .env
│       ├── .env.development
│       ├── (.env.local)*
│       ├── next.config.mjs
│       ├── next-i18next.config.mjs
│       ├── tsconfig.json    (local paths enabled)
│       └── tailwind.config.js
└── packages  (monorepo's packages that this app is using)
    ├── core-lib
    ├── main-db-prisma
    └── ui-lib

Develop

$ yarn dev