### What?
This PR adds the `cms-sitecore-xmcloud` example.
Sitecore XM Cloud is a headless CMS platform that empowers content editors to manage content, layout, and structural aspects of web pages. The Sitecore JSS framework connects frontend JavaScript applications to the XM Cloud API, allowing retrieval of content and presentation layout information.
Sitecore JSS for Next.js integrates Next.js with Sitecore JSS, offering a structured approach to connect a Next.js application to XM Cloud. The `cms-sitecore-xmcloud` example, derived from the Sitecore JSS initializer, showcases the frontend application exclusively, omitting backend implementation details.
### Why?
While Sitecore offers detailed documentation for creating XM Cloud projects and JSS applications, existing starter templates often combine frontend and backend configurations. The `cms-sitecore-xmcloud` example focuses solely on the frontend application and includes environment variable examples to establish a connection with XM Cloud, eliminating the need for a .NET-compatible machine.
### How?
For comprehensive guidance on setting up an XM Cloud site and JSS application, refer to Sitecore and Vercel documentation. The `cms-sitecore-xmcloud` example is created using the Sitecore JSS initializer, integrating Next.js and SXA (Sitecore Experience Accelerator) add-ons. Further documentation can be found at:
- [Deploying to Vercel](https://doc.sitecore.com/xmc/en/developers/xm-cloud/walkthrough--deploying-your-front-end-application-to-vercel.html)
- [Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/210/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-next-js.html)
- [Documentation (XM Cloud)](https://doc.sitecore.com/xmc/en/developers/xm-cloud/sitecore-javascript-rendering-sdk--jss--for-next-js.html)
- [Documentation (Create an XM Cloud project from a starter template)](https://doc.sitecore.com/xmc/en/developers/xm-cloud/create-an-xm-cloud-project-from-a-starter-template-in-the-xm-cloud-deploy-app.html)
Co-authored-by: Steven Tey <28986134+steven-tey@users.noreply.github.com>
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
This PR is a larger change to documentation to make the following
updates:
- Deconstructs [Server
Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions)
into "Forms and Mutations" and an API reference
- Removes content in place of future React API documentation pages
- Removes outdated [Building
Forms](https://nextjs.org/docs/pages/building-your-application/data-fetching/building-forms)
docs from the Pages Router and adds conditional content for both routes
in "Forms and Mutations"
- Adds TypeScript code blocks to API Routes page, recommends Route
Handlers for isomorphic signatures.
- Updates `revalidatePath` and `revalidateTag` docs to have a Server
Actions example.
---------
Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
When I try to deploy to Google Cloud Run it fails after some
investigation I saw this line in
.next/standalone/server.js
```javascript
const hostname = process.env.HOSTNAME || 'localhost'
```
This some how make this log when i run docker
```shell
- ready started server on 172.17.0.2:3000, url: http://172.17.0.2:3000
```
I don't know why it's logging this address even if the server running on
localhost.
So this my fix
Set hostname to 0.0.0.0 to avoid deployment failing on Google cloud run.
This PR updates the `cms-contentful` example to use:
- App Router
- TypeScript
- Draft Mode (previously Preview Mode)
- ISR / Data Cache (revalidations through `revalidateTag`)
Further, it combines many separate files into more manageable single files, and tries to better bucket provider-specific logic into the `lib/` folder. I'm hoping this can be the foundation for re-writing the rest of the `cms-*` examples to use App Router.
Overall, the code is much easier to reason about IMO. Pretty happy with the change. I sprinkled some `any`'s throughout here, but if someone wants to make it better, go for it!
https://app-router-contentful.vercel.app/
ensure `next` is the dependency of third-parties package so turbo will
build next first then `@next/third-parties` to avoid type failing
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Adds support for base64-encoded `placeholder`. Enables using placeholders without the "blur" effect.
Fixes#47639
- [x] Add support for DataURL placeholder
- [x] Add tests
- [x] Update docs
Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
### What?
In the Dockerfile example:
* Moves the `USER` command above the `COPY`s
* Removes the `--chown` on the `COPY`s
> **Note**
> I don't know for 100% sure this won't have unintended side effects. Part of my motivation for opening this PR is to sense check whether we will be causing a regression by making this change in our own projects.
>
> Please let me know if there's any concerns with this!
### Why?
Sonar security scanner flags this Dockerfile as having "security hotspots" due to the use of `--chown`
https://rules.sonarsource.com/docker/RSPEC-6504/
### How?
Make the `--chown`s redundant by setting the current user before doing the `COPY` commands.
### What?
The link to the demo in README.md for `example/cms-enterspeed`.
### Why?
The link was pointing to the wrong demo.
### How?
Updated the README.md.
### What?
1. Refactor `with-supabase` example to use server-side auth
### Why?
1. It is the recommended path for Next.js, and can serve as an example for the authentication docs
### How?
1. Move authentication methods from Client Component to Route Handlers
### Updating reproduction examples
Our current `pnpm create next-app -e reproduction-template`, which is present in our Issues template, will create a Pages app. This PR updates the default (`reproduction-template`) to App Router, and adds a `reproduction-template-pages` example.
### What?
Stop `with-supabase` template from throwing errors on build
### Why?
Dynamic Routes now fail the build, rather than console.logging an error
### How?
Export the following from any routes that use the `cookies` function
```
export const dynamic = "force-dynamic";
```
Install `encoding` as a dev dependency until this is fixed downstream
`Negotiator.languages()` accepts an array of available locales and
returns only results that are present in it.
This effectively eliminates the need to use a try-catch block when
calling `matchLocale`.
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Currently `npm install` fails with
```
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR! peer react@"*" from next-redux-wrapper@7.0.5
npm ERR! node_modules/next-redux-wrapper
npm ERR! next-redux-wrapper@"^7.0.2" from the root project
npm ERR! 2 more (next, react-dom)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.3" from react-redux@7.1.3
npm ERR! node_modules/react-redux
npm ERR! react-redux@"7.1.3" from the root project
npm ERR! peer react-redux@"*" from next-redux-wrapper@7.0.5
npm ERR! node_modules/next-redux-wrapper
npm ERR! next-redux-wrapper@"^7.0.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
```
<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:
## For Contributors
### Improving Documentation
- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
### Adding or Updating Examples
- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md
### Fixing a bug
- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
### Adding a feature
- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
## For Maintainers
- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change
### What?
### Why?
### How?
Closes NEXT-
Fixes #
-->
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
Adds `supabase-js` as dependency for `with-supabase` example
### Why?
`with-supabase` example is missing `supabase-js` dependency, which is a
peer dependency of `@supabase/auth-helpers-nextjs`
### How?
Adds `supabase-js` to `examples/with-supabase/package.json`
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
Update Next.js with Supabase example
### Why?
Existing example for Next.js with Supabase is out of date
### How?
- Rename `with-supabase-auth-db-realtime` to `with-supabase`
- Update example to use App Router
- Use Supabase Auth Helpers for Next.js to configure auth cookies
---------
### What?
Update **with-redux** example.
### Why?
**with-redux** example have:
- outdated packages
- outdated approaches and relies on **pages** directory
Since **app router** is stable now and is recommended to use, I've updated this example.
### How?
An update includes:
- move example to **app router**
- update **package.json** deps to the latest versions
- modernize jest by switching from **ts-node** to **@swc/jest**
- fix and overhaul **tests**
- modernize **redux** infra
- overhaul example **source code quality**
Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>