# Chakra Templates Navigation and NEXT.JS
## New NEXT.JS App
#### Create a new NEXT.JS App
Refer to the [Learn Next.js](https://nextjs.org/learn/basics/create-nextjs-app/setup) page we can run the command for creating a Next.js App and the folder name is nextjs-navbar-example
```
npx create-next-app nextjs-navbar-example --use-npm --example "https://github.c
om/vercel/next-learn/tree/master/basics/learn-starter"
```
#### Add Folder to VS Code and Run
VS Code->File->Add Folder to Workspace...
Select the folder 'nextjs-navbar-example' that we created above
Press Yes
We can see the App on VS Code
#### First Run
Press ctrl+shift+\` and select the folder 'nextjs-navbar-example'
Run the following code
```
npm run dev
```
Check the url 'http://localhost:3000/' on browser
## Chakra Templates
#### Copy Navbar Code
Browser the [Chakra Templates Navigation](https://chakra-templates.dev/navigation/navbar) for the code
## Integration
#### Components
Add components directory, subdirectories and navbar.tsx
#### Navbar code
Click the code in the top-right corner
Click Copy button and paste to navbar.tsx
There are some errors
#### Add components
Let's add the components
```
npm i @chakra-ui/icons
npm i @chakra-ui/react
```
#### TypeScript on Next.js
Refer to the [Next.js TypeScript](https://nextjs.org/learn/excel/typescript/create-tsconfig) support page we run the command to create the file tsconfig.json in the root of the App
```
touch tsconfig.json
```
then try starting the App again
```
npm run dev
```
Now, we give it a try and add a test.tsx file
```
import WithAction from '../components/navbar/navbar'
export default function test(){
return (
<>
<h1>this is test.</h1>
<WithAction />
</>
)
}
```
Edit the name in navbar.tsx from
```
export default function withAction() {
```
to
```
export default function Navbar() {
```
Compose the content of index.js and rename it to index.tsx
Erase the content of globals.css and Home.module.css
```javascript
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import Navbar from '../components/navbar/navbar';
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<Navbar />
</main>
<footer>
</footer>
</div>
)
}
```
Then the result looks like
#### Adjust the style
It is not looking like the example on Chakra Template, right?
Ok, we need to do two steps which are described on [Chakra-ui Next.js Guide](https://chakra-ui.com/getting-started/nextjs-guide), first is the following command
```
npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion
```
Second is create _app.tsx in pages
```javascript
// pages/_app.js
import { ChakraProvider } from '@chakra-ui/react'
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
)
}
export default MyApp;
```
We got the result
#### Dark theme
I prefer dark theme to light theme, so refer to the [Chakra-ui Color Mode](https://chakra-ui.com/docs/styled-system/color-mode)
1. Add theme.tsx
```javascript
// theme.ts
// 1. import `extendTheme` function
import { extendTheme, type ThemeConfig } from '@chakra-ui/react'
// 2. Add your color mode config
const config: ThemeConfig = {
initialColorMode: 'dark',
useSystemColorMode: false,
}
// 3. extend the theme
const theme = extendTheme({ config })
export default theme
```
2. Add _document.tsx
```javascript
// pages/_document.js
import { ColorModeScript } from '@chakra-ui/react'
import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
import theme from './theme'
export default class Document extends NextDocument {
render() {
return (
<Html lang='en'>
<Head />
<body>
{/* 👇 Here's the script */}
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<Main />
<NextScript />
</body>
</Html>
)
}
}
```
3. Give initial color mode to index.tsx
```javascript
import Head from 'next/head';
import Navbar from '../components/navbar/navbar';
import { ColorModeScript } from '@chakra-ui/react';
import theme from './theme';
export default function Home() {
return (
<div>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<main>
<Navbar />
</main>
<footer>
</footer>
</div>
)
}
```
Delete the chaka-ui-color-mode in Local Storage for refreshing and loading the theme
The look of Navbar
## Link the Navbar links to the components
#### The text of Navbar links
Update the links in navbar.tsx from
```javascript
const Links = ['Dashboard', 'Projects', 'Team'];
```
to
```javascript
const Links = ['Dashboard', 'Swap', 'Tx Relay', 'Orderbook', 'Grid Trading'];
```
And check the look of another device by Chrome F12 and press the botton
Update link from
```javascript
const Links = ['Dashboard', 'Swap', 'Tx Relay', 'Orderbook', 'Grid Trading'];
```
to
```javascript
const Links = [
{
linkname: 'Dashboard',
path: '/',
},
{
linkname: 'Swap',
path: '/swap',
},
{
linkname: 'Tx Relay',
path: '/txrelay',
},
{
linkname: 'Orderbook',
path: 'orderbook',
{
linkname: 'Grid Trading',
path: '/gridtrading',
},
];
```
#### Link redirect into the page
Replace link from Chakra-ui link to Next.js link in navbar.tsx
Edit NavLink in navbar.tsx
```javascript
const NavLink = ({ children, path }: { children: ReactNode, path: string }) => (
// <Link
// px={2}
// py={1}
// rounded={'md'}
// _hover={{
// textDecoration: 'none',
// bg: useColorModeValue('gray.200', 'gray.700'),
// }}
// href={path}>
// {children}
// </Link>
<Box
px={2}
py={1}
rounded={'md'}
_hover={{
textDecoration: 'none',
bg: useColorModeValue('gray.200', 'gray.700'),
}}
>
<Link href={path}>{children}</Link>
</Box>
);
```
Update two NavLink loops from
```javascript
{Links.map((link) => (
<NavLink key={link}>{link}</NavLink>
))}
```
to
```javascript
{Links.map((link) => (
<NavLink key={link.path} path={link.path}>{link.linkname}</NavLink>
))}
```
Create folders with index.tsx in it respectively and the content of index.tsx example
```javascript
import React from 'react'
const SwapAPI = () => {
return(
<div>SwapAPI Test</div>
)
}
export default SwapAPI
```
The page will redirect to the /swap and display the content of index.tsx in the folder when click the Swap on Navbar
#### Navbar on every page
Finally, we can extract the Navbar from page/index.tsx then put in page/_app.tsx for placing Navbar to all pages, create file layout.tsx
```javascript
import React, { ReactNode } from 'react';
import Navbar from './navbar/navbar'
interface IChildren {
children: ReactNode;
}
export default function layout({children}: IChildren) {
return (
<>
<Navbar />
{children}
</>
);
}
```
Import layout to _app.tsx
```javascript
// pages/_app.js
import { ChakraProvider } from '@chakra-ui/react'
import Layout from '../components/layout';
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</ChakraProvider>
)
}
export default MyApp;
```
Update page/index.tsx
```javascript
import Head from 'next/head';
import Navbar from '../components/navbar/navbar';
import { ColorModeScript } from '@chakra-ui/react';
import theme from './theme';
export default function Home() {
return (
<div>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<main>
{/* <Navbar /> */}
</main>
<footer>
</footer>
</div>
)
}
```
Our Navbar is done
Sign in with Wallet
Connect another wallet