teable/apps/nextjs-app

The web-app

Intro

Basic demo nextjs nextjs-app, part of the teable.

• Home: Demo/Vercel
• SSR-I18n: Demo/Vercel english | Demo/vercel french
• API: Demo rest/Vercel
• Changelog

Quick start

For rest/api database access be sure to start docker-compose up main-db, see detailed instructions (seeding, docker, supabase...) in the @teable/db-main-prisma README.

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

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: 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: {
    "@teable/sdk": "workspace:*",
    "@teable/db-main-prisma": "workspace:*",
    "@teable/ui-lib": "workspace:*",
  },
}

And their counterparts in tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@teable/ui-lib/*": ["../../../packages/ui-lib/src/*"],
      "@teable/ui-lib": ["../../../packages/ui-lib/src/index"],
      "@teable/sdk/*": ["../../../packages/sdk/src/*"],
      "@teable/sdk": ["../../../packages/sdk/src/index"],
      "@teable/db-main-prisma/*": ["../../../packages/db-main-prisma/src/*"],
      "@teable/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-sdl to have the graphiql console.

Try

query {
  allPoems {
    id
    title
  }
}

Some tips

I18N & typings

Translations are handled by next-i18next. See the next-i18next.config.js. The keys autocompletion and typechecks are enabled in ./src/typings/react-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.js
│       ├── tsconfig.json    (local paths enabled)
│       └── tailwind.config.js
└── packages  (monorepo's packages that this app is using)
    ├── sdk
    ├── main-db-prisma
    └── ui-lib

Develop

$ yarn dev