Skip to content

(docs: nextjs QS) fix incorrect title; update convexclientprovider explanation #60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

(docs: nextjs QS) fix incorrect title; update convexclientprovider explanation #60

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 12 additions & 14 deletions npm-packages/docs/docs/quickstart/nextjs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ Alternatively see the
version of this quickstart.

<StepByStep>
<Step title="Create a React app">
<Step title="Create a Next.js app">
Create a Next.js app using the `npx create-next-app` command.

Choose the default option for every prompt (hit Enter).
Expand All @@ -66,8 +66,8 @@ version of this quickstart.
</Step>
<Step title="Install the Convex client and server library">
To get started, install the `convex`
package which provides a convenient interface for working
with Convex from a React app.
package, which provides a convenient interface for working
with Convex.
Comment on lines +69 to +70
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
package, which provides a convenient interface for working
with Convex.
package.

agree "from a React app" wasn't very useful, and now the rest doesn't seem useful either IMO


Navigate to your app and install `convex`.

Expand Down Expand Up @@ -106,9 +106,7 @@ version of this quickstart.
</Step>

<Step title="Add the sample data to your database">
Now that your project is ready, add a `tasks` table
with the sample data into your Convex database with
the `import` command.
Use the [`import`](/database/import-export/import) command to add a `tasks` table with the sample data into your Convex database.

```
npx convex import --table tasks sampleData.jsonl
Expand All @@ -117,12 +115,11 @@ version of this quickstart.
</Step>

<Step title="Expose a database query">
Add a new file <JSDialectFileName name="tasks.ts" /> in the `convex/` folder
with a query function that loads the data.
In the `convex/` folder, add a new file <JSDialectFileName name="tasks.ts" /> with a query function that loads the data.

Exporting a query function from this file
declares an API function named after the file
and the export name, `api.tasks.get`.
and the export name: `api.tasks.get`.

<TSAndJSSnippet
sourceTS={tasks}
Expand All @@ -133,8 +130,9 @@ version of this quickstart.
</Step>

<Step title="Create a client component for the Convex provider">
Add a new file <JSDialectFileName name="ConvexClientProvider.tsx" /> in the `app/` folder. Include the `"use client";` directive, create a
`ConvexReactClient` and a component that wraps its children in a `ConvexProvider`.
For `<ConvexProvider>` to work on the client, `<ConvexReactClient>` must be passed to it.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
For `<ConvexProvider>` to work on the client, `<ConvexReactClient>` must be passed to it.
For `<ConvexProvider>` to work on the client, `ConvexReactClient` must be passed to it.


In the `app/` folder, add a new file <JSDialectFileName name="ConvexClientProvider.tsx" /> with the following code. This creates a component that wraps `<ConvexProvider>` and passes it the `<ConvexReactClient>`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
In the `app/` folder, add a new file <JSDialectFileName name="ConvexClientProvider.tsx" /> with the following code. This creates a component that wraps `<ConvexProvider>` and passes it the `<ConvexReactClient>`.
In the `app/` folder, add a new file <JSDialectFileName name="ConvexClientProvider.tsx" /> with the following code. This creates a client component that wraps `<ConvexProvider>` and passes it the `<ConvexReactClient>`.


<TSAndJSSnippet
sourceTS={ConvexClientProvider}
Expand All @@ -145,7 +143,7 @@ version of this quickstart.
</Step>

<Step title="Wire up the ConvexClientProvider">
In <JSDialectFileName name="app/layout.tsx" ext="js" />, wrap the children of the `body` element with the `ConvexClientProvider`.
In <JSDialectFileName name="app/layout.tsx" ext="js" />, wrap the children of the `body` element with the `<ConvexClientProvider>`.

<TSAndJSSnippet
sourceTS={layout}
Expand All @@ -158,7 +156,7 @@ version of this quickstart.
</Step>

<Step title="Display the data in your app">
In <JSDialectFileName name="app/page.tsx" ext="js" />, use the `useQuery` hook to fetch from your `api.tasks.get`
In <JSDialectFileName name="app/page.tsx" ext="js" />, use the `useQuery()` hook to fetch from your `api.tasks.get`
API function.

<TSAndJSSnippet
Expand All @@ -172,7 +170,7 @@ version of this quickstart.
</Step>

<Step title="Start the app">
Start the app, open [http://localhost:3000](http://localhost:3000) in a browser,
Run your development server, open [http://localhost:3000](http://localhost:3000) in a browser,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since "development server" is an overloaded term in convex I'll add "Next.js" or "frontend" here

and see the list of tasks.

```sh
Expand Down