- Installation
- Some Url about Next.JS
- About Structure
- About CSS
- About Language System
- About Icons
- Creating New Page
- Setting up Your Environment Variables
git clone https://github.com/mucahidyazar/NTEBoilerplate-Next.js.git
npm install .
npm run dev
- Next.JS
- Documentation
- SSR and Data fetching
- CSS Support
- Routing, Link
- Head, Meta, Title, Description
- public => there are static folderss and files in this folder
- pages => we can create page on here
- views/components => there are components folders and files in here...
- views/layouts => there are layout templates in here. like header, footer, navbar...
- views/ui => there are ui components in here. like button, input vs...
- config => main setting folder
- config/database => express database settings
- config/helper => you can create some helper files on there. like getCurrentTime.ts, getDate.ts....
- config/i18n => javascript setup settings of next-i18next(i18 multi language)
- public/statics/locale => There are the key words that you can use for multi languages
- redux => state management with redux
- public/statics/assets/styles => The style management
- Next.JS CSS Yapısı
- You should import new scss files in main.scss if you create a new one
- You can manage your style files with 2 ways.
- Either you create a new scss file then import that to the main.scss
- or you can create a component folder and you can keep on there 2 files like this. Home/index.tsx, Home/styles.module.scss. and you can use this styles folder in your index.tsx by importing like this. (import styles from './styles.module.scss'). And now you can catch the classes that you create in the scss file in your tsx file. You should catch them in classNames of your elements. ()
- You should use the media points by importing from 'public/static/assets/styles/base/breakpoints.scss' for responsivity
- We use next-i18next for this
- public/static/locales => There are language folders
- For using
- import our withTranslation file in your component like this. (import { withTranslation } from '../../config/i18n/index')
- then wapper your component like this. (export default withTranslation('header')(Header))
- and now you are using the keys of header file in your public/static/locales/tr/header.json
- public/static/assets/styles/icon => main icon folder
- Icomoon You should import your icon files on there and generate your new files to add there again
- You just need to create a new file or folder in the pages folder.
- Environment Variables Documentation
- You should create a new file that name is .env.local on root
- Environment Variables describing for server side OWM_API_ID=WRITEYOURAPIKEY
- Environment Variables describing for client side(browser) NEXT_PUBLIC_OWM_API_ID=WRITEYOURAPIKEYFORBROWSER
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent