Global Styles
chuck anything into styles/globals.scss
All colors etc. should be assigned in here, component styling should be limited to layout and responsiveness.
Styling per Component/Page
you will need to either use JS inside the file (i.e. styled components) or create an individual css file that must be a module. i.e. footerStyles.module.css
Bootstrap
import the file into _app.js
// pages/_app.js
import 'bootstrap/dist/css/bootstrap.css';
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}React Icons has been imported into the Package and gives us access to a lot of common icons very easily. React Icons
How To
Step 1. import the icon into the file: js import {AiOutlineInstagram} from 'react-icons/ai'
step 2. use it js <AiOutlineInstagram />
Put these inside pages/_document.js
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html lang="ja">
<Head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap" rel="stylesheet" />
</ Head>
<body>Save these inside .env.local example=thisIsASecret and reference them inside your code i.e.
process.env.example;DOCS - loading-environment-variables
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!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.