Skip to content

Commit 3261e8a

Browse files
xanderiosjscottsmith
authored andcommitted
Update next-13.md
1 parent 151187a commit 3261e8a

File tree

1 file changed

+9
-8
lines changed

1 file changed

+9
-8
lines changed

documentation/docs/usage/next-13.md

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
# Usage with NextJS
21

3-
This will guide you through a way to setup `react-scroll-parallax` using the [Next 13](https://nextjs.org/blog/next-13) App router.
2+
# Usage with Next.js
3+
4+
This guide will show you how to set up `react-scroll-parallax` using the [Next 13](https://nextjs.org/blog/next-13) App router.
45

56
## Setting Up the ParallaxProvider
67

7-
[Next 13](https://nextjs.org/blog/next-13) requires client components to be marked with `use-client`, and the `ParallaxProvider` is a client component. In order to use the providers in your app, first create a `providers.tsx` file in the root of the app directory:
8+
[Next 13](https://nextjs.org/blog/next-13) requires client components to be marked with `use client`, and the `ParallaxProvider` is a client component. To use the providers in your app, first create a `providers.tsx` file in the root of the app directory:
89

910
```
1011
next-app
1112
└── app/
1213
└── providers.tsx
1314
```
1415

15-
In this file wrap the children in a `<ParallaxProvider>` and mark it as a client component.
16+
In this file, wrap the children in a `<ParallaxProvider>` and mark it as a client component.
1617

1718
:::info
1819
You may add any additional providers you need for your app here in the future.
@@ -39,7 +40,7 @@ next-app
3940
└── layout.tsx
4041
```
4142

42-
Your layout may differ from the one below — it is simplified for this example.
43+
Your layout may differ from the one below — it's simplified for this example.
4344

4445
```tsx
4546
import { Providers } from './Providers';
@@ -61,7 +62,7 @@ export default function RootLayout({
6162

6263
## Create a Parallax Effect
6364

64-
Next we can create a simple parallax effect in another client component. Add a `test.tsx` file and place a parallax effect within it. We must also make this as a client component with `use client`.
65+
Next, we can create a simple parallax effect in another client component. Add a `test.tsx` file and place a parallax effect within it. We must also make this a client component with `use client`.
6566

6667
```
6768
next-app
@@ -88,7 +89,7 @@ export default function Test() {
8889

8990
### Use the Parallax within a Page
9091

91-
To add parallax effects to a page, create a `page.tsx` at the route you need. In this example we'll use the homepage so the page exists at the root of the app directory.
92+
To add parallax effects to a page, create a `page.tsx` at the route you need. In this example, we'll use the homepage, so the page exists at the root of the app directory.
9293

9394
```
9495
next-app
@@ -112,4 +113,4 @@ export default function Page() {
112113
}
113114
```
114115

115-
That's it. Now that `react-scroll-parallax` is working in your NextJS application you can add your own effects. See more on [how it works](/docs/examples/how-it-works).
116+
That's it! Now that `react-scroll-parallax` is working in your Next.js application, you can add your own effects. See more on [how it works](/docs/examples/how-it-works).

0 commit comments

Comments
 (0)