nextjs-skeleton
A simple and highly customizable skeleton build with Turborepo and Next. The skeleton is bootstrapped with create-next-app and has the following features:
Table of contents
- 1. Setup
- 2. Scripts
- 3. Security
- 4. Styling
- 5. Search engine optimization
- 6. Environment variables
- 7. Vercel CLI
- 8. Remote caching
1. Setup
1.1 Node.js
First install the Node.js higher or equal to ^18.x Use the JavaScript Tool Manager Volta or the Node Version Manager.
1.2 How to install this template
After successfully installing Node.js you can create an app using this skeleton. We recommend creating a new app
using npx
or yarn create
, which sets up everything automatically for you. To create a project, run:
npx create-nextjs-skeleton
# or
npm init nextjs-skeleton
# or
yarn create nextjs-skeleton
1.3 TypeScript
This skeleton uses TypeScript out of the box. If you don't feel comfortable using it or don't need it, just rename
all the files to their JavaScript equivalent (.js
and .jsx
) and uninstall TypeScript and all the @types
listed in
the package.json
.
2. Scripts
-
npm run dev
- Start a local dev server, e.g: http://localhost:3000 -
npm run lint
- Test your code using ESLint and Stylelint -
npm run build
- Build your application -
npm run deploy
- Build and test your application to deploy -
npm start
- Start a production server
3. Security
By default, Next doesn't provide all the security headers which results in a vulnerable application. I've added the default security headers listed in the Next docs. To test your application for security headers, visit securityheaders.com
4. Styling
With Next there's a lot of options to style your projects. This skeleton uses Sass, CSS Modules , Modern Normalize and some unit functions inspired by Foundation sites, but use whatever works best for you. For example:
5. Search engine optimization
5.1 Meta
I've created a <Meta>
component which adds all the properties required regarding SEO. You can set up default props or
feed it dynamically with data.
5.2 Schema
I've also created a <Schema>
component to add schema markup for WebSite and WebPage to your side. You can also set up
default props or feed it dynamically with data.
6. Environment variables
Next has built-in support for environment variables and the option to expose variables to the browser by prefixing
with NEXT_PUBLIC_
.
7. Vercel CLI
Whenever possible, I recommend deploying to Vercel. It's free, easy to use and gets you running within minutes (hint: This template was deployed via Vercel). A few commands to get you started:
- Install Vercel CLI with
npm install -g vercel
- Connect a project with
vercel link
and configure credentials accordingly - Use
vercel env pull
to get the environment variables - Use
vercel dev
to deploy a local test server at http://localhost:3000 - Use
vercel
to deploy a preview build - Use
vercel --prod
to deploy a production build
8. Remote caching
With Turborepo, you can connect to the Vercel Remote Cache to share build artifacts. You first need to authenticate the
Turborepo CLI with your Vercel account using npx turbo login
. Then link your repo to enable the Remote Caching
using npx turbo link
.
You will get a prompt to enable Remote Caching for the current repo. Enter Y for yes to enable Remote Caching. Next,
select the team scope you'd like to connect to. Once completed, Turborepo will use Vercel Remote Caching to store the
cache artifacts.