NextJS recommends using App routing instead of Page to better work with ReactJS. Automatically the Router /app directory will be in /src. It is ignored if there is a similar directory in the outermost directory. In directories, routes can only access the file page.tsx or route.tsx , other files are protected. However, it is still not a good idea to put project files in the app folder, just use it as a route.
Using CNA “npx create-next-app@latest” is also advised instead of creating the project manually. And setting @latest is easier to maintain than fixing the current version.
Using TypeScript, ES Lint, Tailwind CSS is recommended
src will be the directory where the project code is stored
Keep the “default import alias” style @/* to use the path
Do not use Div, Box, Span,… Should use Semantic Element Tags (element tags with specific semantics) or Fragments
Create a .env.local file outside the same project to configure environment variables. Environment variables in this file can use variables declared with $. Variables with the NEXT_PUBLIC_ prefix are accessible from the client side. In addition, it is possible to split into .env, .env.development and .env.production files so that they run separately in dev or production environments. Remember to Git inorge them to keep them secure. Possible environments are production, development and test.
Original ingredients next.config.js Configuration file for Next.js package.json Project dependencies and scripts instrumentation.ts Opens the Telemetry and Instrumentation files middleware.ts Middleware requires Next.js .env Environment variable .env.local Local environment variable .env.production Production environment variable .env.development Development environment variable .eslintrc.json Configuration file for ESLint .gitignore Files and directories Git should ignore next-env.d.ts TypeScript declaration file for Next.js tsconfig.json Configuration file for TypeScript jsconfig.json Configuration file for JavaScript
settings.json File declaring VS code settings. Add the following to avoid Tailwind CSS errors: { “files.associations”: { “*.css”: “tailwindcss” } }
Component modules declare styles in their own scope. Also apply global styles in a dedicated folder.
Files in any folder in the route can inherit from the parent folder or customize the files: default.tsx, error.tsx, global-error.tsx, layout.tsx, loading.tsx, middleware.tsx , not-found.tsx, template.tsx,…
Middleware needs to be in the root directory src/ to always be run through
The template.tsx file will automatically be included in the layout. You can use the template file to wrap providers operating on the Client side. However, you should wrap it in single, low-level local templates to avoid generating all pages under the client.
How static and asynchronous data can be passed from the Server Side to the Client Side through a custom Context Provider that performs checks. If there is no data, a Redux Thunk will be called to load the data asynchronously. However, this method may be slower somehow.
Multi Theme has two different implementations. One is to use ThemeProvider with the theme attribute. Second is to use TailwindCss with redeclaration, using html.theme. Each type has its advantages and can be used simultaneously.
Multi Responsive with Tailwind: Screen hierarchy in taildwind.config.ts. When using className declarations, add a breakpoint prefix, for example sm:w-full. However, mobile screens should be the priority screen with the default className. Will not use sm to target mobile size, but sm will be a screen taller than mobile.
