{"id":13760066,"url":"https://github.com/planetscale/nextjs-starter","last_synced_at":"2025-12-24T10:29:48.581Z","repository":{"id":38409838,"uuid":"451592612","full_name":"planetscale/nextjs-starter","owner":"planetscale","description":"Next.js starter application using Prisma to connect to PlanetScale","archived":false,"fork":false,"pushed_at":"2024-02-03T21:05:09.000Z","size":640,"stargazers_count":136,"open_issues_count":12,"forks_count":48,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-08-03T13:04:12.289Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/planetscale.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-24T18:52:11.000Z","updated_at":"2024-08-03T13:04:16.070Z","dependencies_parsed_at":"2024-08-03T13:14:20.709Z","dependency_job_id":null,"html_url":"https://github.com/planetscale/nextjs-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planetscale%2Fnextjs-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planetscale%2Fnextjs-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planetscale%2Fnextjs-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planetscale%2Fnextjs-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/planetscale","download_url":"https://codeload.github.com/planetscale/nextjs-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224949674,"owners_count":17397208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T13:01:02.922Z","updated_at":"2025-12-24T10:29:48.572Z","avatar_url":"https://github.com/planetscale.png","language":"JavaScript","readme":"# Next.js starter\n\nThis is a [Next.js](https://nextjs.org/) project that uses [Prisma](https://www.prisma.io/) to connect to a [PlanetScale](https://planetscale.com/) database and [Tailwind CSS](https://tailwindcss.com/) for styling.\n\n## Prerequisites\n\n- [Node.js](https://nodejs.org/en/download/)\n- [PlanetScale CLI](https://github.com/planetscale/cli)\n- Authenticate the CLI with the following command:\n\n```sh\npscale auth login\n```\n\n## Set up the database\n\nCreate a new database with the following command:\n\n```sh\npscale database create \u003cDATABASE_NAME\u003e\n```\n\n\u003e A branch, `main`, was automatically created when you created your database, so you can use that for `BRANCH_NAME` in the steps below.\n\n## Set up the starter Next.js app\n\nClone the starter repository.\n\n```sh\ngit clone https://github.com/planetscale/nextjs-starter\n```\n\nInstall the dependencies.\n\n```sh\nnpm install\n```\n\nNext, you'll need to create a database username and password through the CLI to connect to your application. If you'd prefer to use the dashboard for this step, you can find those instructions in the [Connection Strings documentation](/concepts/connection-strings#creating-a-password) and then come back here to finish setup.\n\nFirst, create your `.env` file by renaming the `.env.example` file to `.env`:\n\n```sh\nmv .env.example .env\n```\n\nNext, using the PlanetScale CLI, create a new username and password for the branch of your database:\n\n```sh\npscale password create \u003cDATABASE_NAME\u003e \u003cBRANCH_NAME\u003e \u003cPASSWORD_NAME\u003e\n```\n\n\u003e The `PASSWORD_NAME` value represents the name of the username and password being generated. You can have multiple credentials for a branch, so this gives you a way to categorize them. To manage your passwords in the dashboard, go to your database overview page, click \"Settings\", and then click \"Passwords\".\n\nTake note of the values returned to you, as you won't be able to see this password again.\n\n```text\nPassword production-password was successfully created.\nPlease save the values below as they will not be shown again\n\n  NAME                  USERNAME       ACCESS HOST URL                     ROLE               PLAIN TEXT\n --------------------- -------------- ----------------------------------- ------------------ -------------------------------------------------------\n  production-password   xxxxxxxxxxxxx   xxxxxx.us-east-2.psdb.cloud   Can Read \u0026 Write   pscale_pw_xxxxxxx\n```\n\nYou'll use these properties to construct your connection string, which will be the value for `DATABASE_URL` in your `.env` file. Update the `DATABASE_URL` property with your connection string in the following format:\n\n```text\nmysql://\u003cUSERNAME\u003e:\u003cPLAIN_TEXT_PASSWORD\u003e@\u003cACCESS_HOST_URL\u003e/\u003cDATABASE_NAME\u003e?sslaccept=strict\n```\n\nPush the database schema to your PlanetScale database using Prisma.\n\n`npx prisma db push`\n\nRun the seed script to populate your database with `Product` and `Category` data.\n\n`npm run seed`\n\n## Run the App\n\nRun the app with following command:\n\n`npm run dev`\n\nOpen your browser at [localhost:3000](localhost:3000) to see the running application.\n\n## Deploying\n\nAfter you've got your application running locally, it's time to deploy it. To do so, you'll need to promote your database branch (`main` by default) to be the production branch ([read the branching documentation for more information](https://planetscale.com/docs/concepts/branching)).\n\n```sh\npscale branch promote \u003cDATABASE_NAME\u003e \u003cBRANCH_NAME\u003e\n```\n\nNow that your branch has been promoted to production, you can either use the existing password you generated earlier for running locally or create a new password. Regardless, you'll need a password in the deployment steps below.\n\nChoose one of the following deploy buttons and make sure to update the `DATABASE_URL` variable during this setup process.\n\n### Deploy on Vercel\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/planetscale/nextjs-starter\u0026env=DATABASE_URL)\n\n### Deploy on Netlify\n\n\\*Note: The `Netlify.toml` file in this repository includes the configuration for you to customize the `DATABASE_URL` property on the initial deploy.\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/planetscale/nextjs-starter)\n\n## Learn More\n\nTo learn more about PlanetScale, take a look at the following resources:\n\n- [PlanetScale quick start guide](https://planetscale.com/docs/tutorials/planetscale-quick-start-guide) - Learn how to get started with PlanetScale.\n\n## What's next?\n\nLearn more about how PlanetScale allows you to make [non-blocking schema changes](https://planetscale.com/docs/concepts/nonblocking-schema-changes) to your database tables without locking or causing downtime for production databases. If you're interested in learning how to secure your application when connecting to PlanetScale,\nplease read [Connecting to PlanetScale securely](/reference/planetscale-security).\n\n## Need help?\n\nGet help from [PlanetScale's support team](https://www.planetscale.com/support), or join our [GitHub Discussion board](https://github.com/planetscale/beta/discussions) to see how others are using PlanetScale.\n","funding_links":[],"categories":["JavaScript","Nextjs Starter"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplanetscale%2Fnextjs-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplanetscale%2Fnextjs-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplanetscale%2Fnextjs-starter/lists"}