kulkarniankita/discover-coffee-stores

This app allows you to discover coffee stores, check out the course http://bit.ly/nextjs-udemy-ankita on how to build this

Before you run the app

Please go through the below details before you run the app.

Environment Variables

For this app to work, you need to configure the following environment variables in your .env.local file so please create a .env.local file in the root of your project right next to readme.md and the file needs to look like this:

NEXT_PUBLIC_FOURSQUARE_API_KEY=<value>
AIRTABLE_API_KEY=<value>
AIRTABLE_BASE_KEY=<value>
NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=<value>

PLEASE NOTE,

You need to configure the above API keys by going to Foursquare, Airtable and Unsplash for their respective keys. To generate API keys for all 3 platforms, you need to sign up, create an account, create a project and generate an API key for each platform. Otherwise, the course walks you through how to create each one of those if you get stuck!

If don't have valid API keys i.e. they are empty, or you don't have a .env.local file with the above keys configured or above keys exists but no values are not configured inside that file then you will get the following error:

Common Errors

If you use Node.js version greater than 16, you may see this problem: vercel/next.js#37300

Example Error:

(node:36337) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 33 ms (258 modules)
error - TypeError
    at normalizeAndValidateHeaderValue (node:internal/deps/undici/undici:4210:15)
    at HeadersList.append (node:internal/deps/undici/undici:4268:33)
    at fill (node:internal/deps/undici/undici:4235:19)
    at new Request (node:internal/deps/undici/undici:4982:13)
    at Agent.fetch2 (node:internal/deps/undici/undici:5539:29)
    at Object.fetch (node:internal/deps/undici/undici:6370:20)
    at fetch (node:internal/bootstrap/pre_execution:196:25)
    at fetchCoffeeStores (webpack-internal:///./lib/coffee-stores.js:33:28)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getStaticProps (webpack-internal:///./pages/index.js:44:26) {
  page: '/'
}

Solution:

Downgrade Node.js version to 16 as v18 ships experimental fetch api that can have breaking changes.

You didn't configure Environment variables as mentioned in this Readme

If don't have valid API keys i.e. they are empty, or you don't have a .env.local file with the above keys configured or above keys exists but no values are not configured inside that file then you will get the following error:

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

discover-coffee-stores's Issues

Error: Cannot read properties of undefined (reading 'results')

Hey I'm following you via ZtM and at the lesson 13 you deploy this repo, but on my side I have an error:

step to reproduce

try 1

1. git clone the repo
2. cd repo
3. npm install
4. npm run dev

try 2

1. git clone the repo
2. cd repo
3. npm install
4. npm audit fix
5. npm run dev

error

error - TypeError: Cannot read properties of undefined (reading 'results')
    at getListOfCoffeeStorePhotos (D:\Public\discover-coffee-stores\.next\server\pages\index.js:276:43)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async fetchCoffeeStores (D:\Public\discover-coffee-stores\.next\server\pages\index.js:281:18)
    at async getStaticProps (D:\Public\discover-coffee-stores\.next\server\pages\index.js:3107:24)
    at async Object.renderToHTML (D:\Public\discover-coffee-stores\node_modules\next\dist\server\render.js:329:24)
    at async doRender (D:\Public\discover-coffee-stores\node_modules\next\dist\server\next-server.js:1144:38)
    at async D:\Public\discover-coffee-stores\node_modules\next\dist\server\next-server.js:1236:28
    at async D:\Public\discover-coffee-stores\node_modules\next\dist\server\response-cache.js:64:36 {
  page: '/'
}
wait  - compiling...
event - compiled successfully

Foursquare API response no longer includes "neighborhood" field with other important issues

1. The API value has changed. You can check here to see that Foursquare no longer provides neighborhood as a response. Locality or cross_street could be used in place of that.

2. The Airtable API key will be deprecated in January 2024, and they recommend using a personal access token instead. However, after configuring it, the following code:

export const fetcher = (url) => fetch(url).then((res) => res.json());

shows an error when used for useSWR (500 internal error) . I am still working on fixing this and will contact the team, as discussed in the airtable-js repository.

3. The image changes on refresh when you visit this page. This is definitely a bug, and it occurs in most coffee store components, including pre-rendered and dynamic ones.

I hope this helps in improving the project.

I learned Next.js from this public repository. Thank you for making it available.

error - Failed to load next.config.js

error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
C:\Users\pc\discover-coffee-stores\next.config.js:9
export default nextConfig;
^^^^^^

SyntaxError: Unexpected token 'export'
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1033:15)
at Module._compile (node:internal/modules/cjs/loader:1069:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at ModuleWrap. (node:internal/modules/esm/translators:170:29)
at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:385:24)

https://discovery-coffee-stores.vercel.app/coffee-store/22334455

twice render component

twice render component in strict mode : true