├── .eslintrc.json ├── .gitignore ├── README.md ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages ├── api │ └── users.ts └── users.tsx ├── prisma └── schema.prisma ├── serverless.yml └── tsconfig.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["airbnb-typescript"], 3 | "parserOptions": { 4 | "tsconfigRootDir": ".", 5 | "project": "tsconfig.json" 6 | }, 7 | "plugins": [ 8 | "fp", 9 | "modules-newline" 10 | ], 11 | "rules": { 12 | "fp/no-mutating-methods": "warn", 13 | "arrow-body-style": "off", 14 | "class-methods-use-this": "off", 15 | "comma-dangle": ["error", { 16 | "arrays": "always-multiline", 17 | "objects": "always-multiline", 18 | "imports": "always-multiline", 19 | "exports": "always-multiline", 20 | "functions": "always-multiline" 21 | }], 22 | "consistent-return": "off", 23 | "default-case": "off", 24 | "eqeqeq": "warn", 25 | "import/named": "off", 26 | "import/extensions": "off", 27 | "import/prefer-default-export": "off", 28 | "import/order": ["error", { 29 | "groups": ["builtin", "external", "internal", ["index", "sibling", "parent", "object"]], 30 | "alphabetize": {"order": "asc", "caseInsensitive": true}, 31 | "newlines-between": "always" 32 | }], 33 | "import/no-cycle": "off", 34 | "import/no-default-export": "off", // usually "on" 35 | "max-classes-per-file": ["error", 3], 36 | "max-len": ["error", 120], 37 | "no-await-in-loop": ["off"], 38 | "no-bitwise": ["off"], 39 | "no-multi-spaces": ["error", { "ignoreEOLComments": true }], 40 | "no-nested-ternary": "off", 41 | "no-param-reassign": "warn", 42 | "no-plusplus": "off", 43 | "no-restricted-syntax": "off", 44 | "no-shadow": "warn", 45 | "no-undef": "off", 46 | "no-underscore-dangle": "off", 47 | "no-unexpected-multiline": "off", 48 | "no-use-before-define": "off", 49 | "newline-per-chained-call": "off", 50 | "operator-linebreak": ["error", "before"], 51 | "object-curly-newline": ["error", { 52 | "ImportDeclaration": { "multiline": true, "minProperties": 2 }, 53 | "ExportDeclaration": { "multiline": true, "minProperties": 2 } 54 | }], 55 | "object-shorthand": "off", 56 | "prefer-destructuring": "off", 57 | "@typescript-eslint/ban-types": ["warn", {"types": { 58 | "{}": false, 59 | "object": false 60 | }}], 61 | "@typescript-eslint/consistent-type-imports": ["error", { 62 | "prefer": "type-imports" 63 | }], 64 | "@typescript-eslint/indent": ["error", 4, { 65 | "MemberExpression": 0, 66 | "ignoredNodes": ["ConditionalExpression"] 67 | }], 68 | "@typescript-eslint/lines-between-class-members": "off", 69 | "@typescript-eslint/member-ordering": "error", 70 | "@typescript-eslint/no-explicit-any": "warn", 71 | "@typescript-eslint/no-unused-vars": "off", 72 | "@typescript-eslint/no-use-before-define": "off", 73 | "@typescript-eslint/no-shadow": "warn", 74 | "@typescript-eslint/naming-convention": ["error", { 75 | "selector": "default", 76 | "format": null, 77 | "leadingUnderscore": "allow", 78 | "trailingUnderscore": "allow" 79 | }], 80 | "@typescript-eslint/object-curly-spacing": ["error", "never"], 81 | "modules-newline/export-declaration-newline": "error", 82 | "modules-newline/import-declaration-newline": "error", 83 | 84 | "react/react-in-jsx-scope": "off", 85 | "react/jsx-indent": "off" 86 | } 87 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | yarn.lock 5 | package-lock.json 6 | pnpm-lock.yaml 7 | /node_modules 8 | /.pnp 9 | .pnp.js 10 | 11 | # testing 12 | /coverage 13 | 14 | # next.js 15 | /.next/ 16 | /out/ 17 | 18 | # production 19 | /build 20 | 21 | # misc 22 | .DS_Store 23 | *.pem 24 | 25 | # debug 26 | pnpm-debug.log* 27 | npm-debug.log* 28 | yarn-debug.log* 29 | yarn-error.log* 30 | 31 | # local env files 32 | *.env 33 | .env.local 34 | .env.development.local 35 | .env.test.local 36 | .env.production.local 37 | 38 | # hosts 39 | .vercel 40 | .netlify 41 | ._env 42 | 43 | # generated 44 | .serverless 45 | .serverless_nextjs 46 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Prisma + Next.js + Serverless-Next.js AWS Component 2 | 3 | Sample project to deploy a simple [Next.js](https://nextjs.org/) application 4 | with [Prisma](https://www.prisma.io/) to [Amazon Web 5 | Services](https://aws.amazon.com/) using the [Serverless Next.js 6 | Component](https://github.com/serverless-nextjs/serverless-next.js/). 7 | 8 | ## TypeScript 9 | 10 | This template is set up to get started with 11 | [TypeScript](https://www.typescriptlang.org/). However, if you need JS only, you 12 | can rename the `.ts` to `.js`, remove the types, and remove `tsconfig.json`. 13 | Alternatively, you could keep `tsconfig.json` for better type hints. 14 | 15 | ## Database 16 | 17 | ### Provider 18 | 19 | The project is set up to work with a `PostgreSQL` database. If you would like to 20 | change that, head to the `schema.prisma` and change it. 21 | 22 | ### Connect 23 | 24 | At the root of this project, next to your `package.json`, create an `.env` 25 | file. Insert your database environment variables, they will automatically get 26 | deployed. Do not commit this file. 27 | 28 | ``` 29 | DATABASE_URL=postgres://user:password@host:port/db_name 30 | ``` 31 | 32 | ## Deploy 33 | 34 | ``` 35 | npm run deploy 36 | ``` 37 | 38 | ## Hot reload 39 | 40 | ``` 41 | npm run dev 42 | ``` 43 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const {ESBuildMinifyPlugin} = require('esbuild-loader'); 2 | 3 | function useEsbuildLoader(webpack, config, options) { 4 | const loader = config.module.rules.find((rule) => rule.test && rule.test.test('.ts')); 5 | 6 | if (loader) { 7 | loader.use.loader = 'esbuild-loader'; 8 | loader.use.options = options; 9 | config.plugins.push( 10 | new webpack.ProvidePlugin({ 11 | React: 'react', 12 | }), 13 | ); 14 | } 15 | } 16 | 17 | function minifyWithEsbuild(config, target) { 18 | config.optimization = { 19 | minimizer: [new ESBuildMinifyPlugin({target})], 20 | minimize: true, 21 | }; 22 | } 23 | 24 | module.exports = { 25 | future: { 26 | webpack5: false, // TODO binary not found 27 | }, 28 | webpack: (config, {webpack, dev, isServer}) => { 29 | useEsbuildLoader(webpack, config, { 30 | loader: 'tsx', 31 | target: 'es2015', 32 | }); 33 | 34 | if (!dev) { 35 | minifyWithEsbuild(config, 'es2015'); 36 | } 37 | 38 | if (isServer) { 39 | config.externals.push('_http_common'); 40 | } 41 | 42 | return config; 43 | }, 44 | target: 'serverless', 45 | }; 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "prisma-nextjs-serverlessnextjs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "prisma generate && next dev", 7 | "build": "prisma generate && next build", 8 | "start": "prisma generate && next start", 9 | "deploy": "npm run build && serverless" 10 | }, 11 | "dependencies": { 12 | "@prisma/client": "^2.22.0", 13 | "next": "^10.2.0", 14 | "react": "^17.0.2", 15 | "react-dom": "^17.0.2" 16 | }, 17 | "devDependencies": { 18 | "prisma": "^2.22.0", 19 | "@types/node": "^15.0.2", 20 | "@types/react": "^17.0.5", 21 | "typescript": "^4.2.3", 22 | "eslint": "^7.26.0", 23 | "eslint-plugin-fp": "^2.3.0", 24 | "eslint-plugin-import": "^2.22.1", 25 | "eslint-plugin-jsx-a11y": "^6.4.1", 26 | "eslint-plugin-react": "^7.23.2", 27 | "eslint-plugin-react-hooks": "^4.2.0", 28 | "eslint-plugin-modules-newline": "^0.0.6", 29 | "@typescript-eslint/eslint-plugin": "^4.22.1", 30 | "eslint-config-airbnb-typescript": "^12.3.1", 31 | "esbuild-loader": "^2.13.0", 32 | "webpack": "^5.37.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /pages/api/users.ts: -------------------------------------------------------------------------------- 1 | import {PrismaClient} from '@prisma/client'; 2 | import type { 3 | NextApiRequest, 4 | NextApiResponse, 5 | } from 'next'; 6 | 7 | const prisma = new PrismaClient(); 8 | 9 | const handler = async (_req: NextApiRequest, res: NextApiResponse) => { 10 | try { 11 | const data = await prisma.user.findMany(); 12 | 13 | res.status(200).json({data}); 14 | } catch (err) { 15 | res.status(500).json({data: JSON.stringify(err, Object.getOwnPropertyNames(err))}); 16 | } 17 | }; 18 | 19 | export default handler; 20 | -------------------------------------------------------------------------------- /pages/users.tsx: -------------------------------------------------------------------------------- 1 | import {PrismaClient} from '@prisma/client'; 2 | import type {GetServerSideProps} from 'next'; 3 | 4 | const prisma = new PrismaClient(); 5 | 6 | export const getServerSideProps: GetServerSideProps = async (context) => { 7 | try { 8 | const data = await prisma.user.findMany(); 9 | 10 | return { 11 | props: {data}, 12 | }; 13 | } catch (e) { 14 | return { 15 | props: { 16 | data: { 17 | message: e.message, 18 | stack: e.stack, 19 | }, 20 | }, 21 | }; 22 | } 23 | }; 24 | 25 | export default function Home({data}: any) { 26 | return ( 27 |
{JSON.stringify(data)}
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /prisma/schema.prisma: -------------------------------------------------------------------------------- 1 | generator client { 2 | provider = "prisma-client-js" 3 | binaryTargets = ["native", "rhel-openssl-1.0.x"] 4 | } 5 | 6 | datasource db { 7 | provider = "postgresql" 8 | url = env("DATABASE_URL") 9 | } 10 | 11 | model User { 12 | id Int @id @default(autoincrement()) 13 | name String 14 | email String @unique 15 | emailVerified DateTime? @map(name: "email_verified") 16 | image String? 17 | createdAt DateTime @default(now()) @map(name: "created_at") 18 | updatedAt DateTime @default(now()) @map(name: "updated_at") 19 | 20 | @@map(name: "users") 21 | } 22 | 23 | -------------------------------------------------------------------------------- /serverless.yml: -------------------------------------------------------------------------------- 1 | # serverless.yml 2 | 3 | yourProjectName: 4 | component: "@sls-next/serverless-component@1.19.0" 5 | inputs: 6 | minifyHandlers: true 7 | build: 8 | postBuildCommands: 9 | - PDIR=node_modules/.prisma/client/; 10 | LDIR=.serverless_nextjs/api-lambda/; 11 | if [ "$(ls -A $LDIR)" ]; then 12 | mkdir -p $LDIR$PDIR; 13 | cp "$PDIR"query-engine-rhel-* $LDIR$PDIR; 14 | cp "$PDIR"schema.prisma $LDIR$PDIR; 15 | fi; 16 | - PDIR=node_modules/.prisma/client/; 17 | LDIR=.serverless_nextjs/default-lambda/; 18 | if [ "$(ls -A $LDIR)" ]; then 19 | mkdir -p $LDIR$PDIR; 20 | cp "$PDIR"query-engine-rhel-* $LDIR$PDIR; 21 | cp "$PDIR"schema.prisma $LDIR$PDIR; 22 | fi; 23 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | "incremental": false, /* Enable incremental compilation */ 5 | "target": "es2015", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ 6 | "module": "esnext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ 7 | "lib": ["dom", "es6"], /* Specify library files to be included in the compilation. */ 8 | "allowJs": true, /* Allow javascript files to be compiled. */ 9 | "checkJs": false, /* Report errors in .js files. */ 10 | "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 11 | "declaration": true, /* Generates corresponding '.d.ts' file. */ 12 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 13 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 14 | // "outFile": "./", /* Concatenate and emit output to single file. */ 15 | "outDir": "./out", /* Redirect output structure to the directory. */ 16 | "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 17 | // "composite": true, /* Enable project compilation */ 18 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 19 | "removeComments": true, /* Do not emit comments to output. */ 20 | "noEmit": true, /* Do not emit outputs. */ 21 | // "noEmitOnError": true, /* Do not emit outputs if any type checking errors were reported. */ 22 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 23 | "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 24 | "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 25 | 26 | /* Strict Type-Checking Options */ 27 | "strict": true, /* Enable all strict type-checking options. */ 28 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 29 | // "strictNullChecks": true, /* Enable strict null checks. */ 30 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 31 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 32 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 33 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 34 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 35 | "noUncheckedIndexedAccess": true, 36 | 37 | /* Additional Checks */ 38 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 39 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 40 | "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 41 | "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 42 | 43 | /* Module Resolution Options */ 44 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 45 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 46 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 47 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 48 | // "typeRoots": [], /* List of folders to include type definitions from. */ 49 | // "types": [], /* Type declaration files to be included in compilation. */ 50 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 51 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 52 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 53 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 54 | 55 | /* Source Map Options */ 56 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 57 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 58 | "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 59 | "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 60 | 61 | /* Experimental Options */ 62 | "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 63 | "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 64 | 65 | /* Advanced Options */ 66 | "skipLibCheck": true, /* Skip type checking of declaration files. */ 67 | "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */ 68 | "pretty": true, /* Stylize errors and messages using color and context (experimental). */ 69 | "resolveJsonModule": true, /* Enable importing .json files. */ 70 | 71 | // "suppressImplicitAnyIndexErrors": true, 72 | }, 73 | "exclude": [ 74 | "node_modules" 75 | ], 76 | "include": [ 77 | "next-env.d.ts", 78 | "**/*.js", 79 | "**/*.ts", 80 | "**/*.tsx" 81 | ] 82 | } 83 | --------------------------------------------------------------------------------