Next.js Boilerplate

This is a Next.js project bootstrapped with create-next-app.

Features

• 🎉 Next.js for Static Site Generator

• 🔧 Type checking TypeScript

• 💚 Integrate with TailwindCSS

• ✨ Code Formatter with Prettier

• 🚨 Linter with ESLint

• ✅ Testing with Jest

• 🎨 Build a design system with Storybook

• 🚀 Deploy with AWS Amplify

Requirements

• Docker Desktop

Getting Started

Rename project

Grep all files in the project with nextjs-boilerplate and replace them with the project name of your choice.

Run the development server

docker-compose build
docker-compose up

• Next.js App: http://localhost:3000

• Storybook: http://localhost:6006

Development

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Format the code

docker-compose exec app yarn format

Linting

docker-compose exec app yarn lint

Testing

docker-compose exec app yarn test

Deploy to AWS Amplify

Prerequisites

npm install -g @aws-amplify/cli

amplify configure

Deploy and host a hybrid app (SSG and SSR)

Initialize a new Amplify project.

$ amplify init

? Enter a name for the project: # <your app name>
? Enter a name for the environment: # dev
? Choose your default editor: # Visual Studio Code (or your preferred editor)
? Choose the type of app that youre building: # javascript
? What javascript framework are you using: # react
? Source Directory Path: # src
? Distribution Directory Path: # .next
? Build Command: # npm run-script build
? Start Command: # npm run-script start
? Select the authentication method you want to use: # AWS profile
? Please choose the profile you want to use: # <your profile>

Add hosting with Amplify add command:

$ amplify add hosting

? Select the plugin module to execute: # Hosting with Amplify Console
? Choose a type: # Manual deployment

The Amplify Console opens and displays your deployed backend environment.

Choose the Frontend environments tab, select your Git provider, then choose Connect Branch.

Follow the steps in the Amplify console to choose the branch to connect, and deploy your app.

After your site is successfully deployed, you'll see green checkmarks.

To view the live site, click on the automatically generated URL.

Deleting the App

To delete the app and the deployment, run the delete command:

amplify delete

Deploy and host a hybrid app (SSG and SSR)

License

Licensed under the MIT License, Copyright © 2021-present ryichk