├── .gitignore ├── .prettierrc.js ├── README.md ├── components └── Song.js ├── package.json ├── pages ├── _app.js ├── index.js └── songs │ └── [id].js ├── prisma ├── dev.db └── schema.prisma └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .vercel 2 | .next 3 | node_modules 4 | .DS_Store -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'always', 3 | singleQuote: true, 4 | tabWidth: 2, 5 | trailingComma: 'none' 6 | }; 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Prisma + Next.js 2 | 3 | > 🚀 Static site with Next.js 9.4 and Prisma. 4 | 5 | ## Built With 6 | 7 | - [Next.js](https://nextjs.org/) 8 | - [Prisma](https://prisma.io/) 9 | - [Chakra UI](https://chakra-ui.com/) 10 | - [Vercel](https://vercel.com) 11 | 12 | ## Requirements 13 | 14 | - Node 10+ 15 | - Yarn (or NPM if you prefer) 16 | 17 | ## Getting Started 18 | 19 | After cloning the repository, you can run `yarn` to install the dependencies and then start the application with `yarn dev`. 20 | 21 | ```bash 22 | $ git clone https://github.com/leerob/next-prisma.git 23 | $ yarn 24 | $ yarn dev 25 | ``` 26 | 27 | You are now able to view the application at http://localhost:3000. 28 | -------------------------------------------------------------------------------- /components/Song.js: -------------------------------------------------------------------------------- 1 | import { ListItem, Image, Flex, Text, Stack, Heading } from '@chakra-ui/core'; 2 | import NextLink from 'next/link'; 3 | 4 | const Song = ({ id, name, artist, albumCoverUrl }) => ( 5 | 12 | 13 | 14 | {name} 23 | 24 | 25 | {name} 26 | 27 | {artist.name} 28 | 29 | 30 | 31 | 32 | ); 33 | 34 | export default Song; 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "prisma-next", 3 | "description": "Static site with Next.js 9.3 and Prisma.", 4 | "version": "0.0.0", 5 | "author": { 6 | "name": "Lee Robinson", 7 | "email": "me@leerob.io", 8 | "url": "https://leerob.io" 9 | }, 10 | "license": "MIT", 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/leerob/prisma-next.git" 14 | }, 15 | "engines": { 16 | "node": ">=10.0.0" 17 | }, 18 | "scripts": { 19 | "dev": "next", 20 | "build": "next build", 21 | "start": "next start", 22 | "db": "prisma studio --experimental", 23 | "db-save": "prisma migrate save --experimental", 24 | "db-up": "prisma migrate up --experimental", 25 | "generate": "prisma generate" 26 | }, 27 | "dependencies": { 28 | "@chakra-ui/core": "0.8.0", 29 | "@emotion/core": "10.0.28", 30 | "@emotion/styled": "10.0.27", 31 | "@prisma/client": "2.1.1", 32 | "emotion-theming": "10.0.27", 33 | "next": "12.1.0", 34 | "react": "16.13.1", 35 | "react-dom": "16.13.1" 36 | }, 37 | "devDependencies": { 38 | "@prisma/cli": "2.1.1" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Head from 'next/head'; 3 | import { Global, css } from '@emotion/core'; 4 | import { ThemeProvider, CSSReset } from '@chakra-ui/core'; 5 | 6 | const MyApp = ({ Component, pageProps }) => { 7 | return ( 8 | 9 | 10 | Next.js 9.3 + Prisma 11 | 12 | 13 | 14 | 15 | 31 | 32 | ); 33 | }; 34 | 35 | export default MyApp; 36 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import { PrismaClient } from '@prisma/client'; 2 | import { List, Heading } from '@chakra-ui/core'; 3 | 4 | import Song from '../components/Song'; 5 | 6 | export async function getStaticProps() { 7 | const prisma = new PrismaClient(); 8 | const songs = await prisma.song.findMany({ 9 | include: { artist: true } 10 | }); 11 | 12 | return { 13 | props: { 14 | songs 15 | } 16 | }; 17 | } 18 | 19 | export default ({ songs }) => ( 20 | <> 21 | 22 | My Songs 23 | 24 | 25 | {songs.map((song) => ( 26 | 27 | ))} 28 | 29 | 30 | ); 31 | -------------------------------------------------------------------------------- /pages/songs/[id].js: -------------------------------------------------------------------------------- 1 | import { PrismaClient } from '@prisma/client'; 2 | import { Box, Heading, Text, Button } from '@chakra-ui/core'; 3 | import NextLink from 'next/link'; 4 | 5 | export async function getStaticProps({ params }) { 6 | const prisma = new PrismaClient(); 7 | const song = await prisma.song.findOne({ 8 | include: { artist: true }, 9 | where: { 10 | id: Number(params.id) 11 | } 12 | }); 13 | 14 | return { 15 | props: { 16 | song 17 | } 18 | }; 19 | } 20 | 21 | export async function getStaticPaths() { 22 | const prisma = new PrismaClient(); 23 | const songs = await prisma.song.findMany(); 24 | 25 | return { 26 | paths: songs.map((song) => ({ 27 | params: { 28 | id: song.id.toString() 29 | } 30 | })), 31 | fallback: false 32 | }; 33 | } 34 | 35 | export default ({ song }) => ( 36 | 37 | {song.name} 38 | 39 | {song.artist.name} 40 | 41 |