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.
src/pages/_app.tsx
Next.js WebApp Starter implements the following custom App component:
Let's break down this file.
An up-to-date, reasonably opinionated starter template for Next.js web apps
Next.js WebApp Starter is an up-to-date, reasonably opinionated Next.js starter template. It's bootstrapped with create-next-app, complemented with some icing on top (the reasonably opinionated part).
Note: This is a community-created project and is not affiliated with Vercel or Next.js.
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 their official documentation.
Next.js WebApp Starter comes with the following features:
Tailwind CSS is added as a PostCSS plugin in the Next.js build chain.
sass library installed to enable Next.js' built-in Sass support.
next.config.js file ready for you to customize to enable the following Next.js 9.5+ core features:
Customizable Base Path
Rewrites, Redirects, and Headers
Optional Trailing Slash in URLs
Easy use of open source SVG icon packs via the @meronex/icons package.
Internationalization support via integration of the i18next and react-i18next internationalization frameworks.
Easy SEO management via the Next SEO package.
PWA-enabled via next-pwa
More to come...
We're currently in a 0.x iterative release cycle. Check out the version 1.0 roadmap here.
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.
Next.js WebApp Starter is an open source project started and being maintained by Owan Hunte, a full stack software developer from Barbados.
If you would like to donate to my development efforts on this project, you can do so here. 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 Code of Conduct and Contributing Guide.
After creation, your project should look like this:
The purpose of each of these files and folders are as follows:
This folder simply contains the project's Contributing Guide.
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:
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 here.
favicon.ico, *.png - favicon and application icon files.
site.webmanifest - The PWA manifest file.
vercel.svg - The Vercel logo that create-next-app gives us, unaltered.
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.
README: Re-ordered Getting Started options (#55)
Uninstalled github-buttons package (#54)
Updated i18next-http-backend and i18next-http-middleware dependencies (#54)
Updated @types/node and tailwindcss dev dependencies (#54)
Opts-in to Tailwind's new layers mode by default (#54)
PWA support via next-pwa (#51)
Jest and React Testing Library (#46)
Unit tests for the homepage (including tests for the header and footer components) (#46)
config/app.config.ts file to simply site-wide configuration of your Next.js project (#46)
Refactor: Moved i18n and seo config files to config/ folder (#46)
README: Updated Features section (#46)
Integrated Next SEO plugin library (#45)
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 (#44)
Refactor: Check for presence of lng and translations static props before using useSSR hook (bdf3b4e)
Refactored code to use TS' type-only imports feature (#43)
Refactor: i18next and react-i18next are now integrated for i18n solution instead of rosetta (#40)
Refactor: Default lng to i18nConfig.defaultLng in getLocaleDataForStaticProps (#44)
Refactor: Updated getT function signature (#44)
Refactor: Removed babel-plugin-i18next-extract (#44)
Refactor: i18next debug mode now enabled for development and local build targets only (#45)
Build: Updated dependencies and devDependencies (854d0f8)
README: Updated Features section to document Next SEO integration (#45)
README: Replaced Next.js version badge with dependencies badge (#40)
Added removeDeprecatedGapUtilities flag to Tailwind config file to opt-in to Tailwind's upcoming Remove deprecated gap utilities breaking change (58154f9)
Refactored custom TS type SupportedLocale to SupportedLanguage (ee2f5b0)
Bumped NEXT_PUBLIC_APP_VERSION env var to 0.3.2 (0c5a6cc)
Updated all documentation site links to point to the new URL (1332400)
Removed unused code from the Header component (25fda64)
Updated dev dependencies (397afd6)
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.
next.config.js file ready to be customized to enable the following Next.js 9.5+ core features: (#32)
Customizable Base Path
Rewrites, Redirects, and Headers
Optional Trailing Slash in URLs
Demo deployment URL now included near the top of the README (#34)
Updated the Branch Organization section of the contributing guide (#33)
Updated Features section of the README to include next.config.js file addition (b402e35)
Bumped NEXT_PUBLIC_APP_VERSION env var to 0.3.0 (76b9c36)
Fixed index page component's responsive design (#20)
Index page now correctly queries and shows latest release version (#12)
Removed version number from Docs badge in README (#10)
Added Code of Conduct (#17)
Added CONTRIBUTING file (#18)
Improved README sections and content (#19)
Removed husky and @commitlint/* packages, git hook and configuration (#23)
Converted starter template to TypeScript (#2)
Installed @meronex/icons package to allow SVG icons to be easily added.
Installed and configure Tailwind CSS framework.
Installed Sass library.
Added documentation section and badge to README (#5)
Added mention of Tailwind CSS and Sass feature additions to the README (#4)
Replaced default Next.js README with project-specific README (#2)
First release to match default web app created by create-next-app with the following differences:
Development packages husky, @commitlint/cli and @commitlint/config-conventional added and configured to enforce local linting of commit messages that follow the Conventional Commits specification.
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.
Project is MIT licensed.
create-next-appYou can use create-next-app to quickly create a new project with this Starter, by running the following command:
Check out the development guides to familiarize yourself with the project's code structure.
Use this template featureFrom this project's GitHub repository homepage click the Use this template button to create your own GitHub repository from it.
There 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:
Make sure you have Node.js (>= 10.21.0) installed.
Install the dependencies:
Run the Next.js development server:
Open http://localhost:3000 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 development guides.
We ship an opinionated feature set on top of the default app that create-next-app gives you. Check out the development guides to familiarize yourself with the code structure of Next.js WebApp Starter.