Skip to content

Latest commit

 

History

History

nextjs-starter

README.md

Next.js + Encore TS Web App Starter

This is an Encore + Next.js project starter. It's a great way to learn how to combine Encore's backend capabilities with a modern web framework — perfect for building a web app.

Prerequisites

Install Encore:

  • macOS: brew install encoredev/tap/encore
  • Linux: curl -L https://encore.dev/install.sh | bash
  • Windows: iwr https://encore.dev/install.ps1 | iex

Create app

Create a local app from this template:

encore app create --example=ts/nextjs-starter

Run app locally

Start Encore by running this command from your application's root folder:

encore run

In another terminal window, start the Next.js frontend:

npm run dev

Go to http://localhost:3000 in the browser to see the example frontend.

You can also access Encore's local developer dashboard on http://localhost:9400/ to view traces, API documentation, and more.

Generating a request client

Keep the contract between the backend and frontend in sync by regenerating the request client whenever you make a change to an Encore endpoint.

npm run gen # Will create a new request client app/lib/client.ts

Deployment

Self-hosting

See the self-hosting instructions for how to use encore build docker to create a Docker image and configure it.

Encore Cloud Platform

Deploy your application to a free staging environment in Encore's development cloud using git push encore:

git add -A .
git commit -m 'Commit message'
git push encore

You can also open your app in the Cloud Dashboard to integrate with GitHub, or connect your AWS/GCP account, enabling Encore to automatically handle cloud deployments for you.

Next.js on Vercel

The only thing you need to do is to create a new project on Vercel and point it to your newly created GitHup repo.

Link to GitHub

Follow these steps to link your app to GitHub:

  1. Create a GitHub repo, commit and push the app.
  2. Open your app in the Cloud Dashboard.
  3. Go to Settings ➔ GitHub and click on Link app to GitHub to link your app to GitHub and select the repo you just created.
  4. To configure Encore to automatically trigger deploys when you push to a specific branch name, go to the Overview page for your intended environment. Click on Settings and then in the section Branch Push configure the Branch name and hit Save.
  5. Commit and push a change to GitHub to trigger a deploy.

Learn more in the docs

CORS configuration

If you are running into CORS issues when calling your Encore API from your frontend then you may need to specify which origins are allowed to access your API (via browsers). You do this by specifying the global_cors key in the encore.app file, which has the following structure:

global_cors: {
  // allow_origins_without_credentials specifies the allowed origins for requests
  // that don't include credentials. If nil it defaults to allowing all domains
  // (equivalent to ["*"]).
  "allow_origins_without_credentials": [
    "<ORIGIN-GOES-HERE>"
  ],
        
  // allow_origins_with_credentials specifies the allowed origins for requests
  // that include credentials. If a request is made from an Origin in this list
  // Encore responds with Access-Control-Allow-Origin: <Origin>.
  //
  // The URLs in this list may include wildcards (e.g. "https://*.example.com"
  // or "https://*-myapp.example.com").
  "allow_origins_with_credentials": [
    "<DOMAIN-GOES-HERE>"
  ]
}

More information on CORS configuration can be found here: https://encore.dev/docs/develop/cors

Learn More