Preview of existing posts should always return the latest revision so DESC sorting was required. Otherwise, it would always return the oldest revision.
Tested against latest Wordpress and GraphQL plugins on drafts, published, and edited but unpublished changes. The example works great!
Fast Refresh doesn't appear to work with older version (16.8.x) versions of React. I was able to reproduce this via this issue https://github.com/vercel/next.js/issues/14895
I updated all examples I found of React `16.8.x` to `^16.13.1` so that future installs will auto bump to the latest minor version. Previously the pinned version was causing the lock of version.
The existing example gives an error on every hot reload, perhaps because of the way that an initial `useEffect` hook imports the `GLTFLoader` and it doesn't redo that on hot reload?
Putting the component using the `useLoader` hook in a dynamic import seems to fix this.
Open to better suggestions, this is kind of awkward to use still...
I accidentally deleted the repo the original PR was based upon haha.
Anyway, the code was still on my computer so here's a new PR with the same content.
I addressed the latest comments from @lfades in the old PR (https://github.com/vercel/next.js/pull/14180)
I also updated `next-auth` to `2.1.0` and updated the `<Provider />` component in `_app.js` that needed updating since the latest release.
Let me know if I missed anything else, otherwise I think this should be good to go 👍
[ch3480]
Fixes https://github.com/vercel/next.js/issues/14242
Closes https://github.com/vercel/next.js/pull/14264
Updated the readme of the `with-zones` example to use `vercel dev` instead, starting the app independently has some routing issues that don't happen on production (due to `vercel.json`), with `vercel dev` the app will match the production deployment on localhost.
As discussed this adds an example to demonstrate how you can achieve proxying upstream requests that didn't match any pages/assets in Next.js which can be helpful in achieving incremental migration
## Summary
This PR adds a basic example of how [Tesfy](https://tesfy.io/) could be integrated with Next.js. Tesfy is a project that I've working on during quarantine weekends, mainly to learn new stuff and provide **free** and **unlimited** A/B Tests and Feature Flags while keeping a good performance and the library [size](https://bundlephobia.com/result?p=react-tesfy@1.2.1) as small as possible.
The configuration file could be set up using a [web application](https://app.tesfy.io/) (hosted in Vercel 🎉 ) or by your self.
## Implementation
- Created `with-tesfy` folder
- Added two pages `index.js` and `features.js` to show how experiments and features could be used
- The only thing that must be persisted is the `userId`. Used a cookie to save it.
- Uses `getServerSideProps` to fetch the configuration file and get/create the `userId`.
## Screenshots
There are some screenshots from the web application. Where you can easily configure experiments and audiences per project. Teams and features will soon be added.
![Screenshot 2020-06-01 at 15 40 49](https://user-images.githubusercontent.com/6877967/83414811-60e7ce80-a41e-11ea-9e5c-887c66e80c65.png)
![Screenshot 2020-06-01 at 15 41 02](https://user-images.githubusercontent.com/6877967/83414823-66451900-a41e-11ea-885b-b58e78b042bb.png)
![Screenshot 2020-06-01 at 15 41 11](https://user-images.githubusercontent.com/6877967/83414828-6a713680-a41e-11ea-90a8-8d39a17f19a1.png)
This is my first PR! sorry if I made something wrong 😞 . Any feedback is more than welcome. Also I want to thank you all for the awesome work with Next.js ❤️
* Remove getInitialProps
* added swr
* Update examples/with-cookie-auth-fauna/pages/profile.js
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Update examples/with-cookie-auth-fauna/pages/profile.js
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* no longer needed
* new .env support
* redirect if not found
* always use latest next version
* no longer needed
* Updated readme
* Updated profile page
* Fixed readme and added deploy button
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Update Algolio's Instant Search Example
- Moved from `getInitialProps` to `getServerSideProps`
- Update Algolio libraries
Co-authored-by: Arsalan Khattak <akkhattak65@gmail.com>
* Shift from SSR to CSR
Co-authored-by: Arsalan Khattak <akkhattak65@gmail.com>
r? @lfades
cc @timothyis @dayhaysoos @ChrisBrownie55
* Add [use-shopping-cart](https://github.com/dayhaysoos/use-shopping-cart) example to stripe sample
* Refactor how we instantiate Stripe across the different pages with a `getStripe` singleton pattern.
Hey guys, thanks for the amazing job you are doing 💜
This PR fixes a small error I faced when starting a project with Prismic + Next.js.
Since the version on the `cms-prismic` example was fixed to `9.2.3-canary.26` I was having the following error because the example uses the environment variables feature that is for Next.js 9.4+
<img width="1256" alt="Screen Shot 2020-06-16 at 12 13 38" src="https://user-images.githubusercontent.com/26466516/84793626-bc43c000-afcb-11ea-8823-b1dee30dbb00.png">
After updating to the latest version, I could run it successfully.
ps: I also realized that the `cms-contentful` example was also not using the `latest` version, so I decided to update it (I have not tested, but the error certainly will happen).
ps2: if you want to reproduce the error, just create a project using the example and add dummy data on the environment variables, then start the server and access `http://localhost:3000`.
* added graphcms
* Updated readme and environment variables
* Removed gitignore
* Updated tailwind config
* Some fixes in pages
* Updated api endpoints
* lint fix
* Updated readme
* Updated og image
* Updated cms examples to include this one
* Added example to docs
* Added preview demo link
* Updated step
Co-authored-by: Luis Alvarez <luis@vercel.com>
This PR updates the `with-userbase` example with the following changes:
- Removes the `vercel.json` file, this is no longer needed with [recent changes](https://vercel.com/docs/v2/build-step#environment-variables).
- Changes the URL of the Deploy Button to use `?env`, `?envLink`, and `?envDescription` query strings, these prompt for environment variables upon import.
- Updates the instructions to reflect the changes made to the import and deployment process.
[ch2502]
- Added new import flow to every CMS example, using the deploy button, and removed `vercel.json`
- Replaced `dotenv` with the new env support in outdated examples
This adds [prefresh](https://github.com/JoviDeCroock/prefresh) and [preact/debug + DevTools](https://preactjs.com/guide/v10/debugging/) during development. It also fixes the chunking/splitting configuration for production builds by creating a `preact` chunk based on the existing framework chunk.
I'm still considering publishing the config here as a plugin, since I worry about the copy-paste effect on this much regex-foo.
/cc @jovidecroock
[ch579]
Some README files in `examples/cms-*` were linking to a documentation markdown file inside the repo (e.g. `/docs/basic-features/pages.md`) instead of the documentation website. We should always link to the documentation website from an example README file because (1) the website has better UX and (2) as we’re creating the examples pages on `next-site` (https://github.com/vercel/next-site/pull/672), we’d like to avoid extra processing of markdown content.
- Fixes the Next.js `with-graphql-hooks` example so that data is prefetched during SSR:
- The example was using an old version of `graphql-hooks` where SSR was broken
- It had a bug where the `graphql-hooks` client passed in to the `AppTree` as a prop was not being used (instead was creating a new client every time)
This resolves https://github.com/nearform/graphql-hooks/issues/439 for `graphql-hooks`.
Related to [11014](https://github.com/vercel/next.js/issues/11014).
Removed getInitialProps in favor of getStaticProps and getServerSideProps. Refactored one of the components from class to functional. Removed redundant imports. Removed React.FC/FunctionComponent. Added two build files to gitignore.
Let me know if you want something to be changed.
Based on https://github.com/vercel/next.js/pull/13607 - I created a new PR as I can't push changes to the initial PR.
Migrated the Apollo client to use SSG, also removed the link to the live demo because I don't know who the owner is or how to update the deployment.
The implementation is pretty simple and will be added to all the other Apollo examples
* Add Cosmic CMS Example
* with native .env support, this file isn't needed anymore
* FIX use path alias
* Add cosmicjs package
* Fix alias import in pages/api/preview
* Added: react-imgix & lazysizes package
* Load lazysizes in layout
* Used imgix image with lazyloading
* Added avatar imgix optimizations
* EDITED: steps to install content, preview
* EDITED: demo link
* EDITED: Install step
* EDITED: preview link steps
* Edited: demo link
* FIXED: object_slug
* Screenshots
* Fixed object_slug link
* Update README.md
* Fix: formatting issue
* Updated readme and renamed .env to env.local
* Sanity checks
* Handle fallback data when expected
* Added link to the example in other examples
* Updated demo deployment
* Added example to docs
* minor lint fix
* Remove manual download step
* use vercel.json
Co-authored-by: Tony Spiro <tspiro@tonyspiro.com>
Co-authored-by: Luis Alvarez <luis@vercel.com>
Closes [7882](https://github.com/vercel/next.js/issues/7882).
Created as requested by @timneutkens
I'm unsure if that's exactly what you wanted, so let me know what you want me to change and I'll do it asap.
Prefixed variables name with NEXT_PUBLIC_.
Solving #13585 issue related to get undefined from process.env.VARNAME inside .env* files.
I'm not secure if SESSION_SECRET_* need the prefix.
Related to [11014](https://github.com/vercel/next.js/issues/11014)
1. Moved the reducer into the store and created new store file
2. The example was using a server that was no longer available, now it uses JSON placeholder instead.
3. Moved from getInitialProps to getStaticProps
4. Refactored all the classes to functional components, using the new redux hooks API.
5. Upgraded all the packages and using custom redux wrapper instead of next-redux-wrapper, which I have removed from the example.
6. Upgraded all the other packages.
Please, let me know if I should change anything.
Closes#12664Closes#13604
The culprit was not only changing the library directory, but also having the icons version past 4.0.6. Also, the components which used the library had to be adjusted according to the new changes.
Confirmed that it works both in production and development. Confirmed that it builds on dev and production.
![Alt Text](https://media.giphy.com/media/dZ46aA1Rs7Oi1wSQKU/giphy.gif)
This PR fixes https://github.com/vercel/next.js/issues/4883.
It introduces a new global variable (`window.__REHYDRATE_IDS`) only when necessary.
In the case of the `with-react-with-styles` example, rehydration isn't happening, so I removed the creation of the variable.
In the case of the `with-react-intl` example, the information doesn't seem to be set anymore on `__NEXT_DATA__`, so I just removed the default reference to it.
* Refactored the store so that it doesnt use getInitialProps
* Applied the changes in the _app file
* Refactored the wrapper so that it uses the new store flow
* Removed the old redux syntax
Instead of passing the state from the parent component, I have used the new redux hooks to retrieve the current state.
* The clock no longer requires state to be passed too
* Updated the variable names
* forgot to bring back hot reloading
* Applied requested change.
* Moved the state to the clock component
* Refactored the store according to the new requirements
* Refactored _app so it uses the new store
* This file is no longer needed
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
- Update to latest stripe-node version and pin the exact version so the Types won't go out of sync
- Add the env var changes for next 9.4.4 (https://nextjs.org/blog/next-9-4#new-environment-variables-support)
- Remove `next.config.js` as no longer needed.
- Add the Deploy to Vercel button
* created with-mongodb, Next.js + MongoDB
Co-authored-by: Shania Dhani <31454777+sdhani@users.noreply.github.com>
Co-authored-by: Michelle Lucero <31500626+MichelleLucero@users.noreply.github.com>
Co-authored-by: Chi Shing Lee <60354073+chislee0708@users.noreply.github.com>
* Update examples/with-mongodb/README.md
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
* modified for dotenv and environment var setup
* removed extra instructions on readme, linked it to the MongoDB guides
* changes to environment var
* replaced document with react logic
* removed Pet header
* removed isomorphic-unfetch
* replaced getInitialProps with getStaticProps (SSG)
* removed console log
* deleted next.config.js file
* fixed prettier styling
* fixed link 404 server rendering issue
* modified server path for delete/edit
* fixed prettier styling
* fixed a typo
* change .env to .env.local
Co-authored-by: Joe Haddad <timer150@gmail.com>
* fixed typo, change .env to .env.local
Co-authored-by: Joe Haddad <timer150@gmail.com>
* change .env to .env.local
Co-authored-by: Joe Haddad <timer150@gmail.com>
* Update examples/with-mongodb/package.json
Co-authored-by: Joe Haddad <timer150@gmail.com>
* removed dotenv dev dependency
Co-authored-by: Joe Haddad <timer150@gmail.com>
* cleaned up code and instructions
* Update examples/with-mongodb/.gitignore
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* minor changes to code style and logic
* Updated index page and .env.local.example
* Updated new page
* Don't use SSG for the edit page
* Fixed revalidation issue
* Use es6 for the model
* Updated edit page
* Removed VERCEL_URL
* Updated readme and renamed env
* Added temporal vercel.json
* Removed seed until added with a script
* Updated package.json
* Renamed example in readme
* Renamed example
* Lint fix
Co-authored-by: liulanz <zhengliulan@gmail.com>
Co-authored-by: Shania Dhani <31454777+sdhani@users.noreply.github.com>
Co-authored-by: Chi Shing Lee <60354073+chislee0708@users.noreply.github.com>
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
Co-authored-by: sdhani <shania.dhani46@myhunter.cuny.edu>
Co-authored-by: liulanz <37808313+liulanz@users.noreply.github.com>
Co-authored-by: Joe Haddad <timer150@gmail.com>
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
This PR fixes https://github.com/vercel/next.js/issues/7769.
However, I would like for @jayu to confirm that it's ok to use the latest Linaria 2.0 alpha release. I can confirm from my local testing that it's working as expected.
Resolves: https://github.com/zeit/next.js/issues/12545
This PR adds an example which show how to bundle and use WebWorkers in a next.js app.
The issue mentions Typescript, but adding typescript to the example should be fairly simple by following the documentation and seems out of scope for a web-worker example.
@lfades hope this works. I have updated the example to show differences between client/ssr/ssg initial state in redux. Let me know if something needs to be changed.
1. I updated all the packages.
2. Refactored the home component from class to functional
3. Example now uses getServerSideProps instead of getInitialProps
## What
An example to show how you can create a static generated build of Next.js (using the new `getStaticProps` and `getStaticPaths` functions) with data fetched from a local GraphQL schema. The same schema is used to host a GraphQL endpoint using the API Route `/api/graphql`.
## Why
I was setting up a static hosted website whereby data is stored in a set of local JSON files (pulled from a backend server at build time). I wanted to consume the content using the developer benefits that GraphQL provides and using a consistent interface the GraphQL API consumers would be using.
Within my page components I initially made GraphQL `fetch` calls to the locally running `/api/graphql` endpoint which worked well with `npm run dev`, however when it came to `npm run build` that endpoint was inaccessible (I tried both VERCEL_URL and localhost:3000) - which is now understandable given I read further the "[Write server-side code directly](https://nextjs.org/docs/basic-features/data-fetching#write-server-side-code-directly)" documentation.
This example may or may not be useful for others so please feel free to close, but I thought I would contribute incase it assisted others.
## Related Discussions
It looks as though this PR may help with some of the following discussions:
- https://github.com/zeit/next.js/discussions/12785
- https://github.com/zeit/next.js/discussions/10946
- https://github.com/zeit/next.js/discussions/12182
- https://github.com/zeit/next.js/discussions/11285
## Related Examples
The end solution for this PR was a combination of web discussions and seeing the `api-routes-graphql` example. Perhaps this PR should just update that example to use the new methods? Or maybe it is worth having both?
- https://github.com/zeit/next.js/blob/canary/examples/examples/api-routes-graphql
This is also similar to this example, although that example has more code in order to provide isomorphic Apollo Client for client side code use.
- https://github.com/zeit/next.js/blob/canary/examples/api-routes-apollo-server-and-client
## Errors Recieved
I've included the below errors as they are the ones I faced when figuring out the end solution. These may just help with SEO for others googling the same issue.
### Error when trying to use localhost:3000
```
> Build error occurred
{ FetchError: request to http://localhost:3000/api/graphql failed, reason: connect ECONNREFUSED 127.0.0.1:3000
at ClientRequest.<anonymous> (/vercel/7cf60e2b/.next/serverless/pages/content.js:1999:147829)
at ClientRequest.emit (events.js:198:13)
at Socket.socketErrorListener (_http_client.js:401:9)
at Socket.emit (events.js:198:13)
at emitErrorNT (internal/streams/destroy.js:91:8)
at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
at process._tickCallback (internal/process/next_tick.js:63:19) type: 'system', errno: 'ECONNREFUSED', code: 'ECONNREFUSED' }
```
### Error when trying to use VERCEL_URL
```
> Build error occurred
{ FetchError: invalid json response body at https://vercel.com/login?next=%2Fdeployments%2Fprojectnamehere.now.sh%3Fhost%3Dprojectnamehere.now.sh%26redirect%3D1%26section%3D reason: Unexpected token < in JSON at position 0
at /vercel/3d91c11/node_modules/next/dist/compiled/node-fetch/index.js:1:133590
at process._tickCallback (internal/process/next_tick.js:68:7) type: 'invalid-json' }
```
**Affected examples**
with-segment-analytics
with-slate
with-portals-ssr ( _with-portals-ssr is based on a package not being updated in the last year_)
with-videojs
with-next-page-transitions
with-firebase-cloud-messaging
with-dynamic-app-layout
with-dynamic-import
with-next-transition
with-carbon-components
with-cerebral
with-custom-babel-config
Here and there I have removed some redundant imports as well. I believe with this PR, there are only 1 or 2 examples left using class-based components. If by any chance you find any, let me know and I'll refactor them too.
If you don't like anything or you want me to change something, please let me know.
**If there is anything else you'd like me to help with, I would be honored to assist.**
Per https://github.com/zeit/next.js/issues/12964
* with-ant-design
* with-dynamic-import
* with-iron-session
* with-monaco-editor
* with-next-page-transitions
* with-react-with-styles
* with-style-sheet
* with-why-did-you-render
Tested each example, working as intended, no additional issues presented
Changed the URLs inside the Monaco Editor Example: https://github.com/zeit/next.js/tree/canary/examples/with-monaco-editor
Converted the worker URL to start with the base URL.
The reason is if you use the Monaco example anywhere but in the main `pages` folder, it won't work since it uses a relative URL instead.
For example if we'll move the code to `pages/room/index.js` it won't work since it will try to search for the files inside `room/_next/_static/` instead of `_next/_static/`.
The base URL I added fixes the problem.
* set up with-ts-eslint-jest example app
* eslint ignore new app bc it has a conflicting eslintrc
* make eslint + husky setup manual
* clarify app README setup notes
* move page tests out of pages/ dir
* Simplifying configs
* extend "prettier"
* format fix
* Updated rules
* Added husky configs and removed debug option
* Removed notes and configuration
* Updated pages
* Added links to readme
* Added example to .prettierignore
* Updated snap
* Make the lint work
Co-authored-by: Luis Alvarez D <luis@vercel.com>
Related to [11014](https://github.com/zeit/next.js/issues/11014)
First and most important, removed the getInitialProps and used getStaticProps.
Then, I refactored Counter, DataList and Examples components.
I have refactored them from class-based components to functional. Also in each component the redux implementation was refactored using the new hooks API, which resulted in ~40% less code.
If you want me to change anything or you are not satisfied with any given change, I'm open to suggestions.
Related to [11014](https://github.com/zeit/next.js/issues/11014)
1. I have changed the component from class to functional.
2. I have removed the getInitialProps and used getStaticProps instead.
3. I have removed the redundant connect to redux @ the index page, due to the fact that now we can dispatch the action with the required hook.
If you want me to change anything or you are not satisfied with any given change, I'm open to suggestions.
Related to [11014](https://github.com/zeit/next.js/issues/11014)
Upgraded all the packages from package.json, removed the saga-wrapper package since it is totally outdated to today's use.
I have refactored the whole example using the new API of the next-redux-wrapper package, using their new support of "getStaticProps".
All of the class components were converted to functional, using the new redux hooks API.
If you want me to change anything or you are not satisfied with any given change, I'm open to suggestions.