You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Once you have access to [the environment variables you'll need](#step-3-set-up-environment-variables), deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
15
-
16
-
[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-prepr&project-name=cms-prepr&repository-name=cms-prepr&env=PREPRIO_API,PREPRIO_PRODUCTION_TOKEN,PREPRIO_PREVIEW_TOKEN,PREPRIO_PREVIEW_KEY&envDescription=Required%20to%20connect%20the%20app%20with%20Prepr&envLink=https://vercel.link/cms-prepr-env)
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app)with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/)to bootstrap the example:
14
+
Execute one of the following [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app)commands using [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io)to create a new Next.js app and connect it to Prepr:
First, [create an account in Prepr](https://prepr.io).
28
+
## Configuration
33
29
34
-
### Step 2. Create Author model
30
+
### Step 1. Set up Prepr
35
31
36
-
From your Prepr dashboard, click **Settings** -> **Models**
32
+
**1.1** First, [sign up for a Prepr account](https://signup.prepr.io/).
37
33
38
-
Click on the arrow next to **Add model** and select **Import**.
34
+
**1.2** After you sign up, create a new environment in Prepr. For more details, [check out the environment docs](https://docs.prepr.io/developing-with-prepr/set-up-environments).
39
35
40
-
Import the [`models/author.json`](models/author.json) file.
**1.3** Once you’ve created the environment, choose to **Load demo data**. With that, Prepr will automatically upload sample models, content items, and other data you can use for your example Next.js app.
43
39
44
-
Import the [`models/post.json`](models/post.json) file.
Click on the Author field and select `Author` at the option `Publication model` and click **Save**.
42
+
### Step 2. Set up environment variables
47
43
48
-
### Step 3. Set up environmentvariables
44
+
Once you’ve set up your Prepr environment, you can define environment variables for your project. Please proceed with the steps below.
49
45
50
-
Copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):
46
+
**2.1** Run the following command to copy and rename the `.env.local.example` file as follows:
51
47
52
48
```bash
53
49
cp .env.local.example .env.local
54
50
```
55
51
56
-
Inside your environment, navigate to **Settings > Development > Access Tokens**.
52
+
The `.env.local` file will be ignored by Git.
53
+
54
+
**2.2** In your environment, navigate to **Settings > Development > Access Tokens**. You will see the automatically generated access tokens for your Prepr environment.
57
55
58
-
Click **Add access token**, enter the name `Next.js Preview` and add the scope `graphql_preview` and click **Save**.
Copy the generated access token and set the variable `PREPRIO_PREVIEW_TOKEN`in `.env.local`.
58
+
Copy the *GraphQL Production*access token and paste it as the `PREPRIO_PRODUCTION_TOKEN` variable in `.env.local`. Then copy and paste the *GraphQL Preview* access token as the `PREPRIO_PREVIEW_TOKEN` variable.
61
59
62
-
Go back to the Access token overview and click**Add access token**.
60
+
Alternatively, you can create access tokens yourself by clicking**Add access token**. If so, make sure to [choose the right GraphQL permissions](https://docs.prepr.io/reference/graphql/v1/authorization) for the access tokens.
63
61
64
-
Enter the name `Next.js Production` and add the scope `graphql_published` and click **Save**.
62
+
**2.3** Set a custom value with no spaces as the `PREPRIO_PREVIEW_SECRET` variable, for example, a UUID. This value will be used to enable [preview mode](https://nextjs.org/docs/advanced-features/preview-mode).
65
63
66
-
Copy the generated access token and set the variable `PREPRIO_PRODUCTION_TOKEN` in `.env.local`.
64
+
Once done, your `.env.local` file should look like this:
65
+
66
+
```bash
67
+
PREPRIO_API=https://graphql.prepr.io/graphql
68
+
PREPRIO_PRODUCTION_TOKEN='your Production access token'
69
+
PREPRIO_PREVIEW_TOKEN='your Preview access token'
70
+
PREPRIO_PREVIEW_SECRET='your secret id'
71
+
```
67
72
68
-
The `PREPRIO_PREVIEW_KEY` can be any random string (but avoid spaces), like a UUID`, this is used
69
-
for [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode).
73
+
### Step 3. Run Next.js in development mode
70
74
71
-
### Step 4. Run Next.js in development mode
75
+
Now that you've finished preparing the project, you may proceed to run it.
76
+
77
+
**3.1** Execute one of the following commands to install the packages listed in the `package.json` file:
72
78
73
79
```bash
74
80
npm install
75
-
npm run dev
76
-
77
-
# or
81
+
```
78
82
83
+
```bash
79
84
yarn install
85
+
```
86
+
**3.2** Execute one of the following commands to run the dev script defined in the `package.json` file:
87
+
88
+
```bash
89
+
npm run dev
90
+
```
91
+
92
+
```bash
80
93
yarn dev
81
94
```
82
95
83
-
Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).
96
+
Your example Blog website should be up and running on [http://localhost:3000](http://localhost:3000). If it doesn't work, please post on [GitHub discussions](https://github.com/vercel/next.js/discussions).
97
+
98
+
### Step 4. Optional: Try Preview mode
99
+
100
+
Great progress has been made! You are just a few steps away from getting your example website live.
101
+
Before proceeding, you can test how the content preview works in Prepr. This step is optional. Proceed to Step 5 if you don’t want to use preview mode.
84
102
85
-
### Step 5. Try preview mode
103
+
To try preview mode, follow these steps:
86
104
87
-
In Prepr, go to one of the posts in your environment and:
105
+
**4.1**In Prepr, go to one of the content items of the *Article model*and update the item title. For example, you can add *[PREVIEW]* in front of the title. After you edit the content item, save it with the *Review status*.
88
106
89
-
-**Update the title**. For example, you can add `[REVIEW]` in front of the title.
90
-
- After you edit the publication save the post with a review state.
107
+
**4.2** To preview the content item, transform its URL to the following format:
91
108
92
-
To view the preview, transform the url to the following format: `http://localhost:3000/api/preview?secret=<YOUR_SECRET_TOKEN>&slug=<SLUG_TO_PREVIEW>` where `<YOUR_SECRET_TOKEN>` is
93
-
the same secret you defined in the `.env.local` file and `<SLUG_TO_PREVIEW>` is the slug of one of the posts you want to preview.
-`<PREPRIO_PREVIEW_SECRET>` is the same preview secret you defined in the `.env.local` file;
112
+
-`<SLUG_TO_PREVIEW>` is the slug of the content item you want to preview.
94
113
95
-
You should now be able to see post that are in Review and Done state. To exit the preview mode, you can click on _"Click here to exit preview mode"_ at the top.
114
+
**Note:**To exit the preview mode, you must click on **Click here to exit preview mode** at the top of the page.
You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
118
+
### Step 5. Deploy on Vercel
100
119
101
-
#### Deploy Your Local Project
120
+
To make your Next.js app available online, deploy it to the cloud using [Vercel](https://vercel.com/?utm_source=github&utm_medium=readme&utm_campaign=next-example). Vercel provides a user-friendly platform for deploying and managing web applications. For more information, please [refer to the Next.js documentation](https://nextjs.org/docs/deployment).
102
121
103
-
To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example).
122
+
You can go for one of the following options:
104
123
105
-
**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.
124
+
***Deploy your local project**</br>
125
+
To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import it to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example).
106
126
107
-
#### Deploy from Our Template
127
+
**Important:** When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.
108
128
109
-
Alternatively, you can deploy using our template by clicking on the Deploy button below.
129
+
***Deploy from our template**</br>
130
+
Alternatively, you can deploy using our template by clicking on the **Deploy** button below.
110
131
111
-
[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-prepr&project-name=cms-prepr&repository-name=cms-prepr&env=PREPRIO_API,PREPRIO_PRODUCTION_TOKEN,PREPRIO_PREVIEW_TOKEN,PREPRIO_PREVIEW_KEY&envDescription=Required%20to%20connect%20the%20app%20with%20Prepr&envLink=https://vercel.link/cms-prepr-env)
132
+
[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-prepr&project-name=cms-prepr&repository-name=cms-prepr&env=PREPRIO_API,PREPRIO_PRODUCTION_TOKEN,PREPRIO_PREVIEW_TOKEN,PREPRIO_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Prepr&envLink=https://vercel.link/cms-prepr-env)
112
133
134
+
## Next steps
113
135
114
-
### Questions?
136
+
For more advanced topics, please refer to the Prepr’s documentation:
Join us on [Slack](https://slack.prepr.io)or contact support at support@prepr.io.
141
+
If you have questions, please [get in touch](https://prepr.io/get-in-touch) with one of our specialists or [join our Slack community](https://slack.prepr.io/).
0 commit comments