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.
* yarn create next-app
* create an upload show page
* create upload page to handle in-progress upload and asset when it is ready
* move things to a layout component
* add some button styling
* poll for updates intelligently by dynamically setting refreshInterval on SWR hook
* better title
* edit gitignore, add MIT license use next 'latest'
based on feedback from https://github.com/zeit/next.js/pull/12723
* add some messages and spinner to make this a little nicer
* update README with environment variables info and Mux account info
* add .now to gitignore
* cleaner uploading state - redirect to /v/:playback_id when complete
* hardset image width in footer
* remove unused styles
* adjust title font size on mobile and adjust footer height on mobile
* use upchunk 1.0.8 so we don't have to dynamically load it
* cleaner error message handling
* fix brief error from returning Router on the render
* yarn lint-fix
* update README with note about .env.local
* add min height so the layout doesn't shift after selecting a file
* set poster attribute at video element
* use getStaticProps and fallback:true to render meta tags for social sharing
* create a pages/asset/:id route that we can be on while in the preparing state
* add copy about Mux, add twitter share widget
* add flash message about video ready for playback
* call it pre-rendered instead of server-side rendered
* pre-rendering, not server-side rendering
* Next.js not NextJS
* handle asset creation errors in the UI
* call hls.destroy() when the component is unmounted
* Updated readme and renamed .env.local
* Updated description
* add suggested patch with links to source code https://github.com/zeit/next.js/pull/13120#issuecomment-632858572
* Added vercel.json
* Updated some links
* Removed Prerequisites
Co-authored-by: Luis Alvarez <luis@vercel.com>
* Modified nextjs config so that it works with all types of fonts and images.
* Update next.config.js
* Fix code
Co-authored-by: Tim Neutkens <timneutkens@me.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Currently failing because `withStyles` can't read the interface from context:
```
Unhandled Runtime Error
TypeError: Cannot read property 'createLTR' of undefined
webpack-internal:///./node_modules/react-with-styles/lib/withStyles.js (150:33)
```
Manually registering the interface resolves the issue:
```diff
diff --git a/examples/with-react-with-styles/pages/_app.js b/examples/with-react-with-styles/pages/_app.js
index 91d09a2a9..a393572b8 100644
--- a/examples/with-react-with-styles/pages/_app.js
+++ b/examples/with-react-with-styles/pages/_app.js
@@ -2,11 +2,16 @@ import App from 'next/app'
import React from 'react'
import WithStylesContext from 'react-with-styles/lib/WithStylesContext'
import AphroditeInterface from 'react-with-styles-interface-aphrodite'
+import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet'
import defaultTheme from '../defaultTheme'
class MyApp extends App {
+ constructor(props) {
+ super(props);
+ ThemedStyleSheet.registerInterface(AphroditeInterface)
+ }
render() {
const { Component, pageProps } = this.props
```
But that's not how it is documented. I'm following up with react-with-styles to see if this is a bug.
* Install UrQL dependencies
- Created the examples folder `with-urql`
- Installed the dependencies
- Got a simple index.js page setup
* Basic UrQL example
- Connects to Pokemon GraphQL API
* Loading Pokemon list + Pokemon page
- Using `isomorphic-unfetch` because `urql` uses `window.fetch` to get data because we need to query the GraphQL API using Node (in `getStaticProps`)
- Deleted `_app.js` since we're not using UrQL to query data on the clientside
- Put all GraphQL related code in `/graphql`
* Update README for UrQL example
* Update urql casing
* Update examples/with-urql/graphql/client.js
Co-authored-by: Joe Haddad <timer150@gmail.com>
* Update examples/with-urql/pages/index.js
Co-authored-by: Joe Haddad <timer150@gmail.com>
* Update examples/with-urql/pages/pokemon/[name].js
Co-authored-by: Joe Haddad <timer150@gmail.com>
* Fix linting
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
Co-authored-by: Joe Haddad <timer150@gmail.com>
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
This issue is related to #12964
**I changed the following examples:**
`with-zeit-fetch`
`with-why-did-you-render`
`with-styletron`
`custom-server-fastify`
`custom-server-express`
`with-why-did-you-render`
`custom-server-hapi`
`custom-server-koa`
`custom-server-polka`
`custom-server-typescript`
`progressive-render`
`ssr-caching`
`svg-components`
`using-preact`
`with-ant-design`
* Remove React redundant import on `analyze-bundles` example
Co-authored-by: Marcus Silva <mvfsillva@gmail.com>
* Remove React redundant import on `api-routes-apollo-server-and-client-auth` example
Co-authored-by: Marcus Silva <mvfsillva@gmail.com>
* Remove React redundant import on `custom-server` example
Co-authored-by: Marcus Silva <mvfsillva@gmail.com>
* Remove React redundant import on `custom-server-actionhero` example
Co-authored-by: Marcus Silva <mvfsillva@gmail.com>
Co-authored-by: Marcus Silva <mvfsillva@gmail.com>
Again, related to [12964](https://github.com/zeit/next.js/issues/12964)
After checking all the other examples and the ongoing pull requests, I believe that with this PR being merged, all the examples should be free of redundant react imports.
Let me know if you want me to edit anything that you don't like.
Regards
with-typescript
with-atstroturf
with-atlaskit
with-styletron
with-styled-components-rtl
with-stylesheet
with-stomp
with-stitches-styled
with-stitches
with-slate
with-sentry-simple
with-sentry
with-segment-analytics
with-rematch
with-relay-modern
with-reflux
with-redux-wrapper
with-react-relay-network
with-react-native
with-react-multi-carousel
with-react-jss
with-react-helmet
with-react-ga
with-quill-js
with-prefetching
with-google-analytics-amp
with-google-analytics
with-framer-motion
with-flow
with-firebase-hosting
with-firebase-cloud-messaging
with-firebase-authentication
with-expo
with-dynamic-app-layout
with-draft-js
with-cxs
with-cerebral
with-ant-design-mobile
with-algolia-react-instantsearch
using-preact
progressive-render
The issue is related to [12964](https://github.com/zeit/next.js/issues/12964)
Let me know if there are any changes you want me to make.
Affected examples:
**with-glamor
with-graphql-hooks
with-graphql-react
with-grommet
with-http2
with-jest
with-cookie-auth-fauna
with-context-api
with-cerebral
with-aphrodite
with-apollo-and-redux
basic-css
with-carbon-components
amp-first**
I would love to help more, so let me know if there is anything specific I can contribute to.
This issue is related to [12694](https://github.com/zeit/next.js/issues/12964). I covered the following examples
- with-zeit-fetch
- with-yarn-workspaces
- with-why-did-your-render
- with-video-js
- with-universal-configuration-runtime
- with-typestyle
- with-three-js
If you have a suggestion or change I'd appreciate it
The example app expects all fields of Post and Author entries to be present and fails to build if any are missing. This PR adds a "required" validation to fields of both content types to avoid bulid errors.
CC @stefanjudis
* removed redundant imports and replaced the fragment with the shorthand syntax
* Brought back the component import
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
* npm init next-app
* add example video-player component with HLS.js
* add README for example with HLS.js
* update name in package.json
* Update examples/with-hls-js/.gitignore
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Update license to MIT
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* Update next version to latest
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* remove unused pages/api
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* sort posts by date in descending order
Hi, I'm extending getAllPosts function to sort posts array by date in descending order.
Any feedback is appreciated
* sort posts by date timestamp in descending order
* Lint fix
Co-authored-by: Luis Alvarez <luis@vercel.com>
* add new example with-react-bootstrap
* use vanilla react-bootstrap components to implement index page
* clear unnecessary comments
* remove private property in package.json
* Updates
Co-authored-by: Luis Alvarez <luis@vercel.com>
* Resolve bug with Prismic Locales
add configuration for not default locale
* Resolve bug with Prismic Locales
Add configuration for Prismic locale.
More information about bug:
* Fixes and removed unrequired changes
Co-authored-by: Luis Alvarez <luis@zeit.co>
* Update deps
* Run "node-check-update -u"
* "graphql" keeps ^14 since other libs expect it
* Install apollo-link and apollo-cache because @apollo/react-common
wants it as peer-deps
* Add graphql-let/schema/loader
* This enables HMR from modifying *.graphqls.
* Add resolver context
* Remove JSDoc, respect TypeScript defs
* ncu -u
* Keep using graphql@^14.6.0 for the other deps
* fix: Migrate to graphql-let@0.10.0
* Removed duplicated deps
* Updated check
Co-authored-by: Luis Alvarez <luis@zeit.co>
The method initializeStore is only being used locally by useStore.
By having this exported I initially thought the consumer would have to call this as setup globally and then call useStore as well for each consuming component.
Downloading the sample I saw it's only useStore that is being used by the consuming app and this could be made clear by not exporting initializeStore.
* Add example with Magic and Passport.js
* Tweaked wording on README
* Fixed lint error
* Fixed prettier error
* Update examples/magic/README.md
Removed Download manually section from README
Co-Authored-By: Joe Haddad <timer150@gmail.com>
* Removed dependency on passport and express + cleanup
* Changed ZEIT brand to Vercel
* Updated readme instructions and secrets
* Renamed example
* Changed db comment
Co-authored-by: Joe Haddad <timer150@gmail.com>
Co-authored-by: Luis Alvarez <luis@zeit.co>
* add rosetta example
* add comment
* add example for ssr
* add debug example, rerender when i18n keys are added
* output active locale, fix interpolation, fix cases for SSR and CSR
* add useful comments
* address pr issues
* update name in readme
* improve wording
* rename folder
* fix prop typo, add redirects
* load specific i18n json file in getStatisProps
Dashboard dont use any ssr technique
* use ext
* improve example
* Updated example
Co-authored-by: Luis Alvarez <luis@zeit.co>
* update postcss.config.js to fix warnings
Return empty array if the condition is not met to avoid a null/undefined PostCSS plugin.
Related PR: https://github.com/zeit/next.js/pull/11366
* style: correct linting error
* Fix incorrect link in with-passport example
Closes#11961
* hardcode link for with-passport README
* fix link
Co-Authored-By: Luis Alvarez D. <luis@zeit.co>
Co-authored-by: Luis Alvarez D. <luis@zeit.co>
* fix: with-mobx
* refactor: up link
* refactor: npm run prettier-fix
* refactor: server side render
* Updated store implementation and pages
* Updated readme
Co-authored-by: wangcheng <wangcheng@deepblueai.com>
Co-authored-by: Luis Alvarez <luis@zeit.co>
* Fix ts(2341)
Property 'handleRequest' is private and only accessible within class 'Server'.ts(2341)
* Update server.js
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
As far as I understand using preact in Next.js no longer requires a custom server. The current start command `"start": "NODE_ENV=production node server.js"` references a file that no longer exists.
This example creates an authentication system that uses a **signed and encrypted cookie to store session data**. It relies on [`next-iron-session`](https://github.com/vvo/next-iron-session).
It uses current best practices as for authentication in the Next.js ecosystem:
1. **no `getInitialProps`** to ensure every page is static
2. **`useUser` hook** together with [`swr`](https://swr.now.sh/) for data fetching
Features:
- Logged in status synchronized between browser windows/tabs
- Layout based on logged in status
- All pages are static
- Session data is signed and encrypted in a cookie
* Updated with-custom-reverse-proxy
* Updated readme of with-env-from-next-config-js
* Updated the kea example
* Updated with-mobx
* Updated with-mobx readme
* Updated the with-mobx-react-lite example
* Update postcss.config.js
Return empty array if the condition is not met to avoid a null/undefined PostCSS plugin.
* Update postcss.config.js
Fix array spread
* Update postcss.config.js
remove extra operator
* Fix linting
Co-authored-by: Tim Neutkens <timneutkens@me.com>
This change updates the README of the `react-intl` example to show how to use
the FormattedHTMLMessage component from `react-intl` in Node environments when
using pre-v4 versions.
* Add babel-types package
`next dev` was failing with:
```
Error: Cannot find module 'babel-types'
```
* Upgrade to the latest bs-platform
Also add the `babel-types` package to stop the `next dev` command from complaining.
* Remove extraneous babel-plugin-bucklescript dependency.
Seems the dependency has been deprecated, and it doesn't seem to be required
anyways.