All Projects → ryohlan → Next Ts Template

ryohlan / Next Ts Template

Template for Next.js using parameterized typed routing

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Next Ts Template

Nextjs With Lambda
Next.js example with deploying to AWS Lambda
Stars: ✭ 48 (-28.36%)
Mutual labels:  nextjs
Grommet Nextjs
Build enterprise apps with react and grommet
Stars: ✭ 54 (-19.4%)
Mutual labels:  nextjs
Twitter Bookmarks Search
WebExtension that adds ability search all your bookmarked tweets!
Stars: ✭ 59 (-11.94%)
Mutual labels:  nextjs
Jobforme
This is a project for people who are looking for work.
Stars: ✭ 50 (-25.37%)
Mutual labels:  nextjs
Nextjs Woocommerce
NextJS (React) eCommerce site with WooCommerce backend
Stars: ✭ 53 (-20.9%)
Mutual labels:  nextjs
Next Authentication
Authentication & Authorization library for the Next.js framework
Stars: ✭ 55 (-17.91%)
Mutual labels:  nextjs
Nextjs Multiple Domains
Example using SSR to handle multiple domains on the same project.
Stars: ✭ 46 (-31.34%)
Mutual labels:  nextjs
Denobrazil.com
🇧🇷 Site oficial do Deno Brasil
Stars: ✭ 61 (-8.96%)
Mutual labels:  nextjs
Nextjs Hn
A Hacker News Progressive Web App built using Next.js
Stars: ✭ 53 (-20.9%)
Mutual labels:  nextjs
Theming Demo
https://codesandbox.io/s/github/juliaqiuxy/theming-demo/tree/master/?from-embed
Stars: ✭ 59 (-11.94%)
Mutual labels:  nextjs
Kohei.dev
🌎 A Production-level Single Page App with Server Side Rendering
Stars: ✭ 50 (-25.37%)
Mutual labels:  nextjs
Nextjs Material Dashboard
NextJS version of Material Dashboard React
Stars: ✭ 50 (-25.37%)
Mutual labels:  nextjs
Next Pkg
Extended Next.js server with pkg support
Stars: ✭ 55 (-17.91%)
Mutual labels:  nextjs
Next Landing Vpn
An Open Source Landingpage For VPN or Apps. Build using NextJS 10 and Tailwind v2.0
Stars: ✭ 49 (-26.87%)
Mutual labels:  nextjs
Next React Graphql Apollo boostrap
React + GraphQL + Next.js project architecture that I play with right now
Stars: ✭ 59 (-11.94%)
Mutual labels:  nextjs
Getlink Next
Get Link!
Stars: ✭ 48 (-28.36%)
Mutual labels:  nextjs
Next Starter Peacock
🦚 Beautiful Nextjs starter for software engineers and designers to show work they're so proud of
Stars: ✭ 53 (-20.9%)
Mutual labels:  nextjs
Nextjs Pkg Docker Alpine
📥Deploy a commercial Next.js application with pkg and docker.
Stars: ✭ 66 (-1.49%)
Mutual labels:  nextjs
Graphql Apollo Next.js
A server-rendering GraphQL client with Apollo Client and Next.js
Stars: ✭ 59 (-11.94%)
Mutual labels:  nextjs
Open Source
🎉 A list of GitHub issues to help beginners make their first pull request.
Stars: ✭ 57 (-14.93%)
Mutual labels:  nextjs

Next.js 9 is out!!

This version includes official dynamic routing using file system.

So, you may not need this repository. See this.

https://nextjs.org/blog/next-9#dynamic-route-segments

Next.js TypeScript project template

Requirement

node > 10.12.0

What is this?

This is a template for Next.js. This. template includes followings:

  • TypeScript
  • Parameterized routing
  • custom server
  • styled-components
  • cli for new page

This project provides a cli for creating new page. For example, if you want to add a new page named profile, run npm run new:page profile commands:

npm run new:page profile

create new page
  path: /next-ts-template/pages/profile/index.tsx
create new controller
  path: /next-ts-template/controllers/profile/index.tsx
create new layout
  path: /next-ts-template/layouts/profile/index.tsx
update pattern.json
  pattern:  { page: '/profile', pattern: '/profile' }
update createRoute.ts
  export const profile = () => ({
      as: `/profile`,
      href: `/profile`
    })

The command creates 3 files and updates 2 file.

Page

After the cli ran, a file is created under the pages dir.

The file includes only default export from the controllers.

// pages/profile/index.tsx
export { default } from '@controllers/profile'

Controller

What is the Controller? I call that a file includes getInitialProps.

A controller needs to process getInitialProps. It is a component but it should not have complex logics for the render. It's obligation is just processing getInitialProps.

Since v1.5.0, PageContext is added. It provides it's pages's props via React Context API. Components under the page can use them via usePageContext hook.

import React, { useContext } from 'react'
import { NextContext } from 'next'
import { AppInitialProps, AppProps } from '@src/app'
import Layout from '@layouts/profile'

interface InitialProps {}

type Query = {}

type Props = AppProps<Query> & InitialProps

const getInitialProps = async ({

}: NextContext<Query> & AppInitialProps): Promise<InitialProps> => {
  return {}
}

const PageContext = React.createContext<AppProps<Query> & InitialProps>({} as any)

const Page = (props: Props) => (
  <PageContext.Provider value={pageProps}>
    <Layout />
  </PageContext.Provider>
)

Page.getInitialProps = getInitialProps

export default Page
export const usePageContext = () => useContext(PageContext)

Layout

The layout is just a React component called by the controller.

import React from 'react'
import styled from 'styled-components'

const Layout = () => {
  return <Wrapper>Hello World from profile</Wrapper>
}

const Wrapper = styled.div``

export default Layout

Add Parameterized routing

We often need a Parameterized routing. But Next.js has no smart way. So, we can create it easily by using cli.

For example, if you need /users/:id, you input following argument:

npm run new:page users/:id

create new page
  path: /next-ts-template/pages/users/_id/index.tsx
create new controller
  path: /next-ts-template/controllers/users/_id/index.tsx
create new layout
  path: /next-ts-template/layouts/users/_id/index.tsx
update pattern.json
  pattern:  { page: '/users/_id', pattern: '/users/:id' }
update createRoute.ts
  export const users__id = ({user_id}: {
    user_id: string
  }) => ({
      as: `/users/${user_id}`,
      href: `/users/_id?user_id=${user_id}`
    })

Then, you can access /users/1!

And the controller can take query parameters. It is created automatically.

// users/show.tsx
...

type Query = {
  user_id: string
}
...

And it provides the route creating function route/createRoute. If you reference users_id, import user_id function from createRoute. It is added automatically at a creating new page, so you can invoke route path safely.

export const users_id = ({user_id}: {
  user_id: string
}) => ({
  as: `/users/${user_id}`,
  href: `/users/_id?user_id=${user_id}`
})

// For example...
<Link {...users_id({ user_id: user.id })}>
...

Also multiple query parameters are ok.

npm run new:page users/:id/items/:id

create new page
  path: /next-ts-template/pages/users/_id/items/_id/index.tsx
create new controller
  path: /next-ts-template/controllers/users/_id/items/_id/index.tsx
create new layout
  path: /next-ts-template/layouts/users/_id/items/_id/index.tsx
update pattern.json
  pattern:  { page: '/users/_id/items/_id',
    pattern: '/users/:user_id/items/:item_id' }
update createRoute.ts
  export const users_items_show = ({user_id, item_id}: {
    user_id: string,
    item_id: string
  }) => ({
      as: `/users/${user_id}/items/${item_id}`,
      href: `/users/_id/items/_id?user_id=${user_id}&item_id=${item_id}`
    })
// users/_id/items/_id.tsx

...

type Query = {
  user_id: string,
  item_id: string
}

...

Usage

In June 6, 2019, Github released the repository templates feature.(https://github.blog/2019-06-06-generate-new-repositories-with-repository-templates/) This repository is compatible with it. Create your repository by clicking 'Use this template' top of the page.

License

The MIT License (MIT)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].