Skip to content

Commit 5beb7f9

Browse files
authored
Update README.md
1 parent b8d1d1f commit 5beb7f9

File tree

1 file changed

+12
-32
lines changed

1 file changed

+12
-32
lines changed

README.md

+12-32
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,18 @@
1-
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
1+
# How to Setup React Context API in Next.js 13 App Directory
22

3-
## Getting Started
3+
Do you want to use React Context API to manage states globally and avoid prop drilling in your Next.js 13 app directory? If so, you've come to the right place. This article will guide you through the process of setting up and implementing the React Context API in your Next.js 13 app.
44

5-
First, run the development server:
5+
![How to Setup React Context API in Next.js 13 App Directory](https://codevoweb.com/wp-content/uploads/2023/03/How-to-Setup-React-Context-API-in-Next.js-13-App-Directory.webp)
66

7-
```bash
8-
npm run dev
9-
# or
10-
yarn dev
11-
# or
12-
pnpm dev
13-
```
7+
## Topics Covered
148

15-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
9+
- Setup the Next.js 13 Project
10+
- Create the Context Provider
11+
- Provide the Context Provider to Next.js
12+
- Use the Context API in the Next.js 13
13+
- Fetch and Display Data From an API
14+
- Bring All the Components Into the App Directory
15+
- Conclusion
1616

17-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
17+
Read the entire article here: [https://codevoweb.com/setup-react-context-api-in-nextjs-13-app-directory/](https://codevoweb.com/setup-react-context-api-in-nextjs-13-app-directory/)
1818

19-
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
20-
21-
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
22-
23-
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
24-
25-
## Learn More
26-
27-
To learn more about Next.js, take a look at the following resources:
28-
29-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
30-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
31-
32-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
33-
34-
## Deploy on Vercel
35-
36-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
37-
38-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

0 commit comments

Comments
 (0)