70d357a3ea
Update with-mysql example to Next.js 15, Tailwind 4, Prisma 7 ( #88475 )
...
## Summary
Updates the `with-mysql` example to use latest versions of all
dependencies.
### What
- Migrate from Pages Router to App Router
- Update to React 19 and Next.js latest
- Update to Tailwind CSS v4 with `@import "tailwindcss"` syntax
- Update to Prisma 7 with `@prisma/adapter-planetscale` driver adapter
- Convert all files to TypeScript
- Remove unused API route and `vercel.svg`
- Update README to clarify this is for PlanetScale MySQL and link to
[vercel/postgres-next-starter](https://github.com/vercel/postgres-next-starter )
for Postgres users
### Why
The example was significantly outdated:
- Prisma 3.10.0 → Prisma 7 (latest)
- Tailwind 3.0.23 → Tailwind 4
- React 18.2.0 → React 19
- Pages Router → App Router
### How
Followed the official migration guides:
- [Prisma 7 upgrade
guide](https://www.prisma.io/docs/orm/more/upgrade-guides/upgrading-versions/upgrading-to-prisma-7 )
- [PlanetScale quickstart with
Prisma](https://www.prisma.io/docs/getting-started/prisma-orm/quickstart/planetscale )
- Aligned configuration files with a fresh `create-next-app` output
## Related
N/A
## How to Test
```bash
cd examples/with-mysql
npm install
# Set up .env with your PlanetScale DATABASE_URL
npx prisma generate
npx prisma db push
npx prisma db seed
npm run dev
```
## Checklist
- [x] Tests and samples are included
- [x] Documentation is updated (README)
---------
Co-authored-by: vercel[bot] <35613825+vercel[bot]@users.noreply.github.com>
2026-01-20 12:16:44 +01:00
4a97643664
examples: fix readmes ( #78483 )
2025-04-23 20:48:58 -05:00
6aafef389b
examples: improve DX while copying command to create new project ( #73463 )
...
## Description
Follow up #38410 .
Some examples remain the multiple commands in a single block, and we
couldn't use copy button to select one line.
With this change users would be able to copy the command (using their
choice package manager) with a single click using the github copy
feature.
CC: @samcx
### Adding or Updating Examples
- [x] The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`.
See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md
2025-01-14 05:38:46 +00:00
36dce2fe7e
examples: add StackBlitz preview to README.md ( #73546 )
...
### Description
Follow up #35349 .
1. Update the [example
template](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md )
with [StackBlitz](https://stackblitz.com/ ) preview
2. Add `preview live with StackBlitz` to the examples
3. Remove the below old StackBlitz preview section from the examples
```md
## Preview
Preview the example live on [StackBlitz](http://stackblitz.com/ ):
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/active-class-name )
```
CC: @samcx
### Improving Documentation
- [x] Run `pnpm prettier-fix` to fix formatting issues before opening
the PR.
- [x] Read the Docs Contribution Guide to ensure your contribution
follows the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
### Adding or Updating Examples
- [x] The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`.
See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md
2025-01-14 05:24:51 +00:00
49cba424e8
examples: polish some README.md ( #72117 )
...
## Description
I have corrected some mistakes according to the [contribution
guide](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md ).
1. Update `create-next-app` script
2. Remove redundant new line, space and double colon
3. `readme.md` → `README.md`
### Adding or Updating Examples
- [x] The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`.
See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md
---------
Co-authored-by: Sam Ko <sam@vercel.com >
2024-11-13 18:52:56 +00:00
f7baa56792
update example Deploy button URLs ( #48842 )
...
### What?
Updates Deploy button URLs for all listed examples here:
https://github.com/vercel/next.js/tree/canary/examples
### Why?
The Deploy URLs are currently broken and result in a failed clone
attempt on Vercel.
### How?
The URLs have been changed from https://vercel.com/new/git/external ?… to
-> https://vercel.com/new/clone ?…
(Last updated
[here](https://github.com/vercel/next.js/commit/8eaabe2fb0fb3a1d9f4931a332e608395813a3b9 )
in 2021)
2023-04-26 13:31:44 -04:00
57dcc9d329
Update pnpm create next-app for latest pnpm 6 and 7 ( #37254 )
...
This command changed in pnpm [6.32.13](https://github.com/pnpm/pnpm/releases/tag/v6.32.13 ) and [7.1.1](https://github.com/pnpm/pnpm/releases/tag/v7.1.1 ) so lets update it since its been a few weeks and we can expect pnpm users to update more regularly than npm users.
- Fixes https://github.com/vercel/next.js/pull/37240
- Fixes https://github.com/vercel/next.js/pull/37045
- Fixes https://github.com/vercel/next.js/pull/37032
- Fixes https://github.com/vercel/next.js/pull/36602
- Fixes https://github.com/vercel/next.js/pull/36496
2022-05-27 21:21:40 +00:00
3e178bb801
add pnpm link to docs ( #37221 )
...
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples )
Co-authored-by: Steven <steven@ceriously.com >
2022-05-27 15:46:38 -04:00
9f9214abe5
Updated create-next-app docs to include pnpm usage ( #35755 )
...
This PR updates the docs and examples for `create-next-app` to include pnpm usage.
The following script was used to update every example README:
```js
const fs = require('fs')
const examples = fs.readdirSync('./examples')
for (let example of examples) {
const filename = `./examples/${example}/README.md`
const markdown = fs.readFileSync(filename, 'utf8')
const regex = new RegExp(`^yarn create next-app --example (.*)$`, 'gm')
const output = markdown.replace(regex, (yarn, group) => {
const pnpm = `pnpm create next-app -- --example ${group}`
return `${yarn}\n# or\n${pnpm}`
})
fs.writeFileSync(filename, output)
}
```
2022-03-30 21:03:21 +00:00
5ebee5f566
Some minor adjustments to MySQL example. ( #34792 )
2022-02-24 20:47:58 -08:00
fe312ed4bd
Update MySQL example. ( #34784 )
...
Changes from https://github.com/planetscale/nextjs-starter .
Realized the current example was not only out of date, but the demo was broken. Will update the demo site post-merge here 👍
2022-02-25 03:41:41 +00:00
b442acbe1c
Replace zeit/next.js with vercel/next.js ( #20849 )
2021-01-07 08:41:04 -05:00
8eaabe2fb0
Fix deploy buttons URLs ( #20834 )
...
Fix all deploy button URLs in the Next.js repo to follow the following format:
```
https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/ <EXAMPLE_NAME>&project-name=<EXAMPLE_NAME>&repository-name=<EXAMPLE_NAME>
```
The detailed docs for the Deploy Button can be found here: https://vercel.com/docs/more/deploy-button .
Also updates legacy Vercel import flow URLs (starting with vercel.com/import or with vercel.com/new/project), to use the new vercel.com/new URLs.
---
For example, for the `hello-world` example:
The URL is https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world
And the deploy button looks like this:
[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world )
---
For reference, I used the following regexes to search for the incorrect URLs
```
\(https://vercel.com/import/git\?s=https://github.com/vercel/next.js/tree/canary/examples/(.*) \)
\(https://vercel.com/import/git\?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/ ([^&]*)(.*)\)
\(https://vercel.com/import/project\?template=https://github.com/vercel/next.js/tree/canary/examples/(.*) \)
https://vercel.com/import/git
https://vercel.com/import/select-scope
https://vercel.com/import
https://vercel.com/new/project
```
2021-01-07 01:40:29 +00:00
3478e1d0cc
[examples] Add Next.js + MySQL example ( #19452 )
...
* [examples] add with-mysql example
* [examples] add demo link to with-mysql readme
* [examples] add next.js + mysql example with correct env pattern
* [examples] fix lint errors, update package name, remove unnecessary res statement
* [examples] remove unused imports and variables
* [examples] fix some linting errors
* Added NextApiHandler to API endpoints
* Lint fixes
* Added useEntry hook
* Updated type
* Update examples/with-mysql/package.json
* Updated readme
* fixed URL
Co-authored-by: Matthew Sweeney <mail@mcs.dev >
Co-authored-by: Luis Alvarez <luis@vercel.com >
2020-11-23 19:13:09 -05:00
Simeon Griggs
