Next.js (SSG) + Tailwind CSS (postcss, sass, clsx) + TypeScript + i18next : Starter

Next.js SSG - Static Site Generation

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

npx create-next-app nextjs-ssg --use-npm

ℹ️  use the node.js v16 LTS

Bootstrap a new project using this template

You can do it following one of the 2 options bellow:

1. Using create-next-app

npx create-next-app -e https://github.com/erkobridee/nextjs-ssg ${new project name}

2. Use this repository as template

Creating a repository from a template | GitHub Docs

Getting Started

First, run the development server:

npm start

Open http://localhost:3000 with your browser to see the result.

Bundle Analize

npm run bundle-analyze

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!

Useful links

• Next.js

  • Next.js v12

    • [YouTube] Next.js 12 is a Beast | Fireship

    • [YouTube Playlist] Next.js Conf 2021

    • Known issue: some thrid-party libraries doesn't work correctly when it's bundled using the swcMinify

  • Create a Next.js App

  • Markdown/MDX with Next.js

  • Data Fetching | Nextjs Documentation

    • getStaticProps - fetch data at build time

    • getStaticPaths - generate static files

  • [GitHub] next.js/examples/gh-pages/

  • [GitHub] next.js/examples/with-jest/

• [YouTube] Next.js Static Site Generation (SSG)

• [YouTube] Next.js Static Site Generation (SSG) Tutorial

• [YouTube] Learn Next.js in One Video - Fundamentals of Next.js

• [YouTube] Next.js 10's New Image Component

• How to Use Github Actions to Deploy a Next.js Website to AWS S3 | freeCodeCamp

• Next.js app on Github Pages | ITNEXT

• Start a clean Next.js project with TypeScript, ESLint and Prettier from scratch | PAULIN TROGNON

  • [GitHub] paulintrognon/next-typescript

• What is Static Site Generation? How Next.js Uses SSG for Dynamic Web Apps | freeCodeCamp

• Nested dynamic layouts in Next.js apps | React Tricks - youtube | github

• Automatic Image Optimization: Next.js 10 New Standards for 2020 | Hackernoon

• [GitHub] newhighsco/next-plugin-svgr - SVGR plugin for Next.js

• [GitHub] toplenboren/simple-git-hooks

TypeScript

npm install --save-dev typescript @types/react @types/node

• TypeScript Language

• React with TypeScript

  • React + TypeScript - Cheatsheets

  • useTypescript — A Complete Guide to React Hooks and TypeScript

• Next.js - Basic Features: TypeScript

• Next.js TypeScript Types

  • TypeScript Next.js example

• Using Next.js with TypeScript | LogRocket - 2020/12/18

• How to setup NextJS with TypeScript and ESLint + prettier | De Code Natura - 2020/05/18

Testing

• Testing | Next.js Docs

• How to Set Up Jest and React Testing Library with Next.js | Kyrell Dixon

• How to create Next.js project with TypeScript, Jest, React Testing Lib | Night Zen - 2021/07/31

• How to Setup Next.js + TypeScript + Eslint + Storybook + Jest + Enzyme - by Caelin Sutch | JavaScript in Plain English - 2020/12/31

i18n

the next.js doesn't support natively i18n on the static site generation on the v10 - i18n with next export calls getStaticProps for each defined lang, but then errors #18318

said that, we need to use the react side i18n approach

npm i --save i18next i18next-browser-languagedetector react-i18next

• i18next

  • react-i18next

  • i18next-browser-languagedetector | npm

• [GitHub] i18next/i18next-parser

• [GitHub] locize/translation-check - This package shows an overview of your translations. Check which keys are not yet translated.

• [GitHub] juliandavidmr/i18n-editor - web editor : Simple JSON localization file manager for i18n json files

• BabelEdit - (paid) Translation editor for (web) apps

  • Licenses | BabelEdit Store

  • How to translate your React app with react-i18next | BabelEdit Tutorial

i18next plugins that doesn't work with next.js

• i18next-http-backend | npm - Error: ReactDOMServer does not yet support Suspense.

• i18next-localstorage-backend | npm - ReferenceError: window is not defined

  • How to solve "window is not defined" errors in React and Next.js | Dev.to

• i18next-chained-backend | npm

TailwindCSS

• TailwindCSS

  • Using PostCSS as your preprocessor | TailwindCSS Docs

    • [GitHub] tailwindlabs/prettier-plugin-tailwindcss

      • Automatic Class Sorting with Prettier - Tailwind CSS

• Craft Scalable, Custom-Made Interfaces with Tailwind CSS | egghead.io

• Connecting React 17, TypeScript, Tailwind CSS, NextJS Into Developers Friendly Application | Hacker Noon

• Customizing PostCSS Config | Next.js Docs

• [YouTube] Building a Headless Ecommerce Store with Tailwind CSS, Shopify, and Next.js - Tailwind Labs

pt_Br

• [YouTube] Como inicio meus apps com ReactJS? Next.js, TypeScript, ESLint e Styled Components | Code/Drops #50

• [YouTube] Serverless com ReactJS e Next.js na Vercel | Code/Drops #54

• [YouTube] Essa feature fez o Next.js ser o framework mais popular | Code/Drops #59

• [YouTube] Como fazer SEO com React, NextJS e Deploy estático feat. Dicas de Performance | Pokedex