Shape Blog Next.js — The Shape Blog Sample Project Built With Next.js

This is a sample project to get you started building a static website with TakeShape (TS) and Next.js. This project references the same Shape Blog content template as the shape-blog sample project but instead of directly generating the page source using the TakeShape Static Site Generator (SSG), it uses the Next.js framework to create a statically-generated React application.

Quickstart

1. Use the "Deploy to TakeShape" button to create the project in TakeShape.
2. Set up and run the client application
   1. git clone https://github.com/takeshape/takeshape-samples takeshape-samples && cd takeshape-samples/shape-blog-nextjs
   2. npm install or yarn - This will install all dependencies

Connect your project

1. In your "Shape Blog" TakeShape project, create a new API Key
2. Create a .env file in the project root containing values for your TAKESHAPE_PROJECT and TAKESHAPE_API_KEY, such as:

TAKESHAPE_PROJECT="YOUR PROJECT ID HERE"
TAKESHAPE_API_KEY="YOUR API KEY HERE"

1. npm run dev or yarn dev - The server runs on http://localhost:3000 by default
2. Have fun playing around with the sample site!
   • Change some markup a template file and the site will regenerate automatically
   • Try adding a new field to an existing content type then add it to the corresponding GraphQL query and template

See the shape-blog README for additional documentation

Deploy

ZEIT Now

An easy way to deploy Next.js to production is with ZEIT Now, a platform from the creators of Next.js.

Alternatively you can use the now CLI.

npm install -g now

You may need to use the now login command to authenticate your CLI.

Next, add your TakeShape credentials to Now so that it can use them when running your site:

now secrets add takeshape-api-key YOUR-API-KEY
now secrets add takeshape-project YOUR-PROJECT-ID

Then you can deploy using the now command from the project root:

now

Netlify

Deploying to Netlify requires the use of the next build and next export commands, which are provided in package.json as export.

First install the Netlify CLI using npm or Yarn. Using npm:

npm install netlify-cli -g

You may need to use the netlify login command to authenticate your CLI.

Then, build and export your project:

npm run export
# or
yarn export

Then deploy using the Netlify CLI:

netlify deploy

Reach out

If we can make your life easier we want to hear from you at support@takeshape.io