Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Next.js WebApp Starter is developed as a TypeScript Next.js app. As such, there are a few things that are worth mentioning.
An up-to-date, reasonably opinionated starter template for Next.js web apps
Next.js WebApp Starter comes with the following features:
sass library installed to enable Next.js' built-in Sass support.
Customizable Base Path
Rewrites, Redirects, and Headers
Optional Trailing Slash in URLs
More to come...
The overarching goal of this project is to provide a Next.js starter template that has the following attributes:
Is open-source.
Actively maintained, with all project dependencies kept up to date.
Integrates new core Next.js features as soon as possible after new Next.js versions are released, accompanied by appropriate documentation in this project's official documentation site and, where suitable, in the code.
Encourages community discussion around any and all features added that fall outside of core Next.js features, while staying aligned with the sub-goals of ensuring that each of these features:
is considered useful by the community
is implemented in a performant and secure manner
As much as possible, developer experience should be impacted only positively, not negatively.
Does not aim to be everything for everyone but instead aims to provide an out-of-the-box feature set that benefits the Next.js community.
is an up-to-date, reasonably opinionated Next.js starter template. It's bootstrapped with , complemented with some icing on top (the reasonably opinionated part).
Note: This is a community-created project and is not affiliated with or .
We only cover core Next.js features in our documentation when it's necessary to help explain a Next.js WebApp Starter feature. To learn more about Next.js itself check out .
It's .
is added as a in the Next.js build chain.
file ready for you to customize to enable the following core features:
Easy use of open source SVG icon packs via the package.
Internationalization support via integration of the and internationalization frameworks.
Easy SEO management via the package.
PWA-enabled via
We're currently in a 0.x iterative release cycle. Check out the version 1.0 roadmap .
Next.js WebApp Starter is an open source project started and being maintained by , a full stack software developer from Barbados.
If you would like to donate to my development efforts on this project, you can do so . All sponsors will be recognized in the project README and here in the documentation.
Development of this project is being done in the open on GitHub and contributions are welcomed. To learn more about how you can contribute, please read the project's and .
After creation, your project should look like this:
The purpose of each of these files and folders are as follows:
This folder should contain all tests written. Currently unit tests are provided for each localized version of the template's index page.
Stores configuration files for most of the starter template's features:
i18n/config.ts - Used by our react-i18next integration. You should not modify this file to customize the configuration for your app, instead you should modify app.config.ts.
jest/cssTransform.js - Used by our Jest setup to transform .css files.
jest/test-utils.tsx - Loaded by each test file to set up the testing framework before each test.
seo/next-seo.config.ts - Configuration file pulled in by our Next SEO integration. You should not modify this file to customize the configuration for your app, instead you should modify app.config.ts.
Stores the following image and json assets:
favicon.ico, *.png - favicon and application icon files.
site.webmanifest - The PWA manifest file.
This is where the custom components, pages, Context API providers, typings and utility code for the project live.
Non-page components
Stores the app's global CSS and CSS/SCSS module files. Feel free to look around at these files to see how easy it is to leverage the Tailwind CSS support integrated with this starter template. Modify/replace the files to suit the needs of your app.
A simple patch release to include the changes to the README and changelog that should have landed in the 0.3.0 release but didn't.
Customizable Base Path
Rewrites, Redirects, and Headers
Optional Trailing Slash in URLs
Installed @meronex/icons package to allow SVG icons to be easily added.
Installed and configure Tailwind CSS framework.
Installed Sass library.
First release to match default web app created by create-next-app with the following differences:
Commands added to the package.json scripts property to bump package version, and commit and tag releases.
Minimum required node version is set to 10.21.0, instead of Next.js' 10.13.0.
EditorConfig file included.
This folder simply contains the project's .
locales - Contains sub-folders for each locale configured for the app, which in turn contain the locale translation files. This is an example of how to configure translation files to leverage i18next's Namespaces feature, more of which you can learn about .
vercel.svg - The Vercel logo that gives us, unaltered.
README: Re-ordered Getting Started options ()
Uninstalled github-buttons package ()
Updated i18next-http-backend and i18next-http-middleware dependencies ()
Updated @types/node and tailwindcss dev dependencies ()
Opts-in to new by default ()
PWA support via next-pwa ()
Revamped index page layout ()
Updated README, changelog, Code of Conduct and contributing guide () () ()
Updated tests that were broken by new index page layout ()
Jest and React Testing Library ()
Unit tests for the homepage (including tests for the header and footer components) ()
file to simply site-wide configuration of your Next.js project ()
Refactor: Moved i18n and seo config files to config/ folder ()
README: Updated Features section ()
Integrated Next SEO plugin library ()
Refactor: Replaced router.push calls in src/lib/utils.ts and src/pages/index.tsx with window.location.href calls to prevent React render error and content jump issue ()
Refactor: Check for presence of lng and translations static props before using useSSR hook ()
Fixed React warning: Did not expect server HTML to contain a <div> in <div> () ()
Refactored code to use TS' type-only imports feature ()
Refactor: i18next and react-i18next are now integrated for i18n solution instead of rosetta ()
Refactor: Default lng to i18nConfig.defaultLng in getLocaleDataForStaticProps ()
Refactor: Updated getT function signature ()
Refactor: Removed babel-plugin-i18next-extract ()
Refactor: i18next debug mode now enabled for development and local build targets only ()
Build: Updated dependencies and devDependencies ()
README: Updated Features section to document that i18n integration is now done via instead of rosetta ()
README: Updated Features section to document Next SEO integration ()
README: Replaced Next.js version badge with dependencies badge ()
Added removeDeprecatedGapUtilities flag to Tailwind config file to opt-in to Tailwind's upcoming breaking change ()
Refactored custom TS type SupportedLocale to SupportedLanguage ()
Bumped NEXT_PUBLIC_APP_VERSION env var to 0.3.2 ()
Updated all documentation site links to point to the new URL ()
Removed unused code from the Header component ()
Updated dev dependencies ()
file ready to be customized to enable the following core features: ()
Demo deployment URL now included near the top of the README ()
Internationalization support via integration of the package ()
Updated the Branch Organization section of the contributing guide ()
Updated Features section of the README to include next.config.js file addition ()
Bumped NEXT_PUBLIC_APP_VERSION env var to 0.3.0 ()
Fixed index page component's responsive design ()
Index page now correctly queries and shows latest release version ()
Removed version number from Docs badge in README ()
Added Code of Conduct ()
Added CONTRIBUTING file ()
Improved README sections and content ()
Removed husky and @commitlint/* packages, git hook and configuration ()
Converted starter template to TypeScript ()
Added documentation section and badge to README ()
Added mention of Tailwind CSS and Sass feature additions to the README ()
Replaced default Next.js README with project-specific README ()
Development packages , and added and configured to enforce local linting of commit messages that follow the .
Project is .
create-next-appUse this template featureThere are two branches. The default branch, named release, contains the code for the latest stable release. The other branch, named canary, is the development branch and holds code for the next release. By default you will only get the release branch. If you want your repository to be created with the canary branch as well, make sure to select the Include all branches checkbox in the repository creation form.
Depending on your workflow either clone, or fork and then clone your repository to your local environment and then do the following:
Install the dependencies:
Run the Next.js development server:
You can use to quickly create a new project with this Starter, by running the following command:
Check out the to familiarize yourself with the project's code structure.
From this project's click the Use this template button to .
Make sure you have (>= 10.21.0) installed.
Open with your browser to run the web app. To specify a port other than 3000 use the -p flag:
Go forth and code your awesome project! We recommend that you read the .
We ship an opinionated feature set on top of the default app that create-next-app gives you. Check out the to familiarize yourself with the code structure of Next.js WebApp Starter.
src/pages/_app.tsx
Next.js WebApp Starter implements the following custom App component:
Let's break down this file.