Neverending Puppy Marathon

    create-nextjs-skeleton

    1.0.1 • Public • Published

    Next.js Skeleton

    GitHub Workflow Status npm

    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

    1.1 Node.js

    First install the Node.js higher or equal to 14.0.0. 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.

    1.4 Preact

    Besides TypeScript, this skeleton uses Preact over React for production builds. This results in smaller build and the same developer experience. Want to switch back to React? Simply delete or comment out the code below in next.config.js and uninstall the package.

    webpack: (config, {dev}) => {
    	if (!dev) {
    		Object.assign(config.resolve.alias, {
    			react: 'preact/compat',
    			'react-dom/test-utils': 'preact/test-utils',
    			'react-dom': 'preact/compat'
    		})
    	}
    
    	return config
    }

    2. Scripts

    • Use yarn dev to start a local dev server for all projects
    • Use yarn dev --scope=<app> to start a local dev server for that project on e.g: http://localhost:3000
    • To test the code using ESLint, use yarn lint
    • To build the application for production, use yarn build lint --scope=<app>
    • To start a production server, open an app folder and use yarn start

    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 Modules, Tailwind CSS and some unit functions from Foundation sites, but use whatever works best for you. For example:

    5. Search engine optimization

    5.1 Meta

    I've created a Meta.tsx 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.tsx 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_. In this skeleton we use a variable for the Google Tag Manager container-ID: NEXT_PUBLIC_GTM. Setup this variable inside a .env file to start using Google Tag Manager.

    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

    Install

    npm i create-nextjs-skeleton@1.0.1

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    82 kB

    Total Files

    91

    Last publish

    Collaborators

    • josbroers