Unsplash app built by Next.js@latest + Turbopack

Prerequisite

1. Node@16+
2. npm@8+
3. next@13+
4. react@18+

Running locally

1. Install dependencies:

   npm i

2. Create DB tables with Prisma (NOTE: Run this command whenever you make changes to schema.prisma file)

   npx prisma db push

3. Open Prisma studio

   npx prisma studio

4. Generate NEXTAUTH_SECRET in .env file

   openssl rand -base64 32

5. Create a Github OAuth app: here

   GITHUB_ACCOUNT_ID=
   GITHUB_ID=
   GITHUB_SECRET=
   NEXTAUTH_URL=http://localhost:3000/api/auth
   

6. Start the dev server:

   npm run dev

7. Start the dev server with Turbopack:

   npm run dev:turbopack

8. See your binaries:

   npx next info

Dockerize the app

1. Build Docker image

   docker build -t unsplash-nextjs .

2. Deploy the image in your container and run it:

   docker run --name unsplash-nextjs-container --env-file .env.local -p 0.0.0.0:3000:3000 unsplash-nextjs

Note: This app uses Tailwind CSS. However, Turbopack does not yet support fully PostCSS, but it does support CSS and CSS Modules.

Turbopack is a new incremental bundler optimized for JavaScript and TypeScript, written in Rust by the creators of Webpack and Next.js at Vercel. On large applications Turbopack updates 10x faster than Vite and 700x faster than Webpack (benchmark). For the biggest applications the difference grows even more stark with updates up to 20x faster than Vite.

As a reminder, Turbopack is currently in alpha and not yet ready for production, so that the build may not be successful for now.